95 Scenes of Gilman Hall
My boss came to me last year and said my favorite uninformative phrase, “Someone needs a website.” Gilman Hall, our university’s iconic building, was finally reopening after a 2 year renovation and restoration process.
We tossed around a bunch of ideas, but I had just read Ethan Marcotte’s life-changing ALA article on Responsive Design and I knew I wanted to make this mini specialty site as responsive as possible. It had been 95 years since Gilman originally opened, so we decided to create 95 scenes featuring photos, videos, and sounds of the building and the people who helped shape it.
I immediately got to work on an idea for the layout of the site.
I mocked this up to demonstrate how the layout would work (big thanks to the Muppets—images were quickly pulled together from Google Images, for example only). In most standard sized browsers, the image grid would fill the screen like above. If your screen was bigger than 1500px, though, you’d see something a little different.
The grid stops expanding but keeps its shape. Up to now, this is all accomplished using flexible images1 and percentage widths for columns in the layout. But when the screen gets smaller, things start to get a little more magical. Using CSS3 media queries, I changed the percentages of the columns for smaller screens like, say, mobile2 screens.
I set up this layout in WordPress and we created a post for each scene, resulting in a flexible grid of images telling the story of Gilman Hall.
Each scene linked to a larger story, audio file, video, etc.
These inner pages were also adjusted, via CSS3 media queries, for smaller screens.
You can see the Gilman site live at http://krieger.jhu.edu/gilman.
If you’d like to check out the muppet-based prototype in the browser, you can see the demo here.
I’ve also been paying close attention to what Ethan Marcotte and the folks at Filament Group have been cooking up recently.
2 Media queries are fantastic… when they work. Unfortunately they don’t always work for mobile, especially if you care about more than the iPhone and iPad (and you probably should).
Bryan Rieger’s (Yiibu) slides on the subject are great, and suggest designing a mobile site first, using media queries to expand the layout for bigger browsers, most of which can handle media queries.