FOWD NYC 2009

3,330 views
3,210 views

Published on

'Stop Worrying & Get On With It' (FOWD NYC version)

Published in: Design, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,330
On SlideShare
0
From Embeds
0
Number of Embeds
487
Actions
Shares
0
Downloads
46
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

FOWD NYC 2009

  1. 1. Take Your Design To The Next Level With CSS3 j.mp/smashingcss3
  2. 2. Fearful forabeautifulweb.com/s/598
  3. 3. “ ” Great article, thanks but I think I’ll wait until most of the browsers support CSS3 totally to develop websites for my clients. Comments from Smashing Magazine readers on j.mp/smashingcss3
  4. 4. “ ” I hope CSS3 will be a standard in the near future; right now you cant really use anything of it ’cause not every browser supports it. Comments from Smashing Magazine readers on j.mp/smashingcss3
  5. 5. “ CSS 3 rocks. Unfortunately we need to stay at ” least 5 more years with CSS 2.1 if we want to offer the same design to each user (which in most ‘commercial’ projects is necessary). Comments from Smashing Magazine readers on j.mp/smashingcss3
  6. 6. “ I can’t wait to use CSS3 in a real project. Unfortunately I’m going to be stuck with ” things as they are for the time being as I wait for my clients to catch up. I expect this will be the case for most designers for the time being. Comments from Smashing Magazine readers on j.mp/smashingcss3
  7. 7. “ ” CSS3 looks really good however because of IE it will be long time before I start using it. Comments from Smashing Magazine readers on j.mp/smashingcss3
  8. 8. These arguments are complete and utter bullshit
  9. 9. If 98% of the users can’t see a text-shadow, it doesn’t matter, but it’ll be a nice enrichment for the 2% of users who can
  10. 10. Tap Tap Tap taptaptap.com
  11. 11. Tweet CC tweetcc.com
  12. 12. Fusion Ads fusionads.net
  13. 13. Fusion Ads fusionads.net
  14. 14. Progressive means progressive
  15. 15. Progressive means progressive Fall-back solutions (JS on and off?)
  16. 16. Barclaycard online admin barclaycard.co.uk
  17. 17. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them
  18. 18. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them Use progressive enrichment in your dull, corporate sites — the sexy stuff is an add-on, so it’s fine!
  19. 19. Do websites need to look exactly the same in every browser?
  20. 20. dowebsitesneedtolookexactlythesameineverybrowser.com
  21. 21. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers
  22. 22. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers Rendering engines, operating systems, and user-specific variables like screen settings and resolution will always stand in the way
  23. 23. Jon Tan: “ Designers will use [technologies like Flash, PDF, and hacks like embedding type in images] [...] because they won’t have to deal with painful inconsistencies between user agents; the bane ” of the browser wars, and in this instance, the bane of web typography in what seems like the age of the raster wars. Display Type & the Raster Wars j.mp/jontan
  24. 24. Bookmark these URLs Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography Web Typography (Richard Rutter) webtypography.net
  25. 25. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers Rendering engines, operating systems, and user-specific variables like screen settings and resolution will always stand in the way So stop trying to reach the unreachable! Embrace the differences
  26. 26. Usability vs. aesthetics Usability / accessibility / functionality = very important
  27. 27. Usability vs. aesthetics Usability / accessibility / functionality = very important But don’t underestimate the importance of beauty!
  28. 28. The experience
  29. 29. The experience Beauty is the experience’s visual layer
  30. 30. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience
  31. 31. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion
  32. 32. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer
  33. 33. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion The experience layer (See Dan Mall’s FOWD presentation: events.carsonified.com/fowd/2008/newyork/videos/dan-mall/)
  34. 34. The experience layer “ Our emotions change the way we think ” and serve as constant guides to appropriate behaviour, steering us away from the bad and guiding us towards the good. Donald Norman, Emotional Design
  35. 35. Variety in web design. I can haz it?
  36. 36. BORING
  37. 37. BORING
  38. 38. BORING
  39. 39. BORING
  40. 40. BORING
  41. 41. BORING
  42. 42. BORING
  43. 43. BORING
  44. 44. BORING
  45. 45. Who’s pushing things forward?
  46. 46. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  47. 47. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  48. 48. Made By Elephant madebyelephant.com
  49. 49. Atebits atebits.com
  50. 50. Atebits atebits.com/tweetie-mac/
  51. 51. 24 Ways 24ways.org
  52. 52. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  53. 53. Stack Overflow stackoverflow.carsonified.com
  54. 54. Carsonified Events events.carsonified.com
  55. 55. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  56. 56. Born Living bornliving.com
  57. 57. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  58. 58. Jason Santa Maria jasonsantamaria.com
  59. 59. Who’s pushing things forward? Tim Van Damme, Made By Elephant Mike Kus, Carsonified Miguel Ripoll, Cesser Digital Jason Santa Maria Matthew Smith, Squared Eye
  60. 60. Squared Eye squaredeye.com/work/featured/family-life-network/
  61. 61. Squared Eye squaredeye.com/work/featured/family-life-network/
  62. 62. Squared Eye squaredeye.com/work/featured/family-life-network/
  63. 63. Squared Eye squaredeye.com/work/featured/family-life-network/
  64. 64. Squared Eye squaredeye.com/work/featured/family-life-network/
  65. 65. Squared Eye squaredeye.com/work/featured/family-life-network/
  66. 66. The nicer your site looks...
  67. 67. The nicer your site looks... ... the longer your visitors will look at it...
  68. 68. The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website...
  69. 69. The nicer your site looks... ... the longer your visitors will look at it... ... the longer your visitors look at it, the longer they’ll spend on your website... ... and the longer they spend on your website, the easier it will be for you to sell them your product or service
  70. 70. Web design, for me, is predominantly full of boring, unimaginative work. Let’s change that.
  71. 71. N G IN l : A R W oversia con tr t at en ! em ing st ch ap p roa
  72. 72. Validation is irrelevant
  73. 73. Yes, yes. Bear with me...
  74. 74. Yes, yes. Bear with me... New techniques won’t validate...
  75. 75. Validation errors jigsaw.w3.org/css-validator
  76. 76. Validator suggestions css3.info/the-big-css3-validation-debate/
  77. 77. The CSS3 Validator could offer the option to ignore vendor specific extensions Validator suggestions css3.info/the-big-css3-validation-debate/
  78. 78. The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error Validator suggestions css3.info/the-big-css3-validation-debate/
  79. 79. The CSS3 Validator could offer the option to ignore vendor specific extensions The CSS3 Validator could highlight vendor specific extensions with a warning, rather than an error The validator could mark such code as ‘experimental’ rather than an error or warning Validator suggestions css3.info/the-big-css3-validation-debate/
  80. 80. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter!
  81. 81. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Know that you can break the rules
  82. 82. Jon Hicks hicksdesign.co.uk/journal
  83. 83. Jon Hicks hicksdesign.co.uk/journal
  84. 84. #tops b { display:block; float:right; width:333px; height:15px; background:url(/images/paulsmith.gif) no-repeat; } hicksdesign.co.uk/css/layout-9.css
  85. 85. <b>
  86. 86. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Know that you can break the rules Validation does not equal conformity to Web Standards: you can build a site with tables and a complete lack of semantics yet still have it validate
  87. 87. Validation
  88. 88. does
  89. 89. not
  90. 90. equal
  91. 91. conformity
  92. 92. to
  93. 93. Web
  94. 94. Standards
  95. 95. We’re looking at it in the wrong way
  96. 96. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative
  97. 97. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive
  98. 98. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse
  99. 99. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative “We can add further enhancements above the norm.” // positive The flexibility the web offers is a blessing, not a curse Ensure a good experience for most; a great one for some
  100. 100. It’s not just about making things look pretty. Forward-thinking code means a future-proof website.
  101. 101. 10%
  102. 102. 10% of users today will be 100% of users tomorrow
  103. 103. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline
  104. 104. @
  105. 105. My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com
  106. 106. My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com
  107. 107. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users
  108. 108. 10% of users today will be 100% of users tomorrow The amount of people who see your enrichments might seem small right now, but that number will only grow, not decline It’s our duty to push forward-thinking development; to make the most of the tools made available to us and our users New CSS techniques will never become mainstream if we designers aren’t using them
  109. 109. All the small things
  110. 110. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier
  111. 111. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors
  112. 112. <ul class="blogroll"> <li> <a href="http://shauninman.com">Shaun Inman</a> </li> <li> <a href="http://mezzoblue.com">Dave Shea</a> </li> <li> <a href="http://hicksdesign.co.uk">Jon Hicks</a> </li> </ul> HTML with no need for class names on each <li>
  113. 113. ul.blogroll li a[href="http://shauninman.com"]{ background:url(http://shauninman.com/favicon.ico); } Attribute selectors
  114. 114. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors
  115. 115. Fusion Ads fusionads.net/blog/
  116. 116. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier Consider attribute selectors Consider nth-child selectors And if a browser doesn’t support these things... ... so what?
  117. 117. Thomas Silkjær theundersigned.net (Safari)
  118. 118. ul.gallery li:hover { webkit-transform:rotate:(-2.5deg); } theundersigned.net/wp-content/themes/default/style.css
  119. 119. Thomas Silkjær theundersigned.net (Firefox)
  120. 120. Progressive “ ” Favoring or advocating progress, change, improvement, or reform, as opposed to wishing to maintain things as they are. dictionary.reference.com/browse/progressive
  121. 121. Don’t fear degradation: plan for it
  122. 122. Slides will be available online at elliotjaystocks.com/speaking/
  123. 123. Shameless plug! Sexy Web Design by Elliot Jay Stocks Expert reviewers: Jina Bolton & Dan Rubin Published by SitePoint
  124. 124. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158/ Paint textures from The Stock Exchange - sxc.hu Set in FS Clerkenwell - fontsmith.com/font_details.php?font_num=251

×