Responsive Web Design with HTML5 and CSS3 in 24 Hours

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

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

• 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

• 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

• 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

• 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

• 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

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.