Video description

In this one-of-a-kind video training course, you will learn how to build a responsive website that will look great and work well across a number of devices including phones, tablets, and PCs. Our instructor provides expert, straight-forward, user-friendly training to help you tackle the steps and strategies needed to design and build a responsive website. From choosing among available software to design your responsive website to understanding how to test your responsive layouts before making your site live, this course covers it all. Find out about the software options that are available to analyze your page views. Learn about different types of responsive grid layouts and how to incorporate them into your workflow. Discover how to go from a one column layout for mobile to a multi-column layout for tablet and screen, and understand how to insert and define images so that they will work in a responsive design. If you’re looking for comprehensive beginning-intermediate video instruction on building a responsive website, you’ll find it here. Lesson files for this course can be found here http://www.wiley.com/WileyCDA/Section/id-826088.html

---

Table of Contents

Lesson 1

What is Responsive Design? 00:09:55

Should you create a responsive website? 00:09:55

What technology is involved in responsive design? 00:07:42

Lesson 2

Organize your content 00:07:23

Analyze your page views 00:06:04

Lesson 3

What is “mobile first” 00:11:17

Using Illustrator artboards to create layouts 00:08:06

Using Photoshop Layer comps to create layouts 00:07:59

Lesson 4

What is designing on a grid 00:09:03

How grids are used in web site design 00:11:16

Responsive grid templates 00:11:44

Lesson 5

CSS media queries – external vs. internal 00:09:04

Adding media queries for different device types 00:11:26

Setting breakpoints 00:09:33

Lesson 6

Using Web Based Fonts 00:16:35

Explaining the difference between pixels, percentages, and ems 00:09:13

Adding a root font to your document - Rems 00:06:44

Lesson 7

Responsive Layouts using percentages 00:08:20

Showing and hiding elements 00:08:41

Single to multiple column layout 00:13:13

Single column to three columns 00:08:49

Flex box 00:08:53

Lesson 8

Working with background images 00:07:57

inserting images 00:07:10

Addressing high resolution issues 00:08:07

Lesson 9

Setting up horizontal lists 00:09:24

Converting horizontal menu to vertical menu 00:10:29

Creating a toggle navigation 00:10:17

Lesson 10

Testing on different devices 00:07:38