Reset the Web

reset
the web
a brief stroll into our past and our future

http://www.ﬂickr.com/photos/karen_roe

the web is less than
8000 days old...

Hat tip to Kevin Kelly - The next 5000 days of the web http://www.ﬂickr.com/photos/psd/3149878971

it reaches
1/3* of
people
on our planet

*2012 estimates put the population at about 7 billion inhabitants... http://www.ﬂickr.com/photos/vitroids/2753929716

it powers business,
entertainment,
learning...

http://www.ﬂickr.com/photos/viirok/2498157861

and so
and so much more...

http://www.icanhascheezburger.com/

but what is the web
for?

http://www.ﬂickr.com/photos/34233222@N05/4292987392

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

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

“ 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

“
...for all diﬀerent species of things on the planet
...birds, cats, dogs goats...

A B

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

“...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…

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...

“ man however didn’t do so well...

342. Bob… not his ﬁnest moment…

?

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

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

“ and man with a bicycle won...

1. Bob on a bicycle one of his better days…

“
...twice as good as the condor,
all the way oﬀ the list..

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

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 ﬁrst personal computers)

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

...just as the bicycle ampliﬁed our ability
to use our muscles, tendons and brains
to transport our bodies...

...just as the tools and technologies
of the industrial revolution were
“an ampliﬁcation of human sweat”...

...the computer ampliﬁed our human abilities
of memory, problem-solving, calculation,
projection, analysis, and so much more...

http://nicelifeapparel.wordpress.com/tag/crazy-math-problem/

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

“
There is something very
special and historically
diﬀerent that takes place,
when you have one
computer, for one person,
rather than one for many.
- Steve Jobs

http://www.ﬂickr.com/photos/aidanmorgan/3709199304/

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

the Internet’s ability to amplify knowledge
began as a purely academic and scientiﬁc tool...

http://www.ﬂickr.com/photos/epitti/2371715992

...but its true potential was only revealed when
it became a ubiquitously available tool...

http://www.ﬂickr.com/photos/olpc/2929782994

“
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.ﬂickr.com/photos/goincase/4647893507

open and universally accessible
...when we connected a browser to the Internet
we couldn’t have guessed what it would become...

http://www.ﬂickr.com/photos/tanaka/3212368979

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

but this is not
a smartphone...

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

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

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

“
...hold on...let me
look that up...
I just happen to
have the sum of
human knowledge
in my pocket...
- @fj

http://www.ﬂickr.com/photos/w00kie/2752309431

“
...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.ﬂickr.com/photos/jonhurd/2367208101

not too shabby for
8000 days...

http://www.ﬂickr.com/photos/psd/3149878971

But how did we really get here?

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

...and talk a bit
about plumbing.

Part 2: plumbing

http://www.ﬂickr.com/photos/nnova/2923859643

all technological revolutions

require a level of plumbing
or if you prefer...infrastructure

http://www.ﬂickr.com/photos/wheatﬁelds/2110680492

plumbing provides

a common framework

or scaﬀold on which

to innovate

Source: ToBeDetermined.org

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

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

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

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

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


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).

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


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

product innovation
900

800
Microsoft Palm
Windows first iPad
Pilot
700 announced.

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


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/

during this time
lack of infrastructure may

cause some to

fall behind...

...or sometimes

leap ahead

http://www.ﬂickr.com/photos/kiwanja/3169409467/

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

was based on

mental models

of a very diﬀerent time

http://www.ﬂickr.com/photos/ona1a/4521406829/

...models that may soon no longer apply

2000
Internet Users (MM) Estimated

1500

the inﬂection 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)

Part 3: welcome to the future

http://www.ﬂickr.com/photos/whiteafrican/2938685296

a short stroll into the future...

contexts will everything just in time content will
be varied and will be will replace (need to) ﬂow
unpredictable connected just in case like water

today’s digital

and connected things

may feel incredibly diverse...

http://www.ﬂickr.com/photos/_dchris/4652995362

...but they are still
deeply rooted to our past

http://www.ﬂickr.com/photos/terry/5388630668

a small selection of near future devices

A random internet connected watch. More connected wearable devices are on the way.

tiny

personal

constrained

http://www.ﬂickr.com/photos/scobleizer/5263223798

large stationary

public short use

(sweaty) touch

Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).

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)

The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser.

small touch, voice

ﬁxed (but not stationary)

bandwidth constrained

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

“ ...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-ﬁ,
Android, Ubuntu, with
virtualization client for
Win/Lin/Mac

many unknown unknowns

http://www.fxitech.com/products/

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.

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)

ﬂexible constrained


source: Green autoblog

“
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


Google Glass

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


http://www.mygoldeni.com/

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

old
thing
(or media,
or tool)

+
connectivity

software
+
+
user interface

smart
=
thing

old thing
(just a bit smarter)

more often than not...
the ‘smart’-ness

has been bolted on

http://www.ﬂickr.com/photos/mujitra/7053687599

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

Moore’s Law is
close to 50 years old

Source: Intel

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

it now costs almost
nothing to make
something ‘smart’
or connected...

http://www.ﬂickr.com/photos/slgc/6286652858

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

it costs

30 cents (£0.20)


...and measures

2 mm (0.07”)


yesterday: multiple chips

today: one chip that does
the work of three

Source: ThingM

some chips are optimized for
a speciﬁc unit of functionality
my job is to
my job is to
connect to
provide GPS
mobile phone
coordinates
networks

Source: ThingM

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
conﬁscated. #bdconf
“The Tweeting GeoLocation
aware Toaster”

my job is to
connect to the
Internet

“ object oriented hardware...
...functionality abstracted into silicon.
- Mike Kuniavsky, ThingM

http://www.ﬂickr.com/photos/negativz/41549347 Source: ThingM

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

“ ...embedded in
everything
will be a sliver of webness
- Kevin Kelly, founding editor Wired

Cute circuit - wearable technology

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

mobile is dramatically
shifting web behaviour

we are accessing

the web at any time

and any place...

but current behaviour
is still quite implicit

http://www.ﬂickr.com/photos/intelfreepress/5922668169

yesterday today

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

....and experiences are built accordingly

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

today’s just in case web + apps
(now with added experience)

“
Our apps oﬀer 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

...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.ﬂickr.com/photos/zenilorac/698514624

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

“
...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.ﬂickr.com/photos/keepwaddling1/3048726936/

does this mean
web sites will
go away?

OMG... ”
http://www.ﬂickr.com/photos/richardmoross/1413692087

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

the GlowCap service

Your doctor or designated Your pharmacy
family member receives is alerted when reﬁlls
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

“ 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.ﬂickr.com/photos/armaggeusa/3176297283

responsive design is really just the beginning...

once we can envision this...

contexts will
be varied and
unpredictable

everything just in time
will be will replace
connected just in case

this no longer feels
that strange...

“Get your content ready to go anywhere
because it’s going to go everywhere.”
- Brad Frost

http://www.ﬂickr.com/photos/sackerman519/5045015997/

but if content will be like water...
what kind of plumbing will we need?

http://www.ﬂickr.com/photos/evdaimon/165589586

Part 4: re-imagining plumbing

http://www.ﬂickr.com/photos/jonasb/2751113526

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

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

some of it was
necessary structural
scaﬀolding

http://www.ﬂickr.com/photos/dandeluca/2720139047

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

some focussed on user productivity...

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)

access keys navigation
ﬁrst introduced in 1999 (and not speciﬁcally for mobile)

1. Home
2. Products
3. Articles
Contact us

Products.html

Home.html Articles.html

others were a response to change...

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>

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.)

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

proxy web browsers
polyﬁll for many of our existing problems

OperaMini UCWeb Nokia Browser Amazon Silk - 2011
2005 2005 for S40 - 2011

on-the-ﬂy 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

recent speciﬁcations
continue to bake-in common functionality...

...oﬄoading aspects of behaviour
and rendering to the browser/platform

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

placeholder
validation

HTML5 notiﬁcations API
out of the box components and behaviours

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

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

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

a menu and header in a
box with rounded corners
before CSS3 & HTML5

look ma...no divs (and semantics!) ...and after

form placeholders before HTML5
lots of potential issues
• cross browser support for entire
behaviour (e.g. populate the ﬁeld
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...

“ ...everything you add to the page is something you’re
taking away from the latency proﬁle 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

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

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

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

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)

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.

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

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

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

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

“ Mobile is the needle,
social is the thread...
- Pew Internet &
American Life Project

which means they
may just be...plumbing

http://www.ﬂickr.com/photos/preetamrai/5454799225

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)

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

what would happen
if we oﬄoaded
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 ﬁrst
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

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

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?
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
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

huh...?
what?

I’ve seen
that look...

http://www.ﬂickr.com/photos/eldret_99/3311540632

attribute notiﬁes browser that oﬄoading 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-
<li>News</li> compliant markup
<li>Reviews</li>
jority vote. </ul>
Now any new or current director </nav>
of shareholders must resign his

fully styleable
HTML trigger

MENU MENU

Apple Gives Share- Apple Gives Share-
holders More Input; holders More Input;
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
ing on Thursday, Apple’s man-Photos
ing on Thursday, Apple’s man- • Device appropriate transition
Video
from key investors and agreed to (or not...entirely dependant on device
Magazine board directors by a simple ma- capabilities)

Podcast Now any new or current director
• User gets the most appropriate
Topics
experience for their device.
of shareholders must resign his of shareholders must resign his

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?
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
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
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
current
Podcast Podcast director standing for election
Topics
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

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?
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
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
board directors by a simple ma- board directors by a simple ma- ity vote. Gadgets ity vote.
Magazine Magazine
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

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

it would also ﬁt in nicely
with the basic premise
around this

CSS Pagination Template Module

and maybe even this

Web Components Explained

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?

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” />
 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

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

why not a new, and natively adaptive
image media container format?

Hat tip to Christopher Schmitt

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 ﬁle
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

Combine a smarter image format with some upcoming CSS speciﬁcation 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

these are of course just ideas....

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.ﬂickr.com/photos/jurvetson/302869583

“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.ﬂickr.com/photos/jordanﬁscher/61429449

“ The future is a process, not a destination.
- Bruce Sterling

here’s to the next
8000 days!

http://www.ﬂickr.com/photos/psd/3149878971

@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.ﬂickr.com/photos/tinou/453593446

Reset the Web

More Related Content

What's hot

Similar to Reset the Web

More from yiibu

Recently uploaded

Reset the Web