Exercise 14: Responsive Design

Download Exercise 14

Update: a solution is now included with the files.

Open page outline.txt, index.html, and style.css and examine the code to see how the basic structure is set up. As you review the CSS file, note the three canonical features of a “responsive design”:

1. The main container (#container) is only restricted by a max-width property, meaning it can contract to a smaller width when the browser window gets skinnier than 1200px.
2. Images on the page do not have width and height attributes. Instead, CSS is used (max-width:100%) to allow them to scale down with their container. Using max-width instead of width ensures that the images will never be scaled up and get pixellated.
3. Finally there are two media queries set up to detect when the browser becomes “medium-wide” (600 – 999px) and “wide” (1000px – 1200px). These contain distinct rules that supplement or override the primary rules above them in the stylesheet.

Your task is to find all the instances of PERCENT and choose replace them with actual percentage values that will make the page lay out differently for medium and wide screens. The medium layout should use two columns, while the wide column should use three.

Further Reading

• Responsive Web Design, Ethan Marcotte’s article that kicked the movement off.
• Responsive Web Design, Ethan Marcotte’s book. $9 for the ebook.
• Media Queri.es, a website showcasing sites built with responsive designs.
• Mobile First, Luke Wroblewski’s manifesto that we should build our sites to work well on mobile platforms first, then progressively enhance them to work on desktop browsers.