Responsive web design – the buzz word in web design is an approach to web development in which a site is crafted to provide an optimal viewing experience on devices ranging from desktop computer monitors to mobile phones. Instead of designing separate websites for devices of various screen sizes, this method allows you to design a single site and optimize it for various devices. Given the rapid adoption of tablets and smartphones — and the fact that users currently seem to prefer reading their news on the mobile web rather than in apps – it is not surprising that responsive website layouts are gaining popularity and it’s likely will continue to do so even more in 2013.
There are three key technical features involved in responsive web design: media queries and media query listeners, a flexible grid – based layout that utilizes relative sizing and flexible images and media resized through cascading style sheets or CSS. More simply, a responsive web design uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen. If you’re viewing this article on a desktop browser, for example, try making your browser window smaller. The images and content column will shrink and then the sidebar will disappear altogether. When visiting a homepage, you might see the layout shrink from three columns, to two columns, to a singular column of content.
The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive web design.
At the same time that mobile devices are changing the display landscape with more and more small screens, at the other end of the spectrum desktop displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.
The benefits are obvious: You build a website once and it works seamlessly across thousands of different screens. For publishers, it offers the simplest way to reach readers across multiple devices. For users, it ensures a great experience on every no matter what device you are viewing on.