O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Beyond progressive-enhancement

78.429 visualizações

Publicada em

The time is 2020. The inflection point has long passed. Most web traffic is now coming from some manner of portable device. And if Google Chairman Eric Schmidt (and many others’) predictions have come true, we will have truly reached time where “…[technology] will just be seamless. It will just be there. The web will be everything, and it will be nothing. It will be like electricity.”

This presentation challenges us to think about the role of the web going forward. What steps must we take to build a world where interactions with the web are truly “seamless”? What would a seamless web even look like? How can we ensure the web remains strong amidst all the new technologies that are on the way.

Presented on September 13 in London at Generate.

Publicada em: Tecnologia, Design
  • Writing a good research paper isn't easy and it's the fruit of hard work. For help you can check writing expert. Check out, please ⇒ www.HelpWriting.net ⇐ I think they are the best
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.HelpWriting.net ⇐
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • I pasted a website that might be helpful to you: ⇒ www.HelpWriting.net ⇐ Good luck!
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Writing good research paper is quite easy and very difficult simultaneously. It depends on the individual skill set also. You can get help from research paper writing. Check out, please ⇒ www.HelpWriting.net ⇐
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Best Stuffs available worldwide: https://saidbenrida.blogspot.com/ https://saidbenrida-best.blogspot.com/ https://saidbenrida-opp.blogspot.com/ https://saidbenrida-recommended.blogspot.com/ https://saidbenrida-trusted.blogspot.com/ https://trusted-saidbenrida.blogspot.com/ http://www.saidbenrida.ws/ https://ewallet-worldwide.tumblr.com/ https://concsaid.blogspot.com/ https://copsaid.blogspot.com/ https://domasaid.blogspot.com/ https://hostsaid.blogspot.com/ https://paysaid.blogspot.com/ https://wsmoney.blogspot.com/
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Beyond progressive-enhancement

  1. Photo courtesy of @MAMK enhancement progressive beyond
  2. http://www.flickr.com/photos/shoutsfromtheabyss/5313714706 It will be like electricity”. “…[technology] will just be seamless. It will just be there. The web will be everything and it will be nothing. by 2020... – Eric Schmidt, Google
  3. it can be hard to visualise what this will truly mean... http://www.flickr.com/photos/mwichary/3189145257
  4. http://www.flickr.com/photos/accidentdesigns/6137301255 with computation + connectivity… with each day that goes by we find new ways to augment everyday things
  5. the results can be both magical and disturbing http://www.flickr.com/photos/accidentdesigns/6137308437
  6. self driving cars that collect gigabytes of data per second… Twitter: Bill Gross
  7. Almax - EyeSee Mannequin mannequins that watch, listen and analyse who you are
  8. to “build” a better suit… mobile stores with 3D scanners Kickstarter: Tailor truck
  9. recharge electric buses… smart roads that wirelessly KAIST OLEV project: YouTube
  10. Proteus Digital Health - Digital health feedback system stomach acid powered sensors that communicate with applications on your smartphone…
  11. senses how you eat… a fork that Hapi Fork by Hapi Labs
  12. Proteus Digital Health - Digital health feedback system Apple Gives Share- holders More Input; Will Facebook Get the Message? At its annual shareholders meet- ing on Thursday, Apple’s man- agement bowed to pressure from key investors and agreed to allow shareholders to elect 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 By Tim Carmody February 24, 2012 | 4:26 pm MENU and smart toilets that help you track what comes out…
  13. microchip + sensors data out A real-time web (or app) based progress report is available. The fork gathers data as you eat. data out data outservice data out Fork vibrates if you’re eating too fast they are systems… these aren’t just smart connected objects, Hapi Fork by Hapi Labs
  14. http://www.flickr.com/photos/gcbb/2502506212 of these systems… it’s not always obvious where the web fits in, but it has an important role to play in each
  15. http://www.flickr.com/photos/tristanf/2234332037 the pathways from today’s web to apps and things are anything but… but while the future may be seamless,
  16. http://www.flickr.com/photos/doglotion/4131810103 Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization inAppBrowser Media Notification Storage to communicate with hardware… our current approach to building the future web is to develop APIs that enable the web
  17. http://www.flickr.com/photos/davidchief/6441607321 …the theory being that only a more capable and powerful web can compete with native apps...
  18. http://www.flickr.com/photos/mozillaeu/9191443975 or maybe replace them altogether…
  19. http://www.flickr.com/photos/orijinal/8133373975 I’m not suggesting this is the wrong path, but I think we may be missing part of the story…
  20. http://www.flickr.com/photos/micora/5105225792 (being “born of tech” doesn’t exempt us from these growing pains) …we’re far from the only industry that’s been challenged by the power of new technologies…
  21. http://www.flickr.com/photos/bfishadow/3637298219 be the best path… it’s natural to want to compete with them, but history suggests this may not
  22. http://www.flickr.com/photos/sohrab_kabuli/5294817108 rethink how we relate to them… …rather than compete, we need to adapt, embrace new technologies and completely Online journalism and blogging workshop in Jalalabad
  23. http://www.flickr.com/photos/ummella/4088456000 a first step is to accept that native software isn’t going away…
  24. http://www.flickr.com/photos/sndrv/4635764320 …we need native software to power complex experiences, geolocation camera 3D rendering gyroscope video & audio
  25. at the last web standards round... access bits of hardware or software that didn’t exist “Motes” are Bluetooth Low Energy (LE) devices that can broadcast data on behalf of things in the real world. There still no Bluetooth API for the web (LE or otherwise...) Source: EstimoteRead Scott Jenson’s W3C article proposing we extend web discovery to objects
  26. ...and take full advantage of powerful new chipsets The Moto X includes a low-power core whose only job is to listen for the passphrase "OK, Google Now”. (This plus another core devoted to sensors enables, Touchless Control to run in the background without the need to power up the entire processor, which would drain your battery. and technologies Photo: Mashable
  27. http://www.flickr.com/photos/mujitra/8688838450 increasingly...out in the real world …and native software needs the web to power discovery, not just through search—but social media and
  28. http://www.flickr.com/photos/craigmurphy/3979174573 a world of “things” you may want to chat with but not care enough about to start a full-on relationship For more on this, read Scott Jenson’s seminal article on just-in- time interactions.
  29. http://www.flickr.com/photos/68453216@N03/6227748188 a veritable superpower that will only increase once everyone is connected… the web is the ubiquitous pathway,
  30. http://www.flickr.com/photos/splitthekipper/5727366179 …so how do we make the web even better?
  31. http://www.flickr.com/photos/greggoconnell/201374093 progressive enhancement but not the way we’ve known it…
  32. http://www.flickr.com/photos/ducdigital/2892313560 providing an enhanced version to those “…using web technologies in a layered fashion that allows everyone to access the basic functionality…while also with more advanced capabilities”. Progressive enhancement:
  33. http://www.flickr.com/photos/renaissancechambara/2267250649 if we truly value the ideas behind progressive enhancement… some see an escalator...others see a highly enhanced and gracefully degrading staircase...
  34. http://www.flickr.com/photos/blmurch/6024605166 everyone is different… …if we truly believe that creating great experiences begins with an acknowledgement that
  35. http://www.flickr.com/photos/dsf/9358670299 different contexts, with different intents and capabilities… experiencing the web in
  36. …we must accept that enhancement may sometimes lie beyond the web Source: Nymi Nymi lets you use your unique cardiac rhythm to authenticate your identity.
  37. http://www.flickr.com/photos/yghelloworld/4964999147 weave the web in and out of their day… that (thanks to mobile), people research already shows
  38. http://www.flickr.com/photos/susanito/5447525972 in doing so, they dip in and out of the web content we create…
  39. http://www.flickr.com/photos/shortcatt/6233298063 the choices they make are complex, sometimes irrational, and uniquely personal…
  40. http://www.flickr.com/photos/ducdigital/2892313560 “ ...services aren’t made on an assembly line...you can’t predict precisely which [touchpoint] each user will need, in what order she will encounter them, and who will help her along the way. The service is experienced differently by every person, because every person is different." - Andy Polaine the services we create must embrace that complexity...
  41. http://www.flickr.com/photos/mozillaeu/9293845962 it’s natural for us to want to coax users towards the open web…
  42. http://www.flickr.com/photos/kalleboo/9400677132 it’s also natural for our app-making colleagues to want to drag them the other way…
  43. http://www.flickr.com/photos/juhansonin/7883095062 …and who knows what direction may come along next
  44. http://www.flickr.com/photos/andrewmalone/2355592191 all this jostling for attention is counterproductive…
  45. http://www.flickr.com/photos/jazbeck/8025692978 through technology… …it doesn’t help us gain trust, create engagement, increase loyalty or enable users to improve their lives
  46. http://www.flickr.com/photos/shimelle/5586063513 web vs apps, print vs digital, or bricks + mortar vs online… the work we do is not about
  47. http://www.flickr.com/photos/drtran/7468519076 it’s about leveraging technology to build relationships and enable conversations
  48. http://www.flickr.com/photos/jdickert/3091034336 to make this happen, we have to stop thinking in silos…
  49. http://www.flickr.com/photos/eletrosonico/3359915532 often referred to as “digital”… not just the technologies we use, but the culture around what is still ...we need to evolve If I buy a TV online while in-store on my mobile, which channel am I using...?
  50. http://www.flickr.com/photos/meddygarnet/4012204741 here’s an example of a company that is slowly taking steps to disentangle itself from silos and legacy thinking…
  51. http://www.flickr.com/photos/ducdigital/2892313560 Dixons (owner of electronics giants Curry’s and PC World) recently scrapped individual sales commissions in favour of store-wide schemes linked to measures of customer satisfaction. To overcome managers’ reluctance to refer customers to the website, stores are now credited with all sales in their catchment area...regardless of whether a buyer entered the premises. - The Economist “
  52. http://www.flickr.com/photos/yokohamarides/6677622077 –not where and how the interactions occurred this approach makes sense because in the end, what’s most valuable to the company is a satisfied customer
  53. http://www.flickr.com/photos/carbonnyc/2154870998 it’s probably also more efficient as the entire company can work towards a common goal…
  54. http://www.flickr.com/photos/egfocus/6001107753 than what we’re doing today what’s possible, and why embracing it might be better shifting culture can be hard, but the first step is to understand
  55. http://www.flickr.com/photos/jamesstewart/5736745348 more seamless, honest and future-friendly… i’m going to walk you through some technologies that I believe can help us create experiences that are
  56. http://www.flickr.com/photos/ryanbrunsvold/5218091651 weaving the web in and out of everyday life none of these examples exclusively involve the web – they can however play a role in more seamlessly a friendly warning:
  57. iOS smart app banners URLs that (kinda) open apps APPBROWSER
  58. The call to action adapts to suit the context: • OPEN if the app is installed, • VIEW if it’s not The banner also won’t appear if the app isn’t supported (...in that region, on that particular model) iOS Smart App Banners can prompt users to open or install your app, and are easy to implement using a meta-tag in the head of each page. They are less obtrusive than modal windows and are native components so won’t impact performance or suffer from usability problems as a modals often can. Source: Apple developer
  59. While less intrusive than other methods, smart app banners can still send mixed messages. Don’t use them “simply because you can”. Make sure they are truly useful.
  60. If the user already has the app installed, generically linking to it is about as useful as generically dumping all smartphone users on your (mobile) home page. You can do better... <a href=”http:// www.amazon.co.uk/ bookReference”> Clicking OPEN passes that page’s URL... ...which the app parses and resolves to display the content 1 2 3 This is sadly a mythical example. Amazon could do this, but so far hasn’t.
  61. Bottom line: If used well, Smart app banners can deliver a good experience. It’s a shame however that their content can’t be customized to make them feel a bit less like an advert in cases where users already have the app installed.
  62. Custom URI schemes more URLs that (kinda) open apps APPBROWSER
  63. URI schemes are a mechanism through which third-party apps can communicate with each other. They are supported on iOS, BlackBerry 10, Windows Phone 8 and Android (using the far more robust intents).
  64. polar:// The user clicks a link within a web page The native app (that’s already installed) recognises the scheme The app developer registers the scheme within the native app <a href=”polar:// polls/2246/”> The app opens and (if it’s been well designed) resolves the full URL to display the content or activity the user requested using a web link to launch an app in iOS 2 3 4 1 example: Luke’s case study: Linking mobile web and native app experiences
  65. Boo...the user is on another platform (Mac, PC, Android etc.) ...if only it were that simple :-( (a complicated error prone process using cookies ensued to make this work...see the case study) Boo...the native app isn’t installed FAIL Luke’s case study: Linking mobile web and native app experiences <a href=”polar:// polls/2246/”> FAIL polar:// The app developer registers the scheme within the native app The user clicks a link within a web page 2 3 3 1
  66. Bottom line: For the moment at least...schemes are a bit of a hack. They don’t gracefully degrade, so it takes a lot of work to ensure everyone gets a good experience.
  67. intents on Android outsource tasks to other apps TASKTASK TASK
  68. Intents are the glue between application components, both within an app, and across different apps. They allow apps to outsource tasks to other apps (that they may not even know about!) using predetermined interfaces. “ - Roman Nurik
  69. Why is this useful? Intents enable users to choose the app they prefer to use when completing a task, such as sharing a link, saving a file or opening a URL. (In contrast to the typical scenario where the platform owner, app developer or designer decides what people should use (and often how they should use it) and in some way hard-codes the functionality into the app.)
  70. An intent is simply a combination of an action, and a piece of data. Source: Nick Butcher, Google VIEW EDIT Contact “Bryan Rieger” www.yiibu.com
  71. Android apps can register their ability to handle each type of intent. Source: Nick Butcher, Google I can.... ...VIEW ...EDIT ...SHARE ...CHOOSE “ ...an image, file etc. ...an URL, photo etc. ...a photo, document etc. ...just about anything
  72. EXAMPLE Opening a URL
  73. Pick me!! Two apps respond “I can handle ”view” intents on amazon.co.uk” browser resolves the URL app resolves the URL user is prompted to pick... the user clicks a link within a web page, in an email, or in another app... <a href=”http:// www.amazon.co.uk/ bookReference”> the intent is broadcast VIEW {URI} Share Amazon Chrome Clicking a hyperlink is one of the many user actions that triggers an intent. It’s therefore possible for brands with both an app, and a mobile optimised site to enable behaviours like this.... Once again a mythical example. Amazon could do this, but so far hasn’t.
  74. Reminder: The beauty here is this is an enhancement. The web page simply contains a URL. If there’s no Amazon app installed, the URL simply opens in a browser. (If the user has two browsers installed (for example, a text to speech browser), and hasn’t designated a default, both will respond...and the user can make a choice).
  75. SHARE {data} “Save” INTENT click “share” ...completing the action automatically brings you back to the Twitter app choose an app edit/compose your note Intents also enable out-of-the-box seamless experiences. Once a task is complete, the user automatically ends up back where they initiated that task. Share Twitter does use intents. Yay!
  76. The more apps support intents, the more users can chain apps and activities together to complete very personal experiences... Share (i.e. open) using Google Translate ...then Share in an SMS hardware Back open Tweet using your chosen “app” click a URL in the Tweet and open using your favourite “app” seamless auto Back seamless auto Back hardware Back
  77. http://www.flickr.com/photos/khamtran/5871541424 Intents are pretty cool. It’s a shame they’re just an Android thing...
  78. Detailed instructions on developers.google.com and try this out in Pocket on iOS user clicks a link from within the Pocket iOS app VIEW mock-intent ? NO YES isChrome Installed? offers the usual web view roundtrip enabled using the x-callback-url scheme enjoy content in your favourite browser Google has implemented a variant of intents enabling apps to delegate viewing web content to Chrome on iOS. While a bit contrived, it incorporates feature detection so can be used as an unobtrusive progressive enhancement. “open in Chrome” option is offered “back” button added at runtime
  79. Mozilla has also developed the web activities API for Firefox (mobile) and Firefox OS. Web activities enable (web) apps to delegate activities to other (web) apps. three apps respond “I can pick a photo” user picks a photo... the app gets the photo back as a file blob, and does something with it... PICK {photo} invokes the pick activity Select Crop ...does other useful stuff with their favourite app... I’m done!Pick Wallpaper Gallery Camera More on Web Activities and a comparison of Web Activities and the far broader Web Intents
  80. Mozilla hopes that web activities will be adopted as a standard. The development of web intents–a similar, but more complex W3C standard–is now on hold as the various groups discuss how best to proceed. Before the web intents working group was disbanded, web intents were available behind a Chrome flag. This highly stylised and non-official visualization provides a glimpse of how these worked on a Chromebook. Which service should be used for saving? App suggestions from Chrome Web Store: Evernote Add to Chrome
  81. CONNECTED STUFF OUT IN THE WORLD DEVICE APPAPP APP The last couple scenarios all began (and ended) with an app (the browser is also an app :-) Next we’ll talk about ways to enable interactions between other users, devices and connected “things”?
  82. NFC easily exchange all sorts of data DEVICE DEVICE (and much more...)
  83. NFC is a simple but powerful wireless technology that makes it easy to complete transactions, exchange digital content, and connect electronic devices.
  84. Apple doesn’t yet support NFC :-( Supported on most BlackBerry and Windows Phone devices. 1 million NFC-enabled Android devices activated each week*. *Source: Google I/O 2013. Also of interest are the Mozilla NFC web API, a PhoneGap plugin, and the W3C NFC working group. Apple appears to have no plan to support NFC and may instead focus on Bluetooth LE. These technologies overlap but each has its strengths. It’s a shame that Apple is as usual going its own way.
  85. Receive small amounts of data from an unpowered object the NFC tag is momentarily powered by the device’s NFC field NFC enabled devices operate at a very short range (max. 4”/10cm) and can communicate with two types of “things.” Exchange data of any size with another powered device
  86. The word “data” downplays the power of a potential NFC data exchange. Here are a few examples...
  87. Touch the poster (which contains a passive NFC tag) to receive a product- related URL. (...similar to a QR code but at least you don’t need to own, open and activate a separate QR code reader app) Share a URI OBJECT DEVICE data browser opens and loads the URI
  88. Share a dataset While using the British Airways app, tap your NFC device to an NFC-enabled (e-ink display) luggage tag to transfer your luggage and flight data. (Currently in Beta. This is a basic guess of how it will work. The e-ink image can last for weeks and only requires power when the tag is being written. ) OBJECTDEVICE data Source: British Airways to offer NFC luggage tags
  89. While playing a video using the YouTube app, touch your phone to a Smart TV’s NFC logo... Share a context 2 Loads the video 3 Sets the playhead location 4 Adjusts any other settings 1 Opens the TV’s YouTube app (This is easy to demonstrate using two smartphones but not sure if the YouTube app on any NFC- enabled TV’s support this functionality. In cases where the app isn’t yet installed, the device automatically takes you to the page on Google Play where you can download it.) DEVICE data DEVICE
  90. Tap to send the file 1 Activates Bluetooth (if not already on) 2 Pairs the devices 3 Initiates Bluetooth streaming Share media 4 Disconnects Bluetooth once complete Progress is visible in the notification window e.g. PDF, mp3, mp4, MPEG (or Wi-fi Direct) DEVICE data DEVICE (large) Play using your favourite app... (uses a ”view” intent on Android!)
  91. Touching the headphone’s NFC logo to your NFC phone... 2 Activates Bluetooth 3 Pairs the devices 4 Initiates streaming of the song that’s currently open on your phone 1 Powers up the headphones Initiate a connection DEVICE data DEVICE
  92. http://www.flickr.com/photos/aon/7184559114/ things get even more interesting, once you consider how users may chain these behaviours together...
  93. NFC payment share voucher with a friend and so on... in-store offer: check-into Facebook for 10% off ....later that day redeem 10% off VIEW grab QR code voucher from web begin here... download brand loyalty app see something you like! share a photo tell 20 of your best friends... conversation ensues...questions arise +10!! friends say go for it! browse reviews tap POP display to get reviews share them
  94. http://www.flickr.com/photos/cristiano_betta/2753834595 tearing down silos isn’t just good for the web, it’s good for all of us…
  95. http://www.flickr.com/photos/apes_abroad/4690659482 we’re not just build apps, or web sites...
  96. http://www.flickr.com/photos/heisenbergmedia/8409313926 we’re building strong, sustainable companies and brands…
  97. http://www.flickr.com/photos/comedynose/4328893766 …in a world where everything is connected every company is now a technology company “...it’s really rather simple, in the future, app development is going to be just as important as property development.” - Philip Clarke, CEO, Tesco supermarkets http://www.flickr.com/photos/78170556@N08/6992639132
  98. the entire service, the entire company...is the app smart POP contactless payment loyalty just-in-time inventory global supply chain accountability privacy personalization sensors big data transparency open data http://www.flickr.com/photos/comedynose/4328893766 APIs loyalty
  99. http://www.flickr.com/photos/yokohamarides/5754457946 the web is by far its most ubiquitous and resilient access point…
  100. http://www.flickr.com/photos/danzen/4979854477 but the others also have a place in creating wonderful, diverse and future-friendly experiences…
  101. http://www.flickr.com/photos/docentjoyce/3314396603 they’re simply tools that help us tell stories about our products ...technologies aren’t solutions,
  102. http://www.flickr.com/photos/brownpau/4969358409 and devices that surround us… our job is to tear down the walls, build bridges, and fill the gaps between the people, spaces
  103. http://www.flickr.com/photos/seokchanyun/5537621999 …only then can we tell the stories our customers deserve
  104. http://www.flickr.com/photos/dcoetzee/3885789043 for what, for whom, where and most importantly, why.” - Bill Buxton (in a great many contexts) for something else. The trick is knowing what is what, “Everything is best for something and worst A one-handed ergonomic keyboard from the Buxton collection
  105. http://www.flickr.com/photos/tinou/453593446 thank you many thanks to the amazing photographers on http://creativecommons.org/licenses/by/2.0 @yiibu hello@yiibu.com contact us at Presentation deck available @ http://www.slideshare.net/yiibu