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.
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.
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.
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.
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.