I now do a lot of web browsing on mobile devices (smartphones / tablets) as, I'm sure, do you.
It's inarguable that this trend toward mobile browsing won't increase. Despite this, what I've found is that the majority of websites just do not work well on small screens.
Well, ok, they "work" but they don't work!
Consider the following screenshot of how the website for the hotel I'm staying in looks in Chrome on my Galaxy S3:
Now, you might be thinking "Huh? It looks fine, what's up with that?". Well, yeah, it "works", in that it's a cute little miniaturized version of what you'd expect to see on a PC. But does it actually work, really? Can you read the text without zooming in? Can you perform the primary functions of the site easily? Try to actually use this website on a small screen and you'll soon be calling out in despair.
Now, consider the following two screenshots, both taken on the same Galaxy S3:
Which do you find the easiest to look at? I'm hoping the second one!? The first is how this site currently looks. The other is how I'm proposing it looks. It's a work-in-progress prototype of a new responsive design for this site.
Here's the same page on the same device but in landscape mode. It then takes advantage of the extra width available:
Here's the same page, but on a desktop and at a much larger window size (>1200px):
In the shot above the site now makes much better use of available screen width by switching to a 3 column layout.
Shrinking the browser down a little and the third column drops off (it's now part of the second column) as you can see here:
Impressed? You will be when you see how simple it is to do! You don't need a separate mobile site. It's all controlled by some simple CSS @media rules. If you're curious how then visit my prototype site and view source.
This new approach is what's being called Responsive Web Design -- the design responds to changes in screen size. Visit the prototype site in a normal desktop browser and then resize the window from tiny to huge and see what happens.
I'll talk more detail about how it's done in the next post.