E-Learning Course Outline for Making Responsive Web Design

Objectives

Students will learn how to build a complete responsive web site from scratch. The course will focus on planning, workflow and implementation. By the end of the semester, students will have a responsive web site to add to their portfolio.

Required Text

Prerequisites

Sufficient skills of HTML and CSS are required. If you need to catch up on HTML and CSS, read HTML5 for Web Designers by Jeremy Keith and The Book of CSS3 by Peter Gasston.

Requirements

  • Access to a web server
  • Text Editor such as Dreamweaver, Coda, BBEdit, Sublime Text or simple TextEdit for Mac or NotePad for PC.

Week 1: Why Responsive Design?

  • History: “The Dao of Web Design”
  • The rise of mobile devices
  • Progressive enhancement
  • Web standards
  • The way forward

Week 2: Planning

  • Context: Different devices; different environments
  • Content negotiation: Structuring contents on various devices
  • Time investment: Responsive design takes more time
  • Content audit

Week 3: Web Site Proposal

Students will present their ideas to class on the responsive web site they would like to build. The presentation will take place on Google Hangout.

Week 4: Content Strategy

  • Appropriate: Right for the user
  • Useful: Specific purpose
  • User-centered: Meet real user needs
  • Clear: Easy for the user to understand
  • Consistent: Consistency of language acts as a consistent interface.
  • Concise: Omit needless content

Week 5: Workflow

  • Wireframes
  • Mockups
  • Style guides
  • Responsive structures

Week 6: Web Site Mockup

Students will present their mockup to the class using the browser. Students will also get feedback from their classmates and instructor. The presentation will take place on Google Hangout.

Week 7: Mobile First

  • Why mobile first?
  • Screen size
  • Constraints
  • Capabilities
  • Touchscreen

Week 8: Layout

  • Flexible grid
  • Flexible typesetting
  • Convert pixels to percentages
  • Creating a flexible grid
  • Flexible margins and paddings

Week 9: Media

  • Flexible images
  • Flexible SVG
  • Flexible Video

Week 10: Media Queries

  • Viewports
  • Structure
  • Order
  • Breakpoints
  • Navigation
  • IE supports

Week 11: Design Critique

Students should have a working site that is closed to the final product for review and critique.

Week 12: Preprocessors

  • Why preprocessors
  • Sass
  • Compass
  • LESS

Week 13: Pollyfills

  • Modernizr
  • Response.js
  • CSS3-mediaquery.js

Week 14: Performance

  • Images
  • JavaScript
  • CSS

Week 15: Final Project Due