Responsive Websites

Novelty Requirement

Responsive websites respond

• Screen Size
• Device Orientation
• Medium

Not just shrinking and stacking

• Font sizes

• Images
• background colors
• content order / prominence

Two responsive css paradigms:

Mobile First

Desktop First

Mobile First

program your application to work by default on a phone, then add media queries to enhance for larger screens

Some steps & tips

• Responsive meta tag
• fluid widths
• flexbox containers

Test with you screen larger and larger until

something looks weird. Slightly before that point,

add a media query to avoid the problem

Resources

• https://developers.google.com/web/fundamentals/design-and-ui/responsive/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://bradfrost.github.io/this-is-responsive/patterns.html
• https://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

Live code a thing