Responsive Web Design

The   way people access the web is undergoing a rapid transformation. Not so long ago you could be pretty sure that the majority of people were viewing you site from a laptop or desktop ( ‘Grandpa Box’) . These days and going forward though we need to make pages work on all sorts of devices, from tiny iWatches and mobile phones to large screen TV’s . The design needs to respond to the users environment.  Here are some of the main concepts to consider whilst incorporating ‘responsive design’ into your Web Projects.

Media Queries.

These have been around for ages in CSS ( and HTML) , for defining different styles when printing out a page for example. More recently they have been upgraded to allow developers to specify overriding   custom rules to fine tune styles  and  layouts depending on the current screen width.

Responsive Images

Images obviously  need to resize automatically based on the screen width, CSS provides the ‘max-width:100%’ setting . Also though the idea here is to prevent overly large images being sent to small screen devices and also to cater for HIDPI ( Retina) . In the absence of widely implemented formal standards there are currently three main ways of doing this. There is a built in Webkit ( mobile ) keyword that enables double resolution  images. There are also some solutions that employ Javascript to download the most appropriate images from the client side. Another solution is to use background images with CSS media queries. The most interesting solution I have seen recently is a server side PHP script that sets a cookie  containing the screen size and sends re-sized images automatically. Have a look: http://adaptive-images.com

Fluid Grids

These work on the notion that we divide the screen ( however wide it is ) into X columns, then we can also  control the number of columns a piece of content consumes at different key widths,  known as Break Points. These widths can be thought of as literally the places where the design ‘breaks’. Grid systems such as that contained in the popular twitter Bootstrap 3 framework, enable rather course grained control here. In practice it is often necessary to go beyond the provided styling classes and start working with custom width ratios, so elements are assigned  pro-rata widths relative  to the screen size. This can  enable more natural looking layouts where the design has not been built to a strict grid system.Interestingly,  Bootstrap employs a ‘mobile first’ approach, the main styles are all aimed at the mobile sized screen, the defaults are over ridden with media queries for wider displays.The idea of  ‘Mobile First design’ goes beyond this though, and it sort of goes hand in hand with responsive design, check out this article.

Dynamic Content

This  has to do with automatically altering the actual content of a site itself,  based on where and how it is being viewed . Simple examples are hiding unwanted text in the mobile view of an image slider or displaying an extra side bar on a large desktop. The defacto standard ‘Hamburger’ drop down mobile Nav. Menu is perhaps another example of responsive content.

 

Summary

Responsive design represents the natural evolution of fixed width print and web layouts, via  fluid Web sites. Creating a truly responsive site requires more work and close attention to detail, but seems to be the way of the future. Ultimately it is perhaps cheaper to develop and maintain a single web site that works on Mobile and Desktop.

facebooktwitterlinkedinrssfacebooktwitterlinkedinrss

Leave a Reply

Your email address will not be published. Required fields are marked *