Introduction To Responsive Web Design

Audience

This Responsive Web Design (RWD) course is for designers and developers who want to gain the necessary HTML, CSS, and JavaScript skills for building web applications and sites that adapt to a wide array of devices, including desktops, laptops, tablets, and phones.

Prerequisites

Prior to taking this RWD course, attendees should have a working knowledge of HTML, CSS, and JavaScript. This course assumes no prior knowledge of mobile development related topics.

Course Objectives

This course aims to provide attendees with a working knowledge of responsive web design. Rather than coding in proprietary languages, the responsive web design approach uses HTML, CSS and JavaScript.

The course begins with a refresher in the Cascading Style Sheet language which is an integral part of responsive web design. Next up is a thorough examination of RWD as a whole.

This includes why a developer might choose this strategy as well as comparing a RWD approach to other techniques including server-side solutions.

After mastering the fundamental concepts of RWD, the remainder of the course is spent exploring the very latest techniques to achieve responsive layout, responsive images, responsive typography and responsive tables.

• Understand the fundamentals of the Cascading Style Sheet language

• Write basic CSS

• Write basic and advanced CSS selectors

• Understand the different types of responsive web design available today

• Understand the various techniques currently in development at the W3C and WHATWG standards organizations

• Understand the concepts required to be building Responsive Design

• Describe the role of the viewport

• Describe the role of the CSS Reset and CSS Box model

• Declare the difference between the media attribute and a media query

• Write media queries that target different device models (e.g. Tablet, Smartphone, Desktop)

• Understand the difference between HTML, CSS and JS solutions to RWD

• Describe the differences between responsive and adaptive web design

• List the different types of RWD including responsive, adaptive and server-side device detection

• Implementing feature detection

• Use the Modernizr JavaScript library

• Build responsive layouts with CSS

• Build adaptive layouts with CSS

• Use the new CSS flex-box

• Use the new CSS column property

• Understand the Bootstrap framework

• Create responsive typography

• Use the new rem and vp units of measurement

• Recite some new responsive image techniques

• Build responsive tables

• Introduction to CSS3 techniques

• Introduction to Scalable Vector Graphics

Course Content

CSS Primer

• Introduction to CSS

  • What is CSS3?

  • Who is responsible for CSS3?

  • Why should I be writing CSS3?

  • When was CSS3 created?

  • CSS frameworks, libraries, and preprocessors

• CSS Syntax

  • Syntax

  • Optimizing selectors

  • Optimizing CSS

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)

• Where did RWD come from?

• Who is responsible for RWD?

• When should I use RWD?

• Fundamental techniques of RWD

  • Feature detection

    • Modernizr

    • WURFL

  • 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

• Summary

Responsive Web Design Fundamentals

• Introduction

• 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

• 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

• Understanding the CSS box model and CSS resets

  • What is the CSS box model

  • What is a CSS reset

Responsive Layout Techniques

• Introduction

• Fixed layouts

  • What is a fixed layout?

  • How is fixed layout created?

  • Fixed units of measurement

  • Fixed layout pros and cons

• Fluid layouts

  • What is a fluid or liquid layout?

  • How is a fluid layout created?

  • Relative units of measurement

  • Fluid layout pros and cons

• Elastic layouts

  • What is an elastic layout?

  • How is an elastic layout created?

• Adaptive and responsive layouts

  • What is an adaptive layout?

  • What is a responsive layout?

  • How is an adaptive layout created?

  • How is a responsive layout created?

• Flex-box layout

  • What is a flex-box?

  • The flex-box layout model

  • The flex-box properties

    • Flex-box axis

    • flex-direction

    • flex-wrap

    • justify-content

    • align-items

    • order

    • flex-grow, flex-shrink, flex-basis

• Grid layout

  • What is grid layout

  • The grid layout model

• Multi-column layout

  • What is a CSS multi-column?

  • The column properties

  • Column-related design issues

• Using Responsive Frameworks

  • Twitter Bootstrap

Responsive Typography

• Introduction

• What is responsive typography?

• Font-sizing options

  • Absolute vs. relative font sizes

Responsive Images

• Introduction

• What are responsive images?

  • Responsive image example

  • Issues surrounding responsive images

    • Performance

    • Bandwidth

    • Graphic design and art direction

    • Coding conventions

• 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

    • The <picture> element

  • CSS techniques

  • JavaScript techniques

  • Server-side techniques

• HTML Techniques

  • Introduction

  • picture element

    • Current status of support

  • srcset attribute

    • Current status of support

• CSS Techniques

  • Introduction

  • Responsive techniques

    • Resizing images

    • Cropping images

  • Adaptive techniques

    • Resizing images using media queries

    • Cropping images using media queries

    • The image-set() function

• image-set() vs. media queries

• Media Query for High Resolution Images

• JavaScript Techniques

  • Introduction

  • PictureFill.js: an HTML <picture> element polyfill

  • HiSRC: a jQuery plug-in

• Server-Side techniques

  • Sencha.io src

  • CDN Connect Image API

• No Images!

  • Introduction

  • Alternatives to downloading images

    • HTML5 element

    • Scalable Vector Graphics

    • Icon Fonts

    • CSS3

• Summary

  • Responsive Image Chart

Responsive Tables

• What is a responsive table?

• Responsive Table Techniques

  • Hide columns

  • Manipulate table display

  • Morph the table

    • Unordered list

    • Chart

  • JavaScript and jQuery solutions

• Finding your own solutions

Introduction to CSS3

• CSS3 Backgrounds and Shadows

• CSS3 Transforms

  • What is a CSS transform?

  • 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

  • Demo animations

    • 3D animation

    • Cross-Fade

    • Slideshow