Portland Community College | Portland, Oregon

Updating the homepage

Way back on May 10, 2007, a meeting was held to discuss the evolution of the www.pcc.edu home page. From that meeting, that following top priorities were defined:

  1. Incorporate the tag line
  2. Define a place for promotional tie-ins
  3. Add "texture"
  4. (and if possible) Display the college's commitments
  5. Update text for navigational buttons

Site wide goals

When looking at a vision for the homepage, we should also consider the following site wide goals:

Center the content
In version V3 the content is stuck to the left side of the screen and flows outward into the page. This can make the page feel incomplete - as if we are hiding something beyond the left browser chrome. It also causes an awkward situation on very large monitors where a large amount of dark blue is concentrated on the right. It would be better to split the difference.
PieDesign for a larger monitor
Currently, the homepage is stuck at 800 pixels wide. However, our stats show that over the past year 94.20% of our visitors have a screen size of 1024x768 or greater.
Many other pages expand to over 1100 pixels. Imagine reading a book where the page size constantly changed...
For consistency, I suggest that we design for a 1024 width and make the content flexible down to at least 800. Minus the possible scroll bar and chrome that means a page from about 1000 to 750 pixels.
Clearly define the page sections
Many parts of the page seem to blend together. This might not be much of a problem, except that we often need to stuff a lot of information on each page. The following areas of the page could use more clear visual definition.
  • Main vs. Background - right now the page feels flat.
  • Content vs. Sidebar/header - The light gray works well with all different types of content, but on some monitors it barley shows up at all.
  • Content vs. Footer - The footer really just needs to be pulled out of the main content area.


The following are first drafts for Version 4.0 of the pcc.edu website. We will start at the end and work toward the Homepage:

V4 "Leaf Page"
These are the final landing pages that contain content. The lack of pages on the same level means that no sidebar it needed. Note the centered location, use of darker boarders, subtle gradients and removal of the footer from the main area.
V4 "Branch Page"
The same size as a leaf page, but now with a sidebar!
V4 "Homepage 1"
Incorporates the larger width, color and texture. Note how the tag line is used to frame a new section. Colors and textures may need more work.
V4 "Homepage 2"
Here the tag line has been promoted to the title area. Red frames the main feature as well as a promotional tie-in/secondary story area. News in orange. Limited commitments in blue (could instead be used for announcements).

But, won't this take a while?

Thanks for the great question! The coding and testing of this new version will be a lot of work. Even more work is required when you consider that this will effect all of the (almost 50,000) internal pages. Oh, and it has to be able to work with our content management system...

Interim V3 Homepage (view original mockup)
I propose that we make several simple updates to the current V3 homepage. The changes will add the tag line, and redefine an area for promotional tie-ins. This will be a jumping off point to the new version.