Statistics tell us that the majority of visitors to your website will be using a mobile phone or tablet. So it stands to reason that you’d want you website to perform well and look great on any device – not just a traditional desktop or laptop. It’s all part of the user’s experience (UX).
The challenge of the web designer is to make your website readable and usable on any screen size whilst staying in line with the original design and without adding too much overhead, so it loads just as fast.
Responsive website design
A website that can react dynamically to changes in screen size and resolution is said to have a ‘responsive’ design. It responds to the screen being squished or expanded.
To explain this flexibility better, while on a desktop computer and looking at the page you’re reading now, resize your browser and you’ll see the page restructures itself on-the-fly. The header menu changes for better touch screen use and the sections of each page drop down beneath each other.
However, responsive and mobile-friendly aren’t necessarily the same thing. While a resposnive website is definitely mobile-friendly, another approach might be to replace the content completely (or in part) for smaller screen sizes.
That means when the screen size is reduced, instead of restructing itself, a completely different page (or any section of content) could appear, which would be better laid out for a smaller screen and with less graphics. The challenges here are deciding what content can be ‘sacrificed’ in return for a lighter experience on mobile, and the added development involved with creating additional content.
Remember that with a responsive web page, let’s say an image that sits beside a paragraph of text, will give the content some context or at least decoration, but on mobile it will now be above or below that paragraph, thus increasing the page’s length. And the longer the page, the more scrolling your visitor has to do.
We’ve all come across very long web pages that seem to go on for ever and ever. And they may just do. We dont know because we probably hit the back button before getting to the page’s Call to Action. What if that page lost you a sale, as a result!
3 Simple rules
My 3 simple rules for mobile-friendly web design are:
- Don’t make your visitors have to pinch their screens to zoom in on your website.
- Don’t make your visitors have to scroll through images just because they looked good on the desktop version of your site but provide no value on mobile.
- A few paragraphs of text on desktop can be spread out for balance, but often become one long wall of text on mobile.
It’s part of the design process so, as you can imagine, making an existing website ‘responsive’ isn’t a trivial task.
Unless the design calls for specific usability features on mobile, I find that a well designed responsive website works great. I test the responsiveness of all my websites while I’m building them, for use on desktop, tablet and mobile devices.