bulletproof web design

Download Bulletproof Web Design

Post on 13-Feb-2017

214 views

Category:

Documents

1 download

Embed Size (px)

TRANSCRIPT

  • Improving flexibility and protecting against worst-case scenarios

    with HTML5 and CSS3

    Dan Cederholm

    Bulletproof Web

    Design

    T h i r D E D i T i o n

    Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3

    Bulletproof Web

    DesignNo matter how visually appealing or content packed a web site may be, if it doesnt reach the widest possible audience, it isnt truly successful. In Bulletproof Web Design, Third Edition, bestselling author and web designer Dan Cederholm outlines standards-based strategies for building designs that can accommodate the myriad ways users choose to view the content. Each chapter starts out with an example of an unbulletproof approachone that employs traditional HTML-based techniqueswhich Dan deconstructs, pointing out its limitations. He then gives the example a makeover using HTML and CSS, so you can learn to replace bloated code with lean markup and CSS for fast-loading sites that are accessible to all users. Finally, he assembles all of the page components discussed in prior chapters into a single-page template. This fully revised and updated third edition introduces CSS3 and HTML5 methods and features redesigned case studies including new responsive design examples.

    Size text using keywords, percentages, and ems to allow more user control.

    Plan for vertical expansion of horizontal page components.

    Use floats to achieve grid-like results.

    Ensure that content is still readable in the absence of images or CSS.

    Strip the presentation from data tables, and rebuild with CSS.

    Progressively enhance your designs using HTML5 and CSS3.

    Visit the companion website at simplebits.com/bulletproof to download finished files, additional resources, and book updates.

    ISBN-13:ISBN-10:

    978-0-321-80835-60-321-80835-5

    9 7 8 0 3 2 1 8 0 8 3 5 6

    5 4 4 9 9

    US $44.99 CaN $46.99

    Book Level: Intermediate / advancedComputer Book Shelf Category: Web Design / Web Development / ScriptingCovers: CSS and HTML scripting on Windows, Mac OS, and Unix

    Dan Cederholm is a designer, author, speaker, husband, and father living in Massachusetts. Hes the Founder

    and Principal of SimpleBits LLC, a tiny design studio. A recognized expert in the field of standards-based web design, Dan has worked with YouTube, Microsoft, Google, MTV, ESPN, Electronic Arts, Blogger, Fast Company, Inc. Magazine, and others. Dan is co-founder and designer of Dribbble, a vibrant community for sharing screenshots of your work. His other bestselling books include CSS3 For Web Designers and Handcrafted CSS: More Bulletproof Web Design. Hes currently an aspiring clawhammer banjoist and occasionally wears a baseball cap.

    Cove

    r Des

    ign:

    Mim

    i Hef

    t and

    Dan

    Ced

    erho

    lm

    T h i r D E D i T i o n

    www.newriders.com

    Bulletproof Web D

    esignIm

    proving flexibility and protecting against w

    orst-case scenarios with H

    TML5 and CSS3

    CederholmT

    hir

    D

    ED

    iTio

    n

  • Bulletproof Web DesignImproving flexibility and protecting against worst-case scenarios with HTML5 and CSS3

    Third Edition

    Dan Cederholm

  • Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3, Third EditionDan Cederholm

    New Riders 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax)Find us on the web at: www.newriders.comTo report errors, please send a note to: errata@peachpit.com

    New Riders is an imprint of Peachpit, a division of Pearson Education.

    Copyright 2012 by Daniel Cederholm

    Editor: Rebecca GulickCopy Editor: Liz MerfeldTechnical Reviewer: Patrick H. LaukeProofreader: Patricia PaneProduction Coordinator and Compositor: Danielle FosterIndexer: Valerie Haynes PerryCover Designers: Mimi Heft and Dan CederholmInterior Designers: Charlene Will and Maureen Forys

    Notice of RightsAll rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com.

    Notice of LiabilityThe information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it.

    TrademarksMany of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.

    ISBN-13: 978-0-321-80835-6ISBN-10: 0-321-80835-5

    9 8 7 6 5 4 3 2 1

    Printed and bound in the United States of America

    www.newriders.com

  • For Jack & Tenley.

  • AcknowledgmentsTo Michael Nolan for connecting me with New Riders as well as helping me solidify the concept of the book early on. Similarly, big thanks also go to the late, great Marjorie Baer for her guidance at the beginning of the project.

    To Dave Roberts for stealing second.

    To everyone at Peachpit who was involved in this book in some way, but especially Rebecca Gulick for steering the entire project, making the entire process as smooth as possible.

    To Ethan Marcotte for being an excellent technical editor on the first edition. It was great to work with Ethan on this, and his comments and insight were invaluable. Thanks also to Virginia DeBolt for tech-editing the second edition and Patrick H. Lauke for tech-editing the third edition.

    To my colleagues who continue to provide inspiration, sharing their tech-niques and knowledge, on and off line. This book wouldnt have been written if it werent for the previous work of the following (as well as many more who Im forgetting to mention here): John Allsopp, Dan Benjamin, Holly Bergevin, Douglas Bowman, Andy Budd, Tantek elik, Joe Clark, Andy Clarke, Mike Davidson, Todd Dominey, Jason Fried, John Gallant, Patrick Griffiths, Jon Hicks, Molly Holzschlag, Shaun Inman, Ryan Irelan, Richard Ishida, Roger Johansson, Jeremy Keith, Ian Lloyd, Drew McLellan, Eric Meyer, Cameron Moll, Matt Mullenweg, Mark Newhouse, Dunstan Orchard, Veerle Pieters, D. Keith Robinson, Richard Rutter, Jason Santa Maria, Christopher Schmitt, Dave Shea, Ryan Sims, Greg Storey, Jeffrey Veen, Josh Williams, and Jeffrey Zeldman.

    Special thanks to Jon Hicks for creating the original 3D CSS Box Model Illustration (www.hicksdesign.co.uk/3dboxmodel/), which inspired those found in the book.

    To the readers and clients of SimpleBits, youve made it possible for me to work on things I love.

    To the Greater Beverly Adult Dodgeball league, for providing a necessary escape every Tuesday evening at 7:30.

    To my always amazingly supportive parents, my brother Matt and his family, and the rest of my extended family and friends.

    And as always, to my partner in crime, Kerry, for being the rock star wife that she is.

    Lastly, thank you for reading.

    www.hicksdesign.co.uk/3dboxmodel/

  • Contents

    Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

    CHAPTERONE FlexibleText....................................1

    Size text using keywords and percentages or

    ems to allow user control and

    maximum flexibility. . . . . . . . . . . . . . . . . . . . . . . . . . . 2

    A Common Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

    Why its not bulletproof . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

    Weighing Our Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

    Length units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

    Relative-size keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

    Percentages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

    Absolute-size keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

    A Bulletproof Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

    Keywords explained . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

    Letting go of pixel precision . . . . . . . . . . . . . . . . . . . . . . 9

    Why Its Bulletproof . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

    A Flexible Base. Now What? . . . . . . . . . . . . . . . . . . . . . . . 10

    Set it and forget it . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

    Use percentages to stray from the base . . . . . . . . . . . . . .11

    Working with Keywords and Percentages . . . . . . . . . . . . 15

    Setting an in-between keyword base . . . . . . . . . . . . . . . 15

    Be careful when nesting percentages . . . . . . . . . . . . . . . 17

    Experiment with percentage values for consistency . . . 18

    Flexible Text Using Ems . . . . . . . . . . . . . . . . . . . . . . . . . . 20

    The rem unit . . . . . . . . . . . . . . . . . . . . . . . .