The other day I came across an old blog post I had written for Functional Web about the trend towards responsive design. What I find amazing is that only 3 days ago I had to have a discussion about the topic of screen resolution and responsive design with a client and her soon to be “previous” web designer. So here it is again, back from the dead with a bit of update:
Screen resolution has gained a range: from 320px (cell phone) to 2400px or even higher. Users no longer just browse the web with desktop computers. Users
use mobile phones, smaller note books, and all kinds of tablets to access the web. So the traditional fixed width design is dead in water now. Web design needs to adapt. The layout needs to be adjusted for specific displays resolutions and devices.
Below is the main structure of a layout that can easily do that. You got the “container” that wraps the “header”, “content”, “sidebar”, and “footer” together.
We build the css based on a flexible grid and within that grid we’ll define the sizing of things for each device.
At the end of the day, it is still mighty painful
but more necessary than ever.