WDE08 BULLETPROOF A to Z

  • 1,807 views
Uploaded on

Web Directions East08 Presentation slides. …

Web Directions East08 Presentation slides.
Presentation slides by Dan Cederholm

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,807
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
40
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. IMPLEMENTING DESIGN BULLETPROOF A-Z by Dan Cederholm
  • 2. SimpleBits
  • 3. HAND-CRAFTED PIXELS & TEXT.
  • 4. CRAFTSMANSHIP
  • 5. VERMONT
  • 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. When something is well-crafted, it reflects that a human was behind its design.
  • 8. CRAFTSMANSHIP in IMPLEMENTATION HTML CSS Javascript GIF JPG PNG
  • 9. CASE STUDY • Bulletproof • Progressive enrichment • Reevaluating past methods
  • 10. BULLETPROOF • Flexibility • Adaptable to multiple scenarios • Adding detail without complexity
  • 11. BROWSER LANDSCAPE
  • 12. PROGRESSIVE ENHANCEMENT { behavior }
  • 13. PROGRESSIVE ENRICHMENT { style }
  • 14. REALLY COOL STUFF THAT DOESN’T WORK IN IE :(
  • 15. REEXAMINING PAST METHODS & HABITS
  • 16. CASE STUDY • Bulletproof • Progressive enrichment • Reevaluating past methods
  • 17. MY LOCAL COFFEE SHOP http://www.flickr.com/photos/dankamminga/1678248602/
  • 18. I LOVE COFFEE.
  • 19. POWER OF THE BEAN ™
  • 20. 82º 16º ICED HOT
  • 21. ICEDORHOT.COM
  • 22. Aa
  • 23. A ANCHOR LINKS WITH META INFORMATION { bulletproof }
  • 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. <li><a href=quot;/lattequot;><em>12</em> Latte</a></li> li a { display: block; } li a em { float: right; }
  • 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. Bb
  • 28. B BORDER-RADIUS { progressive enrichment }
  • 29. CSS3 .mod { border-radius: 4px 4px; }
  • 30. CSS3
  • 31. Vendor-Specific Properties .mod { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px; }
  • 32. #nav li a { float: left; padding: .5em 1em; color: #fff; background: #dd5543; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
  • 33. glass.png
  • 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. Firefox 2
  • 36. master.css screen.css enriched.css ie.css
  • 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. enriched.css #nav li a { border-radius: .4em .4em; -webkit-border-radius: .4em .4em; -moz-border-radius: .4em .4em; }
  • 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. WHAT ABOUT OTHER BROWSERS?
  • 41. Can get away with FF2 if contrast is low enough. Degrades nicely. Great for prototyping before carving out images.
  • 42. Cc
  • 43. C COLOR TRANSPARENCY WITH RGBa { progressive enrichment }
  • 44. Opacity a.city-over { background-color: #000; opacity: .7; } (sets opacity value for the element and all of its children)
  • 45. RGBa a.city-over { background-color: rgba(0,0,0,.7); } (sets opacity value for background-color only)
  • 46. RGBa a.city-over { background-color: #000; background-color: rgba(0,0,0,.7); }
  • 47. master.css enriched.css a.city-over { a.city-over { background-color: background-color: #000; rgba(0,0,0,.7); } }
  • 48. Tiled PNG would reach more browsers. RGBa great for protoyping.
  • 49. Dd
  • 50. D DO WEBSITES NEED TO LOOK EXACTLY THE SAME IN EVERY BROWSER?
  • 51. Websites don’t need to look exactly the same in every browser.
  • 52. D DECISION-MAKERS WHO GET IT
  • 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. 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. IT’S OK Tiny visual enhancements that do not affect layout. Techniques that make our lives easier.
  • 56. Ee
  • 57. E EASY-CLEARING FLOATS { reexamining past methods }
  • 58. 2008 FLOATS = FLEXIBILITY
  • 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. 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. easy-clearing .clearfix:after { content: quot;.quot;; display: block; height: 0; clear: both; visibility: hidden; } http://positioniseverything.net/easyclearing.html
  • 62. easy-clearing .clearfix:after { content: quot;.quot;; display: block; height: 0; clear: both; visibility: hidden; } <div class=quot;clearfixquot;>
  • 63. Lil’ bit better .group:after { content: quot;.quot;; display: block; height: 0; clear: both; visibility: hidden; } <div class=quot;groupquot;>
  • 64. Multiple classes <ol class=quot;cities groupquot;>
  • 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. IE8? * /_**(.)/*+:@//*+html!~/rofl**/ { clear: please !reallyeffingimportant; }
  • 67. IE8? SUPPORTS GENERATED CONTENT!
  • 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. Ff
  • 70. F FRAMEWORKS
  • 71. master.css
  • 72. ie.css
  • 73. A TESTIMONIAL FOR RESET.CSS
  • 74. MTV.com margin: 0; 66 padding: 0; 89 155
  • 75. Gg
  • 76. G GRIDLASTICNESS { bulletproof }
  • 77. gridius • lasticus • nessinus
  • 78. GRID LAYOUT USING EMS
  • 79. The gut.
  • 80. #wrap { width: 50em; } #content { width: 30em; } #sidebar { width: 20em; }
  • 81. Em-based layouts force you to ensure ultimate flexibility
  • 82. Em/pixel values make more sense when using the 62.5% method
  • 83. Setting a base body { font-size: 62.5%; }
  • 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. Widths, margins & padding #main { width: 10em; 100px margin: 0 1em; 10px border-top: .2em solid #000; 2px }
  • 86. Avoid setting width and font-size on the same element
  • 87. #main { width: 30em; 300px font-size: 1em } #secondary { width: 30em; 450px font-size: 1.5em }
  • 88. Adjusting text size may throw off the grid
  • 89. Set a max-width on elastic layouts
  • 90. #wrap { max-width: 100%; }
  • 91. 16em 16em 16em 16em 2em 2em 2em
  • 92. THINK MODULAR { from the outside in }
  • 93. Xscope http://iconfactory.com/software/xscope
  • 94. Hh
  • 95. H HORIZONTAL GRID? SURE. VERTICAL GRID? SORT OF.
  • 96. Use classes for main columns
  • 97. #header #secondary #main
  • 98. #header .group .main .secondary .group .secondary .main
  • 99. Ii
  • 100. I IE8 BETA STILL REFUSES TO RESIZE TEXT SET IN PIXELS { reexamining past methods }
  • 101. WTF?
  • 102. body { font-size: 12px; }
  • 103. STILL USING RELATIVE UNITS
  • 104. body { font-size: 62.5%; } h1 { font-size: 2em; }
  • 105. PAGE ZOOM?
  • 106. TEXT SIZE TOOLS ARE STILL THERE ENSURES FLEXIBILITY (NOT JUST TEXT)
  • 107. Jj
  • 108. J JQUERY
  • 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. Kk
  • 111. KITTY. (invisible pool!)
  • 112. Ll
  • 113. L .last { bulletproof }
  • 114. <li class=quot;lastquot;> ul.lst li.last { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  • 115. Behavior or presentation? // Add .last class to certain lists function addLast(){ $('ul.lst li:last').addClass('last'); }
  • 116. Mm
  • 117. M MUST SKIP A FEW LETTERS IF WE’RE GOING TO GET THROUGH THIS
  • 118. Nn
  • 119. Oo
  • 120. Pp
  • 121. Qq
  • 122. Rr
  • 123. Ss
  • 124. S SHIFTING BACKGROUNDS (PARALLAX SCROLLING FOR THE LAZY)
  • 125. How to recreate Silverback’s parallax effect http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax
  • 126. Position background with a negative percentage #header { background: #913b3b url(../img/ fire.gif) repeat-x -80% 0; }
  • 127. Tt
  • 128. Uu
  • 129. U YO UR STATS
  • 130. WHEN CAN WE ______?
  • 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. IE7 SAFARI FIREFOX OPERA IE6
  • 133. IE7 SAFARI FIREFOX OPERA IE6
  • 134. THANK YOU. simplebits.com/publications/speak/a-z/a-z.pdf