Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical.
Responsive design allows your website to adapt to the device your users are viewing it on. It provides you with the capability to write once publish everywhere, meaning less work for you. If you know nothing about responsive web design then you are in the right place.
Responsive web design is made up from 3 basic ingredients.
Flexible Grid based layout
Responsive design is all about letting go of a bit of control and learning to embrace that. The first thing we need to do is limber up our design. It would be far too hard and take far too long to work out every single size of the site and come up with the perfect layout for each width. Instead we find the major points of change and then let everything squish and stretch between them.
When the web first came about all of the pages were just text with hyperlinks. It was a fluid web of information. Then we added images to the mix, and then embeds, and then iframes and videos…. and by this point, the web had translated to tables and CSS with fixed widths.
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.
Responsive design is accomplished through CSS “media queries”. Think of media queries as a way to conditionally apply CSS rules. They tell the browser that it should ignore or apply certain rules depending on the user’s device.
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.