Finalist 1: Photomosaic
Homepage content strategy
This document will describe our recommended approach to homepage feature graphics. Although this document is written specifically as a complement to Photomosaic, our top finalist, the recommendations herein aren't necessarily limited to that particular choice of a site design. There are some Photomosaic-specific options here, but the general principles will apply to any design that incorporates a feature graphic.
What is a feature graphic?
A feature graphic is typically a bold lead image on a Web site's homepage, typically incorporating both image and text in some way: either introducing a news story or otherwise setting a scene in some way. It provides a very clearly defined center of attention. Homepages built around feature graphics very rarely suffer from the "I don't know where to look" problem.
Many recent .edu redesigns incorporate this concept, but deliver it using Flash, creating features with lots of interactivity and clickability. Obviously Flash is a very powerful way to deliver content, and when done well (as on, say, the Boston University site) it can be very compelling. Nothing in what we're proposing here rules out using Flash. However, we are working with some assumptions about how much feature content Kenyon will want to manage at any given time; we are expressly avoiding any recommendations that would turn the homepage into a rich content channel that would require care and feeding. (We imagine the BU homepage, as well as Notre Dame and other interactive homepages, must be a chore to keep filled with fresh content.) Unless Kenyon plans to add homepage-dedicated staff, we're recommending keeping the volume fairly low.
Photomosaic homepage features
There are two types of homepage content presentations under the Photomosaic plan:
- Feature story (as illustrated in the From Gambier to London and Open All Night variants): one single image, potentially divided into sections, with a semitransparent checkerboard overlay.
- Full mosaic (as illustrated in the basic design presentation): a 9x3 grid of square photographs.
We shouldn't combine these two approaches, although it's theoretically possible. They would be best served by entirely separate technological approaches to presenting content:
For feature stories , Kenyon staff will create a single feature graphic, using one of several Photoshop templates that White Whale will provide.
- Each of these templates will contain a couple of different versions of the semitransparent checkerboard overlay, so each graphic can have a fresh overlay pattern.
- We'll provide templates for the full panel story seen in From Gambier to London, and three-panel stories as seen in Open All Night. Other layouts may be possible; we'll investigate and provide templates if appropriate. All layout possibilities for these graphics should come from White Whale.
- Presumably Kenyon will want to link to more than one place in a feature, so we'll want to incorporate an image map.
- Conversely, it may be possible to use actual HTML text on top of an image. Rebecca might like that approach better, but it does introduce some uncertainty in presentation that we'd want to be careful about (text being resizable and dependent on user font selections). At any rate, we'd want to include any text used on an image in an alt-tag for accessibility purposes.
Full mosaics should be created "at random" when a visitor hits the homepage. As indicated by those quotation marks, the placement and selection of photos can be as random or as micromanaged as you like. We can create a homepage management tool allowing you to manage those, or let you and your staff make the page manually. Again, there are plenty of options for how those photos might be managed.
- It may be smart to only shuffle the photos once, the first time a visitor hits the homepage, and then keep the same selection and placement of photos when they return throughout the length of a Web session. We can test this in practice.
- There should be some interactivity to full mosaics. For example, thumbnails may highlight when moused over, and enlarge upon click. Should they have a caption when enlarged? Should they have a mosaic overlay? These are the kinds of questions we'll look at going forward.
Photomosaic and homepage width
The mockup we've presented for this design uses a 9x3 grid of 100-pixel squares. For production purposes, we recommend enlarging the square's dimensions to 108 pixels (an inch and a half, in relative terms) and fixing the width of the homepage at 972 pixels. This gives us a broad, compelling content presentation at today's roomy monitor resolutions.
We'd let the actual homepage content— the stuff above and below the mosaic— contract to be fully visible at 770 pixels wide, or even less, depending on the content to be presented there. As a result, we'd probably recommend that on feature story approaches, text overlays be kept on the left 600px or so of the image.
What this all adds up to is that with the fixed-width homepage we're recommending, there actually won't be a perceptible loss for users with smaller monitors (except perhaps in the details of the aesthetics of the mosaic's presentation; in the Open All Night version, someone with an 800x600 monitor wouldn't see the saxophone player).
Homepage feature graphic scheduling
Feature stories ideally should be schedulable in advance.
There should be no more than one homepage feature story showing on the Kenyon homepage per day, period. We can discuss this; but based on our experience, this stringent rule will make life easier for everyone.
It is possible to alternate a feature story and a full mosaic on the Photomosaic homepage. In fact, we recommend it; the mosaics will give visual context to the checkerboard visual approach of the feature stories. But we don't think multiple feature stories should rotate.
The homepage feature does not have to be unique every day, by any means. If a useful feature story is developed, it can sit on the homepage for as long as it's useful. As a general rule, we think the homepage feature ought to change at least once per week. Certain types of feature stories (see below) can be recycled, repeated occasionally. At any given time, we believe Kenyon ought to maintain a reserve of 5-10 stories that aren't connected to timely news or events, that can be used when no other features are available. During periods of slow news (the summer, for example) there's nothing wrong with running only mosaics, but it would be preferable to have evergreen features that can be used.
A great source of content for homepage features, we feel, is the Bulletin. We think several recent Bulletin cover stories could be converted into homepage features and reused whenever needed.
We also believe Kenyon could ask its print designers to prepare a properly formatted JPEG image for a home page feature anytime they design a significant print piece.
Feature graphic content guidelines
What do features do?
- Drive traffic to areas needing increased exposure
- Take care of stakeholders with reasonable needs
- Engage the community
- Show off Kenyon to the public
Feature graphic do's (of course, pending discussion):
- Shots of students, campus buildings, and campus greenery: every homepage feature graphic ought to have at least one of these, and ideally two
- Wit, tag lines, and catchy copywriting
- Lead headlines of no more than 5 words
- Followup body text of no more than 10-15 words
- OK to match campus photos with only tangentially related news items (for example, a story on financial aid paired with a shot of old buildings)
Feature graphic dont's (of course, pending discussion):
- Upcoming event announcements
- Stories specifically targeted to internal audiences
- Direct references to the campaign
- Anything driven by a single stakeholder; feature ideas should come from Public Affairs or groups of students and stakeholders (with the obvious possible exception of the president)
Types of feature graphics
1. News items
News items should ONLY be made into features if they come with compelling photos or can be matched with related campus photos.
Some hypothetical examples:
| Feature topic | Photo description |
|---|---|
| A grant in support of the sciences | A photo of a science building OR three nice science-related shots that include students or the science building |
| Toni Morrison lecture | A photo from the event OR one photo of Morrison plus writing-related campus shots |
| An alumni art exhibit | Three details from artworks OR combo of artists's picture, gallery shot and an art detail |
2. Show off the Kenyon campus and Gambier
This goal will be best achieved with first person student and staff content. This can mean photo galleries (with Open All Night working as an example), student blogs, and other direct accounts of life at Kenyon. Some imaginary examples, in this case with mockup headlines:
| Feature topic | Photo description |
|---|---|
| Inside Ascension Peek into the dark corners of one of Kenyon's oldest buildings |
Single photo of Ascension or three shots from a gallery |
Fall Comes to Gambier |
Three fall-related photos, one glorious fall beauty shot, or a full mosaic of all fall-related photos |
| Lost Highway Four Kenyon students cruise one of Ohio's oldest roads |
A group photo by a road sign, or three shots from a road trip photo gallery |
3. Highlight institutional priorities
Schools always have particular areas of interest that they're looking to highlight at a given time. While we don't want this to be too transparent (we wouldn't recommend "Diversity at Kenyon" for a feature headline), there are a few approaches to highlighting priorities that can feel authentic and engaging.
a) Turn priorities into news items.
| Feature topic | Photo description |
|---|---|
| A New Home for the Arts at Kenyon (feature on the new art history / studio art facilities) |
Blueprints and renderings combined with shots of student artists and/or other Kenyon spaces |
b) Turn priorities into Big Questions
| Feature topic | Photo description |
|---|---|
| How Much Should Kenyon Cost? Kenyon considers a new way of delivering financial aid |
Students and campus shots |
c) Find student-driven angles
| Feature topic | Photo description |
|---|---|
| Scholarships Fund Student Journeys (human-interest feature on students benefiting from financial aid; links to student blog or other student driven content) |
Shots of the students in question, combined with bold campus shots |