Wednesday, 15 June 2016

Responsive Web Design: Media Queries are not enough

Responsive web design is very much the buzz word in web design today. Like so many of its contemporaries, it's made the uneasy transition from in-industry term to general web-marketing parlance and, in so doing, it's true meaning has been somewhat diluted.

It always intrigues me when complex web development terminology finds its way into marketing and planning meetings. Sometimes, a client will even drop the term into a brief. My previous favourite (which was prolific around 6 or 8 years ago) was "Web 2.0". Only the people who didn't really understand it would ever say it and heaven forbid you should scratch the surface and ask what they actually knew about it!

It's easy to see why "Responsive Web Design" has followed Web 2.0 down that road. It's a very accessible term which uses everyday words that belie the hidden complexities and it is these complexities that drove me to write this piece.

Media Queries

Media Queries are great in theory and they've been around a lot longer than the devices that demand them today. For example, providing an alternative printable style sheet is a form of media query manipulation and there is no better way to provide this kind of functionality than a media query. However, using media queries as a method to provide alternative layouts for various devices at various screen resolutions really is a flawed brief.

I believe it is a mistake that completely underestimates the task at hand if your only form of device "responsiveness" is a media query that checks the screen res. There is much more to creating a usable and fulfilling mobile (or tablet) experience than visually laying out the design to simply "fit" the screen. And herein lies the problem, because all your user can see is the visual response to a handheld device, it has become the essence of the widely used and misunderstood phrase "Responsive Web Design".

A successful mobile website will have a completely different interface to its desktop, point and click, counterpart. It might respond to touch, swipe and pinch gestures and things like hover states that trigger submenus and drop-downs simply will not work. So, assuming that your desktop website has things like hover activated drop-downs, it's almost certainly going to employ a client side interaction library like JQuery and all the .js files that you have included to make your interactivity work. Are we suggesting that the mobile user will be forced to download 2-300k of JQuery and Javascript only to not use it on the mobile version of the site?

So, if not Media Queries, what do we use?

Answer coming soon...

No comments:

Post a Comment