1. reset
the web
a brief stroll into our past and our future
http://www.flickr.com/photos/karen_roe

2. the web is less than
8000 days old...
Hat tip to Kevin Kelly - The next 5000 days of the web http://www.flickr.com/photos/psd/3149878971

3. it reaches
1/3* of
people
on our planet
*2012 estimates put the population at about 7 billion inhabitants... http://www.flickr.com/photos/vitroids/2753929716

4. it powers business,
entertainment,
learning...
http://www.flickr.com/photos/viirok/2498157861

5. and so
and so much more...
http://www.icanhascheezburger.com/

6. but what is the web
for?
http://www.flickr.com/photos/34233222@N05/4292987392

7. probably not surprisingly...
I found the beginning of an
answer through this man...

8. a few years before the Macintosh…
...in 1980 Steve Jobs recounted
the following story...

9. “ in the early 70s, Scientific American
did a study on the efficiency of locomotion...
it was actually the 1970’s, not 1870’s… ;)
http://www.flickr.com/photos/boston_public_library/4328032194

10. “
...for all different species of things on the planet
...birds, cats, dogs goats...

11. A B
“ ...they measured, how much energy
does it take for a goat to get from here to there...

12. “...they then ranked them, and published a list
1.
23.
32.
18.
California Condor
Domestic cat
British Alpine Goat
Springer Spaniel
a lazy glider
prefers to sleep
see goatsonstuff.com
prefers to swim…
27. Red-breasted Robin faster than most
8. American Saddlebred -
298. Banana Slug faster than a rock…
3. Cheetah currently missing
207. Humming Bird got tired watching it.
- Bumble Bee couldn’t find one…
183. Elephant forgot
342. Bob… not his finest moment…

13. 1. California Condor a lazy glider…
“ of all the animals, the condor won. It took
the least amount of energy to get from here to there...

14. “ man however didn’t do so well...
342. Bob… not his finest moment…

15. ?
“
man came a rather unimpressive showing...
a third of the way down the list...

16. “
...but fortunately, someone was insightful
enough to test man on a bicycle...

17. “ and man with a bicycle won...
1. Bob on a bicycle one of his better days…

18. “
...twice as good as the condor,
all the way off the list..

19. “
...what it showed was that man as a tool maker,
has the ability to create tools, to amplify
an inherent ability...

20. released 1984
“
...and that’s exactly what we’re doing here
(Steve of course was talking about Apple, and the development
of one of the first personal computers)

21. Steve Jobs went on to explain that computers were
just one in a long line of tools created by man...

22. ...just as the bicycle amplified our ability
to use our muscles, tendons and brains
to transport our bodies...

23. ...just as the tools and technologies
of the industrial revolution were
“an amplification of human sweat”...

24. ...the computer amplified our human abilities
of memory, problem-solving, calculation,
projection, analysis, and so much more...
http://nicelifeapparel.wordpress.com/tag/crazy-math-problem/

25. Steve Jobs also realized
that the computer was
just the beginning...

26. “
There is something very
special and historically
different that takes place,
when you have one
computer, for one person,
rather than one for many.
- Steve Jobs
http://www.flickr.com/photos/aidanmorgan/3709199304/

27. (as it happens) this statement is
also true of the Internet...

28. the Internet’s ability to amplify knowledge
began as a purely academic and scientific tool...
http://www.flickr.com/photos/epitti/2371715992

29. ...but its true potential was only revealed when
it became a ubiquitously available tool...
http://www.flickr.com/photos/olpc/2929782994

30. “
Nobody has any idea
of what a new invention
will really be good for.
The crucial question is,
what happens when
everyone has one?
- Kevin Kelly
http://www.flickr.com/photos/goincase/4647893507

31. open and universally accessible
...when we connected a browser to the Internet
we couldn’t have guessed what it would become...
http://www.flickr.com/photos/tanaka/3212368979

32. ...when we connected the Internet
to a glowing rectangle, we thought we were
creating a ‘smart’ phone...

33. but this is not
a smartphone...

34. it’s
"A device to
amplify
curiosity"
- John Seely Brown

35. ...and while this doesn’t really explain
what the web is for, it begins to clarify
it’s immense value to all of us...

36. being always connected to an open platform,
accessible by anyone with a browser,
has forever changed the way we live...

37. “
...hold on...let me
look that up...
I just happen to
have the sum of
human knowledge
in my pocket...
- @fj
http://www.flickr.com/photos/w00kie/2752309431

38. “
...the magic is
in my palms,
god knows what
I would do
without this....
Omar, 19, Hafeezpet, India
Source: Anthropology, development and ICTs http://www.flickr.com/photos/jonhurd/2367208101

39. not too shabby for
8000 days...
http://www.flickr.com/photos/psd/3149878971

40. But how did we really get here?

41. To understand this better, let’s take a step back...

42. ...and talk a bit
about plumbing.
Part 2: plumbing
http://www.flickr.com/photos/nnova/2923859643

43. all technological revolutions
require a level of plumbing
or if you prefer...infrastructure
http://www.flickr.com/photos/wheatfields/2110680492

44. plumbing provides
a common framework
or scaffold on which
to innovate
Source: ToBeDetermined.org

45. the rise of computers, the Internet,
the web and mobile have been intricately linked...

46. ...to the invention, implementation
and market adoption of this type of plumbing...

47. hardware
900 Microprocessor
integrates CPU function
onto a single chip.
800 Compaq, DEC,IBM,
Intel, Microsoft, NEC
"Moore's Law" predicts the and Nortel begin
700 future of integrated circuits. work on USB.
millions of Internet hosts
first 64-bit processor First 64-bit
600 in a supercomputer processor in a
personal
computer.
500
An all semiconductor Intel 32-bit
400 "Solid Circuit" is Pentium
demonstrated by processor
Jack Kilby. Personal computers begin released.
300 to appear. Resistive touch
screens are patented.
Transistorized
200 ARM6 processor
computers First human- is released.
emerge.
input multi-touch
100 system.
0
50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12
chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia

48. network
900 TCP/IP based First IPv6
NSFNET First person to description.
established. person SMS
800 sent in Finland. NTT DoCoMo
TCP/IP standardised, introduces the first
700 and Internet introduced. full mobile Internet
millions of Internet hosts
service in Japan.
DNS
600 invented
Transition from NTT DoCoMo
ARPANET/NSFNET launches first
networks to the
500 NMT launches 1G commercial 3G
modern (commercial)
networks in Denmark, network in Japan.
Internet.
Finland, Norway and
400 Sweden.
First ARPANET First commercial 9 companied
including IBM,
300 link established. dialup ISP in the U.S.
Intel, Nokia and 295 million
NTT launches Microsoft agree subscribers on
200 first (1G) First GSM (2G) to Bluetooth 3G networks
cellular network launches in standard. worldwide.
network. Finland. Wi-fi invented
100 by NCR/AT&T.
0
50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12
chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia

49. the web
900
First JPG
standard. W3C founded.
800 TBL makes the Web freely
available with no patents or
Compuserve royalties. Launch of WebCrawler
700 introduces the (first full-text search engine).
millions of Internet hosts
GIF format.
PNG
600 Debut of the Web as a format
publicly available approved.
service on the Internet.
500
Mosaic HTML 4.01
(first graphical recommended YouTube
400 browser)
WAP & XHTML MP launches.
SGML
CHTML released.
300 HTML
released
Tim Berners-Lee 2.0
builds all the tools CSS Wikipedia
200 Start of launches. Facebook HTML5
necessary for a
Google working
working Web (HTTP, launches.
research draft.
HTML, a browser
100 and server) project.
0
50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12
chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia

50. with each layer of plumbing comes new innovations
(which spawn or inspire more plumbing...)

51. product innovation
900
800
Microsoft Palm
Windows first iPad
Pilot
700 announced.
millions of Internet hosts
First person
600 to person
Nokia begins SMS sent in Symbian Ltd. First
manufacturing Finland. formed by BlackBerry
500 telecommunications Ericsson, Nokia, smartphone. iPhone
equipment. Motorola & Psion
400 Apple Newton First RIM
platform pager
launched. First WebKit
300 First mobile browser iPhone 4
Windows Symbian 330 ppi
(Nokia)
95 iMac device. display
200
G3 Nokia E60
Macintosh 260 ppi Palm
100 Classic display WebOS
0
50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12
chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia

52. The First Internet Router
The BBN Interface
Message Processor did
the packet routing for
the ARPANET in 1969,
“ ...it takes on average 20 years for a technology to make
the transition from first articulation...to maturity
(defined as becoming a $1billion industry)…the mouse,
for example, took 30 years.
– Bill Buxton, Principle researcher Microsoft
http://www.flickr.com/photos/kiwanja/3169409467/

53. during this time
lack of infrastructure may
cause some to
fall behind...

54. ...or sometimes
leap ahead
http://www.flickr.com/photos/kiwanja/3169409467/

55. but the infrastructure of the web
(the common framework on which
we continue to innovate...)

56. was based on
mental models
of a very different time
http://www.flickr.com/photos/ona1a/4521406829/

57. ...models that may soon no longer apply
2000
Internet Users (MM) Estimated
1500
the inflection point is near...
1000
within 2 years mobile users
are expected to exceed
desktop users
500
0
2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile users Desktop users
Source: Morgan Stanley Associates Internet Trends 2010 (PDF)

58. Part 3: welcome to the future
http://www.flickr.com/photos/whiteafrican/2938685296

59. a short stroll into the future...
contexts will everything just in time content will
be varied and will be will replace (need to) flow
unpredictable connected just in case like water

60. today’s digital
and connected things
may feel incredibly diverse...
http://www.flickr.com/photos/_dchris/4652995362

61. ...but they are still
deeply rooted to our past
http://www.flickr.com/photos/terry/5388630668

62. a small selection of near future devices

63. A random internet connected watch. More connected wearable devices are on the way.
tiny
personal
constrained
http://www.flickr.com/photos/scobleizer/5263223798

64. large stationary
public short use
(sweaty) touch
Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).

65. One of many Smart (internet enabled) TVs now shipping. Includes apps and a browser.
Some can be paired with a smartphone or tablet remote control.
large
social stationary low-ish ppi
remote (voice, gesture, app) lean-back powerful (enough)

66. The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser.
small touch, voice
fixed (but not stationary)
bandwidth constrained

67. Quantas A380 first class with 17” flat panel display.
(Tethered tablets will likely appear soon).
large(r) public
fixed (but not stationary)
manipulation unknown
bandwidth constrained
source: PC Mag

68. “ ...a companion to smartphones, tablets, PC, Macs, and adds smart
capabilities to existing displays, TVs, set top boxes and other devices.
Cotton Candy
a Screen independent
but otherwise fully
functional USB sized
‘plug computer’.
ARM Cortex A9, Wi-fi,
Android, Ubuntu, with
virtualization client for
Win/Lin/Mac
many unknown unknowns
http://www.fxitech.com/products/

69. Bluetooth
The Magic Cube
is an ultra-portable, productivity
full-sized virtual
computer keyboard helper-appliance
with support for Android,
iOS and any device
with Bluetooth HID
support.

70. Shipping spring 2012 in Europe
LG’s EPD is a 6-inch, 1024×768 e-ink plastic screen. It’s
0.7mm thick, it weighs 14g, and LG claims it’s resistant
to scratches and drops from a 1.5 meter height.
small(-ish)
flexible constrained
many unknown unknowns
source: Green autoblog

71. “
We think technology
should work for you—
to be there when you
need it and get out of
your way when you don’t.
tiny voice, gesture?
personal constrained
many unknown unknowns
Google Glass

72. Golden-i head-mounted mobile computer for industrial settings such as construction,
military, and security services. Includes SVGA microdisplay, Win-CE and voice recognition.
tiny voice, gesture
personal constrained
many unknown unknowns
http://www.mygoldeni.com/

73. these contexts may be diverse,
but they still kinda ‘fit’ our mental models
for both the original ‘thing’ and the web

74. old
thing
(or media,
or tool)
+
connectivity
software
+
+
user interface
smart
=
thing
old thing
(just a bit smarter)

75. more often than not...
the ‘smart’-ness
has been bolted on
http://www.flickr.com/photos/mujitra/7053687599

76. this likely won’t be the pattern going forward,
here’s why....

77. a short stroll into the future...
contexts will everything just in time content will
be varied and will be will replace (need to) flow
unpredictable connected just in case like water

78. Moore’s Law is
close to 50 years old
Source: Intel

79. we’ve come
a very long way...
1982 2007
1st gen.
Osborne Executive
iPhone
1/100th MHz CPU
1/1000th the memory
100x the weight
10x the cost
Source and photo: Wikipedia

80. it now costs almost
nothing to make
something ‘smart’
or connected...
http://www.flickr.com/photos/slgc/6286652858

81. the new ARM
Cortex-M0+ uses
1/3
of the energy of an
8 or 16-bit processor
Source: New ARM chips herald Internet of things

82. it costs
30 cents (£0.20)
Source: New ARM chips herald Internet of things

83. ...and measures
2 mm (0.07”)
Source: New ARM chips herald Internet of things

84. yesterday: multiple chips
today: one chip that does
the work of three
Source: ThingM

85. some chips are optimized for
a specific unit of functionality
my job is to
my job is to
connect to
provide GPS
mobile phone
coordinates
networks
Source: ThingM

86. my job is to
provide GPS
coordinates
Brad Frost
+ = WTF?
At airport gate ready to
head to @bdconf. Sadly
the large suction cups I
was going to use to
scale the biodome got
confiscated. #bdconf
“The Tweeting GeoLocation
aware Toaster”
my job is to
connect to the
Internet

87. “ object oriented hardware...
...functionality abstracted into silicon.
- Mike Kuniavsky, ThingM
http://www.flickr.com/photos/negativz/41549347 Source: ThingM

88. soon...
I may not even
need batteries :-)
“ Ambient radio waves...can already provide enough energy
to substitute for AAA batteries in some calculators, temperature
and humidity sensors, and clocks....
We are on the cusp of an explosion in small wireless
devices...that can run on alternatives to battery power.
Devices like this can live on and on.
Source: The computer trend that will change everything and Bye-Bye Batteries: radio waves as a low-power source

89. “ ...embedded in
everything
will be a sliver of webness
- Kevin Kelly, founding editor Wired
Cute circuit - wearable technology

90. the more we peer into the future,
the more invisible this ‘web-ness’ becomes

91. a short stroll into the future...
contexts will everything just in time content will
be varied and will be will replace (need to) flow
unpredictable connected just in case like water

92. mobile is dramatically
shifting web behaviour

93. we are accessing
the web at any time
and any place...

94. but current behaviour
is still quite implicit
http://www.flickr.com/photos/intelfreepress/5922668169

95. yesterday today
“go to the computer” open a browser (or app)
to use the web/Internet to use the web/Internet

96. ....and experiences are built accordingly

97. today’s just in case web
(because you never quite know what they’ll need)
information
shopping
products
support
brand
web site
infotainment
social
tools
corporate PR
jobs
investor
news

98. today’s just in case web + apps
(now with added experience)
“
Our apps offer the best experience...
(so please download, install and keep
them updated, just in case that time
comes...we promise you won’t regret it)
support
information
products
shopping
shopping
brand
infotainment web site
native infotainment
social
tool
apps
tools
tool corporate PR
jobs
investor
news

99. ...but I don’t want to
own your app, I want
to own the possibility
space of your app.
Paraphrased from Mike Kuniavsky @ Webdirections South http://www.flickr.com/photos/zenilorac/698514624

100. tomorrow's just in time web
(because everything is connected)
I’d like to use whatever device I have
on-hand to learn more about this thing/
tool/service/place (right here and right
now)...please show me what I can do.
support
information
tools
Like+
smart thing

101. “
...a world where our devices load
applications opportunistically
as we need them, in real time.
The technological model for this...
is web pages. But these will be web
pages with advanced functionality that
can be accessed seamlessly from
remote or local networks—and even
from other mobile devices.
- Scott Jenson on Forbes: Apps are over
http://www.flickr.com/photos/keepwaddling1/3048726936/

102. does this mean
web sites will
go away?
OMG... ”
http://www.flickr.com/photos/richardmoross/1413692087

103. no, probably not...

104. ...web sites will be just one of many interfaces
we will use to interact with a service

105. the GlowCap service
Your doctor or designated Your pharmacy
family member receives is alerted when refills
light regular progress emails. are due.
data data
out out
data data
in out
data
service out
wireless
enabled
chip Each time the cap is opened,
data is transmitted
to the GlowCap service.
The cap lights up, Data is also transmitted, A real-time web (or app)
and plays a sound each to trigger a reminder call based progress report is
time medication is due. if you miss a dose. available.
Vitality GlowCaps

106. “ The most profound technologies are those that
disappear. They weave themselves into the fabric of
everyday life until they are indistinguishable from it….
- Mark Weiser (1991 chief scientist Xerox PARC)
http://www.flickr.com/photos/armaggeusa/3176297283

107. a short stroll into the future...
contexts will everything just in time content will
be varied and will be will replace (need to) flow
unpredictable connected just in case like water

108. responsive design is really just the beginning...

109. once we can envision this...
contexts will
be varied and
unpredictable
everything just in time
will be will replace
connected just in case

110. this no longer feels
that strange...

111. “Get your content ready to go anywhere
because it’s going to go everywhere.”
- Brad Frost
http://www.flickr.com/photos/sackerman519/5045015997/

112. but if content will be like water...
what kind of plumbing will we need?
http://www.flickr.com/photos/evdaimon/165589586

113. Part 4: re-imagining plumbing
http://www.flickr.com/photos/jonasb/2751113526

114. disclaimer: these ideas focus on a tiny sliver...
primarily related to the browser and the web platform

115. it’s easy to forget how much infrastructure
we’ve already built into the web as a platform

116. some of it was
necessary structural
scaffolding
http://www.flickr.com/photos/dandeluca/2720139047

117. form elements - v.1
HTML 4.01 - they haven’t failed us yet...

118. some focussed on user productivity...

119. browser productivity features
combined search/URL bar (and/ favourites
favicon signpost or choice of search engine)
security signpost tabs RSS extensions
back buon
(added in 1993!)
find in
browser
shortcuts &
bookmarks
status bar zoom (Opera
version shown)

120. access keys navigation
first introduced in 1999 (and not specifically for mobile)
1. Home
2. Products
3. Articles
Contact us
Products.html
Home.html Articles.html

121. others were a response to change...

122. tel and SMS URI schemes
introduced around 2000 via WTAI
1. Home
2. Products
3. Articles
Contact us <a href="tel:12345">Contact Us</a>

123. visual navigation aids on mobile
Nokia Browser for S60 circa 2005
Visual Back key
MiniMap viewport preview.
preview rectangle.
I really miss this
Once focussed, feature! Much
clicking the navipad clearer and didn’t
would zoom the force you to reload
layout. pages you didn’t
want to see again :-(
(Very similar to
Apple’s double-tap
to zoom.)

124. built-in reader modes
“Reader lets you view web articles free of clutter.”
we’re entirely to
blame for this bit...

125. proxy web browsers
polyfill for many of our existing problems
OperaMini UCWeb Nokia Browser Amazon Silk - 2011
2005 2005 for S40 - 2011

126. on-the-fly user agent switching
most browsers now include this ‘feature’
we’re somewhat to blame
for this bit as well...
Abandon hope all ye
who enter here
Dolphin browser for Android Maxthon browser for Android

127. recent specifications
continue to bake-in common functionality...

128. ...offloading aspects of behaviour
and rendering to the browser/platform

129. form elements - v.2
cleaner markup thanks to out of the box functionality
placeholder
validation

130. HTML5 notifications API
out of the box components and behaviours

131. end result: intelligent, responsive, platform-appropriate
yet adaptable default components...

132. a robust set of
behaviours is “responsiveness” is lower-level platform access
already baked-in baked in by default improves the user experience
end result: intelligent, responsive, platform-appropriate
yet adaptable default components...
aspects are future-friendly
styleable and (and gracefully
addressable through degradable)
the built-in API

133. the loss of control is generally welcome
compared to the alternative...

134. a menu and header in a
box with rounded corners
before CSS3 & HTML5
look ma...no divs (and semantics!) ...and after

135. form placeholders before HTML5
lots of potential issues
• cross browser support for entire
behaviour (e.g. populate the field
then clear it on focus)
• accessibility of placeholder value
• 4kb uncompressed (not huge..but
adds up with each new element of
functionality you build in)
• requires maintenance and testing
for each new browsers/versions/
form factors and manipulation
models (touch, voice etc.)
after CSS3
and HTML5
and so on...

136. “ ...everything you add to the page is something you’re
taking away from the latency profile of that page
...everything you add—just as infrastructure
to make things work—all these
things have a cost.
- Alex Russell
Alex Russell speaking at London JS Tilt 3D add-on for Firefox

137. in the future, it may make sense to take these
approaches approach even further...

138. a few ideas...
(warning: ideas presented in order of potential
disruption to the status quo)

139. idea #1
Problem: Back to top links are useful to
improve usability of longer pages.
• Thanks to viewport diversity, ‘long’ is a variable value.
• Sprinkling hard-coded anchors throughout content
isn’t future friendly.
• Adding them dynamically (on the client or server) based
on context detection seems like needless heavy lifting.
i’ve seen this done...it works well
enough but isn’t a long-term strategy

140. vertical navigation
shortcuts
• In QQ’s implementation,
a tap scrolls the layout up or
down by a (random) increment.
• Scrolling is accelerated darkened for
to improve the experience. demonstration
purposes
• Can be disabled by the user.
• Should ideally be customizable.
e.g. option to instead map controls
to a full ‘page-up/down’ behaviour.
• A nice companion to Apple’s
“tap to reveal URL bar” gesture.
sample implementation
on Tencent’s QQ browser (iOS)

141. idea #2
Problem: On the web, social media sharing
and discovery is currently enabled client-side,
using lots of third party scripts.
• Scripts may not be compatible with all browsers.
• Interactions are rarely responsive to changes in context.
• Social widgets (often) cause lots of HTTP requests and
have been known to block page load.
• The more popular social media gets, the more widgets
we will (technically) need.

142. they also introduce
a fair bit of noise :-(
it’s not like we don’t
have a bit too much
noise already...

143. studies suggest
social networks
now reach close to
70%
of the worldwide
population
but are also unlikely
to go away...
Source: Social networks around the world 2010

144. • Social media is already
weaving its way through
mobile platforms.
• Functionality is currently
limited to glanceable
home screen widgets, and
easy in-browser sharing.

145. but social widgets
aren’t content,
nor are they really
chrome...

146. “ Mobile is the needle,
social is the thread...
- Pew Internet &
American Life Project
which means they
may just be...plumbing
http://www.flickr.com/photos/preetamrai/5454799225

147. user configurable
bake-in a
social sharing layer
user configurable: bubbles up
turn it off or fill it glanceable
with your favourites information
(loose and clunky attempt at
visualizing how this might work)

148. idea #3
Problem: There are only so many ways
to re-arrange complex navigation.
• there will be many, devices of all shapes, sizes,
capabilities and manipulation models
• we can only simplify sites so much...some will
remain big, with a complex multi-level
architecture

149. what would happen
if we offloaded
MENU
Apple Gives Share-
top-level navigation
holders More Input;
Will Facebook Get the
Message?
to the browser?
By Tim Carmody
February 24, 2012 | 4:26 pm
a content first
At its annual shareholders meet-
ing on Thursday, Apple’s man- approach to top-level
agement bowed to pressure
from key investors and agreed to
allow shareholders to elect
navigation...
board directors by a simple ma-
jority vote.
Now any new or current director
standing for election who fails to
receive support from a majority
of shareholders must resign his

150. wired.co.uk’s
56 item top level navigation
which admittedly could use a trim

151. MENU MENU Apple Gives Share- Apple Gives Sh
holders More Input; holders More
Apple Gives Share- Apple Gives Share- Will Facebook Get the Will Facebook
holders More Input; holders More Input; Message? Message?
Will Facebook Get the
Home Will Facebook Get the Home By Tim Carmody Home By Tim Carmody
Message? Message? February 24, 2012 | 4:26 pm February 24, 2012 | 4:26
By Tim Carmody
News By Tim Carmody
News News
At its annual shareholders At its annual shareho
February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pm
Reviews Reviews meeting on Thursday, Reviews meeting on Thursda
At its annual shareholders meet- At its annual shareholders meet- Apple’s management bowed Apple’s managemen
ing on Thursday, Apple’s man- ing on Thursday, Apple’s man- to pressure from key inves- Phones to pressure from key
Photos Photos Mobile
agement bowed to pressure agement bowed to pressure tors and agreed to allow tors and agreed to a
from key investors and agreedVideo
to from key investors and agreed to shareholders to elect Tablets
board shareholders to elec
Video directors by a simple major- directors by a simple
allow shareholders to elect allow shareholders to elect
board directors by a simple ma- board directors by a simple ma- ity vote. Gadgets ity vote.
Magazine Magazine
jority vote. jority vote.
Now any new or currentCameras & Camcorders Now any new or cu
Podcast
Now any new or current director Now any new or current director
Podcast director standing for election director standing fo
standing for election who fails to standing for election who fails to Laptops
who fails to receive support who fails to receive
receive support from a majority
Topics receive support from a majority
Topics from a majority of share- from a majority of sh
of shareholders must resign his of shareholders must resign his holders must resign his and Home
TV holders must resign

152. huh...?
what?
I’ve seen
that look...
http://www.flickr.com/photos/eldret_99/3311540632

153. attribute notifies browser that offloading to
native behaviour is permitted
attribute trigger is ignored on older browsers
MENU
Apple Gives Share-
holders More Input;
Will Facebook Get the <nav is=”native”>
Message?
By Tim Carmody
<ul>
February 24, 2012 | 4:26 pm
<li>Home</li>
At its annual shareholders meet- ‘normal’ standards
ing on Thursday, Apple’s man-
agement bowed to pressure
<li>News</li> compliant markup
from key investors and agreed to
allow shareholders to elect
<li>Reviews</li>
board directors by a simple ma-
jority vote. </ul>
Now any new or current director </nav>
standing for election who fails to
receive support from a majority
of shareholders must resign his

154. fully styleable
HTML trigger
MENU MENU
Apple Gives Share- Apple Gives Share-
holders More Input; holders More Input;
Will Facebook Get the
Message?
Home Will Facebook Get the
Message? • Native performance and
News
By Tim Carmody
February 24, 2012 | 4:26 pm
By Tim Carmody
February 24, 2012 | 4:26 pm responsiveness (GPU acceleration etc.)
Reviews
At its annual shareholders meet-
ing on Thursday, Apple’s man-Photos
At its annual shareholders meet-
ing on Thursday, Apple’s man- • Device appropriate transition
agement bowed to pressure
from key investors and agreed to
Video
agement bowed to pressure
from key investors and agreed to (or not...entirely dependant on device
allow shareholders to elect allow shareholders to elect
board directors by a simple ma-
Magazine board directors by a simple ma- capabilities)
jority vote. jority vote.
Now any new or current director
Podcast Now any new or current director
• User gets the most appropriate
standing for election who fails to
Topics
receive support from a majority
standing for election who fails to
receive support from a majority
experience for their device.
of shareholders must resign his of shareholders must resign his

155. fully styleable (ideally) tied-in to native APIs
HTML trigger e.g. predictive text, localization...
MENU MENU Apple Gives Share-
holders More Input;
Apple Gives Share- Apple Gives Share- Will Facebook Get the
holders More Input; holders More Input; Message?
Will Facebook Get the
Message?
Home Will Facebook Get the
Message?
Home By Tim Carmody • Menu can (in theory)
February 24, 2012 | 4:26 pm
By Tim Carmody
News By Tim Carmody
News be as long or complex
At its annual shareholders
February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pm
Reviews Reviews meeting on Thursday,
At its annual shareholders meet- At its annual shareholders meet- as needed.
Apple’s management bowed
to pressure from key inves-
• Native platform assists
ing on Thursday, Apple’s man-Photos ing on Thursday, Apple’s man- Photos
agement bowed to pressure agement bowed to pressure tors and agreed to allow
from key investors and agreed to from key investors and agreed to shareholders to elect board
Video Video
allow shareholders to elect
board directors by a simple ma-
allow shareholders to elect
board directors by a simple ma- ity vote.
in management of drill
directors by a simple major-
Magazine Magazine
Now any new or down or progressive
jority vote. jority vote.
current
Podcast Podcast director standing for election
Now any new or current director
standing for election who fails to
Topics
Now any new or current director
standing for election who fails to
Topics
disclosure.
who fails to receive support
receive support from a majority receive support from a majority from a majority of share-
of shareholders must resign his of shareholders must resign his holders must resign his
device appropriate
native
native transition
performance
when scrolling

156. fully styleable basic component styling
(ideally) tied-in to native APIs
HTML trigger (e.g. logo, colour scheme,
e.g. predictive text, localization...
fonts) is enabled via CSS
MENU MENU Apple Gives Share- Apple Gives Sh
holders More Input; holders More I
Apple Gives Share- Apple Gives Share- Will Facebook Get the Will Facebook
holders More Input; holders More Input; Message? Message?
Will Facebook Get the
Home Will Facebook Get the Home By Tim Carmody Home By Tim Carmody
Message? Message? February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 p
By Tim Carmody
News By Tim Carmody
News News
At its annual shareholders At its annual shareho
February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pm
Reviews Reviews meeting on Thursday, Reviews meeting on Thursday
At its annual shareholders meet- At its annual shareholders meet- Apple’s management bowed Apple’s managemen
ing on Thursday, Apple’s man- ing on Thursday, Apple’s man- to pressure from key inves- Phones to pressure from key
Photos Photos Mobile
agement bowed to pressure agement bowed to pressure tors and agreed to allow tors and agreed to al
from key investors and agreed to from key investors and agreed to shareholders to elect Tablets
board shareholders to elect
Video Video directors by a simple major- directors by a simple
allow shareholders to elect allow shareholders to elect
board directors by a simple ma- board directors by a simple ma- ity vote. Gadgets ity vote.
Magazine Magazine
jority vote. jority vote.
Now any new or currentCameras & Camcorders Now any new or cur
Podcast
Now any new or current director Now any new or current director
Podcast director standing for election director standing for
standing for election who fails to standing for election who fails to Laptops
who fails to receive support who fails to receive s
Topics
receive support from a majority receive support from a majority
Topics from a majority of share- from a majority of sh
of shareholders must resign his of shareholders must resign his holders must resign his and Home
TV holders must resign h
device appropriate
native
native transition
performance
when scrolling

157. in theory...it wouldn’t matter what device you’re using...
Apple Gives Share- Apple Gives Shareholders More Input;
holders More Input;
Will Facebook Get the Home Facebook Get the Message?
Will
Home
Message?
Home By Tim Carmody News
News
Home February 24, 2012 | 4:26 pm By Tim Carmody February 24, 2012 | 4:26 pm
News
News At its annual shareholders Reviews
Reviews
Reviews meeting on Thursday, At its annual shareholders meeting on Thursday,
Reviews
Photos
Photos
Apple’s management bowed
to pressure from key inves-
tors and agreed to allow
Photos management bowed to pressure from key in-
Photos
Apple’s Home
vestors and agreed to allow shareholders to elect
Video shareholders to elect board
directors by a simple major-
Video
Video
board directors by a simple majority vote. News
ity vote. Magazine
Magazine
Magazine
Podcast
Now any new or current
Podcast
Podcast new or current director standing for election
Reviews
Now any
Photos
director standing for election
who fails to receive support
Topics from a majority of share- Topics fails to receive support from a majority of share-
who
Topics
holders must resign his
holders must resign his his or her position. At next year
MENU

158. it would also fit in nicely
with the basic premise
around this
CSS Pagination Template Module

159. and maybe even this
Web Components Explained

160. idea #4
Problem: Our media formats aren’t
adaptive enough
• An image or media item that is suitable for one
context may not be for another.
• Many parameters will determine which media item
you serve. These are the ones we know of TODAY.
• screen and/or viewport size
• pixel density
• support-level for the media format
• available bandwidth
• user choice why do we keep ignoring this bit?

161. the current (early) proposal
media query enables more
proposed new picture element control over criteria
<picture>
<source src=”high-res.jpg” media=”min-width: 800px” />
<source src=”mobile.jpg” />
<!-- Fallback media format --> parameters could eventually be
extended for added context e.g.
<img src=”mobile.jpg” /> connection speed
</picture>
fallback image when
unsupported
modelled after the video element
<video>
<source src="high-res.webm" media="min-width:800px" />
<source src="low-res.webm" />
<img src="poster.jpg" /> media query support
here is still poor
</video>
Source: Responsive images- how they almost worked and what we need

162. will a new (much smarter) element be enough
given all the diversity that is on the way?

163. why not a new, and natively adaptive
image media container format?
Hat tip to Christopher Schmitt

164. example ‘wired media’ container format
Apple circa 2000
with built in
progress meter
poster • Built-in content negotiation.
image • Default negotiation based on
Hi-rez connection speed but could also be
50MB Mid-rez
20MB
triggered by the developer (using the
wired media API).
Low-rez A • Optional, out-of-the-box native
1MB component and behaviour to prompt
Low-rez B
1MB user for connection speed
highly compressed e.g. 28.8, 56, ISDN (how retro!)
initial download
package contains 2-20kb
references to content
(of almost any file
format) on server/CDN
QuickTime reference movies
please don’t be distracted
by the word movie
Sorry...no links - this is all out of @bryanrieger’s head from back in 2000

165. Combine a smarter image format with some upcoming CSS specification drafts
(and experiments) and we can begin to imagine truly responsive media combining
content negotiation with sophisticated client-side adaptation
an image with grayscale pixel
shader applied
a list element (e.g. ul, li)
wrapped in a vertex shader
CSS Exclusions & Shapes CSS Shaders image compositing
Adobe, Microsoft: Editor’s Draft 2 Adobe, Apple, Opera: Editor’s Draft with CSS blend modes
Adobe - early concept
Adobe web platform blog and CSS bleeding edge features

166. these are of course just ideas....

167. the reality is, we have
no idea what will
happen next...
(when I was a kid, they kept telling us we
would have jetpacks by now...)
http://www.flickr.com/photos/jurvetson/302869583

168. “Technological revolutions have
several interesting properties.
First, we tend to overestimate
the immediate impact and
underestimate the long-term
impact.
Second, we tend to place the
emphasis on the technologies
themselves, when it is really the
social impact and cultural change
that will be most dramatic.”
– Don Norman, Drop everything you’re doing
http://www.flickr.com/photos/jordanfischer/61429449

169. “ The future is a process, not a destination.
- Bruce Sterling
here’s to the next
8000 days!
http://www.flickr.com/photos/psd/3149878971

170. @yiibu
s
contact u
at
hello@yiibu.com thank you
many thanks to the
amazing photographers
on
http://creativecommons.org/licenses/by/2.0
http://www.slideshare.net/yiibu/reset-the-web
http://www.flickr.com/photos/tinou/453593446