Data consumption by mobile traffic increased by 74% in 2015, with over a billion devices sold during that same period, and the trend is still changing. That alone should be enough to highlight the importance of optimizing your designs for mobile traffic.

Some WordPress themes are better optimized to handle lower resolutions, but that doesn't mean absolute compatibility that you'll trust completely. In fact, there are a number of fixes to implement that will allow you to better optimize your website for mobile devices.

In this tutorial, we'll explore the various tips specific to mobile devices, image optimization, layout design, and more.

Tip 1: Add iOS Icons and Splash Screens

ios-icons-splash-screen

Despite the many advances made by Android, iOS devices remain very popular and benefit from the support of an active community of developers. The point is, a lot of your visitors will likely own an Apple device, and if they will probably want to enjoy your website even more, by saving your icon in their homescreen.

To prepare you for this eventuality, we are going to show you how you can add iOS icons from WordPress blog.

First, you will have to find the file header.php of your theme (or child theme), since we will have to add a little code in the tag .

Here's the code you need to add:

 

As you can see, the code mentions specific icons for iPhones, iPads, and Retina devices, all of which must be preceded by the rel attribute with the value "call-touch-icon".

While you're at it, you can also design a brand new iOS splash screen for your website with the following code:


Please note: The splash screen is the one that appears when you launch an application. It is like the loading screen of an application.

Tip 2: Use several image sizes in association with "media-queries"

multiple-image-sizes-media-queries

You are, of course, already familiar with the notion of " media-queries". Think about the specific design rules incorporated into your CSS when a specific scenario arises. In the case of mobile design, these scenarios are the different resolutions, device orientations, and browser dimensions. The problem with " media-queries Is that today, many designers and developers are building websites with a secondary mobile approach, yet the reverse should be.

This secondary mobile approach can be spotted in media-queries When you see the dimensions of popular devices (ie 320px, 480px, 768px) used as guidelines. Although in theory this may seem like a good approach, since to be efficient one cannot claim to use the dimensions of all devices which vary as often as they are created.

So the next time you're working on a design, make mobile compatibility a priority:

  • Design your "Queries" so work on small resolutions.
  • Avoid using pixels to declare your breakpoints. Instead, try to work with "Ems" and percentages as often as possible so your designs can adjust for zoom.
  • Remember to pay your " media-queries So that they adapt to Retina devices (minimum-resolution: 192dpi).

Tip # 3: Optimize your images

optimize-your-image

Even if you have a fantastic and responsive design, potential visitors may slip away if they realize that your website is taking a long time to load, and images play a big part in this aspect. Users want to see beautiful images, which however load very quickly, hence the need to optimize your images.

While it may seem like a conundrum, there are plenty of tools that can help you achieve these results. At the very top of the list we have EWWW Image Optimizer et WP Smush , which once installed, will automatically apply quality lossless compression techniques for each image uploaded to your WordPress site and your WordPress site can even go through your media library to optimize the images uploaded before.

If you prefer not to add yet another plugin to your website, there are always stand-alone tools such as TinyJPG et TinyPNG, which do essentially the same job as EWWW Image Optimizer by selectively reducing the number of colors in your images, as well as stripping on meta (removing unnecessary data). This results in a considerably smaller file size with a lot of almost undetectable changes, which is an ideal compromise.

Tip # 4: Think about using SVG

animated-svg-logo-with-css-thumbnail

Scalable Vector Graphics (SVG) are a nifty tool that you should consider. Despite what the name would imply, they use some form of XML markup language instead of an image format, and they're especially useful for simple graphics such as logos, icons, infographics, and other applications.

« Why SVG so useful?“You can reasonably wonder. Well, for starters they are expandable which means you won't have to worry about fitting to different windows. On top of that, they can also be easily animated using CSS.

You should be familiar with tools like Adobe Illustrator, Inkscape, and Sketch, which include support for this format, so give them a try!

5 Tip: choose good fonts

pick-right-doing

Mobile design isn't all about images. Choosing which fonts to use can have as much (if not more) of an impact on your designs as graphics do, since most sites use text as their primary method of conveying information.

From a designer's perspective, this means choosing the right fonts, which involves:

  • Do not use fonts that are too thin or complicated. Your font should be easily visible on mobile devices, if you do not want users to adjust the zoom to read you better.
  • Avoid fonts with too little space between letters for better readability.
  • If you use the media-query For your text, use ems for sizes instead of pixels.
  • Consider using sans serif fonts, as they tend to fit better at most resolutions.

Tip 6: Treat text as part of the user interface

text-part-interface

Since we are on typography, you should know that the font is not the only thing to consider, and it alone is not about readability. Since we will be working with a wide variety of windows, you want your design to consider text as an integral part of the user experience in order to maximize readability, this means:

  • The use of " media-queries "To maintain a manageable limit of characters per line (remember to use ems instead of pixels!). The generally accepted amount is set somewhere between 45-75 characters.
  • Remember to use the vw, vh, and vhmin (these are all related to the viewport percentage) CSS3 values ​​in order to keep the font size relative to the viewer size or on specific windows.

Summary

We have seen throughout this article that mobile traffic is becoming less and less negligible, which should be a priority for every developer in website design. So you have some tips that you can apply on your blog to enter your current website « mobile-friendly"