Portland Community College | Portland, Oregon Portland Community College

Homepage photo collage

The very top of the homepage has an animated photo collage, overlaid with an intro blurb and apply button. The goal is to give a quick intro to PCC through imagery, to show that PCC will meet people where they are (that they belong), and to give people a chance to apply if that is their goal.

Guidelines

The homepage committee will have a quarterly review of the collage images, and choose new images as needed. Images should:

  • Be fun and inviting.
  • Show a variety of subject matter (campuses, people, activities, etc.) with equal representation for all four campuses.
  • Include at least one image of Poppie the Panther.
  • Accurately represent our college community.
  • Be high quality and use a variety of colors and compositions.
  • Show timely and seasonal imagery if possible.
  • Avoid triggering topics and stock photography.

Styling

Collage: The collage has columns of images that scroll at slightly different speeds, encouraging people to wait and see the rest of the images. The images themselves show campuses, people, and activities to help paint a general picture of what PCC is like. The collage has a slight dark overlay to make it less overwhelming behind the intro text and button.

Animation: The animation includes a pause button for those that need less motion. If you pause the animation, the images stop moving. If you then play the animation, the collage fades out and back in to prevent flashing images.

Intro text and apply button: The intro text is large and eye-catching. Both sentences should fit on one line on standard desktop screens. The button is green to draw attention to it and set it apart from the other buttons on the page.

Responsive behavior

On large screens there are four columns of images, on medium screens there are three columns, and on small screens there are two columns.

Development info
  • Stylesheet location: /_source/styles/homepage/_photo-collage.scss
  • Images: Strips of images that scroll together, reducing the total number of images the page has to load.
  • The individual images don’t have alt text. Instead, the entire photo collage has a general description of what the images are supposed to convey: “Collage of photos from all around the college. Includes images of architecture, student groups, and events.”
  • Intro text and apply link: Hardcoded on the page.

Homepage photo collage examples

Desktop view

Photo collage: desktop

Tablet view

Photo collage: tablet

Phone view

Photo collage: phone

Animation

Photo collage: photo scrolling and pause/play animation