Responsive Design Plus

Due: 23 June 2015, 12:00pm
Turn it in
HER L210 | Summer 2015
Instructor: Aaron Ganci


Responsive web design—the concept of adapting a web page’s layout based on the screen size—has become a best practice in modern web design. In the coming year, we will be able to use a wide variety of other data to inform how a design should reformat. We could potentially use any data that we can sense about a person’s context (location, weather, time, stress-level, etc).

In this project, you will design a webpage the reformats based on two different contexts. I suggest you use standard, desktop view as one of your contexts. The other, probably a mobile context (either phone or tablet-sized) should be reformatted based on two factors (screen size + one other data point).

Learning Objectives

At the end of this project, students will be able to:

  • Understand the concept of Responsive Web Design and its impact on the web design industry.
  • Define user needs for distinct contexts.
  • Organize and present one set of content for two distinct contexts.


  1. Define a site and contexts. (I suggest you think about organizations or places where you do some planning ahead of time and then go somewhere for an event (movie theater, sporting event, shopping, etc))
  2. Define user stories and workflow.
  3. Define full set of content and prioritize for both contexts.
  4. Design the webpages for both contexts.

Grading criteria

  • Appropriate use of elements and principles of design.
  • Appropriate use of web design layout conventions for each context.
  • Clear hierarchy of content that is usable and legible.
  • Novel use of responsive web design to adapt the site for two contexts.


Week Class Topic
1 14 May Intro to course. Getting familiar with visual language of the web.
2 19 May One site, two designs
21 May Analog + Digital
3 26 May Analog + Digital
28 May Connecting people online
4 2 June Connecting people online
4 June Connecting people online
5 9 June Responsive Design Plus
11 June Responsive Design Plus
6 16 June Responsive Design Plus
18 June Responsive Design Plus
7 23 June Final Critique
24 June Summer Session 1 courses officially over.


Your grade will be broken down into the categories below*. Participation includes: being present and on time, asking and answering questions, helping to improve understanding of course content for others. Your full attention is expected during class time.

Category % of total
One site, two designs 10%
Analog + Digital 20%
Connecting People Online 30%
Responsive Design Plus 40%

*Categories and percentage breakdown subject to change.

How Attendance might impact your grade

It is important that you are present for class. Excused absences (course conflicts, illness, death in the family, etc.) will be allowed with documentation. You have two unexcused absences in this course. Every absence after two (starting with the third absence) will result in a 5% reduction in your overall grade. For example, if you miss 3 classes, you will receive a 5% reduction; if you miss 5 classes, you will receive a 15% reduction. I hope that this policy stresses the importance of being present and active in class.

Late work

Every assignment in this course will be due at the beginning of the class of its defined due date. Work that is not handed in via the method requested by the instructor (OnCourse, email, etc) by the predetermined time will be considered late. The consequences of late submission fall on sliding scale, increasing in severity over time. If late work is handed in within the following parameters, the grade will be reduced in the following ways:

Due date/time – same day, end of class -10%
Same day, end of class – same day, end of day (11:59pm) -15%
Next day (midnight – 11:59pm) -20%
Any subsequent day -50%
Grading scale
A+ 100-98
A 97-93
A- 92-90
B+ 89-87
B 86-83
B- 82-80
C+ 79-77
C 76-73
C- 72-70
D+ 69-67
D 66-63
D- 62-60
F 59-0