Learning

Responsive
Web Design

books
.info
 0REILLY*
Learning Responsive Web Design
Deliver an optimal user experience to ali Learning Responsive Web
devices- including tablets, smartphones, Design provides a broad
feature phones, laptops, and large screens-
area of coverage of the
by learning the basics of responsive web
design. In this hands-on guide, UX designer subject vvithout
Clarissa Peterson explains how responsive sacrificing depth, and
web design works, and takesyou through a makes for a great
responsive workflow from project kickoff to
introduction to the
site launch.
concepts.
Ideal for anyone involved in the process of
Tom Barker
creating websites-not just developers-this Directorof Software
book teaches you fundamental strategies Engineering& Development,
Comcast
and techniques for using HTML and CSS to
design websites that not only adapt to any
screen sie, but also use Progressive

Clarissa Peterson
enhancement to provide a better user
experience based on device capabilities such
isa UX
as touchscreens and retina displays. designer and web
developer, and co-founder
Start with content strategy before of Peterson/ Kandy, a
creating a visual design Montreal-based digital
consultancy specializing in
Learn why your default design creating responsive
should be for the narrovvest websites. She frequently
screens speaks and gives workshops
on responsive design,
Explore the HTML elements and mobile strategy, and user
CSS properties essential for experience.
responsive web design
Use media queries to display
different CSS styles based on a
device's viewport width
Handle elements such as images,
typography, and navigation
Use performance optimization techniques to make your
site lighter and faster
USER EXPERIENCE / DESIGN
Tvvitter:
@oreillymedia
US$39.99 CAN $41.99 facebook.com/or
ISBN: 978-1-449-36294-2 eilly

www.it-
ebooks.info
 5 3 9 9 9
78 1 362942
449

www.it-
ebooks.info
Learning
Responsive Web
Design
A Beginner's Guide

Clarissa Peterson

O'REILL Beijing Cambridge Farnham Koln Sebastopol Tokyo

T

www.it-
ebooks.info
 Learning Responsive Web Design
by Clarissa Peterson
Copyright 2014 Clarissa Peterson. All rights reserved.
Printed in Canada.
Published by OReilly Media, Inc.,
1005 Gravenstein Highway North, Sebastopol, CA 95472.
OReilly books may be purchased for educational, business, or sales
promotional use. Online editions are also available for most titles (safari.
oreilly.com). For more information, contact our corporate/institutional sales
department: (800) 998-9938 or corporate@oreilly.com.

Editor: Mary Treseler Production Cover Designer: Randy Comer

Editor: Kara Ebrahim Interior Designers: Ron Bilodeau
Copyeditor: Jasmine Kwityn and Monica Kamsvaag
Proofreader: Rachel Head Illustrator: Rebecca ix
Indexer: Angela Howard Demarest Compositor: Kara
Ebrahim

June 2014: First Edition.

.3

Revision History for the First Edition: .3

2014-05-30 First release .6
See http://www.oreilly.com/catalog/errata.csp?isbn=0636920029199 for release details.
14
17
Nutshell Handbook, the Nutshell Handbook logo, and the OReilly logo are registered
19
trademarks of OReilly Media, Inc. Learning Responsive Web Design and related trade dress are
trademarks of OReilly Media, Inc. 19
Many of the designations used by manufacturers and sellers to distinguish their 21 products
are claimed as trademarks. Where those designations appear in this book, and OReilly
Media, Inc., was aware of a trademark claim, the designations have been printed in 24 caps or
initial caps. 28
Although the publisher and author have used reasonable care in preparing this book, 29 the
information it contains is distributed as is and without warranties of any kind. This book is
not intended as legal or financial advice, and not all of the recommendations may be 30 suitable
for your situation. Professional legal and financial advisors should be consulted, as 33 needed.
Neither the publisher nor the author shall be liable for any costs, expenses, or damages
resulting from use of or reliance on the information contained in this book.

ISBN: 978-1-4493-6294-2 [T] 37

Contents 38
41
45
50
54
58
Preface..............................................................
www.it- 60

ebooks.info
iii
 FOUNDATIONS OF RESPONSIVE DESIGN
What Is Responsive Design?..........................
Just the Basics..................................................
A Short History...............................................
Why Responsive Design.................................
Summary..........................................................
Responsive Content........................................
Content Strategy..............................................
Managing Content..........................................
Developing Content........................................
Content Parity..................................................
Content Governance.......................................
Adaptive Content............................................
Summary..........................................................

CREATING RESPONSIVE WEBSITES

HTML for Responsive Sites............................
Working with HTML......................................
Basic Page Structure........................................
Viewport..........................................................
Structural Elements.........................................
Creating a Page................................................
Clean and Semantic HTML............................
Summary..........................................................
Chapter 4 CSS for Responsive Sites.............................................................63
How CSS Works......................................................................64
Versions of CSS....................................................................... 66
Where CSS Goes.....................................................................71
The Cascade............................................................................73
Using the Cascade..................................................................77
Comments...............................................................................81
Organizing Your Stylesheet...................................................81
The Box Model........................................................................82
display......................................................................................90
Positioning...............................................................................92

www.it-
float and clear..........................................................................96
Basic Styles..............................................................................98

ebooks.info
 Summary...............................................................................100

Chapter 5 Media Queries...........................................................................103

Whats a Media Query?.......................................................103
Media Query Structure........................................................105
Using Media Queries in Stylesheet Links..........................108
Other Ways to Use Media Queries ....................................109
What We Can Query............................................................110
Browser Support...................................................................113
Breakpoints...........................................................................116
Design Ranges.......................................................................117
Designing Responsively.......................................................118
Using Media Queries...........................................................123
Two-Column Layout.............................................................124
Setting a Maximum Width..................................................130
How to Choose Breakpoints................................................132
Summary...............................................................................133
Chapter 6 Images.........................................................................................135
Ways to Display Images.......................................................136
Alt Text...................................................................................140
Image File Formats...............................................................144
Optimizing Images...............................................................147
Content Images.....................................................................153
Background Images..............................................................164
Responsive Images...............................................................168
Summary...............................................................................178

PART III WORKING RESPONSIVELY

Chapter 7 Responsive Workflow................................................................183
Strategy and Planning..........................................................183
Content Before Layout.........................................................187
Thinking About Layout.......................................................191
Prototypes..............................................................................194
Visual Design........................................................................201
Responsive Design Tools.................................................... 207
Selling Responsive Design...................................................211
www.it-
Working with Clients...........................................................215

ebooks.info
 Summary...............................................................................218

Chapter 8 Mobile and Beyond....................................................................221

User Experience....................................................................221
Device-Agnostic Design.......................................................227
Focusing on Mobile First.....................................................228
Do What You Can................................................................ 228
Types of Devices...................................................................231
Touch......................................................................................234
Screen Size.............................................................................242
Accessibility (Universal Design).........................................244
Deciding Which Devices to Support..................................251
Why Use Real Devices for Testing......................................253
Testing....................................................................................254
Summary...............................................................................259

PART IV DESIGNING RESPONSIVE WEBSITES

Chapter 9 Typography..................................................................................263
Start with HTML..................................................................264
Typefaces...............................................................................264
Using Fonts...........................................................................266
Sizing Text.............................................................................271
Line Length...........................................................................283
Whitespace............................................................................289
Margins and Padding...........................................................291
Changing Typeface for Screen Size.....................................291
Summary...............................................................................293

Chapter 10 Navigation and Header Layout..............................................295

Responsive Navigation........................................................295
Branding................................................................................302
Navigation Links..................................................................304
Navigation Patterns..............................................................311
Header...................................................................................334
Summary...............................................................................343

Chapter 11 Performance..............................................................................345
Why Performance Matters...................................................346
www.it-
Performance as Design.........................................................347

ebooks.info
 How Web Pages Are Loaded and Rendered.....................349
Measuring Performance.......................................................355
Cleaning Up Your Code.......................................................357
Minimizing HTTP Requests................................................359
Server Stuf............................................................................362
JavaScript.............................................................................. 366
CSS.........................................................................................373
Hosting..................................................................................374
Conditionally Loading Content..........................................376
Reflows and Repaints...........................................................377
RESS.......................................................................................378
Summary...............................................................................381

www.it-
ebooks.info