According to statistics compiled by We are social, only in January 2018, the internet had four thousand and twenty-one million users around the world, a growth of 7% compared to the year 2017. There are more than five thousand one hundred thirty-five million users of mobile devices, with a growth of more than 4% over the previous year. Mobile connectivity in North America alone is 103% and 96% in Central America.
The above data show only one conclusion: mobile technology has more and more followers and our platforms, applications and web pages must be adapted to the trend.
Today I will show you tips on mobile web design so that your website is not only the responsive version of the theme, but a page totally adapted to what the user needs and that keeps on seeing well, generating results and fulfilling the objectives of your project.
Viewport meta tag
A meta tag viewport is a code that determines that the web is responsive, that is, adapts to screen sizes. Many templates have this by default, but if the one you use doesn’t include it, you can do it manually or with a plugin.
To add it, copy this code in the <head>
<meta name = "viewport" content = "width = 320">
In order for the page to have the same screen width as the device from which it is accessed and adjusted automatically, it establishes its width as "device-width".
<meta name = "viewport" content = "width = device-width">
When the design of our website is responsive, the minimum zoom must be set to 1.0, so that the page doesn’t zoom and the width of the page will be the same as that of the device. We can also determine if the user can expand the page or not in user-scalable.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">
Splash screens and iOS
Android has advanced a lot and has increased exponentially the number of users who prefer this operating system, however, iOS devices are still very popular and it is possible that many of the visitors of your page access to it from this operating system. Better yet, they may save your page on their main screens. Therefore, it’s a good idea to adapt the icons of your page and add a splash screen (the first image that you see when you open a page or application while it is loading).
We will achieve this by accessing the header.php file of your WordPress and adding the following codes between the <head> tags:
<link rel = "apple-touch-icon" href = "touch-icon-iphone.png" />
<link rel = "apple-touch-icon" sizes = "72x72" href = "touch-icon-ipad.png" />
<link rel = "apple-touch-icon" sizes = "114x114" href = "touch-icon-iphone-retina.png" />
Design the splash screen and add it with the following code:
<link rel = "apple-touch-startup-image" href = "splash-screen.png" />
Configuration “mobile first”
The “media queries” are a kind of rules integrated into your CSS that work according to the actions or scenarios presented. When we talk about web design in mobile, this may be different resolutions, browser dimensions or device orientation. The detail with these configurations is that we shouldn’t think from the desktop version to the mobile, we should think directly in the mobile version. This implies simplifying the design: in mobile, we don’t have exactly the same screen sizes, resolutions, actions are performed with different movements and more. While most devices have similar resolutions and dimensions, there will always be new ones with variations and improvements that you should keep in mind.
When you design and configure, start from the small screens to the largest, not the other way around.
Instead of using the pixels for the cut points, work with ems and percentages whenever you can, so that your designs adjust depending on the zoom level.
Do not forget to adjust your settings for Retina Ready devices, so the resolution will improve when you detect that it is accessed from a device with this feature.
Do not leave an image without optimizing!
Images are a fundamental component of web design, but when they load slowly, users start to lose motivation and can leave your website. So, what is left for us to do? Use images with very good resolution or quality but lower the weight of the files. To achieve this you can use several options:
Edit the images in Photoshop and save select “Optimized base image”.
Use plugins like WP Smush, which will apply compression to all the images you upload to your page.
EWWW Image Optimizer is another recommended plugin and like WP Smush, it compresses the images you upload and those that were already in your WordPress from before installing the plugin.
Two online tools that work quite well if you do not want to install plugins are TinyJPG and TinyPNG, reduce the size of the images without compromising their quality.
The vectors are your friends
The images in vectors are an excellent option for a main and quite basic reason: they do not pixelate. SVG calls (Scalable Vector Graphics) use an XML language that is quite suitable for logos, infographics, illustrations, icons, etc. As they are scalable, you should not worry about generating different images in different resolutions so that they adapt to each device.
Programs like Adobe Illustrator, Gimp, Inkscape, and Sketch can help you generate these graphics or edit files that you get for free on portals like Freepik and you can adapt to your website.
Fonts are not just “letters”
The mobile design does not focus only on the images. The choice of the source is a very important task since it will depend on the user receiving your message correctly.
You have to take into account two main elements: the type of content and the resolution.
Do not choose fonts that are too complex because the difficulty of reading harms the user experience.
Try that the spacing between the letters is not too small.
Use ems instead of pixels to determine the sizes.
The recommendation of typography for web pages, especially mobile, is to use fonts without serifs (such as Helvetica, Arial or Roboto). They scale better in all resolutions and allow you to read headlines and short texts on the web better. Typographies with serif (like Georgia and Times New Roman) are often used in newspapers and long texts such as books or magazines since they tire less of sight.
Optimize the text also
Remember that the message that may look good on the desktop page, on mobile may not look the same. The text is part of the user experience because it will dictate to a large extent the call-to-action. Use CSS3 values such as vw, vh and vhmin so that the text and the window, button or box that contains it are kept in order. Use media queries in ems to set the limit of characters per line (about 45 to 75 characters is fine).
Believe in contrast
The contrast is a great tool when it comes to making the text stand out and can be read correctly. However, your options are not limited to having a dark image and clear text or vice versa.
If your design strength is not the colors, there are tools like Color Contrast Check that can help you.
Pay attention to the mobile menu
There are numerous plugins that can help you elaborate menus that prevent the elements of the header from clustering. The best option is a hamburger menu that unfolds when the user taps on the 3 parallel bars.
To make your desktop and mobile menu coincide, we recommend this post or the use of the following plugins:
With Superfly you can replace or complement the menu that your theme brings. It allows limiting the menus according to the resolution or the page that is being visited, besides including icons and different types of orientation and position for your menus.
The strength of Hero Menu is its drag and drop editor that simplifies the creation process. It also has predesigned templates that you can fully customize and are mobile.
Test your website with different tools
One of the headaches of web designers is that sometimes they do not look good in all resolutions, devices or browsers since they are formats that are constantly updated. As you may not have access to all the devices and resolutions that exist, we recommend these tools with which you can verify aspects of your website and even receive suggestions. If you want to explore with more tools, we recommend you read this post with a fairly large list.
BrowserStack is an excellent option to test your website on a wide range of mobile devices and operating systems. It also allows you to verify how your website looks in the most popular browsers and others not so used. These tests will allow you to measure the performance of your website, not only at the design level, in more than 700 combinations of devices and resolutions.
StudioPress allows to see the web in a smaller number of options than BrowserStack, you can manually configure the resolutions in which you want to test it. It’s free and does not require registration.
There are options like Chrome Developer Tools or Firebug add-on for Firefox, which allows you to perform these tests in different resolutions without having to leave the browser.
Divi multi-device preview
If you use Divi, in the editor you can use responsive design controls to modify the modules and widgets that best suit each resolution or device and thus ensure that, for example, your form is fully legible and your call-to-action follow being flashy You can preview these changes without leaving the Divi Builder.
What content does your mobile web need?
Determine what content on your web page is really essential for the user when they enter your page. Maintaining minimalism and eliminating what the user does not need via mobile is essential to maintain the user experience at a good level. Think of the banking applications or transactions like PayPal or your local bank: when you access via desktop you see more options and messages than when you access via the app or in the mobile version of your website. Synthesize the information, prioritize it and organize it according to the objectives of your project.
Don’t use pop-ups
Surely you have found websites that are not properly optimized and show pop-ups. It’s a very impractical mechanism, because it interrupts the view of the web, it’s hard to find the exit button and sometimes the quality of the display is terrible. Remove the pop-ups from your mobile version. Use better call-to-action modules that take the user to your goal or place them interspersed in the structure of the page as the user uses it on their mobile device.
PS: What are ems?
The term has its origin in the printed design, an “em” is the size of a capital letter in any typeface. With this measure it can be verified that the letters or spaces are correctly seen in the design of typographic fonts. By using the em as a unit of measure, all the sizes of a typeface can be modified simultaneously, and this helps in the mobile design that is based on the adaptation.
Why do we mention above that em works as a percentage? Because it is used to scale a typeface and give the correct measurement to the sources.
How to use ems? First you must remember the base, on which you will measure all other sources.
1 em = 20 pixels (this is an example, it can have any size that you decide to assign)
0.5 em = 10 pixels
1.5 em = 15 pixels
2 em = 40 pixels