Introduction To Responsive Web Design

Course: RSPWD1

Duration: 4 Days

Level: I

Course Summary

This introduction to Responsive Web Design (RWD) course teaches designers and developers 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.

Rather than coding in proprietary languages, the responsive web design approach uses HTML, CSS and JavaScript. This course aims to provide attendees with a working knowledge of responsive web design. 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.

« Hide The Details

Topics Covered In This Course

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

What You Can Expect

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 being 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

Recommended Prerequisites

Prior to taking this RWD course, attendees should have a working knowledge of HTML (any version), CSS (any version) and JavaScript, or have taken a basic Introduction to HMTL5, Introduction to CSS, and Introduction to JavaScript classes. This RWD course assumes no prior knowledge of mobile development related topics.

« Hide The Details

Related Courses

Code	Course Title	Duration	Level
HTML	Hypertext Markup Language (HTML) - 2 days	2 Days	I	Details
JSCP01	JavaScript Programming Essentials	4 Days	II	Details
CSS	Cascading Style Sheets (CSS)	2 Days	II	Details
HTML5	Web Application Development Using HTML5	4 Days	II	Details
JSAP01	JavaScript Advanced Programming	2 Days	II	Details
WEBAPI	HTML5 Advanced APIs	3 Days	III	Details

Every student attending a Verhoef Training class will receive a certificate good for $100 toward their next public class taken within a year.

You can also buy "Verhoef Vouchers" to get a discounted rate for a single student in any of our public or web-based classes. Contact your account manager or our sales office for details.

Schedule For This Course
There are currently no public sessions scheduled for this course. We can schedule a private class for your organization just a couple of weeks from now. Or we can let you know the next time we do schedule a public session.

Notify me the next time this course is confirmed!

Can't find the course you want?
Call us at 800.533.3893, or
email us at [email protected]