Description

Each short, easy lesson in this book builds on all that's come before, teaching what responsive design is, how to use it, and how to resolve the problems it can create. Step-by-step instructions walk readers through common questions, issues, and tasks; Q-and-As, Quizzes, and Exercises build and test knowledge; 'Did You Know?' tips offer insider advice and shortcuts; and 'Watch Out!' alerts help readers avoid problems.

Features

• Introduces web design techniques that respond to today's age of smartphones and tablets
• Shows how and when to implement responsive web design techniques and technologies
• Hands-on examples and code samples make it easy to quickly add responsive design features to sites
• Teaches through practical instructions, realistic examples, Q-and-As, quizzes, exercises, tips, and more

Table of Contents

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

HOUR 3: 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

HOUR 12: 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

HOUR 21: Tools for Creating Responsive Web Designs

• Planning and Designing Your RWD Site

• HTML Element and CSS Tools

• Web Editors for Building Responsive Web Pages

HOUR 22: Device and Feature Detection

• Why Use Detection Scripts

• Modernizr

• WURFL

HOUR 23: Using RESS with RWD

• What Is RESS?

• Benefits of Using RESS

• Getting Started with RESS

• When to Use RESS

HOUR 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

• Manage Costs

Author

Jennifer Kyrnin has been teaching HTML, XML, and web design online since 1997. She has built and maintained websites of all sizes, from small, single-page brochure sites to large, million-page database-driven sites for international audiences. She lives with her husband and son and numerous animals on a small farm in Washington state.