Phil Dutson - Responsive Mobile Design: Designing for Every Device (Usability)

ePUB is an open, industry-standard format for eBooks. However, support of ePUB and its many features varies across reading devices and applications. Use your device or app settings to customize the presentation to your liking. Settings that you can customize often include font, font size, single or double column, landscape or portrait mode, and figures that you can click or tap to enlarge. For additional information about the settings and features on your reading device or app, visit the device manufacturers Web site.

Many titles include programming code or configuration examples. To optimize the presentation of these elements, view the eBook in single-column, landscape mode and adjust the font size to the smallest setting. In addition to presenting code and configurations in the reflowable text format, we have included images of the code that mimic the presentation found in the print book; therefore, where the reflowable format may compromise the presentation of the code listing, you will see a Click here to view code image link. Click the link to view the print-fidelity code image. To return to the previous page viewed, click the Back button on your device or app.

Designing for Every Device

Phil Dutson

Upper Saddle River, NJ Boston Indianapolis San Francisco
New York Toronto Montreal London Munich Paris Madrid
Capetown Sydney Tokyo Singapore Mexico City

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals.

Apple, iPad, iPhone, and Retina are registered trademarks of Apple.

Android is a trademark of Google.

The author and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein.

For information about buying this title in bulk quantities, or for special sales opportunities (which may include electronic versions; custom cover designs; and content particular to your business, training goals, marketing focus, or branding interests), please contact our corporate sales department at or (800) 382-3419.

For government sales inquiries, please contact .

For questions about sales outside the U.S., please contact .

Visit us on the Web: informit.com/aw

Library of Congress Control Number: 2014944246

Copyright 2015 Pearson Education, Inc.

All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise. To obtain permission to use material from this work, please submit a written request to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to (201) 236-3290.

ISBN-13: 978-0-133-88821-8

ISBN-10: 0-133-88821-5

Text printed in the United States on recycled paper at R.R. Donnelley in Crawfordsville, Indiana.

First printing: September 2014

Editor-in-Chief
Mark Taub

Executive Editor
Laura Lewin

Development Editor
Sheri Cain

Managing Editor
Kristy Hart

Senior Project Editor
Lori Lyons

Copy Editor
Krista Hansing Editorial Services

Indexer
Tim Wright

Proofreader
Debbie Williams

Technical Reviewers
Cameron Banga
Dennis Kardys
Jacob Stuart

Editorial Assistant
Olivia Basegio

Cover Designer
Chuti Prasertsith

Compositor
Nonie Ratcliff

Manufacturing Buyer
Dan Uhrig

Whether youre building or refining your skill set, Responsive Mobile Design is the quintessential guide to getting up to speed with modern web practices. Phils unique background and expertise grant him insights that both the hardcore programmer and pixel perfect designer will find invaluable.

Jacob R. Stuart, Web/UI Designer

Its impossible to build for the web today without taking various screen sizes and form factors into account; you never know if your user will be on a phone, tablet, or desktop. This book helps lay the groundwork for building responsive web designs. Its really a must-read.

Cameron Banga, Co-founder, 9magnets, LLC

Anyone looking for a comprehensive book on responsive design tactics would do well to pick up a copy of Responsive Mobile Design. Phil does a stellar job of breaking down the how and why of RWD in this practical guide to designing for a wide spectrum of screen sizes and devices.

Dennis Kardys, Design Director, WSOL

While the three initial technical ingredients of RWD (fluid grids, flexible images, and media queries) still stand true, building a site today requires much more thought and know-how than it used to. This book will take you beyond the basics and teach you the ins and outs of modern web development.

Erik Runyon, Director of Web Communications, University of Notre Dame

Phil Dutson unveils a dummy-proof treasure trove of essential mobile design advice, resources, and examples bound to enlighten designers and developers alike. This book belongs on every web designers shelfa comprehensive guide to return to time and time again.

Kaylee White, Web Designer, SEO.com

To my friends and family, who remind me to look at everything through the eyes of an inquisitive 5-year-old without fear of mashing buttons until everything is working properly.
Phil

The phrase Responsive Mobile Design doesnt really roll off the tongue, and even when placed under a microscope it tends to shift and blur, making it difficult to gain a full appreciation for what it is.

When you boil it down, it comes down to a paradigm shift. In breadth of design, this isnt really a new concept. It is more like the time when you first realized you could draw things in a third-dimensional perspective, and suddenly a new fascination with cubes, spheres, focal-points, and shadows started to overtake most of your sketches.

Being able to step back and realize that people want information as soon as possible, and having it fit on the device they happen to have at the moment, you can gain an appreciation for making sure that they get what they want in the most aesthetically pleasing way possible.

That is Responsive Mobile Design: the fusing of content, structure, and beauty to deliver experiences that users will continue to keep coming back to.

This book is full of my experiences with mobile devices, design, and even a smidgen of code that can help get your creation into the hands of millions of mobile users in the best way possible. Along the way, some topics will be lightly brushed over while others will have their intricacies beat upon like the soothing double-bass of your favorite Swedish-metal band.