All the small things… - A 2016

ALL THE SMALL THINGS…

CHRIS HEILMANN (@CODEPO8), AWWWARDS, AMSTERDAM, FEBRUARY 2016 https://www.flickr.com/photos/69135870@N00/4465772463

WE’RE HERE TODAY TO CELEBRATE THE MOST BEAUTIFUL WEB SITES… 🎉

A LOT OF WHAT WE CELEBRATE IS BASED ON GORGEOUS INTERACTIONS… 👋

FIDELITY AND INTERACTIVITY THAT BEFORE HTML5 WAS ONLY POSSIBLE WITH FLASH…📸

INSPIRATIONAL OBESITY…

WHY DID THIS HAPPEN? ⁉

THE WEB ISN’T AS COOL AS IT USED TO BE…

MOBILE, TABLETS GREAT HARDWARE AND FAST CONNECTIONS… 🚤

CREATIVE MONOCULTURE… 🍎

THE WEB CAN SURPRISE YOU… 😄

THE STORY OF IGNIGHTER…

http://www.nytimes.com/2011/02/20/business/20ignite.html?_r=0

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

💩

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

IGNIGHTER → STEP OUT

http://www.nytimes.com/2011/02/20/business/20ignite.html?_r=0

• 2 Million users • 7000 daily signups on

average

GROWTH HAPPENS WHERE WE ARE NOT THINKING OF RIGHT NOW - IN BADLY CONNECTED COUNTRIES WITH MILLIONS OF POTENTIAL USERS…

TIME TO BURN SOME OF THE FAT OF THE WEB… 🚴

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

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

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

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)

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

MAINTENANCE… ⛏

STOP BLAMING THE USER!

<noscript>

ThiswebsiteneedsJavascript,pleaseenableit

</noscript>

<pid="guesswork">

Yourbrowserdoesn’tsupportTHING.Suckstobeyou!

</p>

BROWSERS CHANGED A LOT. EVERGREEN, CAPABLE AND OPEN!

THIS IS A GREAT TIME TO CHANGE OUR WAYS!

QUESTION THE NEED FOR LIBRARIES…

http://blog.jquery.com/2016/01/14/jquery-3-0-beta-released/

PRACTICE FEATURE DETECTION INSTEAD OF PRETENDING TO FIX BROWSERS…

if(thing){dothing();}

if(!thing){//youprobablydon’t//needthing,stop//shoe-horningitin.}

GREAT THINGS TO USE RIGHT NOW…

FLEXBOX +

SERVICE WORKER 🔌

CAMERA ACCESS 📹

PICTURE ELEMENT 🖼

PICTURE ELEMENT

🖼https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/

MACHINE LEARNING APIS…

SPEECH AND LANGUAGE RECOGNITION…

FACIAL DETECTION AND RECOGNITION…

EMOTION RECOGNITION…

IMAGE ANALYSIS AND CONVERSION…

http://how-old.net/

http://mymoustache.net/

http://codepo8.github.io/simplecamshot/

IT IS UP TO YOU TO KEEP THE WEB EXCITING AND USABLE FOR THE NEXT GENERATION OF USERS.

AND IT IS NOT ABOUT WHO IS THE PRETTIEST…

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…

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.

THANK YOU!CHRIS HEILMANN

@CODEPO8