Responsive Website Design is the approach that suggests that design and development should respond to user behaviour coupled with the environment relating to screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of code. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user's preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
As the number of devices grows, so does the variety in screen resolutions, definitions and orientations. New devices with new screen sizes will be able to handle variations in size, functionality and even colour. Some are in landscape, some in portrait and others completely square. As we write this, a key differentiating factor between the two leading smartphone developers, Apple and Samsung, is the different screen size of their respective flagship smartphone devices. Bring in the other players from the smartphone market, throw in a healthy mix of tablet computers such as the trend setting iPad and just try to comprehend how many devices are able to switch from portrait to landscape at the user's whim. How is one to design for these situations?
In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximise their browsers, which itself leaves far too much room for variety among screen sizes.
A few years ago, when flexible layouts were almost a "luxury" for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts. Flexible designs weren't really that flexible; they could give or take a few hundred pixels, but they often couldn't adjust from a large computer screen to a netbook or to a screen on a mobile device.
These days we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squashed and illegible in the process). While it's not a complete fix, the solution gives us far more options. It's perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.
Yes, and some of these need to be considered quite carefully before diving head first. The biggest risk and issue with responsive design is that it is still maturing as a technology. Let's not forget there are still many old browsers and mobile devices in use that simply will not support it.
Here is a very brief list of pros and cons:
Responsive web design is visionary and without a doubt it is here to stay. As older versions of internet browsers disappear from our landscape we may finally be able to harness the power of new technologies that drive this new design concept. At the moment, our opinion is that responsive design should always be put in context of your business needs and make an educated call on whether the time is right to embrace this approach for your site now...or wait for this space to mature.
The main issue in our region (the Middle East) is that we still have a high number of internet users still accessing the web via old internet browsers. In this region, Internet Explorer 6 and 7 are still responsible for a high percentage of visits to our sites (much higher compared to global averages) and these browsers are not capable of supporting the latest technologies.
Responsive Web Design in practice. Get inspired. Get excited. Then read the content below to get educated.
Below we have a few examples of responsive Web design in practice today. For many of these websites, there is more variation in structure and style than is shown in the pairs of screenshots provided. Many have several solutions for a variety of browsers, and some even adjust elements dynamically in size without the need for specific browser dimensions. Visit each of these, and adjust your browser size or change devices to see them in action.
NOTE: Responsive web design may not work correctly in older browsers like Internet explorer 6 or 7, (and even 8) thus don't be surprised if you don't see the magic happen if you are still using one of those browsers.
