Getting into the Responsive Grid
On the first part of this post, I have explained a bit about Compass and how to get it running. Now let’s use Compass to build our Responsive Grid.
To better understand what I will be explaining, I recommend you download the sample code and follow it as you read this post.
Defining the flexible grid
First of all, your mockup has to be organized into columns. You may already have your favorite grid. As I am used to the 960gs, I usually start all my designs using the .psd files provided here – you can add columns manually if you need. The column width will give you the basis to find the relative values that will be used to configure our grid.
Susy allows us to choose the number of columns and gutter size according to necessity. For this layout we are using 20 columns. As our design has two background images that go across the browser window. I am trying something different here, we will not use margin to position the container in the middle of the window or use the grid side gutters. I have used the columns themselves to specify the space allowed between our content and the actual browser window sides, we will have better control of the grid across the devices.
Here’s what I mean by that:
The best thing about using a grid framework, is that we will not have to do these calculations for every element, margin and padding we need. For all the settings of width, we will use the grid.
Please, now open the _base.sass.
$total-cols: 20
$col-width: 3.3898305084746%
$gutter-width: 1.6949152542373%
$side-gutter-width: 0
These are our grid constants, since our grid is going to be flexible, the width values are going to be in percentage, for doing that, all we have to do is to divide the column width by its context.
As our mockup is 1180px wide, we have 20 column and each column is 40px wide, we use the formula:
40 ÷ 1180 = 0.033898305084746
The number looks pretty ugly, but it will make our grid work properly.
Now we need to transform this number into percentage, which can be done simply by moving the “.” two decimals to the right.
Which gives us 3.3898305084746%
No matter what, hold the urge to round this up to 3.38%, it will not work. You won’t be looking at this number very much after this, don’t worry.
To find the gutter we will do the same thing:
20 ÷ 1180 = 0.016949152542373 = 1.6949152542373%
Having done that, we now have our flexible grid.
Flexible Images
The textual content will flow naturally as we expand and contract our grid, but the images are still in need of a bit of CSS to assume a fluid quality. It is very simple, we can sort this out with one general declaration:
img
max-width: 100%
This way, the maximum width the image will assume is its container with. We can also apply max-width to embedded videos and so on, so let’s make it more interesting:
img, embed, object, video
max-width: 100%
If you still care about Ie6, you better know that it does not support max-width. So, we need to use another declaration to go around it.
.ie6
img, embed, object, video
width: 100%
It will make all the images take the whole width of its container, which may work just fine in most of cases. For small images and thumbnails, you may target using more specific declarations.
Vertical Rhythm
Some might find it better to work the typography size also using percentage whereas, I prefer to have more control over the typography without having to worry about nested elements, relative values etc. For this reason, I decided to use the Vertical Rhythm, another framework that comes integrated with Compass.
It works like a vertical grid that makes it much easier to attribute vertical margin and padding to our page elements. It means that you can also design and distribute your typography and container heights following a vertical grid, or rhythm.
I like to to configure my Photoshop grid as you can see below. Then, I can toggle the grid using the shortcut cmd + ” ‘ “.
On _base.sass, we define the constants of our vertical rhythm:
$base-font-size: 14px
$base-line-height: 17px
It means that a due text line, if we don’t specify otherwise, will assume the font-size of 14px and the line-height of 17px as default values.
Then, for all font size declarations we will use the mixin +adjust-font-size-to(font-size in pixels). Compass will then, convert the font sizes from px to em and fit it into the vertical rhythm automatically. Likewise, If you need to adjust the line-height, you will use +adjust-leading-to(number of lines).
Quick Reference
+padding-leader(1) – Adds 17px padding to the top of a due element.
+padding-trailer(1) – Adds 17px padding to the bottom of a due element.
+margin-leader(1) – Adds 17px margin to the top of a due element.
+margin-trailer(1) – Adds 17px margin to the bottom of a due element.
+adjust-font-size-to(32px) – Changes the font-size to 32px
+adjust-leading-to(2) – Changes the line-height to 34px
Note: The line height is relative to the constant $base-line-height: Npx – in our case the constant is 17px. The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems. Don’t worry about nested elements etc, Compass will do the maths for you.
Find out more about the vertical rhythm usage here.
Media Queries
Right, we have created our flexible grid, made our images flexible and setup our vertical rhythm. But if you scale the screen you will face some weird columns, and line breaks that make no sense at all.
Our last step is to fix all the weirdness that is left using media queries.
Media queries are expressions that allow us to target a group of CSS declarations to the devices that match to the query. If the device does not match, the declarations contained in the query will be ignored.
@media screen and (max-width: 480px) { ... }
In this case, the device has a screen 480px wide or less, the styles of this query are applied. If not, they are ignored.
You can also use the media-queries in sequence:
@media screen and (device-width: 768px) and (orientation: portrait) { ... }
See some more examples of media queries here ) and read more about the w3c specifications here.
Viewport meta element
The webkit mobile browsers comes with a default feature that scales the web content down to match the device width, even with a flexible grid and media queries in place.
To get around it, we need to add a meta element to the header of the html that will set the zoom of the page to 100% and match the browser size to the device screen size.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
There are a few options that you may consider using for more specific situations, click here for more information.
The Media Queries, the Grid and the Vertical Rhythm
For this experiment, I am using three main media-queries and two auxiliary to better align the image in the #secondary container.
As we go from larger to smaller screens, all I am doing is re-organizing the grid and the vertical rhythm – which will attribute new values to the leading and font-sizes, aiming to create the best reading experience possible.
On the Desktop for instance, we are using two columns as margin for the #page, when the screen size drops to 1024px wide, it switches to one column, that ensures better use of space in the iPad and smaller devices.
My main concern, was to make the transition between the devices iPhone, iPad and Desktop the best way possible, as well as keeping the layout flow as good as I could as you scale your browser window.
There’s no set rule of how to organize your media queries, it all depends of the devices you want to target and how you want to organize your code; By using the max and min-width attribute, you will find a way to sort most of the issues by adding auxiliary queries in between.
Try commenting on the queries and see it for yourself. To comment in sass language, you need to add “ // ” in front of the lines you want to comment.
Compatibility
Media Queries are supported in most modern desktop browsers, including ie9. However, it does not work up to Internet Explorer 8.
Thankfully there are people fixing Microsoft’s fails with a bit javascript and the will to make web-designers happy.
Scott Jehl, developed a small script called Respond, that enables media queries support on Internet Explore 8 and under .
Unfortunately, we need to rely on javascript for patching other IE versions, there’s no way around it.
Note: I haven’t added media queries fallback on the sample code. I am sure you are using a modern browser.
Responsive web-design beyond the technique
In this experiment, we have a strong focus on the technical part of a responsive design. All I have done was to convert a non-responsive page, into a responsive one.
What I have learnt from this experiment, goes beyond the fact that the page adjusts itself to the width of the browser; we need to consider also the context in which the user is in while reading our content, what are the singularities of the devices and make the effort to offer the best experience possible.
Just as an example, I haven’t done much changes to the design at all. If you consider that on the iPhone, our user will need to tap the links with his finger, the footer may need a different solution for keeping the user from tapping in two links at the same time. What I am trying to say is that, if this page had been planned to be responsive from start, it would be designed quite differently in many aspects.
Therefore, the best way to achieve a responsive design is planning and wire-framing the experience for the devices you are targeting and the audience you are communicating with. There are those who believe that for different contexts, we need different markups, different content. I believe it is a valid approach, the way to go will depend on your objective, the content and the audience.
This experiment will bring to you a different surgeworks.com soon enough, stay put with us and don’t forget to leave your comments.
Sources
- Responsive Web Design by Etthan Marcotte
- Responsive Web Design – Article by Etthan Marcotte
- thinkvitamin.com
- compass-style.org
- sass-lang.com
- susy.oddbird.net
Lyssandro Reis – @Lyssandro