Responsive Web Design Video How-To

Responsive Web Design Video How-To

Released November 2015
Publisher(s): Pearson
ISBN: 0672337738

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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):
  • Release date: November 2015
  • Publisher(s): Pearson
  • ISBN: 0672337738