Introducing hero images and other options for images on your website

After collecting feedback on the header images for a year, we've decided to disable them on March 7 and opt for a smaller menu along the top of the page. This makes the main page content easier to see and access with less scrolling, matches the mobile experience more closely, and - let's be honest - finding quality images that worked in that area of our responsive design was difficult, and often resulted in awkward crops that covered or cut off people's faces.

So I believe getting rid of this aspect of the site design is a gain for both site authors and end users.

But getting rid of this striking visual element may leave a void on key pages. Many people looking at our site have never physically been to campus, and rely on images to get a sense of our location and community. To help fill that void, allow me to introduce "hero images."

An example of a hero image on the commencement website.

Powerful Images

Hero images are large, full-bleed images that appear at the top of a page just under the main menu bar. As the name implies, these are powerful images that make us proud and tell a story about who we are as a university. Not just any snapshot is up to the task of hero image - some pictures really aren't worth a thousand words. But the ones that are might make good hero images.

Hero images will work well on site homepages, as landing pages to market a special event, or alongside news or feature stories. They can include a headline, sub-headline and button.

Our beta tester group will have initial access to hero images on March 7, when the site header images go away. Additional web authors can be granted permission to add hero images to their sites by attending our Open Lab devoted to hero images on May 20.

Image Tools

But just because hero images are big and flashy, it doesn't mean you should use them all the time on every page. You already have a number of image tools with the standard permission set that may meet your and your users' needs even better than hero images. Here are a few examples of ways you can incorporate images on your site now:
An example of six images in a grid layout.

An example of an image as a sidebar

Think about how you can use columns to mix images and text together on the site, but always check to make sure that beautiful layout you've created on the desktop still works if a user is viewing the same web page on their phone. Are the columns stacking in the right order so that content is grouped in a way that makes sense?

Tips

Keep accessibility in mind when using images. Never post an image with text in it (i.e. an event flyer) and remember to include a description of the image.

And lastly, remember to check the photo pool at flickr.com/csumb when searching for images to use on your site.









Comments