Overview
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&; CONTENTS AT A GLANCE
PART INTRODUCTION TO RESPONSIVE WEB DESIGN
H OUR 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 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 1 0: CSS Media Queries &; What Is a Media Query? &; Media Query Expressions HOUR 1 1: 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 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
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&; CONTENTS AT A GLANCE
PART INTRODUCTION TO RESPONSIVE WEB DESIGN
H OUR 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 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 1 0: CSS Media Queries &; What Is a Media Query? &; Media Query Expressions HOUR 1 1: 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 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