Not sure what a mobile-friendly website is?

You’re not alone. Most people have heard the term, but they’re not sure just what it exactly means.

In this week’s article, I’ll explain what a mobile-friendly website is, how to make sure you have one, and, most importantly, why having one is essential to winning customers in today’s online world

What is a mobile friendly website?

A mobile-friendly website is one that is made to look good on a smart phone (or a tablet). You may think that this just happens automatically, but you’d be wrong.

That’s because, traditionally, websites were made for desktop computer screens, which are wider than they are tall. But smartphone screens are the opposite—taller than they are wide—and they have much less viewing space.

When you use your phone to visit a website made the traditional way, there is no way your screen can show you everything you would see on a desktop. Your phone will attempt to reorganize some of the elements on the screen to make them fit, but in so doing it moves and squishes things around in unpredictable and often unprofessional-looking ways.

Here’s an example.

The following image shows a website designed for, and displayed on, a desktop computer monitor.

But here is how that same website appears when viewed on a smart phone.

Notice how the elements have been moved around. Elements that were side by side in the original website are now stacked one on top of the other. Some of the lettering is quite small, and some words are cut off.

Those are some of the typical problems.

If someone were to view the above on their phone, the impression it gives is not so great. It looks unprofessional and it’s hard to read. Many viewers will just leave. They don’t’ want to spend time trying to read a website that is not user friendly to them, or that isn’t well laid out, because that makes it hard for them to navigate it.

In addition, the appearance sends a clear message to the viewer: this company is not professional. Again, they may very well just click the back button and go to one of your competitor’s sites instead.

How do I create a mobile-friendly website?

You want to have a website that looks good on both a monitor and a smart phone (and even a tablet). The idea is that the site should look good no matter what type of device it is viewed on. The good news is that you don’t have to create three different versions of you site. Instead, you create one, but you make sure it is what we call “responsive”.

What is a responsive website?

Responsive means that the website adapts, depending on what type of device it is being displayed on. If our Wool website had been responsive, it would have looked something more like this on a smart phone.

That’s much better. It looks professional, more similar to the desktop version, and is easy to navigate.

It’s not perfect. For example, anytime you have elements side by side on your website, they will often be “stacked” (put one above the other) on the phone version. That’s simply because there isn’t enough room on a narrow phone screen to display them side by side. But it’s much better than in the non-responsive example.

The menu has also been replaced by a “hamburger”. That’s the nickname for the three short horizontal lines at top right. Clicking on the hamburger opens up the menu. This saves space, and allows your phone to display more of the actual web page.

Here is the before and after version, side by side, for easy comparison.

This is actually a fairly mild example. There are far worse sites out there that look absolutely terrible on mobile and are almost impossible to navigate. Don’t let yours be one of them!

How do you make a website responsive and mobile friendly?

Making your website responsive is usually the easy part. That’s because it is done automatically
for you IF you choose the right website tools. Most website design software/sites have website themes that are already responsive. So as long as you pick one of those themes, your website should be mobile-friendly.

But that’s not the only thing you need to do. Responsive themes go a long way to making a site mobile-friendly, but they can’t do everything. There are a few things you have to take care of manually, yourself.

Don’t put elements side-by-side.
Since phones can’t display things side by side (there just isn’t room), a good way to avoid any possible “bad stacking” on phones is to just not have any elements side-by side on your site to begin with.

Look at your website using your phone
It’s important to always check what your website looks like on your phone. Make sure that it looks professional, and that it is easy to navigate.

Compromise
I have found that there isn’t always a way to make your website look just the way you want it on both desktop and mobile. So I have learned to compromise. I find ways to lay things out so that they look reasonably well on both devices. For example, I don’t put elements side-by-side, even though I might really like that layout on the desktop version. I also play with the size of images to find the right size that looks fairly good on both. Font size is another thing I watch out for. A large font might look great on my website, but it often then appears way too big on my phone.

One last note: when compromising, I lean towards favouring mobile. That’s because I have more people looking at my site on mobile than I do on desktop (my analytics program tells me that, plus, general research I have found on the topic says the same thing: more people use phones to surf the web than desktops). So my desktop version isn’t quite as squeaky clean as I would like. But I live with that, knowing that it’s more important for the mobile version to be well laid out, since more people view my stuff that way.

Cheers,

Tim

Helping you engineer the business of you

Why you need a mobile-friendly website (and how to make one)