Comm 328 Responsive Web Design


  1. Overview
  2. Requirements
  3. Example Websites
  4. Deadlines
  5. Grading Rubric


Your midterm project should be an informational website or web page on a topic of your choosing. You can think of this in terms of an infographic data visualization however keep in mind that your project should still function as a web page or site. There should be links as well as accessible text done in html. It is important to note that although the project is in the style of an infographic, it should not be on large graphic, rather an informational website.

You should fully cover your topic using cohesive data (text and statistics as appropriate to your topic). You should use graphics and charts to highlight points and assist in visualization get your topic. You may also want to incorporate small amounts of animation or multimedia elements. You will have to do some research for this project. All data and information should include links to your sources.

The website should be fully responsive. There is no specific requirement on the number of breakpoints, but the site should work from the iPhone 5 size up to the width of the classroom iMacs (1920px wide). This also includes all sizes in between. Make sure your site design works at each size.

Each of the two following examples demonstrate the kind of design I'm looking for. They both incorporate data and visuals to tell a story. Each page is a fully functioning responsive web page as well. Notice how the text and graphics of each site lead you through a story.

The following site is much more graphical, but still uses HTML text and functions as a longer single page website.

The key part of this project is to think about how you can tell a story (again) with both words and images. This time there should be more focus on data.


Your site should include the following:

  • Enough content to cover your topic - The first three examples below are the approximate length I'm looking for
  • Citations for all data points - You may include sources below data or use some sort of foot note system with data at the bottom. Links to the site and site name or similar are sufficient for this project.
  • All text should be represented in HTML (and therefor accessible)
  • All text should be proofed and free of typos and misspellings
  • Responsive design that works in the range from mobile (ex: iPhone 5) to desktop (full screen on classroom iMac)
  • Some sort of navigation to move between sections of your page or site
  • A colophon in your footer explaining who you are and the purpose of the site
  • Some incorporation of responsive image techniques
  • Valid HTML

Example Websites

Below are several examples that demonstrate the type of page I'm expecting. I think that you will be able to achieve something in this realm.

This one is actually not responsive at all, but you should look at it anyway because it's awesome.


Here are some resources you might find helpful:

SVG Information

Charts and Graphs: JS Libraries

CSS and SVG Animation


Description Due Date
Topic Selected 3/2
Written Content Complete 3/16
Detailed sketches at three sizes 3/23
First prototype of site complete 3/30
Final prototype of site complete 4/6
Final project due 4/13

Grading Rubric

Description Points
  • Data used tells a comprehensive and cohesive story
  • Accurate content
  • Citations used for all data
  • Site free of typos, misspellings and other grammatical mistakes
  • Site includes colophon
  • Selection of typefaces
  • Appropriate use of graphics to illustrate project
  • Appropriate and aesthetically appealing use of colors. Should also ensure that text is alway legible.
  • Proper use of headings
  • Site design leads you through story of your project
Markup and Implementation
  • Site works at all required sizes
  • Valid HTML
  • Working Navigation
  • All text in HTML (not images)
  • Some use of responsive image techniques (SVG, CSS Media Queries, srcset, etc)
Midterm Project Page
Completed project page on your class website that outlines all aspects of your projects. It should include working links to the following items:
  • Topic paragraph (1)
  • Content outline or text (can be either in HTML or a linked document) (1)
  • Links to your sources (1)
  • Links to sites you used for inspiration (1)
  • 3 Sketches (2)
  • Link to your first version of your project (2)
  • Link to final version of project (2)