Missing points in Responsive Design

Responsive design is in the buzz at the moment, interesting enough to see that many web sites, static or installed, are doing their bit to follow the trends leaving, to a part, quite a few unhappy small viewport visitors out there. Are what the users of mobile devices are expecting to see and what some responsive designs are offering the same or are they in need of a little fine tuning?

Fluid, or liquid, design is really nothing new. It started already with the famous fight in tables versus divs escapade back in the 90’s, but with the ever increasing number of differing screen sizes it’s become for many designers not only an option for layout structure but as requirement in client assignments who want their web sites to be available to the widest possible audience, and that means mobile too.

Using the CSS 3 media queries, makes bringing fluidity to a layout straight forward and logical, allowing layouts to be adjusted directly in the style definitions depending on the viewport of the target device. Popular choices looking something like:

@media screen and (max-width:960px) { … }
@media screen and (max-width:800px) { … }
@media screen and (max-width:480px) { … }

etc. .. not forgetting to set the meta viewport:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

and leaving the question open, what happened to scalable measurements like percents or ems?

» Find out more about Media Queries at W3.org

But what about the User?

Although much trouble, work and Aspirin is going into responsive design on the designers part, (didn’t get around to mine yet), the users are still not happy. What they’re reportedly missing are user friendly interfaces where they can navigate without having to zoom, where they don’t have to wait for hours to load scaled down fat pictures suitable for a 21 inch desktop monitor, and where what they’re looking for can also be found on that tiny, tiny screen we call a mobile device.

What Users Want from Responsive Design

What the users want is simply usability and a positive mobile user experience. Here are some of the things that they want to see:

The content he’s looking for. There’s no room left for blah blah on that iPhone.
Simple layout. Single column layouts are easier to navigate. It’s also easier for users to keep track of their position on a page.
Usable navigation. That means finger sized navigation big enough, and with enough space around, to get an accurate “hit”. The first time ;)
Resistance to over-embellishment. Integrate just the right amount of pictures to illustrate the meaning and these scaled down in an original file, not in the browser, to reduced fat loading times and bloating.
White Space. Give links enough size and white space to allow them to be clicked without zooming.
Sparse use of inline Links. Avoid inline links where possible, make nice chunky finger sized buttons or areas instead.

Responsive design isn’t just about making a web site flow into a small space anymore. The users want to be included, they want to think about what they’re doing, not about how they’re doing it.