Screencap of Featured Works of the WWI Exhibition at the Getty

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!

mailto, Facebook, and all the other social networking shares

Did you know that you can use " in a mailto:?subject=, but not %22?* Well, now you do. That was an annoying little problem, although to be fair, not nearly as annoying as trying to figure out why I could make Facebook share the new pages, but no one else could. Thank the gods for stackoverflow, that’s where I find most of the answers to my many coding issues. In this case, it’s how I learned about the “Do you want to make this app and all its live features available to the general public?” button. Thanks for not including that in your Share tutorials, Facebook!

I have learned a heck of a lot–over more time than I thought it would take–about customizing share buttons for social networks. I’d like to thank Pinterest for being by far the easiest of them all, and I curse Google+ for being a thorn in all my sides (‘though Facebook was no picnic either). Despite my best efforts to control the information using schema.org and itemprops, Google+ still insists on pulling its share info from just the og:title tag, which is not nearly enough information for one tag. I hate you, Google+. Just want you to know that.

Soon I’ll be able to post a link to this project that has ruled my life for the past two months. I’m hoping it’ll be today, for Veterans Day. It would be especially fitting for a project called “World War I: War of Images, Images of War.”

[ *Edited to add: And it turns out %22 wasn’t the problem at all–apparently the combination of two quotes and a colon is what was flipping out the email share. Couldn’t find a combination that would work, so I had to nix the quotes in favor of the colon. So stupid. ]

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.

Me, myself and my work