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.
Original layout idea for the Gilman tribute 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.
When the screen is bigger than 1500px
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.
CSS3 media queries change the column widths for smaller 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.
1 Flexible images are a huge performance drain, especially on small screens where 1500px wide images are being shrunk to 300px. I’ve been playing with some JavaScript solutions to loading images based on resolution and bandwidth.
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.