Building Responsive Websites

(A.k.a. CSCI-GA.3033-011)
Spring 2013
Class: Wednesday 5:00 – 6:50, WWH 312
Instructor: Robert Grimm

Introduction

Mobile devices are fast becoming a fact of life. According to StatCounter, mobile browser share increased from 6.74% of all web traffic in September 2011 to 12.03% in September 2012. As a direct result, web sites need to support a large range of access modalities:

Screen Size
From smartphones to tablets to laptops to desktops, screen sizes differ significantly, ranging from 240 by 320 pixels on a subpar phone to 2,560 by 1,440 pixels on a 27″ desktop display.
Screen Density
While most desktop monitors have one device pixel per logical pixel, many smartphones and tablets have more. For example, the iPhone and iPad have two device pixels per logical pixel in both dimensions.
User Interaction
Laptops and desktops largely rely on traditional pointing devices, such as mice and trackpads. But most mobile devices have touchscreens. Consequently, they make it impossible to “hover” over content with the cursor.
Network Connectivity
Common networking technologies include wired ethernet, wifi, and cellular data. Bandwidth and latency vary widely, but are especially limited for second and third generation cellular data networks.

This course explores the design and implementation of websites that gracefully support all these access modalities. It focuses on how to (1) organize content, (2) mark it up in HTML, (3) style it in CSS, and (4) add dynamic behavior with JavaScript — all with an emphasis on supporting the full range of computing devices. The key enabling technology is the CSS media query, which facilitates different presentation of the same HTML content for different devices.

Organization

“Building Responsive Websites” is structured as a project course. The entire class, together, designs and implements a production-quality responsive website. In particular, we rebuild the department's (rather outdated) website. The department has agreed to seriously consider the result as a replacement for the current website.

This course structure has two important consequences:

Since this course emphasizes production-quality web development, it does not provide a gentle introduction to HTML, CSS, or JavaScript. Students are expected to have prior exposure to these technologies.

Textbook

There is no textbook for this class. However, I do recommend Responsive Web Design by Ethan Marcotte as supplemental reading. Registered students receive a discount code in class.

Class Notes

To reflect the spoken discussion, each class has a student scribe. Please use this template to write up the class notes (in HTML, of course) and email them to me by the following Friday (i.e., two days later).

Mailing List

The home page for the class mailing list is here.

Grades

Each student is graded on the quality of his or her contribution to the overall project. A letter grade of “A” requires a substantial contribution to the project as well as active participation in all aspects of the class.

Tasks & Teams

As a starting point, the project can be broken down into the following major tasks. Each task is addressed by a dedicated team of two to four students.

Organization
The organization team determines the overall structure of the website. This includes making the website easy to navigate when browsing, but also making it easy to find specific content (arguably a significant short-coming of the current website).
Markup
The markup team determines the basic HTML markup of the website. It identifies elements shared between pages, such as navigation, and conventions for encoding key types of content, such as news or course information.
Search Engine Optimization
The SEO team determines how to mark up embedded information, such as people's addresses, and how to annotate content with meta-data, such as keywords. That way, automatic tools, such as search engines, can easily extract relevant information.
Layout
The layout team develops the CSS rules for representing markup. It focuses on providing a responsive grid, which allows for horizontal stacking on large screens and vertical stacking on small screens.
Styling
The styling team develops the CSS rules for individual elements as well as for different classes of the same element. For example, a definition list (<dl>) may encode a list of terms and their explanations (this section) or a schedule (next section). Both have the same basic markup yet have different presentation.
Dynamic Behavior
The dynamic behavior team adds interactivity through JavaScript. Notably, this includes supporting dynamic menus and low-resolution images on small devices. The former enable effective navigation, while the latter improve performance.
Database Integration
The database integration team integrates with existing departmental databases, developing scripts to convert relational content into HTML markup. It directly interacts with the current website's developers.
Infrastructure & Testing
The infrastructure & testing team is responsible for developing the software infrastructure for the website, notably content generation scripts. It also ensures that the website works across popular desktop browsers (Chrome, Firefox, Internet Explorer, and Safari) as well as mobile browsers (Android and iOS).
Documentation
The documentation team is responsible for documenting all aspects of the project. It has two distinct constituencies: (1) developers, who build and maintain the website, and (2) authors, who add and modify content.

Schedule

The schedule is subject to (frequent) change. Classes early in the term are lecture-style and introduce techniques for building responsive websites. Classes later in the term serve as project meetings.

Jan 30
  • Introduction to this course. Slides.
  • Overview of existing website by Daniel Tsadok. Slides.
Feb 6
  • An introduction to HTML and CSS; units of measurement; the vertical rhythm. Notes.
  • Brainstorming: Content and organization of the new site.
Feb 13
  • Getting started with SCSS. Notes.
  • The brainstorm continues: Content and organization of the new site. Proposal.
Feb 20
  • Responsive layout with media queries. Notes.
  • The brainstorm goes further: Content and organization of the new site. Another proposal.
Feb 27
Mar 6
  • Dynamic behaviors with CSS transitions.
  • Browser compatibility.
  • Notes.
Mar 13
Review of mock-ups: #1 and #2, also #3 and #4.
Mar 20
Spring Break — No class.
Mar 27
  • Metadata.
  • Let’s start building: Dividing up the work.
Apr 3
Responsive images.
Apr 10
Project meeting. George's notes on using git.
Apr 17
Project meeting.
Apr 24
Project meeting.
May 1
Project meeting.
May 8
Project meeting.
May 14
Spring Showcase. WWH 13th Floor Commons. 5pm–8pm.

Resources