Building Shapeshifting Interfaces

Building things on the web is great. Especially just now as responsive design solved lots of our problems. But taking a glimpse at the near future you’ll see not only desktops, tablets and phones. There will be watches and super large TV sets. Interaction with those devices will not necessarily include your fingertips anymore but very likely gestures and voice control. While the emerging internet of things is going to surround us with connected devices constantly providing or collecting data, we need to think about how to build consistent experiences throughout the day. This talk is about how to build frontends that adopt to contexts and provide consistent information and a continuity of your brand across devices.

Transcript

1. SHAPESHIFTING INTERFACES @franatique - up.front - 10.12.13
2. Every content owner ever „ I want my content to go everywhere“
3. Content might go to
4. A dream as old as the web itself WRITE ONCE RUN EVERYWHERE
5. 17 Years ago JAVA
6. 8 Years ago FLASH
7. 3 Years ago RWD!
8. Is RWD suitable for extremes?
9. Speech Touch Gestures Brainwaves Cursor INPUT TYPES
10. Desk SETTINGS Commute Bed Poopin ?
11. SETTINGS != CONTEXT Settings are crucial but undetectable. They impose timeframes whereas context is about features and mindset.
12. CONTEXT Related Data 010100 010011 110101 ˑ Device Features ˒ ˒ ˒ User Intends User History
13. Are there any solutions? CAN WE BUILD FOR EVERYTHING?
14. 3.840 x 2.160 px ~110 PPI 88cm × 50cm 40“ UHD TV vs. Galaxy Gear 320 x 320 px ~275 PPI 3cm × 3cm
15. Good News: RESPONSIVE SITES WORK WELL ON TV SETS
16. @media screen and (min-width: X) {! body {! font-size: ( ( 1em / X ) * 100 )vw;! }! } he screen size being used to access it. http:/ /codepen.io/aarongustafson/full/stnpj COUCH MODE
17. Bad News: SMALL SCREENS ARE SMALL
18. WHATS . THE FIRST USE CASE?
19. WHATS . THE FIRST USE CASE?
20. But how to prevent page bloat? DEVICE SPECIFIC PAGES?
21. „We’re not designing pages, we’re designing systems of components.“ @stephenhay
22. But how to prevent page bloat? DEVICE SPECIFIC COMPONENTS!
23. ATOMIC DESIGN http:/ /bradfrostweb.com/blog/post/atomic-web-design/
24. HOW TO NOT LOOSE TRACK ?
25. Catalogue your components: Content, Forms, Navigation
27. Categories for your styles: Base, Layout, Module, State & Theme
28. „ SMACCS is an attempt to document a consistent approach to site development when using CSS.“ @snookca http:/ /smacss.com/
29. Tying everything together: CSS Preprocessor & AMD Loader
30. „Compass is an open-source CSS Authoring Framework.“ http:/ /compass-style.org/
31. „RequireJS is a JavaScript file and module loader[…] Using a modular script loader like RequireJS will improve the speed and quality of your code.“ http:/ /requirejs.org/
32. Getting specific Device + Feature Detection
33. CLIENT SIDE APPROACH 1. Load document 2. Load referenced resources 3. Render document 4. Detect features 5. React to detected features
34. SERVER SIDE APPROACH 1. Load document 2. Load referenced resources 3. Render document
35. Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) CriOS/31.0.1650.18 Mobile/11B554a Safari/8536.25
36. Nope
37. Nope
38. Well…
39. {! "type": "mobile",! "markup": "iphone",! "screenWidth": 320,! "screenHeight": 568,! "imageFormats": [! "png",! "jpg",! "gif"! ],! "jsSupport": "1",! "pixelRatio": 2! } http:/ /wurfl.sourceforge.net/wurfl_download.php
40. Detection methods are not reliable and possibly never will be. Combining approaches narrows detection results.
41. Fighting page bloat Server Side Components
42. header.html footer.html login_small.html login_large.html index.html index.html RESS
43. What about Mobile Context
44. What about Mobile Context
45. ASKING THE CLIENT FOR CONTEXT Location Time
46. ASKING THE CLIENT FOR CONTEXT var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;! ! function updateBatteryStatus() {! console.log("Battery status: " + battery.level * 100 + " %");! ! if (battery.charging) {! console.log("Battery is charging"); ! }! }! ! battery.addEventListener("chargingchange", updateBatteryStatus);! battery.addEventListener("levelchange", updateBatteryStatus);! updateBatteryStatus(); Battery level
47. ASKING THE CLIENT FOR CONTEXT window.addEventListener('devicelight', function(event) {! var html = document.getElementsByTagName('html')[0];! ! if (event.value < 50) {! html.classList.add('darklight');! html.classList.remove('brightlight');! } else {! html.classList.add('brightlight');! html.classList.remove('darklight');! }! }); Ambient light EXPERIMENTAL
48. ASKING THE CLIENT FOR CONTEXT window.addEventListener('userproximity', function(event) {! if (event.near) {! // let's power off the screen! navigator.mozPower.screenEnabled = false;! } else {! // Otherwise, let's power on the screen! navigator.mozPower.screenEnabled = true;! }! });! User proximity EXPERIMENTAL
49. ASKING THE CLIENT FOR CONTEXT var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;! ! function updateConnectionStatus() {! alert("Connection bandwidth: " + connection.bandwidth + " MB/s");! if (connection.metered) {! alert("The connection is metered!");! }! }! ! connection.addEventListener("change", updateConnectionStatus);! updateConnectionStatus();! Network Information EXPERIMENTAL
50. PLANING FOR CONTEXTS Application States At home On the road
51. But as always Its O.K. to ask the user!
52. Lines between front and backend are blurring. Combining both enables us to build meaningful experiences.
53. THANK YOU Find me on the webs: @franatique
54. Fabulous Icons From The Noun Project: Computer designed by Alyssa Mahlberg Iphone designed by Marwa Boukarim Television designed by Anton Outkine Laptop + Speech designed by Edward Boatman Tablet designed by Megan Hillman Mouse designed by Monika Ciapala Keyboard designed by Roger Dean Oldén Monitor designed by Karthick Nagarajan Brainstorm + Fingerframe designed by Bernice Beltran Touch designed by Cengiz SARI Toilet designed by Jaclyne Ooi Train Station designed by Pierre-Luc Auclair Reading in Bed designed by Ainsley Wagoner Desk designed by Juan Pablo Bravo History designed by Ema Dimitrova Thought Bubble designed by irene hoffman Code designed by Luboš Volkov Location designed by John Caserta Clock designed by Nicholas Burroughs CREDITS Gorgeous Fonts from FAIRVIEW BY RILEY CRAN KLINIC SLAB BY JOE PRINCE