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.
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.
Like this and want more?
We won’t share your email address with any organsations other than the platform we use to send the newsletter. There’s an unsubscribe link in every newsletter we send.