New Treatment for Homepage Photos

screenshot of homepage with News and Events boxscreenshot of homepage without News and Events boxThe photos on the homepage provide a concrete sense of what it’s like to be here at the University for those who are not physically here (prospective students, alumni, parents) and a current snapshot of the bustling life of this place for those of us who are here (current students, faculty, staff). To show them in their best light, we’ve made two changes to how the photos appear on the homepage.

1.) See the photo and only the photo. You can now click on the News & Events box to allow it to fade so that the photo can be seen with no impediment. The news box reappears when you refresh the page.

2.) “Lytebox” effect for all the homepage photos. When you view all the homepage photos, you can click on each thumbnail to see the much larger view of the same image.

We continue our tradition of experimenting with photography and how it can tell our stories over the Web.


Fixed or Liquid?

Thank you to everyone who’s commented on our design mock-ups so far. And my apologies for not posting these comments to the blog before today. WordPress was hoarding thm in a moderation queue without telling me, and when I discovered them sitting there this morning, it was like finding an extra pile of birthday presents you didn’t know were there!

Many of the comments so far are about the big photo on the homepage: some people love it, some think it’s — well — big. We do know one thing for certain: if we’re going to use photography to set the tone and express the character of the University via the homepage, we need to use very strong, very compelling photos.

And therein lies a problem. The homepage is designed with what’s known as a flexible or “liquid” layout. It’s this liquid layout that provides a lot of the punch of the page. The photo fills the screen all the way to the top, bottom, and left-hand side, and as your monitor and browser window get bigger, you see more of the photo. This is very cool.

There is a downside, though: what you gain in flexibility, you lose in control. For users with their screen resolutions set at 1024 X 768, the main horizontal menu crosses the picture at a different spot than it does for users with screen resolutions of 1280 X 1024 or 1440 X 900. Time and time again we found ourselves finding a really great photo to use in the homepage rotation, only to scrap it because the inability to predict exactly where the menu would hit for the most common screen resolutions meant that it could run under somone’s nose or across someone’s face. Furthermore, when users with bigger monitors see more of the photo, this means users with smaller monitors see less. Users with 1024 X 768 resolution settings (the most common setting we see, accounting for 40% of our traffic) could miss out on up to one-quarter of the image.

We are working on various solutions to this — including a Javascript that will point to a different collection of rotating images based on your browser window size — but another option that would give us the most control of where each element is positioned on the page is to go with a fixed width layout as opposed to a liquid design. Here are some screenshots of some fixed width ideas:

As in any design decision, there are tradeoffs. The fixed width design vastly expands the possible universe of homepage photos we could choose from; the liquid design requires us to choose photos that will work whether you are seeing all of them or some portion of them determined by your available broswer real estate. But with the fixed width design, we’re back to designing for a lowest-common denominator (this time 1024 X 768 instead of 800 X 600) rather than trying to take advantage of larger and newer devices in an interesting way.