All the small things… - A 2016
-
Upload
christian-heilmann -
Category
Education
-
view
4.419 -
download
0
Transcript of All the small things… - A 2016
![Page 1: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/1.jpg)
ALL THE SMALL THINGS…
CHRIS HEILMANN (@CODEPO8), AWWWARDS, AMSTERDAM, FEBRUARY 2016 https://www.flickr.com/photos/69135870@N00/4465772463
![Page 2: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/2.jpg)
WE’RE HERE TODAY TO CELEBRATE THE MOST BEAUTIFUL WEB SITES… 🎉
![Page 3: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/3.jpg)
A LOT OF WHAT WE CELEBRATE IS BASED ON GORGEOUS INTERACTIONS… 👋
![Page 4: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/4.jpg)
FIDELITY AND INTERACTIVITY THAT BEFORE HTML5 WAS ONLY POSSIBLE WITH FLASH…📸
![Page 5: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/5.jpg)
![Page 6: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/6.jpg)
INSPIRATIONAL OBESITY…
![Page 7: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/7.jpg)
WHY DID THIS HAPPEN? ⁉
![Page 8: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/8.jpg)
THE WEB ISN’T AS COOL AS IT USED TO BE…
![Page 9: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/9.jpg)
MOBILE, TABLETS GREAT HARDWARE AND FAST CONNECTIONS… 🚤
![Page 10: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/10.jpg)
CREATIVE MONOCULTURE… 🍎
![Page 11: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/11.jpg)
THE WEB CAN SURPRISE YOU… 😄
![Page 12: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/12.jpg)
THE STORY OF IGNIGHTER…
http://www.nytimes.com/2011/02/20/business/20ignite.html?_r=0
![Page 13: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/13.jpg)
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
💩
![Page 14: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/14.jpg)
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
![Page 15: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/15.jpg)
IGNIGHTER → STEP OUT
http://www.nytimes.com/2011/02/20/business/20ignite.html?_r=0
• 2 Million users • 7000 daily signups on
average
![Page 16: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/16.jpg)
GROWTH HAPPENS WHERE WE ARE NOT THINKING OF RIGHT NOW - IN BADLY CONNECTED COUNTRIES WITH MILLIONS OF POTENTIAL USERS…
![Page 17: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/17.jpg)
TIME TO BURN SOME OF THE FAT OF THE WEB… 🚴
![Page 18: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/18.jpg)
Type Size (kB)Images 1426Scripts 357Video 174Fonts 123Stylesheets 76HTML 67Other 4Total 2232 kB
THE AVERAGE WEB SITE DOESN’T LOOK FIT…
http://www.httparchive.org/interesting.php#bytesperpage
![Page 19: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/19.jpg)
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
![Page 20: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/20.jpg)
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
![Page 21: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/21.jpg)
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)
![Page 22: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/22.jpg)
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
![Page 23: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/23.jpg)
MAINTENANCE… ⛏
![Page 24: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/24.jpg)
STOP BLAMING THE USER!
![Page 25: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/25.jpg)
<noscript>
ThiswebsiteneedsJavascript,pleaseenableit
</noscript>
![Page 26: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/26.jpg)
<pid="guesswork">
Yourbrowserdoesn’tsupportTHING.Suckstobeyou!
</p>
![Page 27: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/27.jpg)
BROWSERS CHANGED A LOT. EVERGREEN, CAPABLE AND OPEN!
![Page 28: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/28.jpg)
THIS IS A GREAT TIME TO CHANGE OUR WAYS!
![Page 29: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/29.jpg)
QUESTION THE NEED FOR LIBRARIES…
http://blog.jquery.com/2016/01/14/jquery-3-0-beta-released/
![Page 30: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/30.jpg)
PRACTICE FEATURE DETECTION INSTEAD OF PRETENDING TO FIX BROWSERS…
if(thing){dothing();}
if(!thing){//youprobablydon’t//needthing,stop//shoe-horningitin.}
![Page 31: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/31.jpg)
GREAT THINGS TO USE RIGHT NOW…
![Page 32: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/32.jpg)
FLEXBOX +
![Page 33: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/33.jpg)
SERVICE WORKER 🔌
![Page 34: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/34.jpg)
CAMERA ACCESS 📹
![Page 35: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/35.jpg)
PICTURE ELEMENT 🖼
![Page 36: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/36.jpg)
PICTURE ELEMENT
🖼https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/
![Page 37: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/37.jpg)
MACHINE LEARNING APIS…
![Page 38: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/38.jpg)
SPEECH AND LANGUAGE RECOGNITION…
![Page 39: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/39.jpg)
FACIAL DETECTION AND RECOGNITION…
![Page 40: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/40.jpg)
EMOTION RECOGNITION…
![Page 41: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/41.jpg)
IMAGE ANALYSIS AND CONVERSION…
![Page 42: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/42.jpg)
http://how-old.net/
![Page 43: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/43.jpg)
http://mymoustache.net/
![Page 44: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/44.jpg)
http://codepo8.github.io/simplecamshot/
![Page 45: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/45.jpg)
IT IS UP TO YOU TO KEEP THE WEB EXCITING AND USABLE FOR THE NEXT GENERATION OF USERS.
![Page 46: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/46.jpg)
AND IT IS NOT ABOUT WHO IS THE PRETTIEST…
![Page 47: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/47.jpg)
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…
![Page 48: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/48.jpg)
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.
![Page 49: All the small things… - A 2016](https://reader034.fdocuments.net/reader034/viewer/2022052116/58f2c0181a28abac408b4587/html5/thumbnails/49.jpg)
THANK YOU!CHRIS HEILMANN
@CODEPO8