by Jennifer Kyrnin | Publisher: Sams | Release Date: November 2015 | ISBN: 9780672337734

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 LevelBeginnerIntermediateJust a couple minutes is all you need to learn how to...Demonstrate How Responsive Design LooksIdentify Graceful DegradationUse Progressive EnhancementGet Started with HTML5Use SPAN and DIV ElementsAdjust the Fonts on a Web PageCreate a Two-Column LayoutUse Unobtrusive JavaScriptConvert a Mouseover Script to Unobtrusive JavaScriptFind Mobile Traffic in Google AnalyticsFind the Pages Popular on Mobile in Google AnalyticsDesign for Mobile FirstControl How Pages Look as a ReaderUse the Print Media Type to Create a Print Style SheetWrite Three Different Media QueriesBuild a Simple CSS File with Two BreakpointsApply Best Practices for BreakpointsGive a Page a Fixed Width LayoutChange the Page to a Fluid LayoutAvoid Navigation Failures in Responsive DesignsAdd a Select Menu as a Navigation Option for Small ScreensUse Media Queries to Load Web FontsUse Rems for Font SizesCreate Quick and Dirty Responsive ImagesConvert an Image to a Retina-Ready ImageBuild a Video Background with HTML5 and CSSEmbed a YouTube Video in Your Web PageRearrange a Large Table in Small DevicesCreate a Scrolling TableValidate Forms with HTMLCreate a Data List to Make a Text Field Easier to UseTest Your Design Using a Browser Use the Viewport Meta TagCreate a Sprites FileWrite a Cache Manifest for Offline ViewingTest a Page in the Firefox Responsive Design View ToolUse RWD EditorsChange the User Agent in SafariCustomize and Install ModernizrTest WURFL with the Built-in DemoDisplay a Message to Mobile Customers Using WURFLUse Inspiring RWD Part 1Use Inspiring RWD Part 2Who Should Use These VideosAnyone who wants to learn how to design responsive websitesCasual web designers and developers at all levels

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