Moving to Responsive Web Design: Bring existing static sites into today's multi-device world with responsive web design

174 Pages·2016·9.28 MB·English

by  Inayaili de León (auth.)

Moving to
Responsive
Web Design
Bring existing static sites into today’s
multi-device world with responsive
web design
—
Inayaili de León
Moving to
Responsive Web
Design
Bring Existing Static Sites into
Today’s Multi-Device World with
Responsive Web Design

Inayaili de León
Moving to Responsive Web Design: Bring Existing Static Sites into Today’s Multi-Device
World with Responsive Web Design
Inayaili de León
London, United Kingdom
ISBN-13 (pbk): 978-1-4842-1986-7 ISBN-13 (electronic): 978-1-4842-1987-4
DOI 10.1007/978-1-4842-1987-4
Library of Congress Control Number: 2016951450
Copyright © 2016 by Inayaili de León
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part
of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations,
recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission
or information storage and retrieval, electronic adaptation, computer software, or by similar or
dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are
brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for
the purpose of being entered and executed on a computer system, for exclusive use by the purchaser
of the work. Duplication of this publication or parts thereof is permitted only under the provisions
of the Copyright Law of the Publisher’s location, in its current version, and permission for use must
always be obtained from Springer. Permissions for use may be obtained through RightsLink at the
Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and
images only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are
not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject
to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal responsibility
for any errors or omissions that may be made. The publisher makes no warranty, express or implied,
with respect to the material contained herein.
Managing Director: Welmoed Spahr
Acquisitions Editor: Ben Renow-Clarke
Development Editor: Chris Nelson
Technical Reviewer: Massimo Nardone
Editorial Board: Steve Anglin, Pramila Balen, Laura Berendson, Aaron Black, Louise Corrigan,
Jonathan Gennick, Celestin Suresh John, Nikhil Karkal, Robert Hutchinson, James Markham,
Matthew Moodie, Natalie Pao, Ben Renow-Clarke, Gwenan Spearing
Coordinating Editor: Nancy Chen
Copy Editor: Tiffany Taylor
Compositor: SPi Global
Indexer: SPi Global
Cover Image: Designed by freepik.com
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring
Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail
[email protected] , or visit w ww.springer.com . Apress Media, LLC is a California LLC
and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc).
SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected] , or visit w ww.apress.com .
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use.
eBook versions and licenses are also available for most titles. For more information, reference our Special
Bulk Sales–eBook Licensing web page at w ww.apress.com/bulk-sales .
Any source code or other supplementary materials referenced by the author in this text is available
to readers at w ww.apress.com . For detailed information about how to locate your book’s source code,
go to www.apress.com/source-code/ .
Printed on acid-free paper
To my parents, for making me love to read.

Contents at a Glance
About the Author ............................................................................xiii
About the Technical Reviewer .........................................................xv
Acknowledgments .........................................................................xvii
Preface ...........................................................................................xix
Introduction ....................................................................................xxi
■ Chapter 1: The Planning Stage .......................................................1
■ Chapter 2: The Content Development Stage .................................23
■ Chapter 3: The Design Stage ........................................................47
■ Chapter 4: The Build Stage ...........................................................93
Conclusion .....................................................................................137
Appendix: Resources .....................................................................139
Index ..............................................................................................145
v

Contents
About the Author ............................................................................xiii
About the Technical Reviewer .........................................................xv
Acknowledgments .........................................................................xvii
Preface ...........................................................................................xix
Introduction ....................................................................................xxi
■ Chapter 1: The Planning Stage .......................................................1
The Team .................................................................................................2
Involve All the Right People ......................................................................................2
Defi ne a Project Leader ............................................................................................3
Everyone Participates ...............................................................................................4
Low-Fidelity Planning ..............................................................................5
Gaining Perspective ..................................................................................................5
Digital Record ...........................................................................................................6
Finding Time in Your Schedule ................................................................9
Understand Your Calendar ........................................................................................9
Deprioritize Other Projects .....................................................................................10
Assigning Tasks .....................................................................................10
Use Everyone at Once .............................................................................................11
Do Not Use Everyone at Once .................................................................................12
Account for Downtime ............................................................................................12
vii
■ CONTENTS
Keep a Tight Scope ................................................................................13
Start with a Wish List ..............................................................................................13
Organize .................................................................................................................14
Prioritize .................................................................................................................14
Break Down the Tasks ............................................................................................14
The One-Hour Test ..................................................................................................15
Defi ne Stages .........................................................................................................16
Determine What Is Out of Scope .............................................................................16
Do Not Forget Testing .............................................................................................17
Set Deadlines ........................................................................................17
Phase 1 ...................................................................................................................18
Phase 2, Phase 3 … ...............................................................................................18
Rollout Strategies ..................................................................................18
Managing Site Updates .........................................................................20
Keep a Record as You Work Through the Project ..................................20
Summary ...............................................................................................21
■ Chapter 2: The Content Development Stage .................................23
Designing with Real Content .................................................................23
Focus on Accessibility ...........................................................................24
Good Accessibility Helps Everyone .........................................................................25
What You Can Do ....................................................................................................26
Accessibility and Usability ......................................................................................27
Reviewing Your Existing Content ...........................................................28
Content Inventories and Content Audits .................................................................28
Doing a Content Inventory ......................................................................................28
Doing a Content Audit .............................................................................................30
Quick Content Inventories and Content Audits .......................................................31
viii
■ CONTENTS
Ongoing Maintenance ...........................................................................32
Avoid Duplicated Work ............................................................................................32
Phasing Content Updates .......................................................................................32
Updating and Simplifying Existing Content ...........................................33
Quick Wins ..............................................................................................................33
Shorter Is Not Better ...............................................................................................34
Less Content May Be Better Content ......................................................................35
Reduce Cognitive Load Without Restricting Access to Content ..............................37
Have a Plan ...........................................................................................40
Defi ning a Style .....................................................................................41
Improving Your Content Management System ......................................44
Remove Inline Styles ..............................................................................................44
Remove Styling Options ..........................................................................................45
Add Structure to Your Content ................................................................................45
Another Option: Doing Nothing ..............................................................45
Summary ...............................................................................................46
■ Chapter 3: The Design Stage ........................................................47
Evolution, Not Revolution ......................................................................47
Focus on Reusability .............................................................................49
Focus on Accessibility ...........................................................................52
Performance First ..................................................................................54
No More Flats ........................................................................................54
Setting the Rules ...................................................................................55
Write It ....................................................................................................................55
Build It ....................................................................................................................58
ix