Comm 328 Responsive Web Design

Single Page Story

  1. Overview
  2. Requirements
    1. Mobile First Approach
    2. Navigation
  3. Example Websites
  4. Deadlines
  5. Grading Rubric


For this project you will craft a short story about your choice of two themes:

  1. The Presidential primaries
  2. An analysis of the messaging of Beyoncé's new Formation video and her Super Bowl halftime performance

The exact subject of the story you create is up to you. It could range from an informational overview of a candidate of your choice, a comparison of multiple candidates or an overview of the race leading into super tuesday.

The final form of the story will be a single page website. Your story should contain at least 4 distinct sections or chunks of information. Each of these chunks will eventually function as a navigable section on your single page website. Each section should function almost as if it is its own web page.

Mobile First Approach

You webpage should be designed with a mobile first approach. This means that you will start conceptualizing your design at a small screen size and then work towards enhancing your design for larger screens.

Using media queries, you should create 3 separate breakpoints for your website. Each breakpoint should roughly correspond with a media device category: mobile, tablet, desktop. The exact dimensions of your breakpoints are up to you and should be chosen based on what your design necessitates.

Considerations for Single page sites:

Your page should include a responsive navigation. It should work at each of your breakpoints. What type of navigation you do is up to you. I suggest keeping it simple for this project. There should be a link back to the top from the bottom of the page.

Smooth Scrolling [optional]

If you want to look at enhancements for the navigation, consider incorporating a "smooth scroll" technique to scroll to each section of the page.

Below is a basic example of smooth scrolling from How to Make a Single Page Website. This is a lot like what we did in week 1 with the TextMate manual:

<script src=""></script>
				<script src=""></script>
				$('.smooth').on('click', function() {
				    scrollElement: $('body'),
				    scrollTarget: '#' +
				return false;

Scrollspy [optional]

You may also attempt some implementation of a "scrollspy". This is when you employ JavaScript to detect which section of the page you are on in order to highlight the navigation for that section. This is a commonly used feature included with the Bootstrap framework. You can try using this library, which is a stripped down version that does not depend on Bootstrap.


  • Original writing with accurate citations. All text should be proofed and free of typos and misspellings
  • At least 4 distinct sections
  • A design that displays and is easy to read on a mobile device
  • A design that works on mid-range size and larger size screens
  • 3 CSS breakpoints (the first is the base style without any media queries)
  • A responsive navigation system (using fragment identifiers)
  • Design and style sheets follow mobile first approach
  • Colophon (in footer)
  • Valid HTML

Example Single Page Websites

These are examples of responsive single page sites.

Not Responsive

These sites don't have responsive designs, but have other good features.

For more inspiration you can check out the website gallery One Page Love. Keep in mind however that a lot of single page website use sophisticated animation and parallax effects. Some of these are not going to be possible to accomplish without a substantial amount of JavaScript coding. Keep your design solid, simple and effective.


Description Due Date
Story and basic small screen design / code 2/17
Sketches for three sizes 2/24
Complete coding draft for 3 sizes ready for critique 3/2
Final project due 3/16

Grading Rubric

This project will count as a substantial project in your homework grade.

Description Points
HTML Validation 10
Mobile First Approach & Progressive Enhancement
Page demonstrates principles of mobile first progressive enhancement
Mobile Device Design
The site should be usable at a mobile device screen size. Use your phone as a test. Ensure that your type sizes are sufficiently large enough. Remember that many people (including your old professor) have trouble reading small font sizes.
Large Screen Designs
The site design accommodates both medium and large screens using media queries. Site also demonstrates an upper limit on page width to ensure readability is maintained.
Accurate and informative information. Includes proper citations