Responsive Web Design Video How-To

Video Description

Skip the reading and learn by watching!

Short, clear videos show you visually how to design responsive web pages.

 

Responsive Web Design Video How-To is a series of short, 2- to 5-minute how-to videos that walk the learner through a specific task or technique related to designing websites that work equally well on smartphones, tablets, or even multi-screen monitors.

Adapted from the book Sams Teach Yourself Responsive Web Design in 24 Hours, each video is self-contained and focused entirely on one particular task. The learner can either go through the videos in sequence or jump into a particular task, see how something is done, and then jump out again.

Skill Level

  • Beginner
  • Intermediate

Just a couple minutes is all you need to learn how to...

  • Demonstrate How Responsive Design Looks
  • Identify Graceful Degradation
  • Use Progressive Enhancement
  • Get Started with HTML5
  • Use SPAN and DIV Elements
  • Adjust the Fonts on a Web Page
  • Create a Two-Column Layout
  • Use Unobtrusive JavaScript
  • Convert a Mouseover Script to Unobtrusive JavaScript
  • Find Mobile Traffic in Google Analytics
  • Find the Pages Popular on Mobile in Google Analytics
  • Design for Mobile First
  • Control How Pages Look as a Reader
  • Use the Print Media Type to Create a Print Style Sheet
  • Write Three Different Media Queries
  • Build a Simple CSS File with Two Breakpoints
  • Apply Best Practices for Breakpoints
  • Give a Page a Fixed Width Layout
  • Change the Page to a Fluid Layout
  • Avoid Navigation Failures in Responsive Designs
  • Add a Select Menu as a Navigation Option for Small Screens
  • Use Media Queries to Load Web Fonts
  • Use Rems for Font Sizes
  • Create Quick and Dirty Responsive Images
  • Convert an Image to a Retina-Ready Image
  • Build a Video Background with HTML5 and CSS
  • Embed a YouTube Video in Your Web Page
  • Rearrange a Large Table in Small Devices
  • Create a Scrolling Table
  • Validate Forms with HTML
  • Create a Data List to Make a Text Field Easier to Use
  • Test Your Design Using a Browser
  • Use the Viewport Meta Tag
  • Create a Sprites File
  • Write a Cache Manifest for Offline Viewing
  • Test a Page in the Firefox Responsive Design View Tool
  • Use RWD Editors
  • Change the User Agent in Safari
  • Customize and Install Modernizr
  • Test WURFL with the Built-in Demo
  • Display a Message to Mobile Customers Using WURFL
  • Use Inspiring RWD Part 1
  • Use Inspiring RWD Part 2

Who Should Use These Videos

  • Anyone who wants to learn how to design responsive websites
  • Casual web designers and developers at all levels

Table of Contents

  1. Learn How To...
    1. Demonstrate How a Responsive Design Looks 00:03:01
    2. Identify Graceful Degradation 00:01:02
    3. Use Progressive Enhancement 00:02:11
    4. Get Started with HTML5 00:01:58
    5. Use SPAN and DIV Elements 00:01:48
    6. Adjust the Fonts on a Web Page 00:04:33
    7. Create a Two-Column Layout 00:04:28
    8. Use Unobtrusive JavaScript 00:04:44
    9. Convert a Mouseover Script to Unobtrusive JavaScript 00:06:46
    10. Find Mobile Traffic in Google Analytics 00:02:07
    11. Find the Pages Popular on Mobile in Google Analytics 00:02:23
    12. Design for Mobile First 00:02:40
    13. Control How Pages Look as a Reader 00:02:43
    14. Use the Print Media Type to Create a Print Style Sheet 00:03:18
    15. Write Three Different Media Queries 00:02:38
    16. Build a Simple CSS File with Two Breakpoints 00:01:57
    17. Apply Best Practices for Breakpoints 00:05:05
    18. Give a Page a Fixed Width Layout 00:02:26
    19. Change the Page to a Fluid Layout 00:02:00
    20. Avoid Navigation Failures in Responsive Designs 00:02:45
    21. Add a Select Menu as a Navigation Option for Small Screens 00:03:12
    22. Use Media Queries to Load Web Fonts 00:01:57
    23. Use Rems for Font Sizes 00:03:26
    24. Create Quick and Dirty Responsive Images 00:04:38
    25. Convert an Image to a Retina-Ready Image 00:03:14
    26. Build a Video Background with HTML5 and CSS 00:03:10
    27. Embed a YouTube Video in Your Web Page 00:02:29
    28. Rearrange a Large Table in Small Devices 00:04:18
    29. Create a Scrolling Table 00:03:30
    30. Validate Forms with HTML 00:04:04
    31. Create a Data List to Make a Text Field Easier to Use 00:03:51
    32. Test Your Design Using a Browser 00:03:27
    33. Use the Viewport Meta Tag 00:02:38
    34. Create a Sprites File 00:03:17
    35. Write a Cache Manifest for Offline Viewing 00:02:31
    36. Test a Page in the Firefox Responsive Design View Tool 00:02:48
    37. Use RWD Editors 00:07:22
    38. Change the User Agent in Safari 00:02:28
    39. Customize and Install Modernizr 00:03:11
    40. Test WURFL with the Built-in Demo 00:01:59
    41. Display a Message to Mobile Customers Using WURFL 00:02:14
    42. Use Inspiring RWD Part 1 00:06:46
    43. Use Inspiring RWD Part 2 00:11:45

Product Information

  • Title: Responsive Web Design Video How-To
  • Author(s): Jennifer Kyrnin
  • Release date: November 2015
  • Publisher(s): Sams
  • ISBN: 9780672337734