Mobile devices are fast becoming a fact of life. According
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
This course explores the design and implementation of websites that
gracefully support all these access modalities. It focuses on how to
— 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
“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:
- To keep the project work manageable, enrollment is limited to a
maximum of 30 students and requires permission by the instructor.
- To enable adaption of the project result by the department, each
student agrees to assign copyright of created works to NYU.
Since this course emphasizes production-quality web development, it
does not provide a gentle introduction to HTML, CSS, or
There is no textbook for this class. However, I do
Web Design by Ethan
Marcotte as supplemental reading. Registered students receive a
discount code in class.
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)
them to me by the following Friday
(i.e., two days later).
The home page for the class mailing list
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.
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).
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
- 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.
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.
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
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
- 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).
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
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
- Jan 30
- Introduction to this
- Overview of existing website by Daniel
- 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.
- Feb 20
- Responsive layout with media
- The brainstorm goes further: Content and organization of the new site.
- Feb 27
- Mar 6
- Dynamic behaviors with CSS transitions.
- Browser compatibility.
- Mar 13
- Review of mock-ups: #1 and
#2, also #3
- Mar 20
- Spring Break — No class.
- Mar 27
- Let’s start building: Dividing up the work.
- Apr 3
- Apr 10
Project meeting. George's notes on using git.
- Apr 17
- Apr 24
- May 1
- May 8
- May 14
Spring Showcase. WWH 13th Floor Commons. 5pm–8pm.
- In general
- SCSS to write and compress
- CSSCSS to detect
as a consistent starting point (which is included in HTML5