Pluralsight - Responsive Web Design (Ben Callahan)

responsive_web_design.md

#Module 1: Introduction

##Lesson 1: Introduction

1. RWD 101
2. RWD Process
3. Applying RWD Styles
4. RWD Retrofitting
5. JS to the rescue
6. Lessons learned
7. What's next in RWD

#Module 2: Responsive Web Design 101

##Lesson 1: A fluid foundation

Ethan Marcotte: Article: alistapart.com Book: A Book Apart

3 techniques of responsiveness:

• A fluid foundation
• Flexible content
• Media Queries

##Lesson 2: IE rounding and the Semantic Grid System

Skeleton : A beautiful boilerplate for mobile friendly development

CSS zen garden: A demonstration of what can be accomplished through CSS-based design.

###A Fluid Foundation

Accomplished using SASS

@column-width: 60;
@gutter-width: 20;
@columns: 12;
@total-width: 100%;

header { .column{12); }
article { .column(12); }
aside { .column(12); }

@media (min-width: 38em){
  article{ .column(8); }
  aside{ .column(4); }
}

##Lesson 3: Flexible Content

##Lesson 4: Media Queries

Media Queries

<link media="(min-width: 30em)" ...

<link media="screen and (min-width: 30em)" ...

@media (min-width: 30em) { ... }

@media screen and (min-width: 30em) { ... }

Media Types

1. all
2. braile
3. embossed
4. speech
5. handheld
6. projection
7. screen
8. tv
9. print
10. tty

Media Features

1. width
2. height
3. device-width
4. device-height
5. orientation
6. aspect ratio
7. device-aspect-ratio
8. color
9. color-index
10. monochrome
11. resolution
12. scan
13. grid

Media Query Bookmarklet

##Lesson 5: Other RWD considerations

Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.

#Module 3: RWD Process

##Lesson 1: A Myth about Process

##Lesson 2: Content Priority Prototype

##Lesson 3: Style Prototype