Bulletproof web design

Reviews
Shared by: Zac Davies
Categories
Tags
Stats
views:
96
rating:
not rated
reviews:
0
posted:
8/26/2008
language:
pages:
0
DAN C EDER HOLM • WEBVIS IONS 20 0 6 • PORTL AN D, OR E GON bul•let•proof (adj.) bul•let•proof (adj.) ๏ Wort-case scenarios bul•let•proof (adj.) Wort-case scenarios ๏ Flexibility ๏ Fig. 1: Jack DAN C EDER HOLM • WEBVIS IONS 20 0 6 • PORTL AN D, OR E GON “Love your site, Dan – but I can’t read it.” – Frustrated Reader Faux Columns Faux Columns Simple fix Specify background color equivalents: #content { background: #fff; } #sidebar { background: #eee; } What happens when images are turned off? Baker's dozen Baker's dozen 13 Bulletproof pants Comfort Equipped™ (expandable waistband) Bulletproof paths Bulletproof paths CONTENT • text size • content amount Bulletproof paths CONTENT • text size • content amount Bulletproof paths CONTENT • text size • content amount EDITING • content changes • maintenance Bulletproof paths CONTENT • text size • content amount EDITING • content changes • maintenance Bulletproof paths CONTENT • text size • content amount EDITING • content changes • maintenance ENVIRONMENT • device / browser • scenarios Bulletproof paths CONTENT • text size • content amount EDITING • content changes • maintenance ENVIRONMENT • device / browser • scenarios “ The journey begins by letting go of control, and becoming flexible.” – John Allsopp “A Dao of Web Design” ways to accomplish the same goal. ways to accomplish the same goal. 4,362 ways to accomplish the same goal. 4,362 (approximately) Web design in a nutshell Web design in a nutshell ๏ Ways that work Web design in a nutshell ๏ Ways that work ๏ Ways that are better Web design in a nutshell ๏ Ways that work ๏ Ways that are better ๏ Ways that don't work Solution #1: Solution #2 CSS DigDug Text Test DigDug Text Test “ Nobody actually adjusts text size.” – DDTT Naysayers Evaluating with text size Evaluating with text size ๏ I use it, and I have decent eyesight. Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a "flexibility barometer". Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a "flexibility barometer". ๏ Not just text size, but content amount. Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a "flexibility barometer". ๏ Not just text size, but content amount. ๏ Use relative sizes with confidence. Solution #3: Bulletproof ๏ Flexible ๏ Easy to edit ๏ Allows for varying text size or content amount Define the ingredients The markup

This Way

The background image The background image The CSS h2 { margin: 0; padding: 0; font-size: 200%; font-weight: normal; } The CSS h2 a { padding: .5em .8em .5em 1.5em; color: #fff; text-decoration: none; background: #693 url(nav-arrow.gif) no-repeat 0 50%; } position: absolute; float float Self-clearing floats
____________ ____________ ____________ float: left; Self-clearing floats
____________ ____________ ____________ float: left; Self-clearing floats
____________ ____________ ____________ float: left; Self-clearing floats div.box:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } ______ ______ ______ http://positioniseverything.net/easyclearing.html Self-clearing floats div.box:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } div.box { display: inline-block; } ______ ______ ______ http://positioniseverything.net/easyclearing.html Self-clearing floats div.box:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } div.box { display: inline-block; } /* hide from ie/mac \*/ * html div.box { height: 1%; } div.box { display: block; } /* end hide */ ______ ______ ______ http://positioniseverything.net/easyclearing.html Think modular Think modular ______ ______ ______ Think modular ______ ______ ______ ______ ______ ______ Think modular ______ ______ ______ ______ ______ ______ ___ ___ ___ Think modular ______ ______ ______ ___ ___ ___ ______ ______ ______ ___ ___ ___ Think modular ______ ______ ______ ___ ___ ___ ___ ___ ___ ______ ______ ______ ___ ___ ___ wife’s choice Thinking in fixed-height Bulletproofing it

Gifts and Special Offers

... content here ...

Needs flexibility Vertical Sliding Doors

border-bottom Accepting the box clearleft.com clearleft.com clearleft.com clearleft.com div.box { background: url(corner.gif) no-repeat top right; } hicksdesign.co.uk hicksdesign.co.uk Subtle modification Subtle modification .box { background: #fff url(corner.gif) no-repeat bottom right; }
background: #D5E3B9 url (bottom.gif) no-repeat bottom right;

background: #D5E3B9 url (bottom.gif) no-repeat bottom right;

background: #86B034 url (top.gif) no-repeat top left; background: #D5E3B9 url (bottom.gif) no-repeat bottom right; 1 2 1 2 cameronmoll.com/portfolio Reusable Ornamentation Reusable Ornamentation Reusable Ornamentation

Right Now on Cork'd

Reusable Ornamentation border-top: 1px solid #E0D0B1;

Right Now on Cork'd

Reusable Ornamentation border-top: 1px solid #E0D0B1;

Right Now on Cork'd

Wider than needed background: url(hr.gif) no-repeat 50% 100%; Wider than needed background: url(hr.gif) no-repeat 50% 100%; Wider than needed background: url(hr.gif) no-repeat 50% 100%;

h2 { background: url(tile.gif) repeat-x 0 50%; }

h2 span { padding: 0 10px; background: #272A2D; } h2 { background: url(tile.gif) repeat-x 0 50%; } Navigation Web (40,093) Web (40,093) microformats.org
  • li:hover a:hover
  • Links haveamint.com haveamint.com haveamint.com joyent.com joyent.com Attaching icons Attaching icons Attaching icons Attaching icons Attaching icons a.edit { background: url(pencil.gif) no-repeat 0 50%; a.add { background: url(plus.gif) no-repeat 0 50%; Layout Fixed vs. Fluid Fixed vs. Fluid ๏ Not going to go there. Fixed vs. Fluid ๏ Not going to go there. ๏ When executed well, fluid layouts can be betterproof. Fixed vs. Fluid ๏ Not going to go there. ๏ When executed well, fluid layouts can be betterproof. ๏ Can have drastic effects on page design. Fixed vs. Fluid ๏ Not going to go there. ๏ When executed well, fluid layouts can be betterproof. ๏ Can have drastic effects on page design. ๏ Each has their place. max-width, min-width ๏ Set extremes for fluid-width layouts. ๏ Keeps line lengths readable. ๏ Currently unsupported in IE/Win #wrap { max-width: 1200px; } Framed by % ๏ Helps with keeping a reasonable line length. max-width:1000px; Variable fixed-width layouts ๏ Wider layout for wider browser windows. ๏ Javascript swaps class or serves alternate stylesheet when window is narrowed. ๏ Predictability for designers, increased flexibility for reader. Bulletproof tools 10-second usability test ๏ Take away the design. ๏ Is the site still understandable? ๏ Like an x-ray of the document. ๏ Does the structure make sense? Unscientific! Unscientific! ...But easy (and helpful) to add to workflow. Validation as a tool ๏ 100% Validation is difficult to maintain. ๏ Validation during construction is key. ๏ Eliminates head-scratching CSS problems. Web Developer Extension http://chrispederick.com/work/webdeveloper/ Web Developer Extension http://chrispederick.com/work/webdeveloper/ Safari Tidy Safari Tidy Bulletproof dashboard ๏ 10 second usability test (disable styles) ๏ Turn off images (still readable?) ๏ Validate markup and stylesheets ๏ DigDug Text Test (DDTT) The bulletproof concept The bulletproof concept ๏ A catchy phrase to sell books and secure speaking engagements The bulletproof concept ๏ A catchy phrase to sell books and secure speaking engagements ๏ The positive power of buzzwords The bulletproof concept The bulletproof concept ๏ Embrace flexibility The bulletproof concept ๏ Embrace flexibility ๏ Let go of “pixel precision” The bulletproof concept ๏ Embrace flexibility ๏ Let go of “pixel precision” ๏ Plan ahead for worst-case scenarios great design great web design Thank you. http://simplebits.com/publications/speak/webvisions/bpwd-wv2006.pdf

  • Related docs
    How to build a bulletproof startup
    Views: 854  |  Downloads: 66
    Bulletproof Web Design 2nd Edi Aug 2007
    Views: 35  |  Downloads: 4
    How to build a bulletproof startup
    Views: 276  |  Downloads: 33
    How to build a bulletproof startup
    Views: 240  |  Downloads: 37
    Basic Design Principles for the Web
    Views: 12  |  Downloads: 1
    Bulletproof Vest Partnership - 2000
    Views: 98  |  Downloads: 0
    Bulletproof Vest Partnership - 1999
    Views: 116  |  Downloads: 0
    The Bulletproof Vest Partnership - March 2002
    Views: 844  |  Downloads: 0
    premium docs
    Other docs by Zac Davies
    Introduction to good usability
    Views: 58  |  Downloads: 6
    Interface design juggling
    Views: 63  |  Downloads: 3
    History of the internet
    Views: 62  |  Downloads: 0
    Elegant web typography
    Views: 72  |  Downloads: 0
    Contigency design
    Views: 70  |  Downloads: 1
    Bulletproof web design
    Views: 66  |  Downloads: 4
    AIGA - Illustration
    Views: 67  |  Downloads: 0
    AIGA - Photography
    Views: 116  |  Downloads: 6
    Interface design juggling
    Views: 64  |  Downloads: 4
    Tips for Handling a client
    Views: 35  |  Downloads: 2
    How to be creative
    Views: 85  |  Downloads: 9
    Ten tips for project management
    Views: 61  |  Downloads: 9
    Grids are good
    Views: 77  |  Downloads: 2
    Web accessibility checklist
    Views: 55  |  Downloads: 3