Midway through a project, a client of ours recently said "One thing I'm learning is that it's ok to give up on the desktop experience once it stops making sense". This wasn't an isolated incident. In fact, i'm beginning to think desktop web sites stopped making sense quite a while ago. We've just had nothing viable to replace them with. Mobile apps have given us a glimpse, but I think they're merely a glimpse into something bigger.
Mobile isn't merely a new stage in the evolution of the web, it's not even merely a new context, it's the very early stages of an entirely new system. A system that has already started to shape our environment, affect the way we live, how we choose to connect with others, and how we're able to spend our time. A system that is also slowly unravelling our assumptions and causing us to question the very reason we build web sites, why people visit them, and where the true value of the web actually lies.
Presented by Stephanie Rieger at Breaking Development in Orlando, Florida on April 17, 2012.
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
Reset the Web
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
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
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...
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...
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
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/
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
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
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
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
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
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
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
119. browser productivity features
combined search/URL bar (and/ favourites
favicon signpost or choice of search engine)
security signpost tabs RSS extensions
back buon
(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
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.)
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
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...
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.
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
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
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
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