What is Responsive Web Design?

What is responsive design, and do you really need it?

Every client wants a mobile version of their website, optimized for multitudes of devices. BlackBerry, iPhone, iPad, Kindles… and the list goes on. Before responsive design, it was a combination of code that “sniffed” out the users’ device & delivered the properly formatted code to the viewer. This process meant lots of testing on lots of devices with lots of versions.

Responsive design allows you to serve up one website (or hybrid app) that will automatically reformat itself to the proper device dimensions. It’s not just a resize of the images, but it also includes smart optimized layouts to make content friendlier on mobile devices.

Responsive design uses a foundation of fluid grids. Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

To see it in action, open this website on a desktop browser and slowly make the browser window thinner and wider. You should see the layout magically adjust itself to fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. If you open our site on a mobile device, there will automatically be a scroll wheel for navigation instead of buttons to make it even friendlier.

Tablet sales are expected to exceed 100 million this year. Their sales numbers may even top notebooks next year. Smartphones of course, are also a hot commodity — according to Nielsen, the majority of U.S. mobile subscribers now own smartphones, not feature phones. The shift to mobile is happening at an extraordinary speed.

If you’re designing a site, or a hybrid app – it’s clear that having a great mobile solution should be the priority.