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:
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.
- 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!