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.

of

All the small things… - Awwwards 2016 Slide 1 All the small things… - Awwwards 2016 Slide 2 All the small things… - Awwwards 2016 Slide 3 All the small things… - Awwwards 2016 Slide 4 All the small things… - Awwwards 2016 Slide 5 All the small things… - Awwwards 2016 Slide 6 All the small things… - Awwwards 2016 Slide 7 All the small things… - Awwwards 2016 Slide 8 All the small things… - Awwwards 2016 Slide 9 All the small things… - Awwwards 2016 Slide 10 All the small things… - Awwwards 2016 Slide 11 All the small things… - Awwwards 2016 Slide 12 All the small things… - Awwwards 2016 Slide 13 All the small things… - Awwwards 2016 Slide 14 All the small things… - Awwwards 2016 Slide 15 All the small things… - Awwwards 2016 Slide 16 All the small things… - Awwwards 2016 Slide 17 All the small things… - Awwwards 2016 Slide 18 All the small things… - Awwwards 2016 Slide 19 All the small things… - Awwwards 2016 Slide 20 All the small things… - Awwwards 2016 Slide 21 All the small things… - Awwwards 2016 Slide 22 All the small things… - Awwwards 2016 Slide 23 All the small things… - Awwwards 2016 Slide 24 All the small things… - Awwwards 2016 Slide 25 All the small things… - Awwwards 2016 Slide 26 All the small things… - Awwwards 2016 Slide 27 All the small things… - Awwwards 2016 Slide 28 All the small things… - Awwwards 2016 Slide 29 All the small things… - Awwwards 2016 Slide 30 All the small things… - Awwwards 2016 Slide 31 All the small things… - Awwwards 2016 Slide 32 All the small things… - Awwwards 2016 Slide 33 All the small things… - Awwwards 2016 Slide 34 All the small things… - Awwwards 2016 Slide 35 All the small things… - Awwwards 2016 Slide 36 All the small things… - Awwwards 2016 Slide 37 All the small things… - Awwwards 2016 Slide 38 All the small things… - Awwwards 2016 Slide 39 All the small things… - Awwwards 2016 Slide 40 All the small things… - Awwwards 2016 Slide 41 All the small things… - Awwwards 2016 Slide 42 All the small things… - Awwwards 2016 Slide 43 All the small things… - Awwwards 2016 Slide 44 All the small things… - Awwwards 2016 Slide 45 All the small things… - Awwwards 2016 Slide 46 All the small things… - Awwwards 2016 Slide 47 All the small things… - Awwwards 2016 Slide 48 All the small things… - Awwwards 2016 Slide 49
Upcoming SlideShare
Example acrolinx report-cfpb
Next
Download to read offline and view in fullscreen.

10 Likes

Share

Download to read offline

All the small things… - Awwwards 2016

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • SarjilNapit

    Dec. 26, 2020
  • HichemKhedrougui

    May. 9, 2016
  • JanVanDerHagen

    Feb. 6, 2016
  • DriesDeSchepper

    Feb. 2, 2016
  • bhaven

    Jan. 19, 2016
  • nestorrojas

    Jan. 18, 2016
  • yetitrailadventure

    Jan. 18, 2016
  • rubenmedios

    Jan. 17, 2016
  • webaxe

    Jan. 17, 2016
  • liews

    Jan. 17, 2016

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

Views

Total views

5,086

On Slideshare

0

From embeds

0

Number of embeds

2,687

Actions

Downloads

51

Shares

0

Comments

0

Likes

10

×