Mobile responsive web design
Designing sites for various screen resolutions used to be based on the most popular screen sizes. As years went by and screens got larger, this meant fixing the site’s content width and redesigning the site periodically – or leaving the width and having subsequently larger background border space around the central content area. Larger screens also encouraged designers to exercise more aesthetic control over their designs by using fixed positioning or elements and objects.
The advent of mobile devices – tablets, phones, and hand-held devices – has seen a reversal in the way designers have had to think about site layout. Almost like a trip back in time, reduced screen sizes and resolutions have designers thinking small again. As a comparison, today’s smaller tablet devices have the same resolution (640 x 480 pixels) as our VGA desktop screens did back in the early 1990s (though we do have more colours available nowadays). And phones are even smaller, half of that or even less.
In fact, we now have such a wide range of devices with varying screen sizes and resolutions that basing our design around the most common size simply doesn’t work anymore. Do we need to design a different site for each type of device? Not if we’re thinking smart and incorporating some of the newer tools to cater for responsive design.
So what exactly is responsive web design?
Responsive Web Design is basically making your website automatically fit different-sized devices. A four-column display on a desktop screen might become a three-column display on a tablet, then a two-column display on a larger phone, then a one-column display on a smaller phone. Get the idea? If you view this website on Tablet, Smartphone or PC the website will look slightly different on each device.
Or you might consider what people with different devices need to see. That might sound dictatorial but the idea is that people with little phones aren’t as interested in great aesthetics as much as finding out information that they need on the move – or in a hurry. It’s no good hiding the information under pretty pictures that either zoom out to being too small or putting links in that are too small to select with your finger on a little screen.
So how is a Mobile Responsive Website achieved?
First we need to be able to detect which device the page is being viewed on. CSS3 has a neat function called media queries which let us get information about the screen or device height and width, plus the orientation of the screen – that is, whether the screen is being viewed in portrait or landscape orientation (like when you turn the phone around and the page reassembles itself). You can even detect whether your screen is in colour or is monochrome, or in widescreen (the aspect ratio).
A basic use for media queries is to load a different stylesheet depending on the type of screen the page is being viewed at. So we can have unique styles for different devices. But that also means designing a separate layout schema for each device – that’s four or five complete stylesheets to write for each site… We can reduce the extra work by being crafty about how the page lays itself out depending on how big or small the browser window gets by using proportional dimensions for elements instead of fixed dimensions – that is, specifying widths in percentages instead of pixels. We work out a base set of dimensions for our layout and convert that into proportions. A very simple example is:
Full width = 1200px or 100%
Content width = 800px or 66.67%
Sidebar width = 400px or 33.33%
This way when we resize the browser window the page proportions stay the same and the content inside them adapts to fit.
As screens get smaller though, there will be a point when a third of the screen might be way too small to be useful for displaying information. This is where we use breakpoints to set the limits for each type of layout – that is, when to change from a four-column to a two-column layout when the screen width falls below a certain parameter – just like the examples above.
We also use media queries to determine which elements are visible at various screen sizes – thereby ensuring the important parts of our sites are prominent on smaller devices.
Another design philosophy gaining popularity is the mobile-first philosophy. Basically, this means designing sites for the most basic displays first, and then embellishing the design for greater resolutions – rather than starting with a grand design and then trying to whittle it down for smaller devices. Proponents of this philosophy suggest it provides a higher-quality browsing experience for all users by catering to the limitations of smaller devices first, then adding features for more powerful devices.
WordPress and Genesis themes are increasingly offering responsive features as they upgrade, and there are heaps of plugins and online tools available to assist in your responsive design. Though I should point out that retrofitting your website to be fully responsive is mighty difficult. It really is a case of starting from scratch in many instances though there are some great plug-ins that can make most parts of your website responsive.
Clever use of responsive design techniques can reduce the overall workload to cater to the plethora of different devices used nowadays for accessing the internet, keeping both your client and your business happy!
I recently went to a great WordPress conference in Sydney where Jordan Gillman discussed some of the details of mobile responsiveness in more depth. Here’s his Slideshow that goes into more detail:
Rob Jennings
