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
- Implementing Responsive Design by Tim Kadlec
- Content Strategy for Mobile by Karen McGrane
- Mobile First by Luke Wroblewski
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