Responsive Page Design

January 21, 2014 | tutorial

It's becoming increasingly important to factor in mobile devices in your design. Some 30% of web users access content using a mobile device according to figures published in November 2013. Cool as this might be, it does pose a bit of a problem that's linked to screen size, since there is such a lot of variation. You may have a totally awesome site on an HD display, but when you view the same on a phone or tablet, the display zooms out to see the whole page. The user then has to pinch-zoom in and spends ages scrolling to access the information. 

Increasingly, designers are aware of the problem and aim to implement a solution. In my view, there are three areas to focus on.

Firstly, you need to design at least two versions of the site for small and large displays; some designs may justify a third for the middle ground, which is likely to include tablets.

Secondly, you need to create a stylesheet for each design and use a CSS feature called a media query to specify which stylesheet to apply based on the screen size. For example, let's imagine that you wanted a stylesheet for screen sizes below 500 pixels and one for above. Your CSS would look like this:

 

@media all and (max-width:499px){

   styles for: small screens;

   go: here;

}

@media all and (min-width:500px){

   styles for: larger screens;

   go: here;

}

 

Lastly, you need to 'force' the browser to pay attention to the stylesheet, rather than allowing it to try an show the whole full-screen site. This is simple html meta tag that sits in the section of each page of your site. It looks like this:

 

It's worth noting that there are other methods of achieving this, but this one involves fewer coding skills, in my opinion.

January 21, 2014 | tutorial | all posts