Responsive Web Design Book is Moving Right Along

half the leaves are gone
half the leaves are gone
This tree is halfway done too!

As of today I am about half way through the writing of my next book sSams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours. If you’d like to be one of the first to know when it’s available for purchase you can sign up here or subscribe to the HTML5 blog.

After the break is the current table of contents. You should be aware that this is not the final version, I have changed it with every chapter I write, but this will give you an idea of what I’m planning. Let me know if you think there is something missing or you’d like to see something different. There is still time to make changes!

Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours Table of Contents

Part 1: Introduction to Responsive Design

1 What is Responsive 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 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
    • The Adjust How the Content Looks
    • Finally Add Interactivity
  • Benefits of Progressive Enhancement

5 HTML for Responsive 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
    • Old Style Columns
    • CSS3 Columns

13 Navigation

  • Comparing Mobile to Desktop Navigation Design
  • Use Progressive Enhancement to Add More to Desktop Designs

14 Fonts and Typography

  • Using Web Fonts
  • Sizing Fonts
  • Pixels vs. Ems vs. Percentages
  • Rem sizes

15 Images

  • Creating Responsive Images
  • Sizing Responsive Images
  • Creating Retina-Ready Images

16 Videos and Other Media

  • Most Videos are Fixed-Width
  • How to Make Videos Responsive
  • How Other Media is Affected by Responsive Design

17 Tables

  • Tables on Small Devices
  • Can Tables be Responsive?
  • How to use Tables with Responsive Design

18 Responsive Forms

  • HTML5 Forms
  • Important Form Features for Mobile
  • Adjusting Form Design

19 Using RESS with RWD

  • What is RESS
  • Responsive Design Plus Server Components
  • Benefits of RESS
  • How to Install RESS

20 Testing

  • Start by Testing in Your Browser
  • Test in a Device for All Your Breakpoints
  • What to do if you don’t have the devices to test with

Part 3: Improving on Responsive Design

21 Tools for Creating Responsive Designs

  • Responsive Frameworks
    • Foundation
    • Bootstrap
    • Fluid 960
    • Gridless
  • Font Tools
    • IcoMoon
    • Lettering.js
  • Images and Media
    • Foresight.js
    • Compressive Images
    • ImgSizer.js
    • FitVids
  • Software
    • Adobe Edge Inspect
    • Dreamweaver
  • Websites and Newsletters
    • This is Responsive
  • Responsive Templates
    • Templates for WordPress
    • Templates for Drupal
    • Web Page Templates and Where to Find Them

22 Problems with Responsive Web Design

  • Speed of pages
  • Extra work for designers
  • Customer dissatisfaction
  • Advertising

23 Device and Feature Detection

  • Why Use Detection Scripts
  • WURFL
  • Modernizr

24 RWD Best Practices

  • Give Everyone the Best Experience
  • Breakpoints
  • Images
  • Content
  • Keep Costs In Line
  • Examples of Amazing Responsive Design

Leave a Reply

Your email address will not be published.