Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

All the small things… - Awwwards 2016

4,406 views

Published on

A talk about creativity and how we clog up the web. And how that's a bad thing.

Published in: Education

All the small things… - Awwwards 2016

  1. 1. ALL THE SMALL THINGS… CHRIS HEILMANN (@CODEPO8), AWWWARDS, AMSTERDAM, FEBRUARY 2016 https://www.flickr.com/photos/69135870@N00/4465772463
  2. 2. WE’RE HERE TODAY TO CELEBRATE THE MOST BEAUTIFUL WEB SITES… 🎉
  3. 3. A LOT OF WHAT WE CELEBRATE IS BASED ON GORGEOUS INTERACTIONS… 👋
  4. 4. FIDELITY AND INTERACTIVITY THAT BEFORE HTML5 WAS ONLY POSSIBLE WITH FLASH… 📸
  5. 5. INSPIRATIONAL OBESITY…
  6. 6. WHY DID THIS HAPPEN? ⁉
  7. 7. THE WEB ISN’T AS COOL AS IT USED TO BE…
  8. 8. MOBILE, TABLETS GREAT HARDWARE AND FAST CONNECTIONS… 🚤
  9. 9. CREATIVE MONOCULTURE… 🍎
  10. 10. THE WEB CAN SURPRISE YOU… 😄
  11. 11. THE STORY OF IGNIGHTER… http://www.nytimes.com/2011/02/20/business/20ignite.html?_r=0
  12. 12. THE STORY OF IGNIGHTER… http://www.nytimes.com/2011/02/20/business/20ignite.html?_r=0 • Group dating site • Founded 2008 • 50,000 users in the first year 💩
  13. 13. THE STORY OF IGNIGHTER… http://www.nytimes.com/2011/02/20/business/20ignite.html?_r=0 • Spike in traffic from Singapore, Malaysia, India and South Korea. • Pivot to cater to these markets
  14. 14. IGNIGHTER → STEP OUT http://www.nytimes.com/2011/02/20/business/20ignite.html?_r=0 • 2 Million users • 7000 daily signups on average
  15. 15. GROWTH HAPPENS WHERE WE ARE NOT THINKING OF RIGHT NOW - IN BADLY CONNECTED COUNTRIES WITH MILLIONS OF POTENTIAL USERS…
  16. 16. TIME TO BURN SOME OF THE FAT OF THE WEB… 🚴
  17. 17. Type Size (kB) Images 1426 Scripts 357 Video 174 Fonts 123 Stylesheets 76 HTML 67 Other 4 Total 2232 kB THE AVERAGE WEB SITE DOESN’T LOOK FIT… http://www.httparchive.org/interesting.php#bytesperpage
  18. 18. 1426 KB OF IMAGES… • Wrong file formats • Delivering scaled hi-res images to everybody • No automatic conversion and optimisation steps • Hero image instead of text content
  19. 19. 357KB OF SCRIPTS • Starting with libraries because of browsers that are dead and we don’t even bother to test on. • Using frameworks built for complex forms to create static web sites. • Using scripts to create fixed layouts dependent on screen resolution • Social media buttons and tracking
  20. 20. 174KB OF VIDEO • Background video without testing the connection or resolution • Autostart instead of on- demand loading • Mood reel instead of simple text explanations (I blame kickstarter)
  21. 21. 123KB OF FONTS • Using a whole font when a few characters are enough • Icon fonts instead of inline SVG • Sending desktop fonts to mobile devices
  22. 22. MAINTENANCE… ⛏
  23. 23. STOP BLAMING THE USER!
  24. 24. <noscript> This web site needs Javascript, please enable it </noscript>
  25. 25. <p id="guesswork"> Your browser doesn’t support THING. Sucks to be you! </p>
  26. 26. BROWSERS CHANGED A LOT. EVERGREEN, CAPABLE AND OPEN!
  27. 27. THIS IS A GREAT TIME TO CHANGE OUR WAYS!
  28. 28. QUESTION THE NEED FOR LIBRARIES… http://blog.jquery.com/2016/01/14/jquery-3-0-beta-released/
  29. 29. PRACTICE FEATURE DETECTION INSTEAD OF PRETENDING TO FIX BROWSERS… if (thing) { dothing(); } if (!thing) { // you probably don’t // need thing, stop // shoe-horning it in. }
  30. 30. GREAT THINGS TO USE RIGHT NOW…
  31. 31. FLEXBOX +
  32. 32. SERVICE WORKER 🔌
  33. 33. CAMERA ACCESS 📹
  34. 34. PICTURE ELEMENT 🖼
  35. 35. PICTURE ELEMENT 🖼 https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/
  36. 36. MACHINE LEARNING APIS…
  37. 37. SPEECH AND LANGUAGE RECOGNITION…
  38. 38. FACIAL DETECTION AND RECOGNITION…
  39. 39. EMOTION RECOGNITION…
  40. 40. IMAGE ANALYSIS AND CONVERSION…
  41. 41. http://how-old.net/
  42. 42. http://mymoustache.net/
  43. 43. http://codepo8.github.io/simplecamshot/
  44. 44. IT IS UP TO YOU TO KEEP THE WEB EXCITING AND USABLE FOR THE NEXT GENERATION OF USERS.
  45. 45. AND IT IS NOT ABOUT WHO IS THE PRETTIEST…
  46. 46. IT IS ABOUT WHO PERFORMS BEST, IS MOST ACCESSIBLE AND IS USABLE BY ALL KIND OF PEOPLE - NOT THE ONES WHO ARE ALREADY BORED OF IT…
  47. 47. A CHECKLIST FOR 2016: • Assume capable browsers - stop trying to detect them • Cut down as much as you can • Use cloud services and automation to optimise your content - don’t rely on maintainers • Leverage new tech like service workers • Stop pretending everything is an iPad.
  48. 48. THANK YOU! CHRIS HEILMANN @CODEPO8

×