ClearMenu Part 2: Layout Development
October 18th, 2011
ClearMenu is a project by the folks at Unit Interactive, including me, as a design experiment and commentary on the state of web design in the food industry. You can read more about the project and all the mini-sites at the ClearMenu site. This is a multi-part series on my contribution, “SportsBar”. The first part focused on the design. This second part focuses on the layout development.
Golden Grid System
I design and develop my sites on a strict grid - a column structure and a vertical rhythm. For years I had developed just a single static layout for my designs. Recently I had begun to develop several static layouts and to switch between them using media queries that detected window size. This worked as far as it went, but it didn’t go far enough.
As Ethan Marcotte argues in Responsive Web Design, for a design to be truly responsive it must be liquid. Only in this way can the layout adjust itself for any possible browser resolution. I was keen to try his methodology for this project but there was a major hurdle. For grid-based layouts to really work, the gutters and basic rhythm unit must match up perfectly. Otherwise you violate the principles of quiet structure.
Liquid layouts use percentage widths to stretch and contract the columns. The widths of the columns and gutters adjust to the window width but the rhythm stays static. This results in discrepancies between the two which breaks the harmony of the design. Not good.
Enter the Golden Grid System. Joni Korpi noticed a new toy included in all modern browsers: box-sizing. By setting box-sizing: border-box browsers can now calculate elements’ widths outside of their padding. This means we can have containers, with padding, that have percentage widths. That means we can have fluid layouts without compromising gutter size! (Here’s a more complete explanation.)
Another New Toy
There is one aspect of the Golden Grid System that I hated: using EMs to set the type, rhythm, and gutter sizes. I’ve been on a vendetta against EMs for years. I hate them. That they are a relative sizing unit is great. That they are relative to the parent element is a complete nightmare. So, it was with great delight that I learned of a new unit that is available in modern browsers: the REM.
REM, like EM, is a relative unit but unlike EM, REM is always relative to the HTML element. If the font size set on your HTML is 10px and the font size on your element is 2.4rem your resulting font size will be 24px. Every. Time. No fussy math or 10-decimal numbers. You can easily zoom your entire grid by adjusting the font size of the HTML element and you can do that with pixels. (Again, here is a better explanation of REMs.)
Thus armed I went about crafting my first truly responsive design - using percentages for column widths and REMs for font sizing and gutter widths. If you are interested in seeing how the design lines up on the grid, you can add ?grid=true to the end of the URL of my menu to reveal the Golden Gridlet (three lines, upper right). Clicking on this will show you the grid.
Shifty Navigation
I was almost there. The final piece to my layout puzzle was the navigation. As I mentioned in part one, the navigation shifts between the top of the page for larger resolutions and the bottom of the page for smaller, presumably mobile resolutions. I was lucky enough to have caught a post by Jeremy Keith on achieving this very thing using pure CSS. In short, by setting the body to display: table and the navigation element to display: table-caption you can move the navigation to the top or bottom of your page at will and compromise nothing in the process. Using this technique I was able to realize dramatically different designs for my navigation without resorting to Javascript.
There you have it - the building blocks for the responsive, liquid layout of my menu. In part three I’ll take a look at page behaviors and stylesheet switching.
