With all the talk about the theory of Responsive Design, today we’re going to cover an example of how to apply it to the simple scenario of an article we wish to present in columns. Some sites suit a multi-column layout. Especially if you are presenting a lot of textual information without sidebars in a manner that is similar to an old fashioned newspaper. For this kind of use, your readers will be able to scan the words more quickly and with less eye movement as a result of the presentation in columns.
This does not translate perfectly to reading on screen as some scrolling is inevitable but we can still achieve some nice effects using Responsive design techniques allowing for the use of columns that adjust to the screen of the reader, perhaps better highlighting your section about online savings.
We’ll start with some simple screen size assumptions. We’re going to allow for four different layouts. The maximum width we will cater for is 1800px and four columns. Above that the layout will look the same. Below 1200px width we will display our article in three columns. Below 960px in two columns and below 500px in just one column. This final layout is likely to capture most mobile devices.
The aim of today’s demonstration is to illustrate the principles you will need to use. We will not create perfect, fully optimised, cross browser solutions to this simple problem. Where possible I have included some links to further reading on the topic so you can move into these more advanced areas yourself. A beginner needs to be able to follow the core concepts of columns, images and responsive design which we’ll cover here first before moving onto the ‘optimal’ ways of tackling the issues that come up ‘in the wild.’ At present these techniques are ‘in testing’ so the -webkit and -moz prefix are needed to use the CSS.
Setting Up The Columns
For our CSS I have started by demonstrating the widest set up and then scaling to the lower ones. I’ll just go over the second largest here to best show how we isolate those widths. Those wishing to see all the code can view the resources which are are attached at the end of the article.
The important things to note here are that the columns won’t be a fixed size within the ranges we specified in the first section. Instead they will be fluid to adjust to the screen sizes inbetween these boundaries. Specifying these points at which the number of columns switches is arbitrary and you may wish to experiment to see what works best for your content. Also note when taking a look at my code that I’ve slightly exaggerated the font size changes to emphasise the device/screen size change during the transition.
@media only screen
and (min-width: 961px)
and (max-width: 1200px) {
.article-body {
-webkit-column-count: 3;
-moz-column-count: 3;
}
}
Images Contained Within The Columns
The idea here would be to have images contained within the columns always fit the column exactly. The easiest way to achieve this is as shown here where we’ll use the largest size needed and scale it perfectly to the column. There are a number of ‘more optimal’ techniques which are covered in more detail in this article.
img.feature { width: 100% }
You’ll notice as you size your browser down how the site always looks and feels as if it was designed to be viewed on that size of screen or browser. This will be a nice touch for your mobile visitors and readers sitting on the train with their netbooks!
Font And Header Size
One of the nice features of responsive techniques is the ability to have a header and overall font size that reflects the size of the screen. Tiny text on a huge monitor is no more practical than a massive header that takes up the whole screen on a seven inch tablet PC. Adjusting this as well as the columns gives a nicer overall feel to this approach. In more advanced examples we might have changed fonts entirely or switched from a fancy graphical header with extra information like phone numbers displayed to a simple text only one for the smallest screens.
Final Thoughts – And Further Reading
This brief introduction to using responsive design on columns, images and headers should give you enough inspiration to think of some clever things you might like to try. I suggest reading through some of the following articles to learn some of the tricks, techniques and methods you will need to incorporate cross-browser support.
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://unstoppablerobotninja.com/entry/fluid-images/
http://www.alistapart.com/articles/responsive-web-design/
