Week 2 completion checklist

This week is the first part of a 2 part lecture on responsive design.

I've given you a document outlining the steps we'll complete this week while working on these lectures. We'll complete parts 1-4 this week, and parts 5-8 will be completed next week.

As always, I've provided you with starting state and ending state files for this week, which you are welcome to download and follow.

Videos

  • Part 1 is an overview of what responsive design is, and what it isn't. I also compare responsive design with separate mobile sites (called "m-dot" -- after the way some URLs start, m.cnn.com, for example) and with mobile apps.
  • Part 2 covers getting started with responsive design, including using the border box model, including the responsive design meta-tag, and linking to a normalization stylesheet. I also show you how to start by converting pixel-based measurements to ems.
  • Part 3 starts coding a 4-column, non-responsive grid system as a prototype.
  • Part 4 adds media queries to the grid system, making this responsive. 

Suggested homework

Each week, I'll suggest some additional activities you can work on individually. These activities will build towards an assignment, which you will be receiving shortly.

As always, you'll be building a website for each assignment. It's typically 2-3 pages in length, and it should include your own content. You may not use lorem ipsum or Wikipedia content in this course. I want you to get experience with writing your own web content and marking it up correctly and cleanly.

1. Start thinking about what that 2-3 page website will be about! (It's OK to use the same type of content you used in DGMD E-20, if you'd like to use it again here.)

2. Using pencil and paper, sketch out the layout of those web pages. Think about a grid system overlaid on top of that design. How many columns will you need?

Just because I discussed a 4 column grid system in the lecture does NOT mean you need to code a 4 column grid system too. You are welcome to code a 12 column system, or you could code a 6 column system, or anything else you'd like to try. 

It's easy enough to move from 4 columns to more than 4 columns. It's just math that's required to figure out the additional columns.

3. Build a prototype for your grid system, as we did in class. Test it at various resolutions, to make sure the design looks good (to you). You don't have to use the media queries I've provided. What's the right media queries for your project? Look at the lecture notes -- there are many examples of MQ's, as well as links to many online resources.