A Website Owner’s Mobile Strategy Guide – Understanding Responsive Web Design and Mobile First Approach
Once upon a time in the kingdom of Interwebs, a website only had to worry about one thing: how to look good on a high-resolution screen. Certainly, content was king even in those days. But it fell to the queen to entertain the guests, and all visitors entered the castle through the great gateway of a desktop or laptop monitor. Except for those poor buggers on mobile WAP, but they had to use the back door anyway.
Fairy tales aside, it is the restless nature of technology to be ever changing. This evolution is driven by social change, incited, in turn, by technical progress. From Ogham stones to telegraph to smartphones. Perhaps in the future we’ll all be browsing the internet with our neural implants.
In the meantime, back in the present, the messages are blitzed into our eyes from a bewildering variety of media with different viewports and resolutions. Web browsers now occupy Smart TVs that barely fit in your living room as well as mobile devices that fit in the palm your hand. If your website cannot adapt, mobile visitors may get tired of pinching the screen with their fingers and surf away.
Consider bandwidth as well. All those beautiful background images take kilobytes and time to download. That’s fine for broadband, but what about those on 3G or Edge, roaming or a limited data plan?
One way to keep them on your website is to create two different versions: one for the larger screens and another for mobile. A piece of code detects the type of device and redirects the visitor to either the full or the mobile version of your site. This is a viable route, taken by the likes of Wikipedia and Facebook.
The other option is Responsive Design. It also relies on code, called Media Queries, but doesn’t use device detection, but looks at the size of your viewport instead. And it doesn’t redirect you to an alternative version of the site, but simply rearranges the layout to fit your screen. And if you resize the width of your browser, the layout changes with it even on a laptop or desktop monitor. If you’re reading this blog post on the Neo-Archaic website, the go ahead, play with it now. Unless you’re a visitor from the future, in which case – can I borrow your implant?
So is Responsive Design the same as Mobile First? Well, yes and no. The Mobile First approach uses media queries to create a website with Responsive Design. But you can also use media queries to make the website just responsive enough. The difference is in the approach.
For Mobile First, you (or your web designer) start the design process with the smallest device in mind. From there, use media queries to display the bells-and-whistles on larger devices, where they can be better appreciated. And not just two – between the smallest phone and the largest monitor screens there is an ever-growing variety of sizes. You may not be able to cater for them all, but with a series of breakpoints, you can target a few ranges of screen sizes and add another bell or extra whistle for each range. This is what they call Progressive Enhancement.
Which option should you chose? It depends. For example, Mobile First won’t work with an existing website without a complete redesign. By definition, mobile is no longer first. Adding media queries to mould it into mobile shape might work, but again – it depends. Sometimes it’s better to separate it into two sites than trying to beat it into a shape that won’t fit.
Planning is the key. Analyse your content, your goals, target audience, your best-case-scenario layout design – the one you wish to see on that big screen – and decide which approach suits you best.
And now over to you. What are the pros and cons of either approach? If you have any experience, opinions, or questions, please leave a comment.