Week 5

Notes

HTML & CSS Layout

• Media Queries

Class Exercises

• Media Queries
  • Media Query Exercise 1 (now with kittens!)
  • Media Query Exercise 2
• Print Stylesheets
  Click print and look at the print preview to see the effect of the stylesheet
  • Document without a print stylesheet
  • Document without a very simple print stylesheet

Relevant Library Code

• Viewport Tag
• box-sizing reset

Reading

Read for week 6:

• Multi-Device Layout Patterns
• Chapter 7 of Mobile First by Luke Wroblewski
• Use CSS media queries for responsiveness

Review Patterns from Brad Frost's Responsive Pattern Library for week 6:

• Spend some time looking at the Layout patterns. Focus on the Reflowing Layouts and Equal Width sections.

Homework

Simmons Academics Layout Exercise

Work through the layout exercise for the Simmons Academics page. Many of you have done much of this on your own. Please start a new version by downloading the attached files. This exercise will walk you through the steps in creating the page and hopefully also clear up some confusion on various parts.

• Simmons Academics Layout Exercise

Revise your story

Create sketches for the design of your single page website. Focus on how the website should look at three different screen sizes: small, medium and large. Think about how your design evolves from a vary narrow design to wider oen. What elements should change and how should the design open up? Don't get too bogged down if you don't know exactly how to accomplish your design. Focus on the content and design in your sketches.

Continue creating the design for your story at a the small screen size. Begin using media queries to adjust your layout at larger sizes.