Responsive web design
The title, admittedly, is not all that new. But as the web is increasingly delivered through a wide range of screens, from smartphones to tablets, it is no longer right to assume that it’s okay to just use a fixed width of 960px for most “standard” 1024 by 768 screens.
Our approach thus is to ensure we develop web interfaces that will automatically adapt according to the available screen size. This differs from the old “fluid width” implementation where the canvas is stretched according to the available width. Just try viewing Wikipedia on a maximized 1920×1200 display! Does not make for good reading.
The idea is not to just scale the contents down, but to adapt the interface to “flow” nicely based on the available screen canvas. This could include a stacked navigation replacing a horizontal row of links, loading smaller graphics for smaller screens, breaking up text into columns for wide screens – just to name a few.
You can see how this works by resizing your web browser on any of the following demos:
http://www.columnal.com/demo/
http://cssgrid.net/
http://webdesignerwall.com/demo/adaptive-design/final.html
In short, web builders should start to implement meaningful interfaces that will work well – be it on a 320 by 480 smartphone screen, or 2560 by 1440 monitor.
As with everything, pros and cons. Ensure your site won’t break in older browsers. You will also need more time to roll this out, though there are many good frameworks to help you. Also consider the possible issue of “dynamic” viewports which is what happens when an iPad/iPhone/etc. is rotated to change from landscape to portrait view and vice versa.
Further reading:
- An article which Ethan wrote back in 2010
- Some arguments against responsive web design
- A nice list of frameworks to get you started
PS: Our upcoming NEW website and blog will be “responsive”. Look out for it!
Is that done with just pure CSS or involves Javascript too?
Hey Acidz,
Thanks for dropping by. Previously, you had to rely on JS to do the type of browser detection and modification to the CSS but with Media Queries, this can be implemented purely with CSS.
Unless of course you need to support IE8, which will force you to load a small JS to provide Media Query support in older browsers. But generally its widely supported, including Safari 3+, Chrome, Firefox 3.5+, Opera 7+ and mobile browsers like Webkit and Opera Mini
Cheers
Charan
RWD is starting to become useful and validated for some sites, just spotted a clients percentage at 10 for mobile devices.