What is Responsive Web Design?

Responsive Web Design is "a methodology for designing web sites that can adapt to a range of screen sizes and device types." - (Wikipedia)

Mobile devices are not going away. Studies have predicted that by 2013, mobile browsing will surpass desktop browsing.

On an adaptive or responsive website, the overall layout and design components adapt and change to fit the browser window or screen. This means your website will look great not only on desktops and laptops, but also on iPhones, Android devices, iPads, BlackBerry devices, netbooks, and so on. Your customers will appreciate not having to pan and zoom around your website when they are on their smaller-screened devices. The experience of using a traditional fixed-layout website on a mobile device can be frustrating, and sometimes feels like looking through a periscope.

Recently, one of the largest sites to use responsive techniques is The Boston Globe. You can see how this works by resizing your desktop browser window or viewing the site from your mobile device. The layout elements will reflow and change depending on the size of your window or screen. The Boston Globe website updates itself continuously as you resize your browser window, other websites will instead use a number of somewhat fixed layouts to "snap to" depending on the screen size, as does the foodsense website.

One thing to keep in mind with an adaptive or responsive website is that your visitors using different devices will not necessarily see the same thing when they view your website. Just as your website may not look the same in older versions of Internet Explorer, your website will change depending on which device it is viewed from. We think this is a very good thing, and your visitors will too! The layout and page elements may change, but the essential feel and experience remain the same across different screens and devices.

In some cases a separate, dedicated mobile website tailored specifically for use on-the-go is the best choice, but comes at a higher cost and requires more development time. For the majority of sites, an adaptive or responsive design provides a way of getting the best of both worlds, resulting in a website and an experience that translates across the spectrum between large screens and tiny screens.

For more examples of websites which use responsive design techniques, visit mediaqueri.es.