Stop Worrying & Get On With It (FOWD Tour 2009)

9,612 views
6,009 views

Published on

Slides from my presentation at the Bristol leg of the 2008 FOWD Tour.

2 Comments
20 Likes
Statistics
Notes
  • All sounds good.
    But its this complaining that getting the browsers and developers forward. We have to be unhappy about something to get cool new technologies like SiFR etc.

    Being an artist, its very difficult to be content with a glitch in your painting, you will lose your sleep.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I agree with everything and it's already the way I decided to do things. Reading you saying this gets me more confidence :)
    keep spreading the word!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,612
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
130
Comments
2
Likes
20
Embeds 0
No embeds

No notes for slide

Stop Worrying & Get On With It (FOWD Tour 2009)

  1. What are we worried about?
  2. What are we worried about? Some users see ‘broken’ sites.
  3. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar
  4. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand!
  5. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand! Then include it (if not, don’t worry)
  6. What are we worried about? Some users see ‘broken’ sites. Don’t build broken sites: basic support can be offered as long as it doesn’t look broken. If it’s a real problem for older browsers, use universalie6.css, a warning message, or something similar But this visual treatment is integral to the brand! Then include it (if not, don’t worry) Missing rounded corners don’t matter!
  7. Take Your Design To The Next Level With CSS3 j.mp/smashingcss3
  8. Fearful forabeautifulweb.com/s/598
  9. “ ” Great article, thanks but I think to wait that the most of browsers support CSS3 totally to develop websites for my clients. Comments from Smashing Magazine readers on j.mp/smashingcss3
  10. “ ” 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
  11. “ 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 (what in most ‘commercial’ projects is necessary). Comments from Smashing Magazine readers on j.mp/smashingcss3
  12. “ 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
  13. “ ” 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
  14. These arguments are complete and utter bullshit
  15. 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
  16. Tap Tap Tap taptaptap.com
  17. Tweet CC tweetcc.com
  18. Fusion Ads fusionads.net
  19. Fusion Ads fusionads.net
  20. Progressive means progressive
  21. Progressive means progressive Fall-back solutions (JS on and off?)
  22. Barclaycard online admin barclaycard.co.uk
  23. Progressive means progressive Fall-back solutions (JS on and off?) Enhancements only become features when the majority of users are experiencing them
  24. 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!
  25. Do websites need to look exactly the same in every browser?
  26. dowebsitesneedtolookexactlythesameineverybrowser.com
  27. Do websites need to look exactly the same in every browser? Websites will never look consistent across all browsers
  28. 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
  29. 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
  30. Bookmark these URLs Jon Tan: Web Typography tag jontangerine.com/log/tag/web-typography Web Typography (Richard Rutter) webtypography.net
  31. 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
  32. Usability vs. aesthetics Usability / accessibility / functionality = very important
  33. Usability vs. aesthetics Usability / accessibility / functionality = very important But don’t underestimate the importance of beauty!
  34. The experience
  35. The experience Beauty is the experience’s visual layer
  36. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience
  37. The experience Beauty is the experience’s visual layer Visually pleasing layer = more fulfilling user experience Functionality leads to usage; aesthetics lead to emotion
  38. 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
  39. 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/)
  40. 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
  41. Variety in web design. I can haz it?
  42. BORING
  43. BORING
  44. BORING
  45. BORING
  46. BORING
  47. BORING
  48. BORING
  49. BORING
  50. BORING
  51. Who’s pushing things forward?
  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. 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
  54. Made By Elephant madebyelephant.com
  55. Atebits atebits.com
  56. Atebits atebits.com/tweetie-mac/
  57. 24 Ways 24ways.org
  58. 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
  59. Stack Overflow stackoverflow.carsonified.com
  60. Carsonified Events events.carsonified.com
  61. 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
  62. Born Living bornliving.com
  63. 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
  64. Jason Santa Maria jasonsantamaria.com
  65. 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
  66. Squared Eye squaredeye.com/work/featured/family-life-network/
  67. Squared Eye squaredeye.com/work/featured/family-life-network/
  68. Squared Eye squaredeye.com/work/featured/family-life-network/
  69. Squared Eye squaredeye.com/work/featured/family-life-network/
  70. Squared Eye squaredeye.com/work/featured/family-life-network/
  71. Squared Eye squaredeye.com/work/featured/family-life-network/
  72. The nicer your site looks...
  73. The nicer your site looks... ... the longer your visitors will look at it...
  74. 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...
  75. 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
  76. Web design, for me, is predominantly full of boring, unimaginative work. Let’s change that.
  77. N G IN l : A R W oversia con tr t at en ! em ing st ch ap p r oa
  78. Validation is irrelevant
  79. Yes, yes. Bear with me...
  80. Yes, yes. Bear with me... New techniques won’t validate...
  81. Validator suggestions css3.info/the-big-css3-validation-debate/
  82. The CSS3 Validator could offer the option to ignore vendor specific extensions Validator suggestions css3.info/the-big-css3-validation-debate/
  83. 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/
  84. 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/
  85. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter!
  86. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation
  87. Jon Hicks hicksdesign.co.uk/journal
  88. Jon Hicks hicksdesign.co.uk/journal
  89. <b>
  90. #tops b { display:block; float:right; width:333px; height:15px; background:url(/images/paulsmith.gif) no-repeat; } Intentional invalidation in hicksdesign.co.uk/css/layout-9.css
  91. Yes, yes. Bear with me... New techniques won’t validate... ... and it doesn’t matter! Recognise the value of intentional invalidation 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
  92. Validation
  93. does
  94. not
  95. equal
  96. conformity
  97. to
  98. Web
  99. Standards
  100. We’re looking at it in the wrong way
  101. We’re looking at it in the wrong way “We can’t ensure that all users get the same experience.” // negative
  102. 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
  103. 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
  104. 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
  105. It’s not just about making things look pretty. Forward-thinking code means a future-proof website.
  106. 10%
  107. 10% of users today will be 100% of users tomorrow
  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
  109. My site before Firefox 3.5 (no @font-face support) elliotjaystocks.com
  110. My site after Firefox 3.5 (with @font-face support) elliotjaystocks.com
  111. 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
  112. 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
  113. All the small things
  114. All the small things CSS2.1 / CSS3 etc. allows you to write less code, speeds up development time, and generally makes life easier
  115. 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
  116. <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>
  117. ul.blogroll li a[href="http://shauninman.com"]{ background:url(http://shauninman.com/favicon.ico); } Attribute selectors
  118. 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
  119. Fusion Ads fusionads.net/blog/
  120. 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?
  121. Slides will be available online at elliotjaystocks.com/speaking/
  122. 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
  123. Shameless plug! Sexy Web Design by Elliot Jay Stocks Expert reviewers: Jina Bolton & Dan Rubin Published by SitePoint

×