Comm 328 Responsive Web Design

Week 5


HTML & CSS Layout

Class Exercises

Relevant Library Code


Read for week 6:

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.


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.

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.