Calendar - Responsive Web Design

Nothing assigned this week

• HTML&CSS - Introduction, Ch. 1 Structure, Ch.2 Text, Ch. 3 Lists
• Optional - New York Times Home Page Redesign Process

No assignments due

HTML Basics 1

• HTML&CSS - Ch.4 Links, Ch. 5 Images, Ch.6 Tables, Ch.7 Forms, Ch.8 Extra Markup
• Absolute vs. Relative Paths and Links (Just Scan)

HTML Basics 1

HTML Basics 2

• HTML&CSS - Ch. 10 Introducing CSS, Ch. 11 Color, Ch. 12 Text, Ch. 14 Lists Tables & Forms
• For Reference - CSS Reference
• In Class - CSS Whiteboard Exercise
• For Discussion - Designing With Code

HTML Basics 2

CSS Basics 1

• How We Read by Jason Santa Maria
• Size Matters - Balancing Line Length and Font Size in Responsive Web Design
• In Class - Watch Understanding the CSS Box Model on Lynda.com
• HTML&CSS Ch. 13 Boxes, Ch. 15 Layout, Ch. 16 Images, Ch. 17 HTML5 Layout

CSS Basics 1

CSS Basics 2

• In Class - Finishing Understanding the CSS Box Model (Part 2)
• Responsive Web Design - Ch. 1 Our Responsive Web, Ch. 2 The Flexible Grid, Ch. 3 Flexible Images, Ch. 4 Media Queries

CSS Basics 2

Fonts and Media Queries

• An Animated Guide to Flexbox
• Responsive Web Design - Ch. 5 Becoming Responsive
• For Reference - A Complete Guide to Flexbox - CSS Tricks

Fonts and Media Queries

HTML/CSS Mini Exam (Study Guide), Flexible Boxes and Layout

• GitHub for Beginners (Just scan)
• Bringing Design and Research Closer Together by Emma Boulton
• UX Research Cheat Sheet by Susan Farrell
• Getting Started with CSS Grid
• For Reference - A Complete Guide to Grid

Semester Project (Overview), Research and Competitive Analysis, CSS Grids (2 Week Assignment)

• Web Design Book - Ch. 18 Process & Design
• Content-First Design by Steph Hay
• Structure First. Content Always. by Mark Boulton
• Sketching - the Visual Thinking Power Tool by Mike Rohde
• Mobile First - Luke Wroblewski

CSS Grids (2 Week Assignment), Content and Sketching

• Style Tiles and How They Work by Samantha Warren
• Our New Responsive Design Deliverable - The Style Prototype
• Responsive Comping - Obtaining Client Feedback Without Mockups by Matt Griffin
• Responsive Deliverables by Dave Rupert
• In Class - Why Mobile Menus Belong at the Bottom of the Screen
• CSS Grid Your First Grid

CSS Grids (2 Week Assignment), Content and Sketching

• In Class - Video on The Information Age (Netflix)
• HTML Wireframes by Brad Frost
• Atomic Web Design by Brad Frost
• For Discussion- The Hamburger Doesn't Work

Basic Wireframe Structure (Part of HTML/CSS Templates/Patterns)

• Using SVG by Chris Coyier
• Mo' Pixels Mo' Problems
• Fast Enough by Tim Kadlec
• For Reference - Common Design Patterns
• Understanding Progressive Enhancement by Aaron Gustafson

Basic Wireframe Structure (Part of HTML/CSS Templates/Patterns)

Patterns 1 (Part of HTML/CSS Templates/Patterns)

• For Discussion - Only One Delierable Matters
• Usability testing - how do we design effective tasks by Tingting Zhao
• Reframing Accessibility for the Web by Anne Gibson
• Test on Real Mobile Devices Without Breaking the Bank by Brad Frost
• For Reference - Web Accessibility Checklist

Patterns 1 (Part of HTML/CSS Templates/Patterns)

Patterns 2 (Part of HTML/CSS Templates/Patterns), Performance and Usability Testing

• Getting Started with Pattern Libraries by Anna Debenham
• Style Guide Best Practices by Brad Frost
• For Reference - How to Set Up A Print Style Sheet by Christian Krammer

Patterns 2 (Part of HTML/CSS Templates/Patterns)

Performance and Usability Testing, Combined Templates for Instructor Review (Part of HTML/CSS Templates/Patterns), Project Hub, Pattern Library, and Review Session

• How Much Does a Responsive Web Design Cost? by Brad Frost

Performance and Usability Testing, Combined Templates for Instructor Review (Part of HTML/CSS Templates/Patterns)

Final Templates and Patterns (Part of HTML/CSS Templates/Patterns), Project Hub, Pattern Library, and Review Session