Skip to Main Content

6 tips for optimizing the mobile design of your blog

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 small resolutions, but that doesn't mean absolute compatibility that you'll be completely confident in. 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 for this eventuality, let's show you how you can add WordPress blog iOS icons.

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".

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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


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

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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:

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

  • 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 fit your current website " mobile-friendly" page (in French).

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
1 shares
Share1
tweet
Save