Last time we had a look at how mobile based web access has evolved over time. In order to get an upper hand in SEO and provide an enriching experience, it is best to design responsive website so that it works uniform and looks consistent on devices of any screen size. Take this site for instance. It is designed using responsive web design. If you open the website on a mobile, all the elements, text and images will align themselves (almost magically!) as per the screen size of the device you are viewing the site on.
- This magic is precisely what responsive web design results in.
So to know more about what responsive designs is, we can look at what issues does it help solve. As is he common trend these days, you have more than one option to access the web. With this change, user preferences have also undergone a radical change. The burgeoning smartphone users now demand the same smooth and seamless experience from their mobile browsers. Gone are the days of poor performing WAP protocols coupled with exorbitant carrier charges. With declining provider rates and improving mobile web technology, it was only time before a standard was adopted that could bridge the gap between web access on desktop and on mobile.
Responsive web design is not a single technique but rather a collection of ideas and technology premises. Let explore these one by one to completely understand the concept.
-
Fluid grids –
The earlier web designs used fixed width layout that involved providing a certain dimension to each element and then centering them to the screen. Then came the liquid layout formats with the huge variety in screen sizes on which Internet could be accessed. Fluid design grids go beyond the layout that is traditional liquid. Instead of using fixed pixels or percentage values, the layout is ordered in terms of proportion to the elements within the page design. However when the demand is too extensive on the limited screen size (for instance displaying content in 3 columns), then we need something more than fluid grid
-
CSS media query –
The ‘something more’ is referred to as CSS media queries. They help collate data about the site visitor ad then arrange the content based on the feedback received. So if we take the above problem further (of fitting 3 columns on smaller screens) the minimum width is specified through the ‘min-width; attribute of media queries. When the target screen size falls below this number, a specific set of CSS Styles are applied that helps improve user experience on smaller screens of mobiles. The code would look something like this – @media screen and (min-width: 600px) {.content {float: right;}}
-
Resources –
Being a fairly new technology there have been some cutting edge innovation around this topic. Developers would be able to respect responsive web design and deliver much better client servicing when they have quick access to these resources. Our top choices are –
- Ethan Marcott’s revolutionary article on responsive web design
2.W3C mandate on media queries