Table of Contents - 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