GD 66 Class 02 + 03

Class 02 Topics: What is Responsive Web Design (RWD)? The Flexible Grid, Media Queries, HTML 5 web page, Target audience: The User, Site Maps, Review Assignment 01.

Class 03 Topics: Responsive Web Design (RWD), File Organization review, FTP review (File Transfer Protocol), Design Process, Project Roles, Design Brief, Review Midterm Project, Quiz 1



  • Be sure to bring your assignments to class every week.
  • Smashing Conference: April 27-30. Receive a code for 25% off (with a copy of your student ID). That’s approximately $150 discount. See me for more details!

Class 02

Student WordPress Blogs

Please to check to make sure your WordPress blog is posted here. If not, please post the URL of your WordPress site the comments section below:

Midterm + Final Project

Responsive Restaurant website

Full details on the Midterm + Final Projects:

Example of a Responsive Restaurant website:


  • What questions need to be answered in order to complete this project?
  • What tasks do we need to complete in order to effectively design this website?
  • What issues need to be solved?
  • What is our schedule?

What is Responsive Web Design?

Resources: The Ultimate Responsive Web Design Beginners Resource List (lots of great stuff here)

What makes a Design Responsive?

Three ingredients:

1. flexible grids (widths in percentages, not pixels)
2. flexible images/media
3. media queries

The Flexible Grid

What is a Media Query?

“In CSS, web developers can define a media type such as screen or print, and specify the look of the content by specifying conditions such as width, height, or orientation. A media query combines a media type and a condition to specify how web content will appear on a particular receiving device. ” 1

A closer look at a Media Query

Media Queries are located in the CSS file styles.css

Every media query has two components:

  1. Media type: screen, print, all etc.
  2. Query (wrapped in parentheses) The query can be split into two components
    the name of a feature (min-width) and a corresponding value (1024px).

Intro to HTML 5

Great introduction to HTML5:


The new HTML5 elements are:

  • <header>: Used to contain the header of a site.
  • <footer>: Contains the footer of a site.
  • <nav>: Contains the navigation functionality for the page.
  • <article>: Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.
  • <section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.
  • <time>: Used for for marking up times and dates.
  • <aside>: Defines a block of content that is related to the main content around it, but not central to the flow of it.
  • <hgroup>: Used to wrap more than one heading if you only want it to count as a single heading in the page’s heading structure.
  • <figure> and <figcaption>: Used to encapsulate a figure as a single item, and contain a caption for the figure, respectively.

Target Audience: The User

Who is the target audience?

Great resource: Designing for your Target Audience

If you or your client have no idea who you’re designing for, you’re really taking a stab in the dark and hoping and praying you come up with something. There are times when you may have a wide variety of people in your audience, but you’ve got to find a commonality between the majority of folks.

Site Map

A site map is a high-level architectural blueprint of the site, it maps out the organization and labeling of major areas of the site. The figure below shows a site map for a redesign of the Santa Monica College website. Site maps are sometimes referred to as site diagrams.

Example of a Site Map


PDF of the Santa Monica College site map shown above.

How to Create a Site Map

There are several tools that can be used to create site maps. Visio and OmniGraffle are used by professional Information Architects and UX Designers. For this class, I suggest Illustrator, or Photoshop if you’re more familiar with it.

Download the site map template used in video here: Monday May Design Site Map

How to Create a Site Map in Illustrator

You may also find the following helpful:

Class 03

Midterm Project

Full details on the Midterm Project:

Quiz 1

Students are not allowed to take (or make up) any missed quizzes. Quizzes must be taken in class.

Click here to take Quiz 1

For your records, be sure to make a PDF (print a copy) of the Quiz 1 with any incorrect answers you may have had. Do this before you quit the browser or move away from the browser window!

File Transfer Protocol (FTP)

FTP (File Transfer Protocol) is used to upload files to a server. In our courses, we will use Cyberduck or  FileZilla (Mac/PC) to upload our files.

View your files here:

Username: smc_gd66
Password: WebDev4_Smc (case-sensitive)

Design Process

User Centered Design


Project Roles

Client Survey

Design Brief

Short Design Brief

  1. Objectives and Goals of the new design
  2. Target Audience
  3. Scope of the Project
  4. Overall Style/Look

Leave a comment