Tag Archives: responsive

Featured Works from WWI Exhibition

It’s finally here! We have officially launched the mobile-optimized highlights “tour” for the new World War I exhibition opening next week!

Featured Works of WWI Exhibition at the Getty Research Institute (a.k.a. the one I’ve been slaving on)
World War I: War of Images, Images of War (a.k.a. the official exhibition website, which I did not work on but which my awesome colleagues built)

Screencap from Featured Works of the WWI Exhibition
Screencap from Featured Works of the WWI Exhibition
I have learned so much on this project, about Foundation 5 and responsive design, and about customizing sharing options for the most popular social media communities. I was lucky to work with great people from the GRI, and with a beautiful design from one of our talented Museum designers, and I’m so glad we finished it on schedule. I’m still sad we had to lose some of the features from the earliest iterations of the project, but the skills I’ve learned on our little mobile tour means that next time I can spend time on building more complex interfaces.

Congrats to my team Liz, Alicia, and Cathy, and to the early architects, Annelisa and Molly! We all rock!

vw and vh

I’ve been a bit lukewarm on my current project at work. The original concept had a lot of cool features that were slowly picked out over the past couple of months, for various reasons. It’s still very pretty, but I wish it did more.

However, cool things still keep popping up unexpectedly, as I try to make the interface do what the designer wants, and the latest very cool thing was learning about the viewport metrics vw (viewport width) and vh (viewport height).

These marvelous little CSS3 measuring units use a percentage of the size of the user’s screen *window* (whether it be mobile, tablet, or desktop, full screen or not) to scale font size, padding, margins, widths, heights, wherever the hell you would otherwise use em, px, or %. IT IS SO FREAKIN’ AWESOME.

I’ve seen some articles where developers are unsure of the usefulness of this, but it was a lifesaver for me. My project’s homepage is a grid of fifteen numbers that fills the entire screen, and the designer wanted each digit to always fill the space of its containing square. % and em weren’t cutting it, and @media calls were too jumpy. I really didn’t want to use images if I could help it. Enter vw and vh. Now the digits scale dynamically with the resizing of the window, and it’s AMAZING. I showed it to a developer colleague, and we both stood there watching in awe as I resized the window up and down and the digits changed accordingly. So beautiful.

Check it out for yourself at css-tricks.com.

I’m always surprised when I find new things in CSS–it’s so easy to think I know it all, yet so exciting when I learn that I really, really don’t. Thank you, vw and vh, for making last week a most excellent week.