Slide 1
Slide 1 text
BETTING ON
THE WEB TO WIN
7
7
#
AWWWARDS CONFERENCE, BARCELONA, 2015
Slide 2
Slide 2 text
PHILHAWKSWORTH
@
QUESTIONS
ENCOURAGEMENT
ARGUMENTS
COMMENTS
TAPAS RECOMMENDATIONS
Slide 3
Slide 3 text
BETTING ON
THE WEB TO WIN
7
7
#
AWWWARDS CONFERENCE, BARCELONA, 2015
Slide 4
Slide 4 text
@philhawksworth
PLEASE, PLEASE SHUT UP
ABOUT THE WEB
7
7
Slide 5
Slide 5 text
@philhawksworth
NOPE
PLEASE, PLEASE SHUT UP ABOUT THE WEB
7
7
Slide 6
Slide 6 text
@philhawksworth
IN THE BEGINNING
Slide 7
Slide 7 text
@philhawksworth
TIM
Slide 8
Slide 8 text
@philhawksworth
IDEA
Slide 9
Slide 9 text
@philhawksworth
IDEA
Slide 10
Slide 10 text
@philhawksworth
VAGUE,
BUT EXCITING
Slide 11
Slide 11 text
@philhawksworth
SERVER
Slide 12
Slide 12 text
@philhawksworth
SITE
Slide 13
Slide 13 text
@philhawksworth
PAGE
Slide 14
Slide 14 text
@philhawksworth
PAGE
Slide 15
Slide 15 text
@philhawksworth
HTML
Slide 16
Slide 16 text
@philhawksworth
LINKS
Slide 17
Slide 17 text
@philhawksworth
MORE PAGES
Slide 18
Slide 18 text
@philhawksworth
MORE LINKS
Slide 19
Slide 19 text
@philhawksworth
MORE SITES
Slide 20
Slide 20 text
@philhawksworth
MORE SERVERS
Slide 21
Slide 21 text
@philhawksworth
IMAGES
Slide 22
Slide 22 text
@philhawksworth
BLINKING TEXT
Slide 23
Slide 23 text
@philhawksworth
MARQUES
Slide 24
Slide 24 text
@philhawksworth
GEOCITIES
Slide 25
Slide 25 text
ANIMATED GIFS
@philhawksworth
Slide 26
Slide 26 text
@philhawksworth
GEOCITIES
Slide 27
Slide 27 text
@philhawksworth
GEOCITIES
Slide 28
Slide 28 text
ANIMATED GIFS
@philhawksworth
Slide 29
Slide 29 text
@philhawksworth
SOUND
Slide 30
Slide 30 text
@philhawksworth
VIDEO
Slide 31
Slide 31 text
@philhawksworth
ANIMATION
Slide 32
Slide 32 text
@philhawksworth
REAL TIME
Slide 33
Slide 33 text
@philhawksworth
APPLICATIONS
Slide 34
Slide 34 text
@philhawksworth
CLOUD
Slide 35
Slide 35 text
@philhawksworth
(INTERNET )
INTERNET
Slide 36
Slide 36 text
@philhawksworth
INTERNET OF THINGS
Slide 37
Slide 37 text
@philhawksworth
(INTERNET )
INTERNET
Slide 38
Slide 38 text
@philhawksworth
OFFLINE
Slide 39
Slide 39 text
@philhawksworth
EVERYWHERE
Slide 40
Slide 40 text
@philhawksworth
THE LINK
Slide 41
Slide 41 text
@philhawksworth
HYPERTEXT LINKS
Slide 42
Slide 42 text
@philhawksworth
HYPERTEXT LINKS
W
I
Slide 43
Slide 43 text
@philhawksworth
HYPERTEXT LINKS
W
I
WHY DO ?
Slide 44
Slide 44 text
@philhawksworth
WHAT ARE HYPERTEXT LINKS?
7
7
Slide 45
Slide 45 text
– Ted Nelson
HYPERTEXT
7
7
Slide 46
Slide 46 text
– Ted Nelson
HYPERMEDIA
7
7
Slide 47
Slide 47 text
– Ted Nelson
TRANSCLUSION
7
7
Slide 48
Slide 48 text
– Ted Nelson
INTERTWINGULARITY
7
7
Slide 49
Slide 49 text
– Ted Nelson
TELEDILDONICS
7
7
Slide 50
Slide 50 text
@philhawksworth
TELEDILDONICS
Slide 51
Slide 51 text
@philhawksworth
CYBERDILDONICS
Slide 52
Slide 52 text
@philhawksworth
BLUEDILDONICS
Slide 53
Slide 53 text
@philhawksworth
LUEDILDONICS
there's an app for that?
Slide 54
Slide 54 text
@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
Slide 55
Slide 55 text
– Ted Nelson
HYPERTEXT
7
7
Slide 56
Slide 56 text
@philhawksworth
YOU NEVER FORGET YOUR FIRST LINK
7
7
Slide 57
Slide 57 text
@philhawksworth
YOU NEVER FORGET YOUR FIRST HOTLINK
7
7
Slide 58
Slide 58 text
@philhawksworth
MY FIRST HOTLINK
7
7
Slide 59
Slide 59 text
@philhawksworth
Slide 60
Slide 60 text
@philhawksworth
MY FIRST HOTLINK
7
7
Slide 61
Slide 61 text
@philhawksworth
MY FIRST HOTLINK
7
7
Slide 62
Slide 62 text
@philhawksworth
SHARING & COLLABORATION
7
7
Slide 63
Slide 63 text
@philhawksworth
YOU CAN LINK TO
ANYTHING FROM ANYWHERE
7
7
Slide 64
Slide 64 text
@philhawksworth
MINDBOGGLING MAGIC
7
7
Slide 65
Slide 65 text
@philhawksworth
MINDBOGGLING POWER
7
7
Slide 66
Slide 66 text
@philhawksworth
LINKING CREATES
7
7
CONTEXT
Slide 67
Slide 67 text
@philhawksworth
THE ANATOMY OF A HYPERTEXT LINK
7
7
Slide 68
Slide 68 text
AITCH TEE TEE PEE
DOUBLE MEH
– Alex Sexton
7
7
Slide 69
Slide 69 text
AITCH TEE TEE PEE
DOUBLE MEH
– Alex Sexton
7
7
Slide 70
Slide 70 text
http foobar.co
http foobar.co
://
@philhawksworth
Slide 71
Slide 71 text
http foobar.co
://
@philhawksworth
Slide 72
Slide 72 text
AITCH TEE TEE PEE
DOUBLE MEH
– Alex Sexton
7
protocol
domain
top level domain
path
fragment
querystring
double meh
Slide 73
Slide 73 text
@philhawksworth
THE ANATOMY OF A HYPERTEXT LINK
7
7
Slide 74
Slide 74 text
@philhawksworth
THE ANATOMY OF A URL
7
7
Slide 75
Slide 75 text
@philhawksworth
GIMME THE LINK
– Actual real living people
7
7
Slide 76
Slide 76 text
@philhawksworth
THE ANATOMY OF A HYPERTEXT LINK
7
7
Slide 85
Slide 85 text
@philhawksworth
clickety click
Slide 86
Slide 86 text
LYCOS.CO.UK CIRCA 1999/2000
Slide 87
Slide 87 text
@philhawksworth
WE NEED TO TALK ABOUT
7
7
FASHION
Slide 88
Slide 88 text
@philhawksworth
WE NEED TO TALK ABOUT
7
7
FASHION
@philhawksworth
Slide 89
Slide 89 text
@philhawksworth
WE NEED TO TALK ABOUT
7
7
TRENDS
@philhawksworth
Slide 90
Slide 90 text
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-flat-and-web-experience-has-plateaued
– Daljit Singh
Slide 91
Slide 91 text
@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
Slide 92
Slide 92 text
@philhawksworth
BOLLOCKS
7
7
– Phil Hawksworth, Awwwards Conference, 2015
Slide 93
Slide 93 text
@philhawksworth
BOLLOCKS
7
7
– Phil Hawksworth, Awwwards Conference, 2015
...
Slide 94
Slide 94 text
@philhawksworth
THERE IS A CASE AND PLACE FOR SIMPLE:
I DON’T WANT MY LOCAL GOVERNMENT WEBSITE
TO ENTERTAIN ME.
7
7
– Daljit Singh
Slide 95
Slide 95 text
@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
Slide 96
Slide 96 text
@philhawksworth
PARALLAX
7
7
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
@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
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
PLEASE DON'T
TAKE MY FLASH
AWAY FROM ME!
7
7
– My buddy, Steve
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
@philhawksworth
~
VIEW
SOURCE
Slide 106
Slide 106 text
@philhawksworth
Slide 107
Slide 107 text
@philhawksworth
DEVELOP A SINGLE UNDERLYING SYSTEM
THAT ALLOWS FOR A UNIFIED EXPERIENCE
ACROSS PLATFORMS AND DEVICE SIZES
7
7
Slide 108
Slide 108 text
@philhawksworth
APE
APP
7
7
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
ESTABLISHING
STANDARDS
7
7
Slide 111
Slide 111 text
WEB STANDARDS
7
7
Slide 112
Slide 112 text
WEB STANDARDS
7
7
Slide 113
Slide 113 text
@philhawksworth
STANDARDS &
CONVENTIONS
7
7
TRENDS
versus
Slide 114
Slide 114 text
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-flash-designs/
Slide 115
Slide 115 text
DESIGN TRENDS / CODE TRENDS
Slide 116
Slide 116 text
@philhawksworth
MUCH MORE
7
7
NOW
IMPORTANT
Slide 117
Slide 117 text
@philhawksworth
STICKING TO OUR GUNS
7
7
Slide 118
Slide 118 text
@philhawksworth
RESISTING THE MAN
7
7
Slide 119
Slide 119 text
@philhawksworth
GOOGLE
YEAR IN
SEARCH
7
7
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
“WE NEED TO CONSIDER PERFORMANCE
A DESIGN FEATURE, NOT JUST A
TECHNICAL CONCERN.”
– Yesenia Perez-Cruz
7
7
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
@philhawksworth
KNOW
YOUR
AUDIENCE
7
7
@philhawksworth
Slide 125
Slide 125 text
@philhawksworth
EMPATHY
7
7
Slide 126
Slide 126 text
@philhawksworth
THE FOUNDATION OF
CREATING BETTER WORK
EMPATHY
7
7
– Meagan Fisher
Slide 127
Slide 127 text
@philhawksworth
A COMMUNITY THAT SHARES
7
7
Slide 128
Slide 128 text
@philhawksworth
~
VIEW
SOURCE
Slide 129
Slide 129 text
@philhawksworth
MY FIRST HOTLINK
7
7
Slide 130
Slide 130 text
@philhawksworth
Slide 131
Slide 131 text
@philhawksworth
SHOWING
YOUR
WORKING
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
WEB
FUNDAMENTALS
Slide 137
Slide 137 text
@philhawksworth
43
R/GA London
Proprietary & Confidential
Web Essentials
MAR 2014
High level sitemap
Slide 138
Slide 138 text
@philhawksworth
Slide 139
Slide 139 text
@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
✔
Slide 140
Slide 140 text
@philhawksworth
RISING
WATER LEVEL
7
7
Slide 141
Slide 141 text
@philhawksworth
WHAT IS THE COMPETITION?
7
7
Slide 142
Slide 142 text
@philhawksworth
Slide 143
Slide 143 text
@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
Slide 144
Slide 144 text
@philhawksworth
ONLYINTHEAPP
7
7
#
Slide 145
Slide 145 text
@philhawksworth
Slide 146
Slide 146 text
@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
✔
✔
Slide 147
Slide 147 text
APP GAPS
SCOTT JENSON
APPS DON'T
SCALE
– Scott Jenson
Slide 148
Slide 148 text
@philhawksworth
@philhawksworth
Slide 149
Slide 149 text
BURDEN OF
DEVELOPMENT
Slide 150
Slide 150 text
@philhawksworth
THERE IS
AN APP GAP
7
7
Slide 151
Slide 151 text
CAPABILITIES RACE
Slide 152
Slide 152 text
@philhawksworth
WE NEED TO TALK ABOUT
7
7
PROGRESSIVE
ENHANCEMENT
Slide 153
Slide 153 text
@philhawksworth
THIS IS FOR EVERYONE
7
7
– Dan Williams
https://twitter.com/iamdanw/status/525241312342462464
WITH JAVASCRIPT ENABLED
Slide 154
Slide 154 text
alert("enable javascript")
– @julianscarlett
#WhatIBlewMyA11yBudgetOn
https://twitter.com/julianscarlett/status/568479113062821891
Slide 155
Slide 155 text
@philhawksworth
NOT ABOUT WORKING
WITHOUT JAVASCRIPT
7
7
Slide 156
Slide 156 text
@philhawksworth
BE CONSERVATIVE IN WHAT YOU DO,
BE LIBERAL IN WHAT YOU ACCEPT
7
7
– Jon Postel
http://en.wikipedia.org/wiki/Robustness_principle
Slide 157
Slide 157 text
@philhawksworth
WHAT ARE WE
ENHANCING?
7
7
Slide 158
Slide 158 text
@philhawksworth
KNOWING FIRST THAT WE KNOW NOTHING
7
7
JAVASCRIPT VIEWPORT NETWORK
LOCATION
LOCAL STORAGE
BANDWIDTH
PIXEL DENSITY
INPUT DEVICE
Slide 159
Slide 159 text
@PHILHAWKSWORTH
OMFG
DEVICES
Slide 160
Slide 160 text
@philhawksworth
DON'T DISMISS DEVICES JUST
BECAUSE YOU DON'T USE THEM
7
7
– Anna Debenham
Slide 161
Slide 161 text
@philhawksworth
KNOW
YOUR
AUDIENCE
7
7
@philhawksworth
Slide 162
Slide 162 text
No content
Slide 163
Slide 163 text
@philhawksworth
7
7
ONLYINTHEAPP
#
THE NOTION OF
COMPLETE CONTROL
Slide 164
Slide 164 text
CLOSING
THE
GAP
@PHILHAWKSWORTH
Slide 165
Slide 165 text
TIME TO FIRST PAINT
7
7
Slide 166
Slide 166 text
GRACEFULLY
OFFLINE
GRACEFULLY OFFLINE
7
7
Slide 167
Slide 167 text
SERVICE WORKER
Slide 168
Slide 168 text
WHY SHOULD
THE WEB WIN?
7
7
Slide 169
Slide 169 text
@philhawksworth
We believe that if access to the Web
increases dramatically,
7
7
there will be significant social development
and greater political representation
among the billions of people
who currently have no voice.
Slide 170
Slide 170 text
STOCKING THE
TALENT POOL
7
7
Slide 171
Slide 171 text
@philhawksworth
THE WEB IS LIKE THE FUTURE,
IT'S ALREADY HERE
BUT NOT EVENLY DISTRIBUTED
7
7
Slide 172
Slide 172 text
@philhawksworth
ENABLE & INCLUDE
7
7
Slide 173
Slide 173 text
@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
✔
✔
Slide 174
Slide 174 text
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
Slide 175
Slide 175 text
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/
Slide 176
Slide 176 text
THANKS
bit.ly/webwin
@PHILHAWKSWORTH
7
7