ahandrewh teaches IAT-339web design & development

P2: Company (due June 28)

This document is a draft

Until May 31As a result it may still change up until May 31.

Introduction

Continuing from P1: Process, this project has you coding and designing a functional, responsive version of the product website.

All code must be your own. No frameworks or pre-processing is permitted for this project. You are permitted to work with JavaScript libraries (i.e. jQuery, Anime.js, etc). If unsure if permitted, please contact your instructor.

P2: Company is done in teams of two, and is worth 30% of your final grade.

Website content requirements

The website will require the following content:

The list above is not a list of 'pages' required. As we will discuss all this content could appear in one URL or multiple URLs across a website.

Since this project focuses on the front-end, we do not expect the forms or cart to be populated based on real user input. Please pre-select input to replicate a complete purchase process.

Weekly instructions

This project spans multiple weeks. Please read the weekly instructions carefully.

From May 31 to June 7

This week is about getting set up with git and practicing using it.

  1. Come up with a team name. Have fun but keep it appropriate.
  2. Sign up as a team on Canvas and SFU GitHub. Use the same team name for Canvas and GitHub please.
  3. As a group complete the Git exercise and push all your changes to the new git repository you have created.
  4. Decide your group's direction for P1. This can be working with one of your P1 directions, a combination of your P1s, or an entirely new direction. Please create a new GitHub repository and push an updated P1 styleguide to the repository.
Bring to your June 7 lab

A URL to one git repository containing the updated P1 styleguide.

We will chat about your deliverables in-lab.

From June 7 to June 14

This week is about building out larger templates — putting together the pieces from your styleguide — for the website.

  1. Build out templates for the website. These are collections of the individual components from your styleguide that will define the structure and aesthetic of the website. Remember to:
    • Build responsively from the start. Design and code as if the browser size will change.
    • Use a consistent and understandable naming convention for your CSS.
    • Consider how the content will be structured. You are not required to include actual content yet, but do consider what content you intend to include.
  2. Having built out the templates, build all the necessary HTML files for your website. Focus on:
    • If using one HTML file for the majority of the website, why will someone want to continue scrolling down? What about the design or content suggests they should?
    • If using multiple HTML files for the website, link the files together and consider what is the most usable means of moving between HTML files?
  3. Please push your changes to your git repository.
  4. Please upload your website to your SFU filespace.
Bring to your June 14 lab

A URL to the site. We will chat about your deliverables in-lab.

From June 14 to June 21

This week is for integrating content into your website and continuing to ensure your site is responsive.

  1. Collect or generate all content for your site. This includes any images and text you may be using. Keep track of anything that you did not make using citations.
  2. Integrate all the content into your site.
  3. Test responsiveness. Make sure to test the responsiveness of your site once the content has been integrated. At minimum test between 320 to 1280 pixels in width to ensure the site still renders and functions correctly.
  4. Please push your changes to your git repository.
  5. Please upload your website to your SFU filespace.
Bring to your June 21 lab

A URL to your updated site. We will chat about your deliverables in-lab.

From June 21 to June 28

This week is all about testing and debugging your website.

  1. Test on multiple browsers:
  2. Test on Multiple devices:
    • Laptop,
    • desktop,
    • tablet,
    • smartphone,
    • TV,
    • gaming console,
    • etc. (use whatever is available to you)
  3. Test at multiple resolutions:
    • 320 pixels wide
    • 1280 pixels wide
    • 1280 pixels wide by 320 pixels tall
    • etc. (use any resolutions you can)
  4. Please push your changes to your git repository.
  5. Please upload your website to your SFU filespace.

Grading rubric

Your project will be graded on the following criteria:

Grading rubric for P2: Company.
A B C D

Process (5 points):

  • Provided weekly teamwork reflections? (done in-lab)
  • Used git for the project?
  • Completed all weekly teamwork reflections (done in-lab)
  • Used git through-out the project
  • Missed one teamwork reflection (done in-lab)
  • Used git through-out the project
  • Missed two teamwork reflections (done in-lab)
  • Used git through-out the project
  • Missed three or more teamwork reflections (done in-lab)
  • Used git through-out the project

Code (10 points):

  • Is HTML mark-up semantically appropriate?
  • Does CSS use responsive units? Are they applied appropriately?
  • Is JS functionality accessible through appropriate application of ARIA?
  • Is the website still usable without JS?
  • Does the code follow modern best practices as taught?
  • Are there any HTML and CSS errors identified by a validator?
  • Is the file and folder structure organized and web appropriate?
  • There is little to no room for improving the semantics of the HTML.
  • The CSS is using responsive units appropriately for sizing fonts and adjusting media queries.
  • Added JS functionality is made accessible through appropriate application of ARIA.
  • The website is still usable without JS.
  • The code follows modern best practices as taught or discovered.
  • The code is valid HTML5 and CSS3.
  • File/folder structure is clean and web appropriate.
  • Semantic HTML elements are used appropriately but there are missed opportunites for improving the semantics.
  • The CSS is using responsive units appropriately for sizing fonts and adjusting media queries.
  • Added JS functionality is made accessible through appropriate application of ARIA.
  • The website is still usable without JS.
  • There are up to 4 minor errors (things we have not taught you) in following modern best practices.
  • The code is valid HTML5 and CSS3.
  • File/folder structure is clean and web appropriate.
  • There is a semantically inappropriate use of HTML elements.
  • The CSS is using responsive units appropriately for sizing fonts but not for adjusting media queries.
  • Added JS functionality makes no use of ARIA to ensure accessibility.
  • The website is still usable without JS.
  • There is 1 major error (a thing we have taught you directly) and up to 4 minor errors in following modern best practices.
  • The code is valid HTML5 and CSS3.
  • There are some minor concerns with the cleanliness or web appropriateness of the file and folder structure.
  • There is a semantically inappropriate use of HTML elements or old non-semantic elements continue to be used.
  • There is little use of responsive units in the CSS for sizing fonts and adjusting media queries.
  • The website is still usable without JS.
  • There are up to 4 major errors (things we have taught you directly) and up to 8 minor errors in following modern best practices.
  • The code is not valid HTML5 or CSS3.
  • There are major concerns with the cleanliness or web appropriateness of the file and folder structure.

Design (10 points):

  • Does the website look unique or distinct?
  • Does the website look cohesive and consistent?
  • Does the website make effective use of space at different browser sizes?
  • Does the website use responsive images to enhance responsive experience?
  • Is it clear what is an interactive element (and not)?
  • Do interactive elements provide clear feedback on mouse hover and keyboard focus?
  • The website looks uniquely branded.
  • The website uses a consistent visual language.
  • The website reorganizes effectively to make use of space in the browser window.
  • The website uses responsive images to support a variety of devices and display resolutions.
  • It is easy to distinguish between interactive and non-interactive elements.
  • Interactive elements clearly change visual states on mouse hover and keyboard focus.
  • The website looks similar to other websites selling the same sort of product or service.
  • The website uses a consistent visual language.
  • The website reorganizes at different window sizes, but could use the space more effectively.
  • The website does not use responsive images.
  • It is easy to distinguish between interactive and non-interactive elements.
  • Interactive elements clearly change visual states on mouse hover, but not keyboard focus.
  • The website looks similar to other websites selling the same sort of product or service.
  • The website uses a consistent visual language.
  • The website reorganizes at different window sizes, but could use the space more effectively.
  • The website does not use responsive images.
  • It is somewhat difficult to distinguish between interactive and non-interactive elements.
  • Interactive elements clearly change visual states on mouse hover, but not keyboard focus.
  • The website looks similar to other websites selling the same sort of product or service.
  • The website does not use a consistent visual language.
  • The website does not reorganize at different window sizes and/or a horizontal scrollbar appears at some browser sizes.
  • The website does not use responsive images.
  • It is somewhat difficult to distinguish between interactive and non-interactive elements.
  • Interactive elements do clearly change visual states on mouse hover, but not keyboard focus.

Content (5 points):

  • Are there different and effective routes to find products?
  • Is labelling of navigation and headings logical for the user?
  • Is all the required project content included?
  • The user can find products through different types of navigation - i.e. on-page listings of products and top-level headings.
  • All labelling of navigation and headings is clear and logical for the user.
  • All required project content is included.
  • The user can find products through different types of navigation - i.e. on-page listings of products and top-level headings.
  • Most of the labelling of navigation and headings is clear and logical for the user.
  • All required project content is included.
  • The user can find products through different types of navigation - i.e. on-page listings of products and top-level headings.
  • Some of the labelling of navigation and headings is clear and logical for the user.
  • Most of the required project content is included.
  • The user can find products through mostly one type of navigation.
  • Little of the labelling of navigation and headings is clear and logical for the user.
  • Some of the required project content is included.

Final submission requirements (June 28)

The final submission for P2 is:

All are submitted as a URL (or set of URLs) to Canvas.

Your project submission is due to Canvas before your June 28 lab.

Please make sure double-check all your submitted files and URLs to ensure they can be opened. We want to avoid late or problematic submission penalties whenever possible.