Modern Website Features

Question 1

Parallax effect

Answer 1

• elements moving at different rates to create the illusion of depth (3D)
• simplest is no movement on the background while the foreground moves w/ the scrolling
• background-attachment: fixed;

Question 2

Scrollfire

Answer 2

• elements transition in as user approaches them
• track section in navigation bar as you scroll
• start w/ ‘onscroll’ listener and retrieve scroll position in the event handler

Question 3

accessibility

Answer 3

allowing people w/ disabilities or impairments to use the website
- blind users depend on screen readers to read the content of websites aloud
- deaf users depend on text transcriptions of audio/video

Question 4

responsive

Answer 4

• display nicely on any platform, device, and screen size
• websites need to look good across all different screens and platforms

Question 5

enhanced parallax

Answer 5

• requires JS
• onscroll
• retrieve current scroll position in pixels using window.scrollY: value starts at 0 from the top and increases per pixel scrolled
• linear equation: y = mx+b (m and b are parameters)

Question 6

text content

Answer 6

• have no or minimal text in images
• screen readers read text but cannot read text inside images
• keep the text organized and use proper spelling and grammar (blind users)
• have fonts clear to read or an option to change font size

Question 7

Alt text (alternate text)

Answer 7

shows up when an image doesn’t load

Question 8

Clear colors

Answer 8

• color blindness
• use crisp colors w/ high contrast

Question 9

overlaid text

Answer 9

• text overlaid on an image must be entirely high contrast
• difficult when images have many varying colors/shades
• use outline or shadows or an intermediate colored panel to split the background and foreground