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 ...
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.
Vu LamGood presentation! Could you give me the solution for title backgroud color and note sentence?4 months ago
Are you sure you want to
Vu LamNice fonts. Hi Yiibus, Could you tell me the name of all fonts which are used in slide 'Reset the Web'? I am very interesting in these fonts. Thanks and regards,4 months ago
reset the web a brief stroll into our past and our futurehttp://www.flickr.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.flickr.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.flickr.com/photos/vitroids/2753929716
it powers business, entertainment, learning... http://www.flickr.com/photos/viirok/2498157861
and soand so much more... http://www.icanhascheezburger.com/
but what is the web for? http://www.flickr.com/photos/34233222@N05/4292987392
probably not surprisingly...I found the beginning of ananswer through this man...
a few years before the Macintosh… ...in 1980 Steve Jobs recounted the following story...
“ in the early 70s, Scientific Americandid 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 different species of things on the planet ...birds, cats, dogs goats...
A B “ ...they measured, how much energydoes it take for a goat to get from here to there...
“...they then ranked them, and published a list1.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 most8. American Saddlebred -298. Banana Slug faster than a rock…3. Cheetah currently missing207. Humming Bird got tired watching it.- Bumble Bee couldn’t find one…183. Elephant forgot342. Bob… not his finest moment…
1. California Condor a lazy glider…“ of all the animals, the condor won. It tookthe least amount of energy to get from here to there...
“ man however didn’t do so well...342. Bob… not his finest 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 off 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 first 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 amplified our abilityto use our muscles, tendons and brains to transport our bodies...
...just as the tools and technologies of the industrial revolution were“an amplification of human sweat”...
...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/
Steve Jobs also realizedthat the computer was just the beginning...
“There is something veryspecial and historicallydifferent that takes place,when you have onecomputer, for one person,rather than one for many. - Steve Jobs http://www.flickr.com/photos/aidanmorgan/3709199304/
(as it happens) this statement is also true of the Internet...
the Internet’s ability to amplify knowledgebegan as a purely academic and scientific tool... http://www.flickr.com/photos/epitti/2371715992
...but its true potential was only revealed whenit became a ubiquitously available tool... http://www.flickr.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 Kellyhttp://www.flickr.com/photos/goincase/4647893507
open and universally accessible ...when we connected a browser to the Internetwe couldn’t have guessed what it would become... http://www.flickr.com/photos/tanaka/3212368979
...when we connected the Internetto a glowing rectangle, we thought we were creating a ‘smart’ phone...
but this is nota smartphone...
it’s"A device to amplify curiosity"- John Seely Brown
...and while this doesn’t really explainwhat 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 melook that up...I just happen tohave the sum ofhuman knowledgein my pocket... - @fj http://www.flickr.com/photos/w00kie/2752309431
“ ...the magic is in my palms, god knows what I would do without this.... Omar, 19, Hafeezpet, IndiaSource: Anthropology, development and ICTs http://www.flickr.com/photos/jonhurd/2367208101
not too shabby for 8000 days... http://www.flickr.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.flickr.com/photos/nnova/2923859643
all technological revolutionsrequire a level of plumbing or if you prefer...infrastructure http://www.flickr.com/photos/wheatfields/2110680492
plumbing providesa common frameworkor scaffold on whichto innovateSource: ToBeDetermined.org
the rise of computers, the Internet,the web and mobile have been intricately linked...
...to the invention, implementationand market adoption of this type of plumbing...
hardware 900 Microprocessor integrates CPU function onto a single chip. 800 Compaq, DEC,IBM, Intel, Microsoft, NEC "Moores 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 12chart: 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 Internetmillions 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 12chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
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 12chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
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.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 12chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
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 Microsofthttp://www.flickr.com/photos/kiwanja/3169409467/
during this timelack of infrastructure maycause some tofall behind...
...or sometimes leap aheadhttp://www.flickr.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 different timehttp://www.flickr.com/photos/ona1a/4521406829/
...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 usersSource: Morgan Stanley Associates Internet Trends 2010 (PDF)
Part 3: welcome to the future http://www.flickr.com/photos/whiteafrican/2938685296
a short stroll into the future... contexts will everything just in time content willbe varied and will be will replace (need to) flowunpredictable connected just in case like water
...but they are still deeply rooted to our pasthttp://www.flickr.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 constrainedhttp://www.flickr.com/photos/scobleizer/5263223798
large stationary public short use (sweaty) touchInternet 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 fixed (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 constrainedsource: 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-fi, Android, Ubuntu, with virtualization client for Win/Lin/Mac many unknown unknownshttp://www.fxitech.com/products/
Bluetooth The Magic Cube is an ultra-portable, productivity full-sized virtual computer keyboard helper-appliancewith 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) flexible constrained many unknown unknownssource: Green autoblog
“We think technologyshould work for you—to be there when youneed it and get out ofyour way when you don’t. tiny voice, gesture? personal constrained many unknown unknowns 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 many unknown unknownshttp://www.mygoldeni.com/
these contexts may be diverse,but they still kinda ‘fit’ our mental modelsfor 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 onhttp://www.flickr.com/photos/mujitra/7053687599
this likely won’t be the pattern going forward, here’s why....
a short stroll into the future... contexts will everything just in time content willbe varied and will be will replace (need to) flowunpredictable connected just in case like water
Moore’s Law is close to 50 years oldSource: Intel
we’ve come a very long way... 1982 2007 1st gen.Osborne Executive iPhone1/100th MHz CPU1/1000th the memory100x the weight10x the cost Source and photo: Wikipedia
it now costs almost nothing to make something ‘smart’ or connected...http://www.flickr.com/photos/slgc/6286652858
the new ARM Cortex-M0+ uses 1/3 of the energy of an 8 or 16-bit processorSource: New ARM chips herald Internet of things
it costs 30 cents (£0.20)Source: New ARM chips herald Internet of things
...and measures 2 mm (0.07”)Source: New ARM chips herald Internet of things
yesterday: multiple chips today: one chip that does the work of threeSource: ThingM
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 networksSource: 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 confiscated. #bdconf “The Tweeting GeoLocation aware Toaster” my job is toconnect to the Internet
“ object oriented hardware... ...functionality abstracted into silicon. - Mike Kuniavsky, ThingMhttp://www.flickr.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 WiredCute circuit - wearable technology
the more we peer into the future,the more invisible this ‘web-ness’ becomes
a short stroll into the future... contexts will everything just in time content willbe varied and will be will replace (need to) flowunpredictable connected just in case like water
mobile is dramaticallyshifting web behaviour
we are accessingthe web at any time and any place...
but current behaviour is still quite implicit http://www.flickr.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 socialtools corporate PR jobs investor news
today’s just in case web + apps (now with added experience)“Our apps offer the best experience...(so please download, install and keepthem updated, just in case that timecomes...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.flickr.com/photos/zenilorac/698514624
tomorrows just in time web (because everything is connected)I’d like to use whatever device I haveon-hand to learn more about this thing/tool/service/place (right here and rightnow)...please show me what I can do. support information tools Like+ smart thing
“...a world where our devices loadapplications opportunisticallyas we need them, in real time.The technological model for this...is web pages. But these will be webpages with advanced functionality thatcan be accessed seamlessly fromremote or local networks—and evenfrom other mobile devices.- Scott Jenson on Forbes: Apps are over http://www.flickr.com/photos/keepwaddling1/3048726936/
does this mean web sites will go away?OMG... ” http://www.flickr.com/photos/richardmoross/1413692087
no, probably not...
...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 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
“ 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
a short stroll into the future... contexts will everything just in time content willbe varied and will be will replace (need to) flowunpredictable connected just in case like water
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 feelsthat strange...
“Get your content ready to go anywherebecause it’s going to go everywhere.”- Brad Frost http://www.flickr.com/photos/sackerman519/5045015997/
but if content will be like water...what kind of plumbing will we need? http://www.flickr.com/photos/evdaimon/165589586
Part 4: re-imagining plumbinghttp://www.flickr.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 infrastructurewe’ve already built into the web as a platform
some of it wasnecessary structuralscaffolding http://www.flickr.com/photos/dandeluca/2720139047
form elements - v.1HTML 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 buon(added in 1993!) find in browser shortcuts & bookmarks status bar zoom (Opera version shown)
access keys navigationfirst introduced in 1999 (and not specifically 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 keyMiniMap viewport preview.preview rectangle. I really miss thisOnce focussed, feature! Muchclicking the navipad clearer and didn’twould zoom the force you to reloadlayout. pages you didn’t want to see again :-((Very similar toApple’s double-tapto 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 polyfill for many of our existing problemsOperaMini UCWeb Nokia Browser Amazon Silk - 2011 2005 2005 for S40 - 2011
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 hereDolphin browser for Android Maxthon browser for Android
recent specificationscontinue to bake-in common functionality...
...offloading aspects of behaviourand rendering to the browser/platform
form elements - v.2cleaner markup thanks to out of the box functionality placeholder validation
HTML5 notifications APIout 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 experienceend 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 & HTML5look ma...no divs (and semantics!) ...and after
form placeholders before HTML5lots 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...
“ ...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 RussellAlex 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 navigationshortcuts • 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 introducea 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...plumbinghttp://www.flickr.com/photos/preetamrai/5454799225
user configurable bake-in a social sharing layeruser configurable: bubbles upturn it off or fill it glanceablewith 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 offloaded MENUApple Gives Share- top-level navigationholders More Input;Will Facebook Get theMessage? to the browser?By Tim CarmodyFebruary 24, 2012 | 4:26 pm a content firstAt its annual shareholders meet-ing on Thursday, Apple’s man- approach to top-levelagement bowed to pressurefrom key investors and agreed toallow shareholders to elect navigation...board directors by a simple ma-jority vote.Now any new or current directorstanding for election who fails toreceive support from a majorityof shareholders must resign his
wired.co.uk’s56 item top level navigation which admittedly could use a trim
MENU MENU Apple Gives Share- Apple Gives Sh holders More Input; holders MoreApple Gives Share- Apple Gives Share- Will Facebook Get the Will Facebookholders More Input; holders More Input; Message? Message?Will Facebook Get the Home Will Facebook Get the Home By Tim Carmody Home By Tim CarmodyMessage? Message? February 24, 2012 | 4:26 pm February 24, 2012 | 4:26By Tim Carmody News By Tim Carmody News News At its annual shareholders At its annual sharehoFebruary 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pm Reviews Reviews meeting on Thursday, Reviews meeting on ThursdaAt its annual shareholders meet- At its annual shareholders meet- Apple’s management bowed Apple’s managemening on Thursday, Apple’s man- ing on Thursday, Apple’s man- to pressure from key inves- Phones to pressure from key Photos Photos Mobileagement bowed to pressure agement bowed to pressure tors and agreed to allow tors and agreed to afrom 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 simpleallow shareholders to elect allow shareholders to electboard directors by a simple ma- board directors by a simple ma- ity vote. Gadgets ity vote. Magazine Magazinejority vote. jority vote. Now any new or currentCameras & Camcorders Now any new or cu PodcastNow any new or current director Now any new or current director Podcast director standing for election director standing fostanding for election who fails to standing for election who fails to Laptops who fails to receive support who fails to receivereceive support from a majority Topics receive support from a majority Topics from a majority of share- from a majority of shof 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.flickr.com/photos/eldret_99/3311540632
attribute notifies browser that offloading to native behaviour is permitted attribute trigger is ignored on older browsers MENUApple 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’ standardsing on Thursday, Apple’s man-agement bowed to pressure <li>News</li> compliant markupfrom key investors and agreed toallow 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 toreceive support from a majorityof shareholders must resign his
fully styleable HTML trigger MENU MENUApple Gives Share- Apple Gives Share-holders More Input; holders More Input;Will Facebook Get theMessage? Home Will Facebook Get the Message? • Native performance and NewsBy Tim CarmodyFebruary 24, 2012 | 4:26 pm By Tim Carmody February 24, 2012 | 4:26 pm responsiveness (GPU acceleration etc.) ReviewsAt its annual shareholders meet-ing on Thursday, Apple’s man-Photos At its annual shareholders meet- ing on Thursday, Apple’s man- • Device appropriate transitionagement bowed to pressurefrom key investors and agreed to Video agement bowed to pressure from key investors and agreed to (or not...entirely dependant on deviceallow shareholders to elect allow shareholders to electboard 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 appropriatestanding for election who fails to Topicsreceive 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
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 theholders More Input; holders More Input; Message?Will Facebook Get theMessage? Home Will Facebook Get the Message? Home By Tim Carmody • Menu can (in theory) February 24, 2012 | 4:26 pmBy Tim Carmody News By Tim Carmody News be as long or complex At its annual shareholdersFebruary 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 assistsing on Thursday, Apple’s man-Photos ing on Thursday, Apple’s man- Photosagement bowed to pressure agement bowed to pressure tors and agreed to allowfrom key investors and agreed to from key investors and agreed to shareholders to elect board Video Videoallow shareholders to electboard 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 progressivejority vote. jority vote. current Podcast Podcast director standing for electionNow any new or current directorstanding for election who fails to Topics Now any new or current director standing for election who fails to Topics disclosure. who fails to receive supportreceive 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 IApple Gives Share- Apple Gives Share- Will Facebook Get the Will Facebookholders More Input; holders More Input; Message? Message?Will Facebook Get the Home Will Facebook Get the Home By Tim Carmody Home By Tim CarmodyMessage? Message? February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pBy Tim Carmody News By Tim Carmody News News At its annual shareholders At its annual sharehoFebruary 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pm Reviews Reviews meeting on Thursday, Reviews meeting on ThursdayAt its annual shareholders meet- At its annual shareholders meet- Apple’s management bowed Apple’s managemening on Thursday, Apple’s man- ing on Thursday, Apple’s man- to pressure from key inves- Phones to pressure from key Photos Photos Mobileagement bowed to pressure agement bowed to pressure tors and agreed to allow tors and agreed to alfrom 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 simpleallow shareholders to elect allow shareholders to electboard directors by a simple ma- board directors by a simple ma- ity vote. Gadgets ity vote. Magazine Magazinejority vote. jority vote. Now any new or currentCameras & Camcorders Now any new or cur PodcastNow any new or current director Now any new or current director Podcast director standing for election director standing forstanding for election who fails to standing for election who fails to Laptops who fails to receive support who fails to receive s Topicsreceive support from a majority receive support from a majority Topics from a majority of share- from a majority of shof 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 NewsHome February 24, 2012 | 4:26 pm By Tim Carmody February 24, 2012 | 4:26 pm NewsNews At its annual shareholders Reviews Reviews Reviews meeting on Thursday, At its annual shareholders meeting on Thursday,ReviewsPhotos 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 fit in nicely with the basic premise around thisCSS Pagination Template Module
and maybe even thisWeb 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” /> <!-- 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
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 file format) on server/CDN QuickTime reference movies please don’t be distracted by the word movieSorry...no links - this is all out of @bryanrieger’s head from back in 2000
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 conceptAdobe 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.flickr.com/photos/jurvetson/302869583
“Technological revolutions haveseveral interesting properties.First, we tend to overestimatethe immediate impact andunderestimate the long-termimpact.Second, we tend to place theemphasis on the technologiesthemselves, when it is really thesocial impact and cultural changethat will be most dramatic.”– Don Norman, Drop everything you’re doing http://www.flickr.com/photos/jordanfischer/61429449
“ The future is a process, not a destination. - Bruce Sterling here’s to the next 8000 days!http://www.flickr.com/photos/psd/3149878971
@yiibu scontact uat 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
mshchc
1–10 of 16 previous next Post a comment
1–10 of 16 previous next