Jennifer Kyrnin

SamsTeachYourself Responsive Web

in Hours24

800 East 96th Street, Indianapolis, Indiana, 46240 USA Sams Teach Yourself Responsive in 24 Hours Acquisitions Editor Mark Taber Copyright © 2015 by Pearson Education All rights reserved. No part of this book shall be reproduced, stored in a retrieval Managing Editor system, or transmitted by any means, electronic, mechanical, photocopying, recording, or Sandra Schroeder otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution Project Editor has been taken in the preparation of this book, the publisher and author assume no Seth Kerney responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. Copy Editor ISBN-13: 978-0-672-33838-0 Kitty Wilson ISBN-10: 0-672-33838-6 Indexer Library of Congress Control Number: 2014919261 Ken Johnson Printed in the United States of America First Printing: November 2014 Proofreader Kathy Ruiz Trademarks All terms mentioned in this book that are known to be trademarks or service marks have Technical Editor been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this Jon Morin information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Publishing Coordinator Vanessa Evans Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The Gary Adair author and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book or from the use of the CD or programs accompanying it. Bronkella Publishing, Special Sales LLC For information about buying this title in bulk quantities, or for special sales opportunities (which may include electronic versions; custom cover ; and content particular to your business, training goals, marketing focus, or branding interests), please contact our corporate sales department at [email protected] or (800) 382-3419. For government sales inquiries, please contact [email protected]. For questions about sales outside the U.S., please contact [email protected]. Contents

Introduction 1 Styling Fonts and Colors ...... 78 Making Your Site “Every Device” Friendly ...... 1 Creating a Layout with CSS ...... 83 How to Use This Book ...... 1 Understanding Cascading and Specificity ...... 88 Summary ...... 90 PART I INTRODUCTION TO RESPONSIVE DESIGN Workshop ...... 92 HOUR 1: What Is ? 5 HOUR 7: Unobtrusive JavaScript 95 History of Responsive Web Design ...... 5 What Is Unobtrusive JavaScript? ...... 95 Why We Need Responsive Web Design ...... 11 How to Implement Unobtrusive JavaScript ...... 98 Summary ...... 12 Summary ...... 101 Workshop ...... 13 Workshop ...... 102 HOUR 2: Alternatives to Responsive Web PART II BUILDING A RESPONSIVE Design 15

Table-Based Layouts ...... 15 HOUR 8: Planning a Responsive Website 105 CSS Layouts ...... 21 Should You Make Your Website Responsive? .. 106 Detection Scripts ...... 30 How to Plan for a Responsive Website ...... 107 Summary ...... 32 Summary ...... 112 Workshop ...... 35 Workshop ...... 113

HOUR 3: The Growth of Mobile 37 HOUR 9: Mobile First 115 Basic Cell Phones ...... 37 Why Design for Mobile First? ...... 115 Smartphones ...... 39 What Makes a Site Mobile Friendly? ...... 118 Tablets ...... 41 What About Mobile