Since 2012, it has been the time for responsive web design. It has become quite the in-thing among the web designers’ communities all over the world. However, before getting into the nitty-gritties of good web design practices, let us take a look at what does responsive web design actually mean? Rather than there being a comprehensive definition of what it means, let us look at what problems responsive web designing solves. It creates different versions of the same website so that it can be viewed on a variety of compatible devices including laptops, cell-phones and tablets.
The idea is that users should have the same browsing experience regardless of the device they are using. Responsive web design uses a combination of ideas and techniques to create and ensure this compatibility.
Creating fluid grids
One of the first aspects of responsive web design is creating and using fluid grids. A fluid grid is slightly different from a liquid layout. A liquid page layout means a structure that expands along with the page. Recently, it has become less popular. However with the great number of internet enabled devices and their varying screen resolutions, liquid layouts have become very important.
A fluid grid is slightly different from the liquid layout in the sense that it is more proportioned. So, when the screen sizes change, all the elements of the layout change their their sizes in relation to each other. However, this layout can break down if the width of the browser becomes too narrow. This is when media queries are used.
Using media queries
The next aspect of responsive web design is the CSS3 media queries. These are supported by most of the browsers today. They allow you to collect information about the website visitor and then use it to apply CSS styles. Thus if the browser window becomes smaller than a particular width, then certain CSS styles will be used.
Remember that you must create your target resolutions depending on the kind of website you are building. Will your website be used by cellphone users? If yes, then create a resolution accordingly. Remember, the more resolutions you target, the more time and effort will be required.
Good practices of responsive web design
There are certain practices that you must keep in mind while building your website responsively. Here are a few of them:
1. Remember that mobile phone users should get a high quality experience while browsing the website. Mobile internet widely used by millions across the world. When you are creating the website make sure that it is accessible to mobile phone users with minimal loss of content including visuals.
2. Do away with unnecessary clutter that will make layout adjustment complicated. Don’t put in those complex Flash or Javascript components or the dvs because these just add to the congestion.
3. Focus on the breakpoints. Breakpoints here refer to the resolutions of different devices. There can be a variety of these, but there are a few standards that you must look at. For example, 480 px is that of the older smartphones. 768 px is for the bigger smartphones and small tables. Like this, there are a few standard resolutions to be focussed on.
4. Your images should be adaptive and responsive too. Remember that images contribute a great deal to a website’s content.
5. You should program your site elements so that they can be compressed for easy transmission over different networks of varying internet speeds and bandwidth.
At the end of the day it is vital that your website visitors experience the same amount of fulfilment and satisfaction, irrespective of their device of access.
About the author
Jean Miller is a freelance web designer who has been working on responsive web design projects for the last five years. She specialises in tablet-specific websites. In her free time, Jean loves baking.
