Responsive web design is a term that is being bounced around a lot in the web world lately, a term created by Ethan Marcotte in his now popular article of the same name, and with the increase in the population viewing websites on their phones and tablets a term that is fast becoming something every web designer and developer should be aware of.
In a nutshell
In the past an alternate mobile/tablet versions of websites would have been made, in practice this worked well however multiple versions of the site would need to be created separately, taking time and ultimately costing money. In comes responsive web design, a method that deals with the transition of the same website on a monitor down to a mobile phone and every screen size in between whilst trying to look optimal on each one, one site covering multiple formats with multiple screen sizes.
Further detail
The responsive web design approach needs three key elements in order for a website to be truly responsive:
1. A design built on a fluid grid
2. Flexible images
3. Media queries
A fluid grid
A fluid grid, compared to a fixed-width layout, is made up of a set of components each with a percentage width which causes the site to resize according to the users browser window. So if you are used to coding websites using fixed-width layouts maybe it’s time to drop the pixels and get with the percentages and ems. Pixels for widths are still nice to have on the design of a website but they will then need to be converted to a percentage when it comes to the development. If this is all new to you and sounds quite daunting then you will be happy to know that there are a lot of pre-defined fluid grid systems out there, however coding your own is just as easy and in the long run will be much less restrictive. So with a well thought out fluid grid we are well on our way to creating a true responsive website.
Flexible images
Having a fluid grid system is one thing but having your images scale nicely with the rest of the site is another. Simply adding images to a fluid grid will cause them to just render at its natural width and eventually cause it to overflow its parent element. With the simple use of max-width:100% on the img tag will cause it to render with its correct proportions and therefore creating flexible images within a fluid grid.
Media queries
Media queries, the last and probably the most daunting aspect of responsive web design allow a developer to alter one layout for different screen sizes. This is done through the use of stylesheets that take into account aspects of the device that the user is using. Take the code below as an example:
If the device has a min-width of 321px and a max-width of 600px then it will load the tablet.css stylesheet and if it doesn’t then it will ignore the line of code. A series of these stylesheets should be used to make sure each screen size will be addressed. Media queries aren’t just limited to the screen size; they contain a wide variety of options including orientation which can be used to determine if a device is in portrait or landscape.
To conclude
With the above three concepts your design will look great on various devices, and as websites are now being viewed across a wide range of different devices responsive web design is an approach that is always worth considering for a project and one that we will be seeing a lot more in the near future.
Comments