Mobile versions of a website

What does it mean to have a mobile-friendly website and how to get one?

The quick answer is “a mobile-friendly website is a website that’s easily usable on mobile devices like phones and tablets”. True but it is a bit more complicated than that.
But good news first, if you are using a CMS like WordPress, Drupal or a hosting service like Wix etc. you are usually only a couple of clicks to 80% friendliness. Choose a theme that’s mobile friendly, turn on a couple of options in the administrator interface about mobile-friendly themes, navigation etc and you should be on your way.

Why mobile-friendly matters

As mentioned all over the internet and the news mobile browsing is on the rise and in some countries and industries already much more common than desktop browsing. And if your users aren’t able to use your website on the device they have in their pocket or their hand they won’t wait to get to a computer to use it, and it will become obsolete.

Here are some details  if you need to go more in-depth

Over the last couple of years, mobile-friendly has become synonymous with “responsive”, that wasn’t always the case, but with the multiplication of different device widths, pixel density etc. nobody (or point them out to me) does a mobile-friendly design that isn’t responsive.
Friendly usually only means “usable” so text big enough to read and buttons big enough to click on a small device and no horizontal scrolling. This is a good start and websites have done that for a while. But don’t do like some websites that go all the way and overboard and remove content or functionality from mobile devices making “dumbed down” versions where you can’t do anything if you’re using the website on the phone.
For a good mobile version, you also need to think about images and overall performance.

Mobile-friendly images

As an example, if the bird at the end of the pier in the next image is important to get your message across (I wouldn’t know why and it’s not the best example but let’s say it is). This is usually known as “art direction” of your images. The first image would work if you are using a desktop browser where the image takes a lot of space but in the same images scaled for a small device, as in the second version, the bird gets completely lost.

mobile friendly images - ok for desktop users

 

mobile friendly images - where is the bird?
where is the bird?

So for smaller screens, you might want to consider showing a different crop of the image, something like this:

mobile friendly images - ok for mobile users

Because to get your message across what is important is the effect of the picture, the feeling the users gets and not necessarily that it’s the same picture.

If you want to automate this there are a couple of javascript scripts that can do this, more or less well, check out:

One more thing to keep in mind is the cost of downloading a multi-megabyte image and than brings us to performance.

Performance

Limited data plus slow network speeds are the norms, and the question becomes: do you need to make your user download a huge image that doesn’t add anything to his experience but only frustrates your user?

The answer should be no. So, show different versions of an image with HTML srcset depending on the width of the device the user is browsing with and make sure you use good lossless compression.

Also, check your overall performance to make sure you aren’t loading too many things. You can check out my other blog post about performance and speed here.

 

You can check if your website is mobile friendly according to Google standards at https://search.google.com/test/mobile-friendly.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.