Bulletproof Web Design

9,568 views
9,415 views

Published on

Presented by Dan Cederholm at Webvisions, Portland

Published in: Technology, Design
1 Comment
25 Likes
Statistics
Notes
No Downloads
Views
Total views
9,568
On SlideShare
0
From Embeds
0
Number of Embeds
382
Actions
Shares
0
Downloads
271
Comments
1
Likes
25
Embeds 0
No embeds

No notes for slide

Bulletproof Web Design

  1. 1. DAN C EDER HOLM • WEBVIS IONS 20 0 6 • PORTL AN D, OR E GON
  2. 2. bul•let•proof (adj.)
  3. 3. bul•let•proof (adj.) ๏ Wort-case scenarios
  4. 4. bul•let•proof (adj.) ๏ Wort-case scenarios ๏ Flexibility
  5. 5. Fig. 1: Jack
  6. 6. DAN C EDER HOLM • WEBVIS IONS 20 0 6 • PORTL AN D, OR E GON
  7. 7. “Love your site, Dan – but I can’t read it.” – Frustrated Reader
  8. 8. Faux Columns
  9. 9. Faux Columns
  10. 10. Simple fix Specify background color equivalents: #content { background: #fff; } #sidebar { background: #eee; }
  11. 11. What happens when images are turned off?
  12. 12. Baker's dozen
  13. 13. Baker's dozen 13
  14. 14. Bulletproof pants Comfort Equipped™ (expandable waistband)
  15. 15. Bulletproof paths
  16. 16. Bulletproof paths CONTENT • text size • content amount
  17. 17. Bulletproof paths CONTENT • text size • content amount
  18. 18. Bulletproof paths CONTENT EDITING • text size • content changes • content amount • maintenance
  19. 19. Bulletproof paths CONTENT EDITING • text size • content changes • content amount • maintenance
  20. 20. Bulletproof paths CONTENT EDITING ENVIRONMENT • text size • content changes • device / browser • content amount • maintenance • scenarios
  21. 21. Bulletproof paths CONTENT EDITING ENVIRONMENT • text size • content changes • device / browser • content amount • maintenance • scenarios
  22. 22. “ The journey begins by letting go of control, and becoming flexible.” – John Allsopp “A Dao of Web Design”
  23. 23. ways to accomplish the same goal.
  24. 24. 4,362 ways to accomplish the same goal.
  25. 25. 4,362 ways to accomplish the same goal. (approximately)
  26. 26. Web design in a nutshell
  27. 27. Web design in a nutshell ๏ Ways that work
  28. 28. Web design in a nutshell ๏ Ways that work ๏ Ways that are better
  29. 29. Web design in a nutshell ๏ Ways that work ๏ Ways that are better ๏ Ways that don't work
  30. 30. Solution #1: <img />
  31. 31. Solution #2 CSS
  32. 32. DigDug Text Test
  33. 33. DigDug Text Test
  34. 34. “ Nobody actually adjusts text size.” – DDTT Naysayers
  35. 35. Evaluating with text size
  36. 36. Evaluating with text size ๏ I use it, and I have decent eyesight.
  37. 37. Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a quot;flexibility barometerquot;.
  38. 38. Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a quot;flexibility barometerquot;. ๏ Not just text size, but content amount.
  39. 39. Evaluating with text size ๏ I use it, and I have decent eyesight. ๏ Acts as a quot;flexibility barometerquot;. ๏ Not just text size, but content amount. ๏ Use relative sizes with confidence.
  40. 40. Solution #3: Bulletproof ๏ Flexible ๏ Easy to edit ๏ Allows for varying text size or content amount
  41. 41. Define the ingredients
  42. 42. The markup <h2><a href=quot;/quot;>This Way</a></h2>
  43. 43. The background image
  44. 44. The background image
  45. 45. The CSS h2 { margin: 0; padding: 0; font-size: 200%; font-weight: normal; }
  46. 46. 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%; }
  47. 47. position: absolute;
  48. 48. float
  49. 49. float
  50. 50. Self-clearing floats <div class=”box”> ____________ ____________ ____________ float: left;
  51. 51. Self-clearing floats <div class=”box”> ____________ ____________ ____________ float: left;
  52. 52. Self-clearing floats <div class=”box”> ____________ ____________ ____________ float: left;
  53. 53. Self-clearing floats div.box:after { ______ content: “.”; ______ display: block; ______ height: 0; clear: both; visibility: hidden; } http://positioniseverything.net/easyclearing.html
  54. 54. 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
  55. 55. 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
  56. 56. Think modular
  57. 57. Think modular ______ ______ ______
  58. 58. Think modular ______ ______ ______ ______ ______ ______
  59. 59. Think modular ______ ______ ______ ______ ______ ______ ___ ___ ___
  60. 60. Think modular ______ ______ ______ ___ ___ ___ ______ ______ ______ ___ ___ ___
  61. 61. Think modular ______ ___ ___ ______ ___ ______ ___ ___ ___ ______ ______ ______ ___ ___ ___
  62. 62. wife’s choice
  63. 63. Thinking in fixed-height
  64. 64. Bulletproofing it <div class=”box”> <h3>Gifts and Special Offers</h3> <p>... content here ...</p> </div>
  65. 65. Needs flexibility
  66. 66. Vertical Sliding Doors <h3> <div>
  67. 67. border-bottom
  68. 68. Accepting the box
  69. 69. clearleft.com
  70. 70. clearleft.com
  71. 71. clearleft.com
  72. 72. clearleft.com div.box { background: url(corner.gif) no-repeat top right; }
  73. 73. hicksdesign.co.uk
  74. 74. hicksdesign.co.uk
  75. 75. Subtle modification
  76. 76. Subtle modification .box { background: #fff url(corner.gif) no-repeat bottom right; }
  77. 77. <div class=”box”> background: #D5E3B9 url (bottom.gif) no-repeat bottom right;
  78. 78. <div class=”box”> <h2> background: #D5E3B9 url (bottom.gif) no-repeat bottom right;
  79. 79. <div class=”box”> <h2> background: #86B034 url (top.gif) no-repeat top left; background: #D5E3B9 url (bottom.gif) no-repeat bottom right;
  80. 80. 1 2
  81. 81. 1 2
  82. 82. cameronmoll.com/portfolio
  83. 83. Reusable Ornamentation
  84. 84. Reusable Ornamentation
  85. 85. Reusable Ornamentation <h4>Right Now on Cork'd</h4>
  86. 86. Reusable Ornamentation border-top: 1px solid #E0D0B1; <h4>Right Now on Cork'd</h4>
  87. 87. Reusable Ornamentation border-top: 1px solid #E0D0B1; <h4>Right Now on Cork'd</h4>
  88. 88. Wider than needed background: url(hr.gif) no-repeat 50% 100%;
  89. 89. Wider than needed background: url(hr.gif) no-repeat 50% 100%;
  90. 90. Wider than needed background: url(hr.gif) no-repeat 50% 100%;
  91. 91. <h2>
  92. 92. <h2> <span>
  93. 93. <h2> <span> h2 { background: url(tile.gif) repeat-x 0 50%; }
  94. 94. <h2> <span> h2 span { padding: 0 10px; background: #272A2D; } h2 { background: url(tile.gif) repeat-x 0 50%; }
  95. 95. Navigation
  96. 96. Web (40,093)
  97. 97. Web (40,093)
  98. 98. microformats.org
  99. 99. <li> <a>
  100. 100. <li> li:hover <a> a:hover
  101. 101. <li> <a>
  102. 102. <li> <a>
  103. 103. Links
  104. 104. haveamint.com
  105. 105. haveamint.com
  106. 106. haveamint.com
  107. 107. joyent.com
  108. 108. joyent.com
  109. 109. Attaching icons
  110. 110. Attaching icons
  111. 111. Attaching icons <a href=”/editreview/” class=”edit”>
  112. 112. Attaching icons
  113. 113. Attaching icons a.edit { background: url(pencil.gif) no-repeat 0 50%; a.add { background: url(plus.gif) no-repeat 0 50%;
  114. 114. Layout
  115. 115. Fixed vs. Fluid
  116. 116. Fixed vs. Fluid ๏ Not going to go there.
  117. 117. Fixed vs. Fluid ๏ Not going to go there. ๏ When executed well, fluid layouts can be betterproof.
  118. 118. Fixed vs. Fluid ๏ Not going to go there. ๏ When executed well, fluid layouts can be betterproof. ๏ Can have drastic effects on page design.
  119. 119. 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.
  120. 120. max-width, min-width ๏ Set extremes for fluid-width layouts. ๏ Keeps line lengths readable. ๏ Currently unsupported in IE/Win #wrap { max-width: 1200px; }
  121. 121. Framed by % ๏ Helps with keeping a reasonable line length.
  122. 122. max-width:1000px;
  123. 123. 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.
  124. 124. Bulletproof tools
  125. 125. 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?
  126. 126. Unscientific!
  127. 127. Unscientific! ...But easy (and helpful) to add to workflow.
  128. 128. Validation as a tool ๏ 100% Validation is difficult to maintain. ๏ Validation during construction is key. ๏ Eliminates head-scratching CSS problems.
  129. 129. Web Developer Extension http://chrispederick.com/work/webdeveloper/
  130. 130. Web Developer Extension http://chrispederick.com/work/webdeveloper/
  131. 131. Safari Tidy
  132. 132. Safari Tidy
  133. 133. Bulletproof dashboard ๏ 10 second usability test (disable styles) ๏ Turn off images (still readable?) ๏ Validate markup and stylesheets ๏ DigDug Text Test (DDTT)
  134. 134. The bulletproof concept
  135. 135. The bulletproof concept ๏ A catchy phrase to sell books and secure speaking engagements
  136. 136. The bulletproof concept ๏ A catchy phrase to sell books and secure speaking engagements ๏ The positive power of buzzwords
  137. 137. The bulletproof concept
  138. 138. The bulletproof concept ๏ Embrace flexibility
  139. 139. The bulletproof concept ๏ Embrace flexibility ๏ Let go of “pixel precision”
  140. 140. The bulletproof concept ๏ Embrace flexibility ๏ Let go of “pixel precision” ๏ Plan ahead for worst-case scenarios
  141. 141. great design
  142. 142. great web design
  143. 143. Thank you. http://simplebits.com/publications/speak/webvisions/bpwd-wv2006.pdf

×