A few weeks ago, I described a problem we were having with the current homepage design. Namely, the large photos that provided the visual punch in the design were not being displayed to their best effect when viewed with various screen resolution settings or in various browser window widths.
This problem was hamstringing our photo choices so much that we began developing some fixed-width alternative designs in case we couldn’t come up with a solution.
I think we’ve come up with a solution.
Check it out.
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.
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.