Landscape Photography

CREATIVE BRIEF

Hover Effects / CSS Selectors / Alt Text / Responsive Layout

“Students will create a self-contained, single-page site that employs hover effects and CSS selectors to assist and encourage user interaction. Your site must include a minimum of 5 images (observing optimization and best practices) and all elements must contain adequate metadata/alt text. Your site must also account for viewport sizes to serve comparable or alternate user experiences.”

EFFECTS AND SELECTORS

Interactive Photographs

Around the time of this assignment, my photos app surfaced up some of my favorite landscape shots from New Mexico. I was inspired to search through my camera roll for the best landscape photos I have taken, and landed on these five - two from Philmont Scout Ranch in New Mexico, one from Breakneck Ridge in New York, one from Italy's Cinque Terre, and one from Jim Thorpe, Pennsylvania.

I used CSS selectors and hover effects to add interactive details to the gallery. On hovering over each photo, the location and date of capture is displayed in white, and the photo is blurred and desaturated to provide better contrast to the text.

METADATA

Alt Text

Each image includes descriptive alt text. Since many users who rely on alt text are visually impaired, I imbued my alt text with vivid sensory descriptions other than visuals, such as sound, feeling, and narrative.

ACCESSIBILITY

Responsive Layout

Using @media rules, I created a separate mobile layout. I changed the layout of the flex grid to place all images in one column, rather than separating them into two rows. I also ensured the hover effects worked by tapping them on mobile devices using the :active selector.