Portland Community College | Portland, Oregon Portland Community College

Program homepages

Program homepages are similar to content pages but have a few required components.

Development info

Styling

Program homepages have several required components:

  1. Contact information or link to a contact page.
  2. A large hero image (see description of the types of images that should be used below).
  3. A table showing the degrees and certificates available and general information about them.
  4. List of locations with icons.
  5. Next steps info (how to apply to PCC and a link to the program application page when applicable, get more info links, related programs).
  6. Informational content: why study [program] at PCC, what will you learn, what will you do, sometimes who will hire you.
  7. Callout with links to class schedule and catalog.
Hero images
  • Must be horizontal (at least 1000×600)
  • Require signed media release forms from all identifiable students
  • Ideal photo content:
    • Shows PCC students actively engaged in the typical learning environment for the program
    • Allows prospective students to picture themselves in the program
    • Accurately represents our student population

Additional photos, such as student work samples, can be incorporated in other places in the program site.

Responsive behavior

Program homepages don’t change drastically on small screens. No content is hidden when the screen size decreases (this is true across the entire website).

Components
  1. header, global navigation
  2. site title
  3. content area
  4. degree, certificate, and transfer information
  5. action (what’s next) callout
    • usually includes program diamond
    • lists steps students need to take to get started in the program
  6. related programs callout
  7. sidebar navigation
    • links to the class schedule, catalog, and other links on the program’s website
    • some programs require a link to Gainful Employment information
  8. sidebar highlight callout (optional)
    • for testimonials or other highlighted information
  9. footer
  10. Other:
Desktop view

page type: program homepage desktop

Phone view

page type: program homepage phone