Single Page Story

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

Overview

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:

• How to Design the Perfect Single Page Website

Navigation

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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
				<script src="https://github.com/kswedberg/jquery-smooth-scroll/blob/master/jquery.smooth-scroll.min.js"></script>
				<script>
				$('.smooth').on('click', function() {
				$.smoothScroll({
				    scrollElement: $('body'),
				    scrollTarget: '#' + this.id
				});
				return false;
				});
				</script>

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.

Requirements

• 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.

• ProPublica Summer Data Institute
• Dang & Blast
• Peter Tóth
• Fraud Force Summit 2015 Excellent example of conference website
• Ritchie Jacobs
• Fluff Festival
• Circles Conference
• Fox Den
• Garden A good example of sections. Also see how the design of each section adapts to different screen sizes
• Bear on a Unicycle Concept is right but don't use the code as an example. Uses fullpage.js to make each section appear as a full page
• Varsity Nice sections but way to long for not having a navigation. Probably too long period.
• Andrea Ballerino Good responsive portfolio site, but note how some of the text is much too small at small screen sizes
• Wild Only two sections, but a very nice example of keeping it simple and looking good
• Clientsy Basic one page product site. Pretty boilerplate stuff.

Not Responsive

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

• The coder Great example of distint sections
• Barrel and Barc Nice example of distint sections
• Franz Sans Sections

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.

Deadlines

Grading Rubric

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