Responsive Web Design in 24 Hours (Sams Teach Yourself in 24 Hours)

Responsive Web Design in 24 Hours (Sams Teach Yourself in 24 Hours)

<p style="margin:0px;"> </p> <p style="margin:0px;"> <b>Learn responsive web design (RWD) with HTML5, CSS3 & JavaScript in just 24 one-hour lessons</b> <br> </p> <p style="margin:0px;"> </p> <p style="margin:0px;"> </p> <p style="margin:0px;"> <i>Sams Teach Yourself Responsive Web Design in 24 Hours</i> helps you create websites that work equally well on everything from smartphones and tablets to multi-screen monitors. </p> <p style="margin:0px;"> </p> <p style="margin:0px;"> </p> <p style="margin:0px;">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.</p> <p style="margin:0px;"> <br> </p> <p style="margin:0px;"> </p> <p style="margin:0px;">Learn how to… </p> <ul> <li> <div style="margin: 0px;">Create effective and reliable responsive designs with CSS3, HTML5, and JavaScript</div> </li> <li> <div style="margin: 0px;">Use progressive enhancement to consistently provide the right content while making the most of each device and browser</div> </li> <li> <div style="margin: 0px;">Establish breakpoints and write CSS media queries to respond appropriately to each user agent</div> </li> <li> <div style="margin: 0px;">Choose the right layout and wireframing approach for your site</div> </li> <li> <div style="margin: 0px;">Use web fonts to control typography and choose sizes that look good on any device</div> </li> <li> <div style="margin: 0px;">Master three ways to make tables responsive</div> </li> <li> <div style="margin: 0px;">Build responsive forms using the latest HTML5 tags and attributes</div> </li> <li> <div style="margin: 0px;">Implement responsive navigation patterns that users understand intuitively</div> </li> <li> <div style="margin: 0px;">Test for responsiveness and performance</div> </li> <li> <div style="margin: 0px;">Use Responsive Design + Server Side Components (RESS) to optimize performance</div> </li> </ul> <p style="margin:0px;"> <b>CONTENTS AT A GLANCE<br> </b> </p> <p style="margin:0px;"> <b> <br> </b> </p> <b>PART I: INTRODUCTION TO RESPONSIVE WEB DESIGN<br> </b> <p style="margin:0px;"> <b>H<b> <b>OUR 1:</b> </b> </b> <b> <b> <b>What Is Responsive Web Design?</b> </b> </b> <b> <br> </b> </p> <p style="margin:0px;">• History of Responsive Web Design</p> <p style="margin:0px;">• Why We Need Responsive Web Design <b> <br> </b> </p> <p style="margin:0px;"> <b>HOUR 2</b> <b> <b>: </b>Alternatives to Responsive Web Design</b> <br> </p>• Table-Based Layouts<p style="margin:0px;">• CSS Layouts<br> </p> <p style="margin:0px;">• Detection Scripts</p> <p style="margin:0px;"> <b>HOUR </b> <b> <b>3: </b>The Growth of Mobile</b> <br> </p> <p style="margin:0px;">• Basic Cell Phones</p> <p style="margin:0px;">• Smartphones</p> <p style="margin:0px;">• Tablets</p> <p style="margin:0px;">• Retina Devices<br> </p> <p style="margin:0px;">• Why Responsive Design Is Important<br> </p> <p style="margin:0px;"> <b>HOUR 4</b> <b> <b>: </b>Progressive Enhancement</b> <br> </p> <p style="margin:0px;">• What Is Progressive Enhancement?</p> <p style="margin:0px;">• How to Use Progressive Enhancement on a</p> <p style="margin:0px;">• Website</p> <p style="margin:0px;">• Benefits of Progressive Enhancement</p> <p style="margin:0px;"> <b>HOUR 5</b> <b> <b>: </b>HTML for Responsive Web Design</b> <br> </p>• Using HTML5<p style="margin:0px;">• Clean Code</p> <p style="margin:0px;">• Don’t Forget Semantic Elements</p> <p style="margin:0px;">• Validating Your HTML</p> <p style="margin:0px;"> <b>HOUR 6:</b> <b>Basic CSS</b> </p> <p style="margin:0px;">• How to Write CSS Rules <br> </p> <p style="margin:0px;">• Embedded and External Style Sheets</p> <p style="margin:0px;">• Styling Fonts and Colors</p> <p style="margin:0px;">• Creating a Layout with CSS<br> </p> <p style="margin:0px;">• Understanding Cascading and Specificity</p> <p style="margin:0px;"> <b>HOUR 7:</b> <b>Unobtrusive JavaScript</b> <br> </p> <p style="margin:0px;">• What Is Unobtrusive JavaScript?</p> <p style="margin:0px;">• How to Implement Unobtrusive JavaScript <br> </p> <p style="margin:0px;"> </p> <p style="margin:0px;"> <b>PART II: BUILDING A RESPONSIVE WEBSITE<br> </b> </p> <p style="margin:0px;"> <b>HOUR 8:</b> <b>Planning a Responsive Website</b> </p> <p style="margin:0px;">• Should You Make Your Website Responsive?</p> <p style="margin:0px;">• How to Plan for a Responsive Website</p> <p style="margin:0px;"> <b>HOUR 9:</b> <b>Mobile First</b> </p> <p style="margin:0px;">• Why Design for Mobile First? <br> </p> <p style="margin:0px;">• What Makes a Site Mobile Friendly?</p> <p style="margin:0px;">• What About Mobile Only?</p> <p style="margin:0px;"> <b>HOUR 1</b> <b> <b>0:</b> CSS Media Queries</b> </p> <p style="margin:0px;">• What Is a Media Query?</p> <p style="margin:0px;">• Media Query Expressions</p> <p style="margin:0px;"> <b>HOUR 1</b> <b> <b>1: </b>Breakpoints</b> </p> <p style="margin:0px;">• What Is a Breakpoint? <br> </p> <p style="margin:0px;">• How to Define Breakpoints in CSS <br> </p> <p style="margin:0px;">• Optimal Breakpoints</p> <p style="margin:0px;"> <b>HOUR</b> <b> <b> 12: </b>Layout </b> <br> </p> <p style="margin:0px;">• What Is Web Layout?</p> <p style="margin:0px;">• Types of Layouts</p> <p style="margin:0px;">• Columns in Layout</p> <p style="margin:0px;"> <b>HOUR 13</b> <b> <b> <b>: </b> </b>Navigation</b> </p> <p style="margin:0px;">• Why Responsive Navigation Is Important<br> </p> <p style="margin:0px;">• What Makes Navigation Mobile Friendly?</p> <p style="margin:0px;">• Basic RWD Navigation Patterns</p> <p style="margin:0px;"> <b>HOUR 14<b>: </b> </b> <b>Responsive Fonts and Typography</b> </p> <p style="margin:0px;">• Using Web Fonts <br> </p> <p style="margin:0px;">• Sizing Typography <br> </p> <p style="margin:0px;">• Relative Versus Absolute Font Sizes</p> <p style="margin:0px;">• New CSS3 Measurement Units</p> <p style="margin:0px;"> <b>HOUR 15<b>: </b> </b> <b>Creating and Using Images in RWD</b> </p> <p style="margin:0px;">• Making Images Responsive</p> <p style="margin:0px;">• Improving Download Speeds</p> <p style="margin:0px;">• Building and Using Retina-Ready Images</p> <p style="margin:0px;"> <b>HOUR 16: </b> <b>Videos and Other Media in RWD</b> <br> </p>• How to Make Videos Responsive<p style="margin:0px;">• Making YouTube Videos Responsive</p> <p style="margin:0px;"> <b>HOUR 17: </b> <b>Tables in Responsive Web Design</b> <br> </p> <p style="margin:0px;">• Tables on Small Devices</p> <p style="margin:0px;">• Can Tables Be Responsive?</p> <p style="margin:0px;">• Where Do Layout Tables Fit in RWD?</p> <p style="margin:0px;"> <b>HOUR 18</b> <b> <b>: </b>Responsive Web Forms</b> </p> <p style="margin:0px;">• HTML5 Forms</p> <p style="margin:0px;">• Making Web Forms Usable</p> <p style="margin:0px;">• Creating Responsive Forms</p> <p style="margin:0px;"> <b>HOUR 19</b> <b> <b>: </b>Testing Responsive Websites</b> </p> <p style="margin:0px;">• Testing in Your Browser<br> </p> <p style="margin:0px;">• Testing in a Device for All Your Breakpoints</p> <p style="margin:0px;">• How to Test When You Don’t Have the Devices <br> </p> <p style="margin:0px;"> <b>HOUR 20</b> <b> <b>: </b>Problems with Responsive Web Design</b> <br> </p>• Responsive Designs Can Be Slow<p style="margin:0px;">• RWD Can Make More Work for Designers</p> <p style="margin:0px;">• Not All Customers Like Responsive Sites</p> <p style="margin:0px;">• RWD May Break Advertising</p> <p style="margin:0px;"> </p> <p style="margin:0px;"> <b>PART III: IMPROVING RESPONSIVE DESIGN<br> </b> </p> <p style="margin:0px;"> <b>HOUR 21: </b> <b>Tools for Creating Responsive Web Designs</b> </p>• Planning and Designing Your RWD Site<p style="margin:0px;">• HTML Element and CSS Tools</p> <p style="margin:0px;">• Web Editors for Building Responsive Web Pages</p> <p style="margin:0px;"> <b>HOUR 22</b> <b> <b>: </b>Device and Feature Detection</b> </p> <p style="margin:0px;">• Why Use Detection Scripts</p> <p style="margin:0px;">• Modernizr</p> <p style="margin:0px;">• WURFL</p> <p style="margin:0px;"> <b>HOUR 23: </b> <b>Using RESS with RWD</b> </p> <p style="margin:0px;">• What Is RESS?</p> <p style="margin:0px;">• Benefits of Using RESS</p> <p style="margin:0px;">• Getting Started with RESS</p> <p style="margin:0px;">• When to Use RESS<br> </p> <p style="margin:0px;"> <b>HOUR 24:</b> <b> RWD Best Practices</b> <br> </p> <p style="margin:0px;">• Give Everyone the Best Experience<br> </p> <p style="margin:0px;">• Use the Best Breakpoints You Can</p> <p style="margin:0px;">• Be Flexible and Think Small</p> <p style="margin:0px;">• Don’t Forget the Content</p> <p style="margin:0px;">• Manage Costs</p>