{"id":302,"date":"2013-11-04T15:35:36","date_gmt":"2013-11-04T15:35:36","guid":{"rendered":"https:\/\/www.sebastianlenton.com\/?p=302"},"modified":"2013-11-05T01:36:41","modified_gmt":"2013-11-05T01:36:41","slug":"responsive-future","status":"publish","type":"post","link":"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/","title":{"rendered":"The Responsive Future"},"content":{"rendered":"<p>I recently attended <a title=\"Canvas Conference 2013\" href=\"http:\/\/2013.canvasconf.co.uk\/\">Canvas Conference 2013<\/a>, an event for developers, designers and digital marketers which took place here in Birmingham. The event featured a wide variety of speakers covering a huge range of topics: everything from physical product development to new and emerging tools, as well as your slightly more &#8220;traditional&#8221; subjects related to web development and marketing.<\/p>\n<p>After a few days spent absorbing the huge amount of information I was exposed to, I noticed a common thread running through quite a few of the talks: that of the future of the responsive web.<\/p>\n<p><!--more--><\/p>\n<h2>Beyond the Breakpoint<\/h2>\n<p>My takeaway was that what we refer to as &#8220;responsive&#8221; is quickly moving beyond things like creating layouts that reflow over different breakpoints, providing support for touch vs non-touch, or designing for mobile\/tablet\/desktop.<\/p>\n<p>Websites and apps are increasingly becoming responsive towards all sorts of additional factors:\u00a0connection speed and availability, location, characteristics of the user&#8217;s environment (lighting, ambient audio and so on) &#8211; as well as responding, content-wise, to the tastes and personality of the user. New methods of input are becoming more common: speech recognition, motion control and video input. Perhaps the next advance will be thought control.<\/p>\n<p>These factors are becoming increasingly important as we march towards a future\u00a0of wearable devices, smart cities and the oft-foreseen Internet of Things. Your next project could be running on a wristwatch, smart television or a car dashboard, and each of these environments mandate different requirements.<\/p>\n<h2>Inspiration<\/h2>\n<p>Quite a few talks touched upon this responsive future:<\/p>\n<ul>\n<li><span style=\"line-height: 13px;\"><a title=\"The Guardian\" href=\"http:\/\/www.theguardian.com\">The Guardian<\/a>&#8216;s\u00a0<a title=\"Twitter: Matt Andrews\" href=\"https:\/\/twitter.com\/mattpointblank\">Matt Andrews<\/a> led the\u00a0audience through the development of their new responsive website, which uses feature and connection sniffing in addition to other techniques in order to deliver content to more than 300 browsers across 6000+ devices.\u00a0This is the current state of responsive taken to the extreme: almost any visitor is able to access its content quickly and easily &#8211; important in certain parts of the world, where people may not have the luxury of fast connections and expensive devices. (Matt has a written version of his talk\u00a0<a title=\"Matt Andrews: Responsive Design at the Guardian\" href=\"http:\/\/mattandrews.info\/talks\/canvasconf-2013\/\">here<\/a>\u00a0&#8211; a recommend read).<\/span><\/li>\n<li><a title=\"Twitter: Alice Bartlett\" href=\"https:\/\/twitter.com\/alicebartlett\">Alice Bartlett<\/a> of <a title=\"BERG\" href=\"http:\/\/berglondon.com\/\">BERG<\/a> described in great detail the development process behind <a title=\"BERG: Little Printer\" href=\"http:\/\/bergcloud.com\/littleprinter\/\">Little Printer<\/a>, a tiny web-connected printer which pulls a variety of user-sourced content via BERG Cloud, their custom-built data platform. This cute product is a lovely example of an Internet Thing: a connected, independent data-driven device which delivers content personalised to its user.<\/li>\n<li>Microsoft&#8217;s <a title=\"Twitter: Martin Beeby\" href=\"https:\/\/twitter.com\/thebeebs\">Martin Beeby<\/a> gave a whistle-stop tour of present and future methods of interaction between humans and devices, highlighting topics such as touch, motion control and speech recognition. He showed refinements to current technologies &#8211; such as altering the sizes of touch targets depending on how likely they&#8217;ll be touched next &#8211; as well as talking about more offbeat ideas, such as a motion control system which can detect your hands by the sound they make moving through the air.\u00a0Most importantly, he introduced me to the <a title=\"Google Web Speech API\" href=\"http:\/\/www.google.com\/intl\/en\/chrome\/demos\/speech.html\">Google Web Speech API<\/a> &#8211; more on this in just a minute&#8230;<\/li>\n<li><a title=\"Twitter: Harry Hurst\" href=\"https:\/\/twitter.com\/hkhurst\">Harry Hirst<\/a> of <a title=\"Qubit\" href=\"http:\/\/www.qubitproducts.com\/\">Qubit<\/a> talked about personalisation: enabling websites \u00a0&#8211; in this case, retailers &#8211; to track and build detailed profiles about their visitors. It lets them\u00a0analyse and predict the tastes and movements of individuals, to display particular content, products or pop-ups which might be more likely to lead to a conversion. So sophisticated is their technology that apparently\u00a0it\u00a0can predict exit patterns, throwing up a special offer or other such distraction in order to prevent a potential customer from bouncing away.<\/li>\n<\/ul>\n<p>It was Harry&#8217;s talk in particular which planted the seed of an idea in my mind.<\/p>\n<h2>Swearing at Modal Boxes<\/h2>\n<p>I agree with the idea of personalisation &#8211; there are many good use cases, such as a reference site being able to suggest links which might be most useful to look at next. However, when it comes to retail I find personalisation intrusive and irritating.<\/p>\n<p>I understand that a lot of people probably appreciate retail personalisation, whether they&#8217;re aware it&#8217;s happening or not. But, surely it&#8217;s possible to detect the behavioural patterns of people who don&#8217;t want to be personalised? The retailer could make more money, due to the experience for that group of people\u00a0being cleaner and easier than that of a competitor. It might be that someone does this already &#8211; I just haven&#8217;t realised.<\/p>\n<p>My pet hate is sites which display an overlaid modal box presenting an offer, advert or otherwise &#8211; particularly halfway through reading &#8211; and I often find myself swearing at them in frustration. To this end, I&#8217;ve produced a simple demo which uses the Google Web Speech API to detect when you&#8217;re swearing at a modal box, which closes should that be the case. Find it <a title=\"Language-Responsive Modal Box\" href=\"http:\/\/languagemodal.sebastianlenton.com\">here<\/a> (and, find the code here on <a title=\"Github - Language Responsive Modal Box\" href=\"https:\/\/github.com\/sebastianlenton\/language-responsive-modal-box\">GitHub<\/a>).<\/p>\n<p>There are some caveats to the current implementation:<\/p>\n<ul>\n<li>It only works in Chrome 25+, at time of writing.<\/li>\n<li>At the beginning of every session, you have to enable the microphone &#8211; though this also ensures websites aren&#8217;t silently recording everything you&#8217;re saying. Maybe at some point people might have whitelists of sites which are trusted to respond via voice (note, according to <a title=\"Google Web Speech API\" href=\"http:\/\/updates.html5rocks.com\/2013\/01\/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API\">this article<\/a>, pages served via HTTPS only have to request the use of a microphone once).<\/li>\n<li>Each session only lasts for 60 seconds in total, and if no speech is detected within 8 &#8211; 10 seconds then the session terminates.<\/li>\n<li>The speech recognition is currently a bit poor.<\/li>\n<\/ul>\n<p>Though this demo is neither practical nor usable in a real-world sense, it does give a glimpse into a future where a website or app could respond to a user&#8217;s ambient behaviour, tailoring both content as well as UX to the tastes of that user in an entirely transparent manner.<\/p>\n<p>Also, messing about with new technologies like the Web Speech API is awesome fun. If you&#8217;d like to have a play yourself then I&#8217;d recommend <a title=\"Google Web Speech API\" href=\"http:\/\/updates.html5rocks.com\/2013\/01\/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API\">this<\/a> and <a title=\"Google Web Speech API\" href=\"http:\/\/stiltsoft.com\/blog\/2013\/05\/google-chrome-how-to-use-the-web-speech-api\/\">this<\/a> as good starting points.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently attended Canvas Conference 2013, an event for developers, designers and digital marketers which took place here in Birmingham. The event featured a wide variety of speakers covering a huge range of topics: everything from physical product development to new and emerging tools, as well as your slightly more &#8220;traditional&#8221; subjects related to web&#8230;  <a href=\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/\" title=\"Read The Responsive Future\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Responsive Future - Sebastian Lenton<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Responsive Future - Sebastian Lenton\" \/>\n<meta property=\"og:description\" content=\"I recently attended Canvas Conference 2013, an event for developers, designers and digital marketers which took place here in Birmingham. The event featured a wide variety of speakers covering a huge range of topics: everything from physical product development to new and emerging tools, as well as your slightly more &#8220;traditional&#8221; subjects related to web... Read more &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/\" \/>\n<meta property=\"og:site_name\" content=\"Sebastian Lenton\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-04T15:35:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-11-05T01:36:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2013\/11\/bands-1100x728.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"728\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Seb Lenton\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@sebastianlenton\" \/>\n<meta name=\"twitter:site\" content=\"@sebastianlenton\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Seb Lenton\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/\",\"url\":\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/\",\"name\":\"The Responsive Future - Sebastian Lenton\",\"isPartOf\":{\"@id\":\"https:\/\/www.sebastianlenton.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2013\/11\/bands.jpg\",\"datePublished\":\"2013-11-04T15:35:36+00:00\",\"dateModified\":\"2013-11-05T01:36:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.sebastianlenton.com\/#\/schema\/person\/07ad65c2a7050417b92f404e980c3be1\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/#primaryimage\",\"url\":\"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2013\/11\/bands.jpg\",\"contentUrl\":\"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2013\/11\/bands.jpg\",\"width\":2200,\"height\":1457},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sebastianlenton.com\/#website\",\"url\":\"https:\/\/www.sebastianlenton.com\/\",\"name\":\"Sebastian Lenton\",\"description\":\"Freelance web development &amp; design, Birmingham UK\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sebastianlenton.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sebastianlenton.com\/#\/schema\/person\/07ad65c2a7050417b92f404e980c3be1\",\"name\":\"Seb Lenton\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Responsive Future - Sebastian Lenton","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/","og_locale":"en_GB","og_type":"article","og_title":"The Responsive Future - Sebastian Lenton","og_description":"I recently attended Canvas Conference 2013, an event for developers, designers and digital marketers which took place here in Birmingham. The event featured a wide variety of speakers covering a huge range of topics: everything from physical product development to new and emerging tools, as well as your slightly more &#8220;traditional&#8221; subjects related to web... Read more &raquo;","og_url":"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/","og_site_name":"Sebastian Lenton","article_published_time":"2013-11-04T15:35:36+00:00","article_modified_time":"2013-11-05T01:36:41+00:00","og_image":[{"width":1100,"height":728,"url":"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2013\/11\/bands-1100x728.jpg","type":"image\/jpeg"}],"author":"Seb Lenton","twitter_card":"summary_large_image","twitter_creator":"@sebastianlenton","twitter_site":"@sebastianlenton","twitter_misc":{"Written by":"Seb Lenton","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/","url":"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/","name":"The Responsive Future - Sebastian Lenton","isPartOf":{"@id":"https:\/\/www.sebastianlenton.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/#primaryimage"},"image":{"@id":"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2013\/11\/bands.jpg","datePublished":"2013-11-04T15:35:36+00:00","dateModified":"2013-11-05T01:36:41+00:00","author":{"@id":"https:\/\/www.sebastianlenton.com\/#\/schema\/person\/07ad65c2a7050417b92f404e980c3be1"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.sebastianlenton.com\/2013\/11\/responsive-future\/#primaryimage","url":"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2013\/11\/bands.jpg","contentUrl":"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2013\/11\/bands.jpg","width":2200,"height":1457},{"@type":"WebSite","@id":"https:\/\/www.sebastianlenton.com\/#website","url":"https:\/\/www.sebastianlenton.com\/","name":"Sebastian Lenton","description":"Freelance web development &amp; design, Birmingham UK","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sebastianlenton.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.sebastianlenton.com\/#\/schema\/person\/07ad65c2a7050417b92f404e980c3be1","name":"Seb Lenton"}]}},"_links":{"self":[{"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/posts\/302"}],"collection":[{"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/comments?post=302"}],"version-history":[{"count":0,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/posts\/302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/media\/323"}],"wp:attachment":[{"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/media?parent=302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/categories?post=302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/tags?post=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}