Mobile First Responsive Web Design

Pluralsight

Course Summary

This course is an introduction to concepts behind mobile-first responsive web design.

+
Course Description

Responsive web design is a recent strategy for building web sites that can respond and adapt to multiple devices and their respective resolutions. Mobile first is the concept of creating the design for your mobile web site first, and then building out that design for larger resolutions. This course covers the concepts that developers need to know to be able to work in this new way of designing web sites.

Course Description

Responsive web design is a recent strategy for building web sites that can respond and adapt to multiple devices and their respective resolutions. Mobile first is the concept of creating the design for your mobile web site first, and then building out that design for larger resolutions. This course covers the concepts that developers need to know to be able to work in this new way of designing web sites.

+
Course Syllabus

Introduction
- 28m 37s

—Introduction 1m 8s
—Why Bother 5m 53s
—Options 4m 50s
—What You Want 0m 45s
—It isn't Just About Mobile 3m 0s
—Mobile First 2m 14s
—Benefits of Mobile First 3m 46s
—Progressive Enhancement 1m 15s
—Adaptive vs. Responsive 2m 31s
—Even if You Have an App 2m 37s
—Summary 0m 38s

Mobile First Responsive Web Design - Layout in a Responsive World
- 42m 18s

—Introduction 0m 49s
—Know What You are Building 3m 53s
—Brainstorm 1m 5s
—What I'm Building 0m 57s
—Mobile Layout Design 3m 52s
—My Mobile Design 1m 33s
—Design Desktop Concurrently 3m 52s
—Viewport 4m 12s
—Prototype, Iterate 1m 25s
—Use Percentages Not Pixels 3m 24s
—Demo: Prototype 12m 20s
—Ems or Rems 2m 8s
—Flexbox 1m 27s
—Always Remember the Cascade 0m 51s
—Summary 0m 30s

Applying mobile-first responsive web design features
- 52m 6s

—Introduction 0m 27s
—Media Query 5m 39s
—Where to Use 4m 7s
—Demo: Media Queries 8m 24s
—Adaptive Design 3m 36s
—Content 2m 4s
—Navigation 5m 2s
—Content Patterns 2m 0s
—Demo: Content and Navigation 8m 20s
—Dealing with Text and Images 4m 4s
—Demo: SVG 7m 37s
—Summary 0m 46s

Mobile first forms
- 18m 20s

—Introduction 0m 19s
—Distill Down 2m 55s
—Labels and Placeholders 3m 0s
—HTML5 Input Types 3m 31s
—Demo: HTML5 Form Types 5m 38s
—Other Form Stuff 2m 21s
—Summary 0m 36s

Performance
- 30m 9s

—Introduction 0m 30s
—General Web Performance 6m 15s
—Data-URIs 3m 13s
—Demo: Data-URIs 3m 58s
—Other Performance Tips 3m 37s
—Demo: Inline Styles 2m 41s
—Bundling and Minification 1m 36s
—JavaScript 7m 27s
—Summary 0m 52s

Responsive design tools
- 6m 22s

—Introduction 0m 23s
—A List of Responsive Tools 5m 59s