Betting on the Web to Win

BETTING ON THE WEB TO WIN 7 7 # AWWWARDS
CONFERENCE, BARCELONA, 2015

PHILHAWKSWORTH @ QUESTIONS ENCOURAGEMENT ARGUMENTS COMMENTS TAPAS RECOMMENDATIONS

BETTING ON THE WEB TO WIN 7 7 # AWWWARDS
CONFERENCE, BARCELONA, 2015

@philhawksworth PLEASE, PLEASE SHUT UP ABOUT THE WEB 7 7

@philhawksworth NOPE PLEASE, PLEASE SHUT UP ABOUT THE WEB 7
7

@philhawksworth IN THE BEGINNING

@philhawksworth TIM

@philhawksworth IDEA

@philhawksworth VAGUE, BUT EXCITING

@philhawksworth SERVER

@philhawksworth SITE

@philhawksworth PAGE

@philhawksworth HTML

@philhawksworth LINKS

@philhawksworth MORE PAGES

@philhawksworth MORE LINKS

@philhawksworth MORE SITES

@philhawksworth MORE SERVERS

@philhawksworth IMAGES

@philhawksworth BLINKING TEXT

@philhawksworth MARQUES

@philhawksworth GEOCITIES

ANIMATED GIFS @philhawksworth

@philhawksworth GEOCITIES

ANIMATED GIFS @philhawksworth

@philhawksworth SOUND

@philhawksworth VIDEO

@philhawksworth ANIMATION

@philhawksworth REAL TIME

@philhawksworth APPLICATIONS

@philhawksworth CLOUD

@philhawksworth (INTERNET ) INTERNET

@philhawksworth INTERNET OF THINGS

@philhawksworth (INTERNET ) INTERNET

@philhawksworth OFFLINE

@philhawksworth EVERYWHERE

@philhawksworth THE LINK

@philhawksworth HYPERTEXT LINKS

@philhawksworth HYPERTEXT LINKS W I

@philhawksworth HYPERTEXT LINKS W I WHY DO ?

@philhawksworth WHAT ARE HYPERTEXT LINKS? 7 7

– Ted Nelson HYPERTEXT 7 7

– Ted Nelson HYPERMEDIA 7 7

– Ted Nelson TRANSCLUSION 7 7

– Ted Nelson INTERTWINGULARITY 7 7

– Ted Nelson TELEDILDONICS 7 7

@philhawksworth TELEDILDONICS

@philhawksworth CYBERDILDONICS

@philhawksworth BLUEDILDONICS

@philhawksworth LUEDILDONICS there's an app for that?

@philhawksworth TRANSCLUSION INTERTWINGULARITY TELEDILDONICS Words I must find an excuse
to use today Words I must find an excuse to use today TRANSCLUSION INTERTWINGULARITY TELEDILDONICS

– Ted Nelson HYPERTEXT 7 7

@philhawksworth YOU NEVER FORGET YOUR FIRST LINK 7 7

@philhawksworth YOU NEVER FORGET YOUR FIRST HOTLINK 7 7

@philhawksworth MY FIRST HOTLINK 7 7

@philhawksworth <img src="http://not-my.com/not-my-image.jpeg">

@philhawksworth SHARING & COLLABORATION 7 7

@philhawksworth YOU CAN LINK TO ANYTHING FROM ANYWHERE 7 7

@philhawksworth MINDBOGGLING MAGIC 7 7

@philhawksworth MINDBOGGLING POWER 7 7

@philhawksworth LINKING CREATES 7 7 CONTEXT

@philhawksworth THE ANATOMY OF A HYPERTEXT LINK 7 7

AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7
7

http foobar.co http foobar.co :// @philhawksworth

http foobar.co :// @philhawksworth

AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7
protocol domain top level domain path fragment querystring double meh

@philhawksworth THE ANATOMY OF A URL 7 7

@philhawksworth GIMME THE LINK – Actual real living people 7
7

@philhawksworth <a>

@philhawksworth <a> clickety click </a>

@philhawksworth <a href="#someplace"> ! clickety click </a>

@philhawksworth <a href="/someplace"> ! clickety click </a>

@philhawksworth <a href="http://someplace"> ! clickety click </a>

@philhawksworth <a href="http://someplace" ! rel="author"> ! clickety click </a>

@philhawksworth <a href="http://someplace" ! rel="next"> ! clickety click </a>

@philhawksworth <a href="http://someplace" ! rel="prefetch"> ! clickety click </a>

@philhawksworth clickety click

LYCOS.CO.UK CIRCA 1999/2000

@philhawksworth WE NEED TO TALK ABOUT 7 7 FASHION

@philhawksworth WE NEED TO TALK ABOUT 7 7 FASHION @philhawksworth

@philhawksworth WE NEED TO TALK ABOUT 7 7 TRENDS @philhawksworth

THE DESIGN WORLD HAS BECOME FLAT & THE WEB AS
AN EXPERIENCE HAS PLATEAUED 7 7 http://www.thedrum.com/opinion/2015/01/23/daljit-singh-design-world-has-become-ﬂat-and-web-experience-has-plateaued – Daljit Singh

@philhawksworth MY ARGUMENT HERE IS THAT WHILST TECH AND ITS
CO-WORKER UX HAVE BEEN PROMOTED, 7 7 DESIGN HAS BEEN DEMOTED TO MIDDLE MANAGEMENT. – Daljit Singh

@philhawksworth BOLLOCKS 7 7 – Phil Hawksworth, Awwwards Conference, 2015

@philhawksworth BOLLOCKS 7 7 – Phil Hawksworth, Awwwards Conference, 2015
...

@philhawksworth THERE IS A CASE AND PLACE FOR SIMPLE: I
DON’T WANT MY LOCAL GOVERNMENT WEBSITE TO ENTERTAIN ME. 7 7 – Daljit Singh

@philhawksworth BUT ALL WEB TEMPLATES SEEM TO HAVE COME INLINE
TO LOOK IDENTICAL 7 7 YOU’VE SEEN THOSE PARALLAX DESIGNS WITH THEIR DIVIDED, ENDLESS SCROLLING PAGES – Daljit Singh

@philhawksworth PARALLAX 7 7

@philhawksworth https://twitter.com/idiot/status/558258044069756929 Empire State Building New York Jim Mao Building
Shanghai Sears Tower Chicago Petronas Towers Huala Lumpur Tapei 101 Taipei The size and lag of your parallax page

PLEASE DON'T TAKE MY FLASH AWAY FROM ME! 7 7
– My buddy, Steve

@philhawksworth ~ VIEW SOURCE

@philhawksworth

@philhawksworth DEVELOP A SINGLE UNDERLYING SYSTEM THAT ALLOWS FOR A
UNIFIED EXPERIENCE ACROSS PLATFORMS AND DEVICE SIZES 7 7

@philhawksworth APE APP 7 7

ESTABLISHING STANDARDS 7 7

WEB STANDARDS 7 7

@philhawksworth STANDARDS & CONVENTIONS 7 7 TRENDS versus

FLASH DESIGN TRENDS 7 7 TINY PIXEL FONTS SOUND EFFECTS
ON HOVER FIXED 800x600 LAYOUTS POST APOCALYPTIC FAKE UI FLICKERING FIXED 1024x768 LAYOUTS BESPOKE WINDOW MANAGERS CRAZY OPTICAL LOOP CIRCULAR NAVIGATION THINGAMIBOBS http://www.smashingmagazine.com/2007/10/30/65-excellent-ﬂash-designs/

DESIGN TRENDS / CODE TRENDS

@philhawksworth MUCH MORE 7 7 NOW IMPORTANT

@philhawksworth STICKING TO OUR GUNS 7 7

@philhawksworth RESISTING THE MAN 7 7

@philhawksworth GOOGLE YEAR IN SEARCH 7 7

“WE NEED TO CONSIDER PERFORMANCE A DESIGN FEATURE, NOT JUST
A TECHNICAL CONCERN.” – Yesenia Perez-Cruz 7 7

@philhawksworth KNOW YOUR AUDIENCE 7 7 @philhawksworth

@philhawksworth EMPATHY 7 7

@philhawksworth THE FOUNDATION OF CREATING BETTER WORK EMPATHY 7 7
– Meagan Fisher

@philhawksworth A COMMUNITY THAT SHARES 7 7

@philhawksworth ~ VIEW SOURCE

@philhawksworth <img src="http://not-my.com/not-my-image.jpeg">

@philhawksworth SHOWING YOUR WORKING

WEB FUNDAMENTALS

@philhawksworth 43 R/GA London Proprietary & Confidential Web Essentials MAR
2014 High level sitemap

@philhawksworth

to use today Words I must find an excuse to use today TRANSCLUSION INTERTWINGULARITY TELEDILDONICS ✔

@philhawksworth RISING WATER LEVEL 7 7

@philhawksworth WHAT IS THE COMPETITION? 7 7

@philhawksworth

@philhawksworth “Welcome to Taco Bell! Give me your phone, and
we’ll be happy to take your order when I’m done looking through it!” 7 7 @Wilto https://twitter.com/wilto/status/527165005792555008

@philhawksworth ONLYINTHEAPP 7 7 #

@philhawksworth

to use today Words I must find an excuse to use today TRANSCLUSION INTERTWINGULARITY TELEDILDONICS ✔ ✔

APP GAPS SCOTT JENSON APPS DON'T SCALE – Scott Jenson

@philhawksworth @philhawksworth

BURDEN OF DEVELOPMENT

@philhawksworth THERE IS AN APP GAP 7 7

CAPABILITIES RACE

@philhawksworth WE NEED TO TALK ABOUT 7 7 PROGRESSIVE ENHANCEMENT

@philhawksworth THIS IS FOR EVERYONE 7 7 – Dan Williams
https://twitter.com/iamdanw/status/525241312342462464 WITH JAVASCRIPT ENABLED

@philhawksworth NOT ABOUT WORKING WITHOUT JAVASCRIPT 7 7

@philhawksworth BE CONSERVATIVE IN WHAT YOU DO, BE LIBERAL IN
WHAT YOU ACCEPT 7 7 – Jon Postel http://en.wikipedia.org/wiki/Robustness_principle

@philhawksworth WHAT ARE WE ENHANCING? 7 7

@philhawksworth KNOWING FIRST THAT WE KNOW NOTHING 7 7 JAVASCRIPT
VIEWPORT NETWORK LOCATION LOCAL STORAGE BANDWIDTH PIXEL DENSITY INPUT DEVICE

@PHILHAWKSWORTH OMFG DEVICES

@philhawksworth DON'T DISMISS DEVICES JUST BECAUSE YOU DON'T USE THEM
7 7 – Anna Debenham

@philhawksworth KNOW YOUR AUDIENCE 7 7 @philhawksworth

@philhawksworth 7 7 ONLYINTHEAPP # THE NOTION OF COMPLETE CONTROL

CLOSING THE GAP @PHILHAWKSWORTH

TIME TO FIRST PAINT 7 7

GRACEFULLY OFFLINE GRACEFULLY OFFLINE 7 7

SERVICE WORKER

WHY SHOULD THE WEB WIN? 7 7

@philhawksworth We believe that if access to the Web increases
dramatically, 7 7 there will be signiﬁcant social development and greater political representation among the billions of people who currently have no voice.

STOCKING THE TALENT POOL 7 7

@philhawksworth THE WEB IS LIKE THE FUTURE, IT'S ALREADY HERE
BUT NOT EVENLY DISTRIBUTED 7 7

@philhawksworth ENABLE & INCLUDE 7 7

to use today Words I must find an excuse to use today TRANSCLUSION INTERTWINGULARITY TELEDILDONICS ✔ ✔

THANKS Ted Nelson Offline The Gap Man drawer Scott Jenson
Harbour Borrow Paint Tea Garden Race Burros OMFG Devices Rails Dolls https://www.flickr.com/photos/matlocktest/37349112 https://www.flickr.com/photos/spiritokko/421542701 https://www.flickr.com/photos/cmbellman/8475129295/ https://www.flickr.com/photos/vandinglewop/7993315350 https://www.flickr.com/photos/29022619@N03/7980265115 https://www.flickr.com/photos/aigle_dore/6226051676 https://www.flickr.com/photos/lendingmemo/11438400085 https://www.flickr.com/photos/markchadwick/5904682572 https://www.flickr.com/photos/55038128@N00/1914881088 https://www.flickr.com/photos/anabadili/2759448841 https://www.flickr.com/photos/fotosdepepe/8389274551 http://www.flickr.com/photos/lukew/10453062745 https://www.flickr.com/photos/employtheskinnyboy/3523608412 https://www.flickr.com/photos/1-6-scale-doll-clothes/8665650124

LINKS http://info.cern.ch/Proposal.html http://en.wikipedia.org/wiki/Ted_Nelson http://www.thedrum.com/opinion/2015/01/23/daljit-singh-design-world-has-become-flat-and-web-experience-has-plateaued http://www.google.com/design/spec/material-design http://en.wikipedia.org/wiki/Robustness_principle http://paulrobertlloyd.com/about/styleguide /http://www.mckinsey.com/Insights/High_Tech_Telecoms_Internet/Offline_and_falling_behind_Barriers_to_Internet_adoption http://www.brucelawson.co.uk/2012/what-good-is-the-web-some-numbers/ https://developers.google.com/web/fundamentals/resources/styleguide/
https://jakearchibald.github.io/isserviceworkerready/ http://jakearchibald.com/2014/service-worker-first-draft/

THANKS bit.ly/webwin @PHILHAWKSWORTH 7 7

Betting on the Web to Win

Betting on the Web to Win

More Decks by Phil Hawksworth

Other Decks in Programming

Featured

Transcript