Kittens, bacon-ipsum and why we don't need to worry about the mobile web

Web technology moves fast, especially now we've made it through the dark ages of Internet Explorer, however, it would seem that we're yet to reach the enlightenment, to shed the constraints of a single platform web. It's time to move on; it's no longer acceptable to create web interfaces that don't – even on the most basic level – embrace platform agnostic development.

There are several, dozen, articles on the subject of responsive web design, and even more on the guiding principles of progressive enhancement and graceful degradation… but it would seem these notions have been greatly ignored, and are frequently bundled into the financial blackhole that is a "mobile strategy". So, in the spirit of Generation 5 (there's probably an "HTML" in there somewhere), here are some simple pictographs explaining it.

Here's a picture of a website, sections ranked by relevance:

Here's how it could look on a tablet:

…or a smartphone:

… and here's how much code is required to do this:

This code is purely illustrive, pedants beware.

That's it. Nothing more. A little thought, a few lines of code, and you've got an interface which isn't offensive to your user, no matter their viewing platform.

You don't need a framework, a strategy, photoshop mockups for every possible platform… or a big budget. Just make this a part of your standard workflow.

But, but…

Yes, there are more sophisticated, techniques that you could employ to give your mobile users the experience that they deserve, and of course there's still a place for apps… but all I ask is that we make this basic level of cross-platform support the norm, especially now that we've just been handed the tools to detach the web from the desktop, with less effort than we used to spend on generating rounded corners.

4 comments

Author: Nairn Robertson Nairn Robertson

Like the visual explanation. I couldn’t agree more. In the rush for apping everything up, it’s easy to forget just how far making something work well cross-platform can take you.

Test your current site on a tablet and if it’s reasonably well built in the first place then a few small tweaks may be all you need to make it work well on all the ipads in the world.

I think a possible (and very positive) side effect of this thinking will be more focused pages and content. Looking at the the site in a small screen it’s impossible not to want to strip out any rubbish and really focus on the core reason for that content or page existing in the first place. Fingers crossed.

Tweet this
Author:  ben_eb

Agreed. I think your words would have a bit more weight though if this site made use of this technique. Practice what you preach, and all that. :-)

Tweet this
Author: Stuart Eccles Stuart Eccles

Good point Ben.

Like lots of people our site lags behind our thinking and our latest client work until someone has time to spend on it.

But that is not a good enough excuse, in a mobile web world it needs to be better. We can’t blame Andrew for this as he started after the last site update and I can tell he is itching to get his hands on it.

Tweet this
Author: Andrew Sprinz Andrew Sprinz

@BEN_EB, Damn, you spotted that then, but it does raise an interesting point; the process is far more difficult in retrospect, once the thinking has been done. Even starting to consider it half way through a project can cause trouble.

@NAIRN ROBERTSON Love your thinking, anything that encourages people to consider what their putting where and why is an excellent thing.

@STUART Thanks for the defence, I’ll get right on it :)

Tweet this