Two weeks ago I started by introducing you to responsive web design, more specifically why you should be interested in using responsive design and the direction future web design is taking. I hope you found that interesting and perhaps enlightening, but undoubtedely if you are a web designer or web developer, the interesting part comes now...the actual code.
For starters, to build a good responsive website, you need to start with solid foundations. You need a website built on a fluid grid layout rather than fixed width. Ironically, this website is build on a fixed-width layout, however we have short-term plans to change that. So what is a fluid grid layout and how does it differ from a fixed-width layout? Well, it's actually quite straightforward. If you take a look at your own site (or this one) you will note that the parent container has a fixed width assiged to it, usually 988px. This value is the width of the container and it assumes that the minimum screen resolution is 1024x768. By doing this assumption, you are not catering for devices with a much smaller resolution (including a browser window on your desktop which is not maximized or a portable device). You are also forcing yourself to revisit the website in a few years when the average minimum screen resolution is higher and your container is now only taking a fraction of the page (at the moment I am using 1280x1024 but I am usually using much larger resolutions).
OK now you're convinced, fluid layouts are the way to go, but how do you create a fluid layout and why aren't all layouts designed immediately fluid? In response to the first part of the question, creating a fluid layout means that first of all we cannot use the pixel to size content (text or otherwise) but percentages and ems (there is also support for keywords but it is highly unrecommended). You should already know that both percentage and ems are relative units, meaning that their size is dependent on it's context, and a font-size of 1em (or 100%) is equivalent to the browser's default stylesheet. Therefore a font size of 2em (or 200%) is equivalent to twice the browser's default stylesheet and 1.5em is equivalent to one and half times the browser's default stylesheet. Therefore by knowing the browser's default font-size (16px in Internet Explorer, Chrome and Firefox) it is possible to calculate the font-size in ems by using the following simple equation:
result = target / default
But there is already something wrong with this approach. It is up to the user and the browser to choose their preferred size and it is out of the designer's control. Designers who are still looking to force their way onto the user are wrong and must adapt to a market where it is the user who decides how the website they are looking at should look. This is not print and the designer is no longer king
If we have a page consists of 7 columns of 124px each separated by 20px-wide spaces, such as is common in some css frameworks, if we have a banner object which takes up 5 columns (leaving one empty column on either side), we would assign it a width of 700px. Similarly, if there is going to be a navigation menu on the left occupying one column and a content area occupying the remaining 6 columns, we would assign them widths 124px and 844px respectively. This layout could be seen by following this jsfiddle.
Unless you have a very high screen resolution, the webpage from the jsfiddle doesn't even fit properly. The same would probably apply for a mobile device or a non-maximized browser window. I will therefore proceed to turn this into a fluid width layout, by changing pixels to relative measurements (ems in this case) and also assigning a max-width to the #page container.
max-width: 61.75em;/* 988px / 16px = 61.75em */
By using ems for the max-width attritute, the max-width will scale according to the font size, therefore if a particular user's browser is greater than the default 16px the max-width will scale accordingly. Apart from this, we reviewed all the font-sizes and updated them accordingly, using the formula above. This resulted in some 'pesky' decimal values however they are supported on all major browsers so it wasn't an issue.
When working with widths however, it made sense to use percentages, because the width of the child container is dependent on the width of the parent container, rather than the font-size. The same reasoning applies for padding and margins. Once again, we used the formula:
result = target / default
for example the width of the .entry .main was calculated as follows:
width = 844px / 988px
width = 85.425%;
This also resulted in decimal values, which in some cases could require rounding. I suggest reading this article by John Resig to understand how the different browsers calculate sub-pixel widths.
The end product is a fluid layout which adapts according to the context it is in. Give it a go and check out this jsfiddle and note that as you vary the shape and size of the fiddle container, the layout remains correct. This is only the first step in creating responsive designs. What we are looking at is a fluid width layout, not a responsive layout; however it is a very important first step and is required to build fully responsive websites. In the next and final blog article on responsive design, we will look at media queries and different frameworks.
Thank you for reading and have a great weekend.
Kevin
P.S. On another note I am super-proud to announce that I have been selected as a featured attendee on Web Summit 2013, but more details on this will be coming out in the coming weeks, but trust me, it's incredible stuff. ;)