Children’s Museum Gets Responsive
At some point in the last five years you may have visited the website for the Children’s Museum of Pittsburgh. If you had visited on your smart phone or iPad, you’d have been greeted with Flash menus that rendered the site inoperable.
A couple of weeks ago, we quietly launched their new site. It’s a flexible, responsive layout that adapts to the size of your browser – rendering optimized layouts on smart phones, tablets, laptops, desktops, and large screens. We did a general write-up on the site re-design on the project page on our website, but some of you may want a little more detail about the more innovative approaches we took. If so, read on, gentle reader.
Menus
Horizontal layouts are a useful and highly conventional approach to main navigation design. When you combine the layout needs of responsive with the content flexibility of a CMS, though, things can get a little hairy. At some point you’re going to break to two lines, and things will most likely get ugly and less usable. For the Children’s Museum, we decided to take a prioritization approach.
The Children’s Museum agreed that on smaller screens, it would be fine to display the four most important items (whichever were arranged first in the CMS), followed by a dropdown “More” menu. On the smallest screens, we’d further condense the menu to a single link that would lead users to the footer site menu. (The mobile footer menu approach is nicely described in Luke Wroblewski’s book Mobile First.)
Calendar
Calendars often employ table-based layouts. Tables and responsive layouts don’t mix in general, of course. They’re inherently inflexible, and are habitual line-steppers in terms of the separation of content and presentation. So instead of using tables, we built the Children’s Museum’s calendar primarily using divs and articles. This allowed us a much greater degree of control with layout. On smaller sized browsers, where a traditional visual calendar layout would be unreadable (not to mention un-thumb-able), we shifted to an event list layout. Days without any events are removed from the display, and each day gets a full-screen width.
Both views come from the same semantic markup, with events entered by the site administrator through a single point in the CMS. No fragmented content, and every screen gets an optimal way of browsing events.
Grid
OK, this is where I get significantly more nerdy. The Children’s Museum site is using a custom flexible 12-column grid system built (like all our CSS) in the SASS syntax, using the Compass framework. (Our grid is loosely based on the Compass 960 Grid Plug-in.) The basic grid definition is simply:
$gutter_width: 3.5%;
$columns: 12;
$column_width: 5.125%;
$grid_width: ((($column_width+($gutter_width))*$columns)-$gutter_width);
@function column_width($num) {
@return ($num * $column_width) + (($num - 1) * ($gutter_width));
}
And then we can apply column attributes with the following mixin:
@mixin column($num) {
display: inline;
.lt-ie8 & {
display: block;
margin-right: $gutter_width - 0.25%;
}
float: left;
width: column_width($num);
margin-right: $gutter_width;
margin-left: 0;
}
So now we can simply apply column widths to containing elements. We can have a 2-column layout by giving each item:
@include column(6);
Or a 3-column layout using:
@include column(4);
Or a 4-column layout using:
@include column(3);
We can then nest layouts inside each other with no conflicts, because everything works on percentages. A good example of this would be the exhibits page, which is using an unequal 2-column layout for the sidebar and main content areas, and a 3-column layout for the exhibits grid that is nested within the main content area (at its widest display size, of course).
The only hitch here is that we need to know which column is last, and apply a .last class to get rid of the right margin that produces the gutter. For that we made a few handy mixins that rely on the nth-child pseudo-selector to determine the last column:
@mixin last {
margin-right: 0;
.lt-ie8 &{
margin-right: 0;
}
}
@mixin last-col2 {
&:nth-child(n) {
margin-right: $gutter-width;
.lt-ie8 &{
margin-right: $gutter_width - 0.25%;
}
float: left;
clear: none;
}
&:nth-child(2n+2) {
@include last;
float: right;
}
&:nth-child(2n+3) {
clear: both;
}
}
@mixin last-col3 {
&:nth-child(n) {
margin-right: $gutter-width;
.lt-ie8 &{
margin-right: $gutter_width - 0.25%;
}
float: left;
clear: none;
}
&:nth-child(3n+3) {
@include last;
float: right;
}
&:nth-child(3n+4) {
clear: both;
}
}
You’ll notice that there’s a bit of CSS resetting the grid properties at the beginning of each mixin. This is because these are often used in a cascading fashion at various media query-implemented break points. So at one width we might be applying a 2-column grid, and at a larger size switch to a 3-column grid. Since we don’t want their effects to stack, we have to clear the slate first.
There’s a lot more that could be written about this site, but these are certainly my favorite parts. Any questions, send them my way.
It’s also important to acknowledge the efforts of all the people on this project team. Much of the design and front-end development of this project were executed by Matt Braun and myself, but it bears mentioning that the truly heroic efforts by Brett Bender belong in a category all their own. Despite their other project obligations, Michael Hellein got us out of a couple of jams, and Dominic Dagradi occasionally lent us his keen eyes and brains, to great effect. The unflappable Lauren Fries ably managed the project. Patrick Fulton joined Bearded just in time for the final weeks, and before that he gave some valuable weekends over to front-end development work. Val Head and Mark Frey contributed valuable thoughts and labor throughout the last few months. And at the Children’s Museum, we were lucky to have Suzanne McCaffrey and Kana Otaki as our primary contacts – they worked as hard as any of us getting this site off the ground. Thanks to all of you fine people. You done good.
-MG
