Table of Contents
Future-Proof Web Design
A Survival Guide
This edition first published 2012
© 2012 John Wiley & Sons, Ltd
Registered office
John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom
For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book, please see our Web site at .
The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.
Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.
978-1-119-97877-0
A catalogue record for this book is available from the British Library.
Set in 10/14 Chaparral Pro by Wiley Composition Services
Printed in Italy by Trento
About the Author
Alexander Dawson (@AlexDawsonUK) is an award-winning, self-taught, freelance web professional, writer, published author, and recreational software developer from Brighton (UK). With more than 10 years of industry experience, he spends his days running his consultancy firm HiTechy (), writing professionally about web design and giving his free time to assist others in the field.
In recent years, Alexander has become an established web writer, providing articles for some of the industry’s most respected sites including Smashing Magazine and Six Revisions. In addition, as a member of the Guild of Accessible Web Designers, he actively promotes and advocates the benefits of a good user experience and web standards. When Alexander isn’t coding or writing about design and development, he enjoys a game of tennis or chess and watching movies.
Credits
Some of the people who helped bring this book to market include the following:
Editorial and Production:
VP Consumer and Technology Publishing Director: Michelle Leete
Associate Director- Book Content Management: Martin Tribe
Associate Publisher: Chris Webb
Publishing Assistant: Ellie Scott
Development Editor: Colleen Totz Diamond
Technical Editor: Kayla Knight
Copy Editor: Melba Hopper
Editorial Manager: Jodi Jensen
Senior Project Editor: Sara Shlaer
Editorial Assistant: Leslie Saxman
Marketing:
Senior Marketing Manager: Louise Breinholt
Marketing Executive: Kate Parrett
Composition Services:
Compositor: Jennifer Mayberry
Proof Reader: Melissa D. Buddendeck
Indexer: Potomac Indexing, LLC
Author’s Acknowledgments
Writing a book is always a challenge and this title, in particular, had more ahead of it than many; but with a fantastic group of people behind you, anything becomes possible. As always, my thanks firstly have to go out to the entire team at Wiley (including Chris Webb and Ellie Scott in particular) whose hard work and effort in getting this unusual idea out of my head and into print shouldn’t go unsung. Without such an understanding group of individuals who’ve worked tirelessly at every level (behind the scenes) to ensure the quality of this book and its content, it likely wouldn’t have succeeded!
Next, there are three further individuals who deserve an incredible amount of credit. Firstly, I need to give a shout out to my copy editor (Melba) who has done an exceptional job at helping me craft my occasionally mind-boggling prose into something legible! Also, there’s my great technical editor (Kayla Knight) who kept my facts in check and offered lots of useful advice to improve the reading experience, making this title all the better for you. Finally, my gratitude has to go out to my editor (Colleen Diamond) who undertook a superhero-like performance, despite the universe attempting to disrupt our efforts.
Next, I would like to thank all of the people who have supported me throughout the writing process: from my friends and followers on social networks, IRC, instant messenger, and the websites where I’ve written, to the amazing and inspiring individuals who I’ve met at conferences or just chat to on a daily basis (you know who you are!). Ending this, the biggest thanks of all go out to you, the reader. By purchasing this title, you are supporting months of hard work, and if this book can help you craft flexible, future-proofed layouts that withstand the test of time, accounting for the many variables at work in a site, all of that effort I’ve put into writing this reference guide will have been worthwhile.
Introduction
The Web is wondrous. From its humble beginnings as a text-only interface, to its modern incarnation as an interactive, immersive experience, it has suffered many highs and lows (like the move toward web standards or the past obtrusiveness of scripting). Throughout the Web’s development, designers have been forced to innovate, endure, and push through limitations to ensure that their sites retain stability and flexibility. By making sites usable in a wide range of situations (future-proofed against changing usage), we can ensure that sites may be enjoyed by the next generation of Internet users, no matter how they use the Web.
Forget dogs. Man’s new best friend is the Internet. In a short period of time, the Web has grown from being accessible solely upon a desktop or laptop with one or two browsers to being experienced on netbooks (using one of many configurations), smartphones, and a range of other devices like TV sets! It has become a vital means of communication for the world as well as a port for those seeking knowledge, entertainment, or a place to voice opinions. Also: It can be used practically anywhere and is only limited by our imagination.
With each change and improvement the Web has encountered comes an increasing range and number of tools to help you build more engaging interfaces. However, with the sweet comes the sour. This fast-paced, increasingly diverse medium provides web designers with more challenges than ever to overcome and so many variables to account for. Making our layouts continue to work with old (compatibility quirks in devices) and new situations (future-proofing to withstand the test of time) is an investment to ensure long-term success.
What’s This Book About?
If you regularly build web sites, you’ve probably noticed that your content is consumed in increasingly unique ways. Back in the ’90s, you could assume that users accessed your site using a desktop computer, with one or two base resolutions and either Internet Explorer or Netscape Navigator. Today, just trying to guesstimate how much screen real estate a user has is like chasing a pot of gold at the end of a rainbow. You’ll either get lucky or end up targeting what doesn’t exist (except in legend or mythology), such as the “average user.”
During the browser wars (the time of Internet Explorer versus Netscape), web designers focused heavily on ensuring that interfaces worked in specific situations, building rigid, inflexible layouts (because of a lack of situations where diverse layouts would make a real difference). Some designers still build fixed layouts and have failed to notice how the Web’s landscape is changing. Variables that used to be considered a safe default no longer apply, attitudes are altering, and the designer’s challenge is to understand the scenarios visitors may encounter, determine whether these users require a specific solution, and then account for these factors within his or her site (to encourage visitors to keep visiting the site).
More and more, devices are gaining the “web enablement” treatment. Unique hardware products have gained online support. Software is playing a more active role in how layouts render. New standards and web languages are gaining traction. Even users are changing and adapting their behavior to match new technologies. To stay ahead of the curve, you must ensure that your site functions with what a user has, while also accounting for future variables that may spring up and become popular (as they gain mainstream adoption).
Your work isn’t just affected by code and browsers. You need to split apart the various layers of the Web (such as devices, hardware, software, standards, and consumers) to uncover the wealth of factors that can affect your site’s stability and users’ experiences. Accounting for each layer involves considering what can impact how users interact with your site (such as the operating system or browsers in the case of the software layer), and making sure that your layouts can withstand any changes that may occur as a result of a user’s environment.
No Artificial Flavorings
Now that you understand that the Web is evolving, allow me to introduce myself. My name is Alexander Dawson, and I’m a web designer who’s been building and improving sites for more than ten years (in addition to writing on the subject). If you’re the type of person who relishes any opportunity for trial and error, enjoys learning from the perspective of users, and has a passion for straightforward advice, fantastic! You’ve got the right book. For those of you who prefer detailed step-by-step instructions, this book may present more of a challenge.
It’s worth cutting to the chase and saying that this isn’t going to be a progressive tutorial to help you build some mobile layout (or an explicit design for any other type of device, for that matter). Because every situation you design for will be different, my philosophy is that the space in this book is better served by giving you the tools you need to make practical decisions, instead of providing you with a template (or “color by numbers” guide), which really serves its purpose only in a generic environment aimed at a non-existent audience.
This book is not made up of tips and techniques for creating that perfect layout, and it’s not a book of inspiration, reeling from the wonderful work of others (though I do encourage design by inspiration). What you will find within these pages is a wealth of information regarding the variables that can affect your sites or render them differently, occasionally causing issues. If the Web were a living, breathing entity, it’s possible that this book would be considered a guide to its ever-diverse biology and how to ensure its long term health!
My motivation for writing this book is straightforward. As is often the case with designers, I noticed the recent upsurge in new technologies that demanded additional testing, restrictive design considerations, or a more flexible method of serving data. So, my goal within these pages is to break down the misconceptions regarding what makes user experiences unique and to highlight some lesser-appreciated factors in the designer’s workflow. By examining the variables listed within this book, you can adapt your sites to meet the needs of each user.
Conventions Within This Book
Many enjoy the free content that gives some extra insight into movies they watch. When it comes to books, I like to think the same is also true. Of course, only so much information will fit within a set number of pages we have to explore this subject, so to give you more for your money, I have planted some useful “extras” within the pages of this book where possible, all with the aim of giving you some food for thought, useful links, and important details to keep you better informed. Keep an eye out for these extras as they appear.
Below are the conventions, with details about their purpose and function:
> Tips and Notes: Throughout the book, I provide tips and tricks to give you ideas, words of caution, and important, relevant details that can help you on your quest.
> Resources: Don’t just take my word for it. Throughout the book I include useful links that expand upon the variables to help you design in various situations.
> Checklists: Marking your progress can be helpful and fun. The lists at the end of a variable set goals to help you ensure a site will be as stable as possible.
If you are new to the web design world, you probably should work through this book in order (accounting for each variable as you read about it), but if you are a veteran, you may want to use the book as a quick reference guide, jumping to sections you want to know more about. This will allow you to account for the many cool new technologies on the horizon that will soon become “required reading” and keep up-to-date with the subjects that require our attention to ensure that our work continues to function on legacy devices.
Your Marauders Map
Keeping up-to-date with the latest trends and innovations is tough, especially in the field of web design. Within this book, you’ll explore the variables in that environment, learn, or see how designers are trying to maximize performance between platforms, and gain basic advice to help you when venturing into the unknown.
Chapter 1 has one goal in mind: Survival. Because the Web is still evolving at a rapid pace, from time to time new variables appear that must be catered to. They could literally be anything making its first appearance into your workflow; don’t you just love surprises! Perhaps it’ll be one of the predictions made by this book, or something totally obscure. As such, it seems only fitting that you are prepared for whatever may happen, and this chapter acts as a training session before you start engaging in the battle for site stability that’s ahead.
Chapter 2 builds on the work of the first chapter, showcasing the methodologies that many designers are using to build increasingly flexible layouts. However you build your sites, accounting for as many variables as possible is important. Getting used to the concepts provided will help you better meet an audience’s needs. Because each variable has its own requirements and considerations, applying these useful tricks requires some imagination and clever coding, but this goal is entirely possible to achieve if you put in the hard work.
Finally, you find the variables themselves, the true substance of this book, in a wealth of useful chapters (denoted in the following bulleted list by the category each chapter falls into). Each layer has several chapters, and each chapter has several variables that affect a layout!
Here are the various layers (or factors) of the Web, as covered in this book:
> Devices: Desktops, handhelds, entertainment, and appliances (Chapters 3-6)
> Hardware: Input and output tools plus environmental factors (Chapters 7-9)
> Software: OSs, web editors, browsers, plug-ins, and more (Chapters 10-14)
> Standards: Code, third parties, design, and innovations (Chapters 15-18)
> Consumers: Robotic influences and human-based factors (Chapters 19-20)
Addressing problems with every variable goes beyond the scope of this book, as there are far too many considerations to account for. If you think about a keyboard, users may have faulty keys, be slow typists, and have access to backlighting or more! This book aims to give you a few pointers in the right direction and actually showcase how complex and intricate the web machine actually is; by doing so, you should be able to consider the tips and tricks that are provided and build better personas and solutions accounting for these variables.
This journey will serve as a landmark for your future design and development projects as you come to appreciate how delicate our sites are against the veritable storm of the underlying processes involved. By coming to terms with the variables mentioned (and any yet to make themselves known) and changing your way of thinking, you can become a better designer! While this subject may seem overly theoretical, it needs to be explored and the truth is, when we start asking the right questions, good decisions follow.
Building a site is a challenge, and it’s one that will only increase in complexity as the Web evolves. We’ve gone from a world in which desktops ruled like dinosaurs to a landscape filled with many creatures with their own unique characteristics. The thing to remember is that visitors remain firmly in the driver’s seat, dictating how they’ll engage with your sites. Mobile devices, 3D, new browsers, CSS3, social networks, and more have their unique place in this scenario. As a designer of the next generation of sites, you need to be prepared.
Please note that some special symbols used in this eBook may not display properly on all eReader devices. If you have trouble determining any symbol, please call Wiley Product Technical Support at 800-762-2974. Outside of the United States, please call 317-572-3993. You can also contact Wiley Product Technical Support at .