Responsive website

Read through the deck Making Layouts Responsive.

Then, make a website that changes its form and/or content at at least five breakpoints. You could start with these common breakpoints, or make up your own:

  • 320
  • 480
  • 600
  • 768

Your website can contain any kind of content. You could opt to start with an item from your top 10 as the subject, or continue working on one of the sketches you've already made. The website could be a self-contained responsive website experiment. Post the exercise to your class homepage when you’re done.

Some background

Media queries are a type of CSS that allow content to adapt to various conditions. They are a fundamental technology of responsive web design! It’s not good practice to target specific devices since new devices are being invented all the time. Instead, it is better (and more future-proof) to target specific numerical breakpoints.

Make sure to include this link in the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Try opening the following examples and resize your window:
jsfiddle.net/wruef46x — changing background color
jsfiddle.net/bf6Loasj — nav position change for mobile

Here's more on Media Queries from Shay Howe.