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.

–lori

We Have Liftoff!

The launch of the new Rochester homepage went off without a hitch early yesterday morning, and the new design is now live for the world to see.

This is all very exciting, after about 14 months of planning, discussion, and good old fashioned work. Of course, the Web being the Web, there is always something new to do or something to change or fix. The old design was nearly five years old, and anytime something we’re familiar with changes there can be a little awkwardness or adjustment needed as we get comfortable with something new. We’ll continue to use this blog to share our thoughts about new ideas or changes as they come along.

Speaking of this blog, I owe you some more posts regarding the changes we made during the six-week beta period. The most obvious of these changes involves the homepage photography.

Originally, the entire photo served as a link. When you hovered your mouse anywhere over the photo, you got a little caption telling you more about that photo. And if you clicked anywhere on the photo, you went to an “About the Photos” page. This was a neat idea, except for the fact that it was very easy to unintentionally click on the photo and then get whisked off to some page with no idea why.

So on the new site, the “About the Photo” information can be found by hovering over the little camera icon at the top of the page. Ya see it? We’ve intentionally made it rather subtle so that it’s almost like a hidden Easter egg: if you spot it, it’s a fun little bonus discovery and it doesn’t overpower the page.

We’ve also included a five-star rating system of the photos, so feel free to vote for your favorites. The plan is that during the course of the year we’ll continue to freshen up these photos to show off the beauty of our campuses as the seasons pass or to highlight events throughout the year.

From the tuckered out but happy Web team, that’s all for now. Please take a moment to explore the new homepage and keep letting us know what you think.

–loriÂÂ

Beta Photography

Here at Redesign Central, we’re getting ready to launch the beta version of the new homepage redesign. The beta should be live next week, and we’re excited to see the site holds up “out in the wild,” as it were.

In the meantime, as a bit of an appetizer, here’s the collection of homepage photos that will be included in the beta release.

homepage photo collection

–lori

Fixed or Liquid – A Solution

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.

Combining CSS (with many thanks to Noah at the Eastman School for his help) with the Javascript that rotates the images on refresh, we now have a gallery of homepage photos that automatically rescale to accommodate the user’s browser and screen configurations.

Check it out.

–lori.

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.

–lori