Teach Yourself HTML5 in 24 Hours

Teach Yourself RWD in 24 Hours Table of Contents

Sams Teach Yourself Responsive Web Design in 24 Hours

Part 1: Introduction to Responsive Design

1 What is Responsive Web Design?

  • History of Responsive Web Design
    • Web Pages Started with Little Design
    • CSS Gave Designers More Control
    • Designers Started Adapting Layouts to Customers
    • Mobile Browsers Made Things Harder to Design
    • Responsive Design Finally Entered the Picture
  • Why We Need Responsive Web Design

2 Alternatives to Responsive Web Design

  • Table-Based Layouts
  • CSS Layouts
    • CSS Positioning
    • CSS Floats
    • Modern CSS Layouts
  • Detection Scripts
    • Browser Detection
    • Mobile Detection
    • Object Detection

3 The Growth of Mobile

  • Basic Cell Phones
    • How to Support Basic Cell Phones
  • Smartphones
    • How to Support Smartphones
  • Tablets
    • How to Support Tablets
  • Retina Devices
    • Why Build Retina-Ready Websites
    • How to Build Retina-Ready Websites
  • Why Responsive Design is Important

4 Progressive Enhancement

  • What is Progressive Enhancement?
  • How to Use Progressive Enhancement on a Website
    • Separation of Content from Presentation and Functionality
    • Start with the Content Layer
    • Then Adjust How the Content Looks
    • Finally Add Interactivity
  • Benefits of Progressive Enhancement

5 HTML for Responsive Web Design

  • Use HTML5
    • Tags Every Page Should Contain
    • Basic Tags for Web Content
    • HTML for Layout
    • Some Useful Attributes
  • Clean Code
  • Don’t Forget Semantic Elements
    • Standard Semantic HTML Elements
    • New HTML5 Semantic Elements
    • Consider Microformats
  • Validate your HTML

6 Basic CSS

  • How to Write CSS Rules
    • CSS Syntax
    • Embedded and External Style Sheets
      • Embedded Style Sheets
      • External Style Sheets
  • Styling Fonts and Colors
  • Creating Layout with CSS
  • Understanding the Cascade and Specificity
    • What is the Cascade?
    • What is Specificity?

7 Unobtrusive JavaScript

  • What is Unobtrusive JavaScript?
    • Separating Structure from Behavior
    • Supporting Usability
    • Writing Clean and Semantic HTML
  • How to Implement Unobtrusive JavaScript

Part 2: Building a Responsive Website

8 Planning a Responsive Website

  • Should You Make Your Website Responsive?
  • How to Plan for a Responsive Website
    • Check Site Analytics
    • Evaluate Existing Content
    • Make Decisions About the Content
    • Write the Site Plan

9 Mobile First

  • Why Design for Mobile First?
    • Mobile First Changes the Focus to Content
    • Mobile First Lets You Experiment with New Technologies
    • Why Mobile First Works
  • What Makes a Site Mobile Friendly?
    • Give Your Readers Options
    • Your Readers Can Affect the Display Too
  • What About Mobile Only?

10 CSS Media Queries

  • What is a Media Query
    • Media Types
    • Media Features
  • Media Query Expressions

11 Breakpoints

  • What is a breakpoint?
  • How to Define Breakpoints in Your CSS
    • First Define the Styles that Remain the Same for Every Device
    • Then Add in Specific Styles for Small Screens
    • Finally Add Media Queries for Larger Screens
  • Optimal Breakpoints
    • Best Practices For Breakpoints
    • Breakpoints for Retina Devices
  • My Recommended Breakpoints

12 Layout

  • What is Web Layout?
  • Types of Layouts
    • Fixed Width Layouts
    • Fluid or Liquid Layouts
    • Elastic and Hybrid Layouts
  • Columns in Layout
    • Old Style Columns
    • CSS3 Columns

13 Navigation

  • Why Responsive Navigation is Important
  • What Makes Navigation Mobile-Friendly?
  • Basic RWD Navigation Patterns
    • Basic Navigation that Resizes and Repositions
    • Select Menus
    • Hidden Navigation
    • Links Added in Other Locations

14 Responsive Fonts and Typography

  • Using Web Fonts
  • Sizing Typography
    • Sizing the Fonts
    • Sizing the Text
  • Relative vs. Absolute Font Sizes
  • New CSS3 Measurement Units

15 Creating and Using Images in RWD

  • Making Images Responsive
    • Using Flexible Width Images
    • Changing the Images Displayed
  • Improving Download Speeds
  • Creating Retina-Ready Images
    • What Makes an Image “Retina Ready?”
    • Use Media Queries to Serve Retina Images
    • Use Retina.js
    • Create Images in SVG
    • Use @font-face for Custom Icons

16 Videos and Other Media in RWD

  • How to Make Videos Responsive
    • Start with HTML5
    • Add CSS to Make HTML5 Video Responsive
    • Use Media Queries to Display Different Sources
    • HTML5 Video Backgrounds
  • Making YouTube Videos Responsive

17 Tables in Responsive Web Design

  • Tables on Small Devices
  • Can Tables be Responsive?
    • Resizing Cells in a Data Table
    • Rearranging Tables in Response to Browsers
    • Hiding Table Content
  • Where Do Layout Tables Fit in RWD?
    • Many Designers Want Tables for Layout
    • Advertising Almost Demands Layout Tables

18 Responsive Web Forms

  • HTML5 Forms
    • Other HTML5 Form Attributes
    • Validating an HTML5 Form With No Scripting
  • Making Web Forms Usable
    • Keep the Forms Simple
    • Remove Extraneous Page Elements
    • Remove or Combine Form Fields
    • Avoid Long Drop-down Menus
    • Allow Customers to Type Answers
  • Creating a Responsive Web Form

19 Testing

  • Start by Testing in Your Browser
    • Keep Your Browsers Up-to-Date
    • Resize Your Browser to Test Different Breakpoints
  • Test in a Device for All Your Breakpoints
  • How to Test When You Don’t Have the Devices

20 Problems with Responsive Web Design

  • Responsive Designs Can Be Slow
    • Mobile Customers are Not Patient
    • Fix This By Speeding Up Your Pages
  • RWD Can Make More Work for Designers
  • Not All Customers Like Responsive Sites
    • Clients Won’t Pay More for RWD
    • Mobile Customers Expect More
  • RWD May Break Advertising

Part 3: Improving on Responsive Design

21 Tools for Creating Responsive Web Designs

  • Planning and Designing Your RWD Site
  • HTML Element and CSS Tools
    • CSS Media Query Tools
    • Font Tools
    • Image Tools
    • Table Tools
    • Form Tools
    • Speed Tools
    • Testing Tools
    • Beware of Online Testing Tools That Don’t Work
  • Web Editors for Building Responsive Web Pages
    • Professional Design Editors
    • Online Editors

22 Device and Feature Detection

  • Why Use Detection Scripts
  • Modernizr
    • How to Install Modernizr
    • Using Modernizr
  • WURFL
    • Getting Started with WURFL
    • How WURFL Works

23 Using RESS with RWD

  • What is RESS?
  • Benefits of Using RESS
  • Getting Started with RESS
    • Adding WURFL for Server-Side Device Detection
    • Use Cookies to Store Data
  • What to Use RESS For

24 RWD Best Practices

  • Give Everyone the Best Experience
  • Use the Best Breakpoints You Can
  • Be Flexible and Think Small
  • Don’t Forget the Content
  • Keep Costs In Line