A bit of background history…
In the early 2000’s, whenever a new monitor came onto the market that had a different resolution or aspect ratio, web developers would scramble to come up with a whole new design for each screen. To focus and conserve their resources though, many web developers would use a ‘majority rules’ approach as far as which audience they would choose to cater to at the time, at the exclusion of others.
For example, when say 80% of users were using 800 x 600 monitors, many developers would concentrate solely on catering to only that portion of the market. But then later they had to redo everything when the majority of users moved to 1024 x 768. But by using this method, a good chunk of the audience had to endure a poor user experience when their web page layouts did not display properly, or behave as expected.
In 2004 Cameron Adams demonstrated Adaptive Layouts – layouts that adapted to the browser viewport width, and by 2008, a number of related terms such as ‘flexible’, ‘liquid’, ‘fluid’, ‘elastic’ were being used. But as smartphones and tablets were slowly introduced, creating a website version for each individual device became impractical.
This approach suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images, and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.
- Time & Money – once upon a time, developers would come up with the desktop version of a website first before moving onto developing the mobile site*, so clients would quickly get to see their website deployed – even if it was just the desktop version to start with. However, with Responsive websites, much more thought needs to go into the design phase to ensure that when creating this one version of the website, it will actually work everywhere before you can even start developing. This could take longer than before, however the end results are well worth the wait and extra design expense.
- Older Browsers – there are still users out there who are using IE4 and other older browsers that simply do not handle modern web practices.
- Performance – consideration must be made for websites that contain a lot of media which may load fast on a desktop, but not so on a handheld device.
- Content – large landscape images may look gorgeous on a 30” screen, but how do you handle them on an iPhone in portrait mode? (take for instance the example below).
- Design/Development Process – not all web developers are equipped or knowledgeable about the design and development process that’s required to implement a Responsive website. Best practices these days dictate that you always start with the smallest (mobile) version first, and work upwards.
If you are interested in finding out whether your website currently adheres to Responsive Web Design Principals, there are a number of sites you can visit, where you enter in the URL and it will display the website in a variety of sizes. Here’s one you can try http://ami.responsivedesign.is