So I finally got my hands on the seminal work by Ethan Marcotte. I had to order it from the US but it was well worth the wait. If I didn’t have the responsive design bug before I certainly do now. This book is fun, easy to read and gives a solid foundation on responsive design principals. It is apparent to me that responsive design is nothing technically complicated, it just requires an open minded attitude towards a responsive ideology. You can pick up a copy here: A Book Apart – Responsive Web Design
To outline the core principals:
- Fluid Layout
Don’t use pixel values to build your layout, rather use relative percentages and ems. Ethan Marcotte suggests that you should focus on your fluid layout first as this will lead to some level of flexibility even for browsers that don’t support things like media queries. It can also mean that you limit the amount of coding you have to do with media queries as you have already solved many problems through making you site innately flexible.
I also like to use max-width properties on the overall page of 960px/980px. This way on very large monitors the content stays somewhat contained. Another common thing to do would be to float in additional columns beside your primary content when the monitor size allows (for that we’ll need media queries), however your choices should always be informed by your user experience decisions and the objectives of the website.
- Media Queries
Media Queries are really pretty simple even if they do sound a little daunting the first time you hear them. They are simply a way to write some separate CSS that will only apply in certain conditions, like for example, if your browser size is less than 800px wide. A word of warning, media queries are CSS3 but they are enjoying fairly wide browser support at this point in time.
There are two ways to include them. The first is inline in your CSS style sheet.
@media and screen (max-width: 800px) {
//your css code goes here
}
The second and my preferred option is to specify a separate stylesheet for each screen size that you wish to make changes for. You put this code in the head of your HTML document just like you do to link any stylesheet to your page.
So my standard HTML head for a responsive site now looks like the following, where global_stayls.css is all my default, non layout related css, screen_layout_large.css is for all default layout css (will apply if media queries aren’t recognised in older browsers) or anything larger than 800px wide. Of course you should use your own research to determine which screen sizes to pick but I think this is a good bench mark today for desc-top, tablet and smart-phone.
One last thing – viewport meta tag
One last thing that you’ll need to get started with your responsive design is the viewport meta tag. This is just a little snippet of HTML that you include in the head of your HTML document. It changes the default behavior of mobile devices to scale your website down. By applying it the device will display your page at it’s true size and allow the responsive and fluid elements to take effect. It looks like this:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimun-scale=1.0, initial-scale=1.0" />
Of course Ethan Marcotte gives allot more information on all of these things as well as talking about responsive techniques for including images and media and in generally he explains it far more clearly then I do. I most highly recommend this book. Thank you Ethan!
