Basic Responsive Web Design

Introduction

1. CSS Review

CSS: The presentation of the web page

• What is CSS3?
• Who is responsible for CSS3?
• Why should I be writing CSS3?
• When was CSS3 created?

CSS frameworks, libraries, and preprocessors

• What is a CSS library?
• What is a CSS framework?
• What is a CSS preprocessor?

CSS Syntax

CSS Selectors

• Definitions
• Selector types

Optimizing Selectors

• Optimizing CSS

2. Introduction to Responsive Web Design (RWD)

What is responsive web design?

• Responsive web design vs. responsive web layout
• Responsive layout vs. adaptive layout

Why should I use Responsive Web Design?

How does RWD compare with other responsive strategies?

• Server-Side Device Detection (SSDD)
• Responsive Web Design with Server Side Components (RESS)

Who is responsible for RWD?

When should I use RWD?

How do I implement RWD?

Fundamental techniques of RWD

• Feature detection
• The viewport element
• Responsive layouts
• Media queries
• Responsive images
• Responsive tables

Overview of RWD techniques

• HTML solutions
• CSS solutions
• JavaScript solutions

Responsive vs. Adaptive vs. RESS

• Liquid layout example
• Responsive design examples
• Adaptive design examples
• RESS design example

Pros and Cons of Responsive Design Techniques

3. Responsive Web Design Fundamentals

Feature Detection

The viewport and the media query

The CSS box model and the CSS reset

Understanding feature detection

• Using the Modernizr library
• What is Modernizr?

Understanding the viewport

• What is the viewport?
• Viewport properties
• Viewport meta element example code
• How is the pixel width of the viewport measured?

Understanding the media attribute and media types

• Where do I specify a media type?
• Recognized media types

Understanding media queries

• What is a media query?
• Media query syntax
• Where can I write media queries?
• Media queries and the cascade
• Media query features
• Demo: Understanding the media query

Understanding the CSS box model and CSS resets

• What is the CSS box model
• The CSS reset

4. Responsive Layout Techniques

Fixed layout

• CSS fixed or absolute units of measurement
• Fixed layout pros and cons

Liquid (or fluid) layout

• CSS relative units of measurement
• Liquid layout pros and cons

Elastic layout

• What is an elastic layout?
• How is an elastic layout created?

Adaptive Layout

Flex-box layout

• What is a flex-box?
• The flex layout model
• The flex-box properties
• Creating a responsive flex-box layout
• Creating a flex-box layout

Grid Layout

• What is grid layout?
• The grid layout model
• Exercise: Creating a grid layout
• Challenge: Building a grid layout

Multi-Column Layout

• What is a CSS multi-column?
• The column properties
• Column-related design issues
• Demo: Column demo files
• Building a container for multi-column layout

Using Responsive Frameworks

• Twitter Bootstrap

5. Responsive Typography

Introduction

What is responsive typography?

Font-sizing options

• Units of measurement: fixed units of measurement
• Units of measurement: relative units of measurement
• Absolute vs. relative units of measurement

6. Responsive Images

What are responsive images?

• Responsive image example
• Issues surrounding responsive images

Basic image terminology

• Screen resolution
• Pixel density
• CSS pixel or density independent pixel (DIP)
• CSS pixel ratio
• Device pixel ratio
• Asset size
• Asset resolution
• Foreground image
• Background image

Responsive image techniques

• Introduction
• HTML techniques
• CSS techniques
• JavaScript techniques
• Server-side techniques

HTML techniques

• Introduction
• picture element
• srcset attribute

CSS techniques

• Introduction
• Responsive techniques
• Adaptive techniques

JavaScript techniques

• Introduction
• PictureFill.js: an HTML element polyfill
• HiSRC: a jQuery plug-in

Other techniques

• Server-side techniques

No Images!

• Alternatives to downloading images

7. Responsive tables

• Hiding table data
• Manipulating the table
• Morphing the table
• Scrolling the table data

8. Introduction to CSS3

CSS3 Backgrounds and Shadows

CSS3 Transforms

• CSS3 2D transforms
• CSS3 3D transforms
• CSS Transforms properties and methods

CSS3 Transitions

• What is a CSS transition?
• How do I execute a transition?

CSS3 Animations

• CSS3 animation code

Conclusion