You are previewing Sams Teach Yourself Responsive Web Design in 24 Hours.
O'Reilly logo
Sams Teach Yourself Responsive Web Design in 24 Hours

Book Description

Learn responsive web design (RWD) with HTML5, CSS3 & JavaScript in just 24 one-hour lessons

Sams Teach Yourself Responsive Web Design in 24 Hours helps you create websites that work equally well on everything from smartphones and tablets to multi-screen monitors.

This book’s straightforward, step-by-step approach shows how to use HTML, CSS, and JavaScript to build the responsive sites today’s users and clients want. In just a few hours, you’ll be building layouts, sites, forms, and web apps that automatically adapt to virtually any device. Every lesson builds on what you’ve already learned, giving you a rock-solid foundation for real-world success.

Learn how to…

  • Create effective and reliable responsive designs with CSS3, HTML5, and JavaScript

  • Use progressive enhancement to consistently provide the right content while making the most of each device and browser

  • Establish breakpoints and write CSS media queries to respond appropriately to each user agent

  • Choose the right layout and wireframing approach for your site

  • Use web fonts to control typography and choose sizes that look good on any device

  • Master three ways to make tables responsive

  • Build responsive forms using the latest HTML5 tags and attributes

  • Implement responsive navigation patterns that users understand intuitively

  • Test for responsiveness and performance

  • Use Responsive Design + Server Side Components (RESS) to optimize performance

  • CONTENTS AT A GLANCE


    PART I: INTRODUCTION TO RESPONSIVE WEB DESIGN

    HOUR 1:What Is Responsive Web Design?

    • History of Responsive Web Design

    • Why We Need Responsive Web Design

    HOUR 2: Alternatives to Responsive Web Design

    • Table-Based Layouts

    • CSS Layouts

    • Detection Scripts

    HOUR3: The Growth of Mobile

    • Basic Cell Phones

    • Smartphones

    • Tablets

    • Retina Devices

    • Why Responsive Design Is Important

    HOUR 4: Progressive Enhancement

    • What Is Progressive Enhancement?

    • How to Use Progressive Enhancement on a

    • Website

    • Benefits of Progressive Enhancement

    HOUR 5: HTML for Responsive Web Design

    • Using HTML5

    • Clean Code

    • Don’t Forget Semantic Elements

    • Validating Your HTML

    HOUR 6:Basic CSS

    • How to Write CSS Rules

    • Embedded and External Style Sheets

    • Styling Fonts and Colors

    • Creating a Layout with CSS

    • Understanding Cascading and Specificity

    HOUR 7:Unobtrusive JavaScript

    • What Is Unobtrusive JavaScript?

    • How to Implement Unobtrusive JavaScript

    PART II: BUILDING A RESPONSIVE WEBSITE

    HOUR 8:Planning a Responsive Website

    • Should You Make Your Website Responsive?

    • How to Plan for a Responsive Website

    HOUR 9:Mobile First

    • Why Design for Mobile First?

    • What Makes a Site Mobile Friendly?

    • What About Mobile Only?

    HOUR 10: CSS Media Queries

    • What Is a Media Query?

    • Media Query Expressions

    HOUR 11: Breakpoints

    • What Is a Breakpoint?

    • How to Define Breakpoints in CSS

    • Optimal Breakpoints

    HOUR12: Layout

    • What Is Web Layout?

    • Types of Layouts

    • Columns in Layout

    HOUR 13: Navigation

    • Why Responsive Navigation Is Important

    • What Makes Navigation Mobile Friendly?

    • Basic RWD Navigation Patterns

    HOUR 14: Responsive Fonts and Typography

    • Using Web Fonts

    • Sizing Typography

    • Relative Versus Absolute Font Sizes

    • New CSS3 Measurement Units

    HOUR 15: Creating and Using Images in RWD

    • Making Images Responsive

    • Improving Download Speeds

    • Building and Using Retina-Ready Images

    HOUR 16:Videos and Other Media in RWD

    • How to Make Videos Responsive

    • Making YouTube Videos Responsive

    HOUR 17:Tables in Responsive Web Design

    • Tables on Small Devices

    • Can Tables Be Responsive?

    • Where Do Layout Tables Fit in RWD?

    HOUR 18: Responsive Web Forms

    • HTML5 Forms

    • Making Web Forms Usable

    • Creating Responsive Forms

    HOUR 19: Testing Responsive Websites

    • Testing in Your Browser

    • Testing in a Device for All Your Breakpoints

    • How to Test When You Don’t Have the Devices

    HOUR 20: Problems with Responsive Web Design

    • Responsive Designs Can Be Slow

    • RWD Can Make More Work for Designers

    • Not All Customers Like Responsive Sites

    • RWD May Break Advertising

    PART III: IMPROVING RESPONSIVE DESIGN

    Table of Contents

    1. About This eBook
    2. Title Page
    3. Copyright Page
    4. Contents
    5. About the Author
    6. Dedication
    7. Acknowledgments
    8. We Want to Hear from You!
    9. Reader Services
    10. Introduction
      1. Making Your Site “Every Device” Friendly
      2. How to Use This Book
    11. Part I: Introduction to Responsive Design
      1. Hour 1. What Is Responsive Web Design?
        1. History of Responsive Web Design
        2. Why We Need Responsive Web Design
        3. Summary
        4. Workshop
      2. Hour 2. Alternatives to Responsive Web Design
        1. Table-Based Layouts
        2. CSS Layouts
        3. Detection Scripts
        4. Summary
        5. Workshop
      3. Hour 3. The Growth of Mobile
        1. Basic Cell Phones
        2. Smartphones
        3. Tablets
        4. Retina Devices
        5. Why Responsive Design Is Important
        6. Summary
        7. Workshop
      4. Hour 4. Progressive Enhancement
        1. What Is Progressive Enhancement?
        2. How to Use Progressive Enhancement on a Website
        3. Benefits of Progressive Enhancement
        4. Summary
        5. Workshop
      5. Hour 5. HTML for Responsive Web Design
        1. Using HTML5
        2. Clean Code
        3. Don’t Forget Semantic Elements
        4. Validating Your HTML
        5. Summary
        6. Workshop
      6. Hour 6. Basic CSS
        1. How to Write CSS Rules
        2. Embedded and External Style Sheets
        3. Styling Fonts and Colors
        4. Creating a Layout with CSS
        5. Understanding Cascading and Specificity
        6. Summary
        7. Workshop
      7. Hour 7. Unobtrusive JavaScript
        1. What Is Unobtrusive JavaScript?
        2. How to Implement Unobtrusive JavaScript
        3. Summary
        4. Workshop
    12. Part II: Building a Responsive Website
      1. Hour 8. Planning a Responsive Website
        1. Should You Make Your Website Responsive?
        2. How to Plan for a Responsive Website
        3. Summary
        4. Workshop
      2. Hour 9. Mobile First
        1. Why Design for Mobile First?
        2. What Makes a Site Mobile Friendly?
        3. What About Mobile Only?
        4. Summary
        5. Workshop
      3. Hour 10. CSS Media Queries
        1. What Is a Media Query?
        2. Media Query Expressions
        3. Summary
        4. Workshop
      4. Hour 11. Breakpoints
        1. What Is a Breakpoint?
        2. How to Define Breakpoints in CSS
        3. Optimal Breakpoints
        4. Summary
        5. Workshop
      5. Hour 12. Layout
        1. What Is Web Layout?
        2. Types of Layouts
        3. Columns in Layout
        4. Summary
        5. Workshop
      6. Hour 13. Navigation
        1. Why Responsive Navigation Is Important
        2. What Makes Navigation Mobile Friendly?
        3. Basic RWD Navigation Patterns
        4. Summary
        5. Workshop
      7. Hour 14. Responsive Fonts and Typography
        1. Using Web Fonts
        2. Sizing Typography
        3. Relative Versus Absolute Font Sizes
        4. New CSS3 Measurement Units
        5. Summary
        6. Workshop
      8. Hour 15. Creating and Using Images in RWD
        1. Making Images Responsive
        2. Improving Download Speeds
        3. Building and Using Retina-Ready Images
        4. Summary
        5. Workshop
      9. Hour 16. Videos and Other Media in RWD
        1. How to Make Videos Responsive
        2. Making YouTube Videos Responsive
        3. Summary
        4. Workshop
      10. Hour 17. Tables in Responsive Web Design
        1. Tables on Small Devices
        2. Can Tables Be Responsive?
        3. Where Do Layout Tables Fit in RWD?
        4. Summary
        5. Workshop
      11. Hour 18. Responsive Web Forms
        1. HTML5 Forms
        2. Making Web Forms Usable
        3. Creating Responsive Forms
        4. Summary
        5. Workshop
      12. Hour 19. Testing Responsive Websites
        1. Testing in Your Browser
        2. Testing in a Device for All Your Breakpoints
        3. How to Test When You Don’t Have the Devices
        4. Summary
        5. Workshop
      13. Hour 20. Problems with Responsive Web Design
        1. Responsive Designs Can Be Slow
        2. RWD Can Make More Work for Designers
        3. Not All Customers Like Responsive Sites
        4. RWD May Break Advertising
        5. Summary
        6. Workshop
    13. Part III: Improving on Responsive Web Design
      1. Hour 21. Tools for Creating Responsive Web Designs
        1. Planning and Designing Your RWD Site
        2. HTML Element and CSS Tools
        3. Web Editors for Building Responsive Web Pages
        4. Summary
        5. Workshop
      2. Hour 22. Device and Feature Detection
        1. Why Use Detection Scripts
        2. Modernizr
        3. WURFL
        4. Summary
        5. Workshop
      3. Hour 23. Using RESS with RWD
        1. What Is RESS?
        2. Benefits of Using RESS
        3. Getting Started with RESS
        4. When to Use RESS
        5. Summary
        6. Workshop
      4. Hour 24. RWD Best Practices
        1. Give Everyone the Best Experience
        2. Use the Best Breakpoints You Can
        3. Be Flexible and Think Small
        4. Don’t Forget the Content
        5. Manage Costs
        6. Summary
        7. Workshop
    14. Index
    15. Code Snippets