WDE08 BULLETPROOF A to Z

2,192 views

Published on

Web Directions East08 Presentation slides.
Presentation slides by Dan Cederholm

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,192
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
41
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

WDE08 BULLETPROOF A to Z

  1. 1. IMPLEMENTING DESIGN BULLETPROOF A-Z by Dan Cederholm
  2. 2. SimpleBits
  3. 3. HAND-CRAFTED PIXELS & TEXT.
  4. 4. CRAFTSMANSHIP
  5. 5. VERMONT
  6. 6. “ A product labeled ‘Made in Vermont’— whether herb-infused maple syrup, pineapple pepper jam, or chai water buffalo yogurt—is worth 10 percent more than the same product made elsewhere.” —BOSTON GLOBE, The brand called Vermont http://boston.com/news/globe/ideas/articles/2003/10/12/the_brand_called_vermont
  7. 7. When something is well-crafted, it reflects that a human was behind its design.
  8. 8. CRAFTSMANSHIP in IMPLEMENTATION HTML CSS Javascript GIF JPG PNG
  9. 9. CASE STUDY • Bulletproof • Progressive enrichment • Reevaluating past methods
  10. 10. BULLETPROOF • Flexibility • Adaptable to multiple scenarios • Adding detail without complexity
  11. 11. BROWSER LANDSCAPE
  12. 12. PROGRESSIVE ENHANCEMENT { behavior }
  13. 13. PROGRESSIVE ENRICHMENT { style }
  14. 14. REALLY COOL STUFF THAT DOESN’T WORK IN IE :(
  15. 15. REEXAMINING PAST METHODS & HABITS
  16. 16. CASE STUDY • Bulletproof • Progressive enrichment • Reevaluating past methods
  17. 17. MY LOCAL COFFEE SHOP http://www.flickr.com/photos/dankamminga/1678248602/
  18. 18. I LOVE COFFEE.
  19. 19. POWER OF THE BEAN ™
  20. 20. 82º 16º ICED HOT
  21. 21. ICEDORHOT.COM
  22. 22. Aa
  23. 23. A ANCHOR LINKS WITH META INFORMATION { bulletproof }
  24. 24. <li><a href=quot;/lattequot;>Latte <em>12</em></a></li> li a { display: block; position: relative; } li a em { position: absolute; top: 0; right: 0; }
  25. 25. <li><a href=quot;/lattequot;><em>12</em> Latte</a></li> li a { display: block; } li a em { float: right; }
  26. 26. <li> <a href=quot;/lattequot;> <span>Latte</span> <em>12</em> </a> </li> li a { display: block; overflow: hidden; } li a span { float: left; } li a em { float: right; }
  27. 27. Bb
  28. 28. B BORDER-RADIUS { progressive enrichment }
  29. 29. CSS3 .mod { border-radius: 4px 4px; }
  30. 30. CSS3
  31. 31. Vendor-Specific Properties .mod { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px; }
  32. 32. #nav li a { float: left; padding: .5em 1em; color: #fff; background: #dd5543; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
  33. 33. glass.png
  34. 34. #nav li.selected a { float: left; padding: .5em 1em; color: #fff; background: #dd5543 url(glass.png) repeat-x 0 50%; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
  35. 35. Firefox 2
  36. 36. master.css screen.css enriched.css ie.css
  37. 37. master.css enriched.css #nav li a { #nav li a { float: left; border-radius: .4em .4em; padding: .5em 1em; -webkit-border-radius: color: #fff; .4em .4em; background: #dd5543; -moz-border-radius: } .4em .4em; }
  38. 38. enriched.css #nav li a { border-radius: .4em .4em; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
  39. 39. enriched.css div.mod, ol.cities li, #nav li a { border-radius: .4em .4em; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
  40. 40. WHAT ABOUT OTHER BROWSERS?
  41. 41. Can get away with FF2 if contrast is low enough. Degrades nicely. Great for prototyping before carving out images.
  42. 42. Cc
  43. 43. C COLOR TRANSPARENCY WITH RGBa { progressive enrichment }
  44. 44. Opacity a.city-over { background-color: #000; opacity: .7; } (sets opacity value for the element and all of its children)
  45. 45. RGBa a.city-over { background-color: rgba(0,0,0,.7); } (sets opacity value for background-color only)
  46. 46. RGBa a.city-over { background-color: #000; background-color: rgba(0,0,0,.7); }
  47. 47. master.css enriched.css a.city-over { a.city-over { background-color: background-color: #000; rgba(0,0,0,.7); } }
  48. 48. Tiled PNG would reach more browsers. RGBa great for protoyping.
  49. 49. Dd
  50. 50. D DO WEBSITES NEED TO LOOK EXACTLY THE SAME IN EVERY BROWSER?
  51. 51. Websites don’t need to look exactly the same in every browser.
  52. 52. D DECISION-MAKERS WHO GET IT
  53. 53. the pub people how-to faq store simplebits Dan Cederholm • Massachusetts • Twitter profile h1:before { content: url(/img/left.gif); OWES 4 BEERS 36 IS OWED BEERS } Kevin Cornell ginader h1:afteravatar, which for this nifty new { for a really awesome idea perfectly captures the goulish-like content: url(/img/right.gif); quality found in me and other insane 21 hours, 2 minutes ago } people. 3 days ago xybermatthew for creating such a fun little app snookca (foamee) for blogging about CakePHP. 1 day, 15 hours ago 1 week, 3 days ago juque beep for foamee Dan (buuuurp) for picking up the tab last night at 1 day, 18 hours ago the Gulu Gulu. 3 weeks ago
  54. 54. the pub people how-to faq store simplebits Dan Cederholm • Massachusetts • Twitter profile OWES 4 BEERS IS OWED 36 BEERS Kevin Cornell ginader for this nifty new avatar, which for a really awesome idea perfectly captures the goulish-like 21 hours, 2 minutes ago quality found in me and other insane people. 3 days ago xybermatthew for creating such a fun little app snookca (foamee) for blogging about CakePHP. 1 day, 15 hours ago 1 week, 3 days ago juque beep for foamee Dan (buuuurp) for picking up the tab last night at 1 day, 18 hours ago the Gulu Gulu. 3 weeks ago
  55. 55. IT’S OK Tiny visual enhancements that do not affect layout. Techniques that make our lives easier.
  56. 56. Ee
  57. 57. E EASY-CLEARING FLOATS { reexamining past methods }
  58. 58. 2008 FLOATS = FLEXIBILITY
  59. 59. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget augue. Praesent ac purus. Ut risus. Ut mauris ligula, dictum vulputate, ornare id, suscipit at, nisi. Quisque et est et urna consectetuer adipiscing. Mauris ac arcu. Sed quis enim eu elit faucibus vehicula. Aliquam sodales dui sit amet ligula. Vivamus leo.
  60. 60. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget augue. Praesent ac purus. Ut risus. Ut mauris ligula, dictum vulputate, ornare id, suscipit at, nisi. Quisque et est et urna consectetuer adipiscing. Mauris ac arcu. Sed quis enim eu elit faucibus vehicula. Aliquam sodales dui sit amet ligula. Vivamus leo.
  61. 61. easy-clearing .clearfix:after { content: quot;.quot;; display: block; height: 0; clear: both; visibility: hidden; } http://positioniseverything.net/easyclearing.html
  62. 62. easy-clearing .clearfix:after { content: quot;.quot;; display: block; height: 0; clear: both; visibility: hidden; } <div class=quot;clearfixquot;>
  63. 63. Lil’ bit better .group:after { content: quot;.quot;; display: block; height: 0; clear: both; visibility: hidden; } <div class=quot;groupquot;>
  64. 64. Multiple classes <ol class=quot;cities groupquot;>
  65. 65. master.css ie.css .group:after { /* IE6 */ content: quot;.quot;; * html .group { display: block; height: 1%; height: 0; } clear: both; visibility: hidden; /*IE7 */ } *:first-child+html .group { min-height: 1px; }
  66. 66. IE8? * /_**(.)/*+:@//*+html!~/rofl**/ { clear: please !reallyeffingimportant; }
  67. 67. IE8? SUPPORTS GENERATED CONTENT!
  68. 68. <div id=quot;headerquot; class=quot;groupquot;> <form id=quot;locquot; class=quot;groupquot;> <div class=quot;mod groupquot;> <ol class=quot;cities groupquot;> <ol class=quot;cities groupquot;>
  69. 69. Ff
  70. 70. F FRAMEWORKS
  71. 71. master.css
  72. 72. ie.css
  73. 73. A TESTIMONIAL FOR RESET.CSS
  74. 74. MTV.com margin: 0; 66 padding: 0; 89 155
  75. 75. Gg
  76. 76. G GRIDLASTICNESS { bulletproof }
  77. 77. gridius • lasticus • nessinus
  78. 78. GRID LAYOUT USING EMS
  79. 79. The gut.
  80. 80. #wrap { width: 50em; } #content { width: 30em; } #sidebar { width: 20em; }
  81. 81. Em-based layouts force you to ensure ultimate flexibility
  82. 82. Em/pixel values make more sense when using the 62.5% method
  83. 83. Setting a base body { font-size: 62.5%; }
  84. 84. Base of 10 #nav { font-size: 1em } 10px #content { font-size: 1.2em } 12px #sidebar { font-size: 1em } 10px #footer { font-size: 0.9em } 9px
  85. 85. Widths, margins & padding #main { width: 10em; 100px margin: 0 1em; 10px border-top: .2em solid #000; 2px }
  86. 86. Avoid setting width and font-size on the same element
  87. 87. #main { width: 30em; 300px font-size: 1em } #secondary { width: 30em; 450px font-size: 1.5em }
  88. 88. Adjusting text size may throw off the grid
  89. 89. Set a max-width on elastic layouts
  90. 90. #wrap { max-width: 100%; }
  91. 91. 16em 16em 16em 16em 2em 2em 2em
  92. 92. THINK MODULAR { from the outside in }
  93. 93. Xscope http://iconfactory.com/software/xscope
  94. 94. Hh
  95. 95. H HORIZONTAL GRID? SURE. VERTICAL GRID? SORT OF.
  96. 96. Use classes for main columns
  97. 97. #header #secondary #main
  98. 98. #header .group .main .secondary .group .secondary .main
  99. 99. Ii
  100. 100. I IE8 BETA STILL REFUSES TO RESIZE TEXT SET IN PIXELS { reexamining past methods }
  101. 101. WTF?
  102. 102. body { font-size: 12px; }
  103. 103. STILL USING RELATIVE UNITS
  104. 104. body { font-size: 62.5%; } h1 { font-size: 2em; }
  105. 105. PAGE ZOOM?
  106. 106. TEXT SIZE TOOLS ARE STILL THERE ENSURES FLEXIBILITY (NOT JUST TEXT)
  107. 107. Jj
  108. 108. J JQUERY
  109. 109. Familiar selector syntax <script src=quot;js/jquery.jsquot; type=quot;text/javascriptquot;></script> // Toggle search stuff function togglifySearch(){ $(quot;#loc-adv aquot;).click(function(){ $(quot;#mapquot;).slideToggle(quot;slowquot;); return false; }); }
  110. 110. Kk
  111. 111. KITTY. (invisible pool!)
  112. 112. Ll
  113. 113. L .last { bulletproof }
  114. 114. <li class=quot;lastquot;> ul.lst li.last { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  115. 115. Behavior or presentation? // Add .last class to certain lists function addLast(){ $('ul.lst li:last').addClass('last'); }
  116. 116. Mm
  117. 117. M MUST SKIP A FEW LETTERS IF WE’RE GOING TO GET THROUGH THIS
  118. 118. Nn
  119. 119. Oo
  120. 120. Pp
  121. 121. Qq
  122. 122. Rr
  123. 123. Ss
  124. 124. S SHIFTING BACKGROUNDS (PARALLAX SCROLLING FOR THE LAZY)
  125. 125. How to recreate Silverback’s parallax effect http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax
  126. 126. Position background with a negative percentage #header { background: #913b3b url(../img/ fire.gif) repeat-x -80% 0; }
  127. 127. Tt
  128. 128. Uu
  129. 129. U YO UR STATS
  130. 130. WHEN CAN WE ______?
  131. 131. “ The answer is simple: when your site’s (or sites’ if you have more than one) user logs tell you that you can. Not before then. The user stats from other sites, or from global-aggregation surveys, are worse than useless. ” —ERIC MEYER http://simplebits.com/notebook/2004/12/17/ie5.html#comment53
  132. 132. IE7 SAFARI FIREFOX OPERA IE6
  133. 133. IE7 SAFARI FIREFOX OPERA IE6
  134. 134. THANK YOU. simplebits.com/publications/speak/a-z/a-z.pdf

×