Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive is a Question and not THE Answer

2,326 views

Published on

A walk through of the 5 options that need to be walked through and considered before selecting a path for mult-screen / multi-device design and development. Responsive is the hot thing these days, but it is not the best option for many things. This walks through the considerations and options to get started on the right path.

Published in: Design
  • Unlock Her Legs is your passage way to a life full of loving and sex... read more >>★★★ https://tinyurl.com/unlockherlegss
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive is a Question and not THE Answer

  1. 1. Responsive Design is a Question and not THE Answer Thomas Vander Wal 17 October 2014 User Focus :: Washington, DC, USA
  2. 2. We Have Content & Services
  3. 3. Users Have Devices & Interfaces
  4. 4. How We Got Here Mobile Use Exploded (2010) CMSs Suck Apps Not Perfect Fit Responsive
  5. 5. Mobile Focus
  6. 6. How We Got Here South Park Underpants Gnome Conjecture Content / Application / Services Something ? ? ? Application Responsive ? ? ?
  7. 7. User Focus User’s have interest in content and services on their devices. Period. No user ever asked for a responsive site. Responsive is a developer focussed solution to make it easier for them to work with crappy CMS and get content onto a myriad of devices where users’ want the content.
  8. 8. Shift Happened Users About 2010 mobile use began to shift past > 50% for many orgs. Devices / Interfaces Today we have many flavors of mobile and many screens on a myriad of devices. CMS Yet, today our Content Management Systems (CMS) still suck.
  9. 9. What are we talking about? Content Focus is on consuming text, images, video, etc. Applications Users interact with forms, objects, and assets Services Content and apps that have agents that work without needing interaction
  10. 10. How to Move Forward Content / Application / Services Thinking: ❖ User ❖ Device ❖ Source Select Best Option
  11. 11. Design for Screens TV Laptop Mobile Wearable Dashboard PowerBook G4
  12. 12. Model of Attraction
  13. 13. Model of Attraction Receptors Intellectual Intellectual ❖ What are things called - IA ❖ Match mental model ❖ Writing level ❖ Content strategy
  14. 14. Model of Attraction Receptors Intellectual Perceptual Perceptual ❖ What do things look like ❖ Match user mental model ❖ Quick judgement ❖ Visual & interaction ❖ Feel
  15. 15. Model of Attraction Receptors Intellectual Perceptual Mechanical Mechanical ❖ Device and Network ❖ Bandwidth ❖ Processor power ❖ Graphics power ❖ Memory ❖ Storage ❖ Screen quality & size ❖ Interaction modes
  16. 16. Model of Attraction Receptors Intellectual Perceptual Physical Mechanical Physical ❖ User’s physical capabilities ❖ Hands / touch ❖ Sight ❖ Hearing ❖ Voice ❖ Vibration / Haptic ❖ Gesture
  17. 17. Model of Attraction Receptors Intellectual Perceptual Physical Mechanical
  18. 18. Model of Attraction Receptors Physical Mechanical + Intellectual Perceptual Use Context ❖ Device ❖ Location ❖ Environment ❖ Interoperation / Continuity ❖ Task / Intent
  19. 19. User Facing Options
  20. 20. User Facing Options Responsive R Native App N Hybrid - HTML in Native Wrapper H Mobile Focussed Site M HTML5 App 5
  21. 21. Responsive Best Use ❖ Text content focus ❖ Wide variety of device options ❖ Limited repeated chrome ❖ Poor CMS used & not changing Pros ❖ Relatively easy to modify for cross device design ❖ Presentation layer changes to meet device constraints ❖ Good for limited sites Cons ❖ Gets complicated fast ❖ Often leads to heavy downloads ❖ Not best when bandwidth limited ❖ Non-native animation & transition R
  22. 22. Native App Best Use ❖ Interaction focussed app ❖ Services ❖ Large chrome needed ❖ Bandwidth limited ❖ Known limited device variety ❖ Games ❖ Native animation / transition Pros ❖ One download for chrome ❖ Regular use downloads minimal ❖ Optimal IxD ❖ Best use of device capabilities ❖ Fast and efficient animation & transitions ❖ Security Cons ❖ Poor cross device portability ❖ Not great for single use ❖ Developer heavy needs for broad cross device use ❖ Needs app for each device ❖ Update w/ OS changes N
  23. 23. Hybrid - HTML in Native Wrap Best Use ❖ Light interaction apps ❖ Heavy chrome ❖ Optimal layout for device ❖ Heavy content updates Pros ❖ 1x download of heavy chrome ❖ Great control of layout ❖ Optimize for devices ❖ Easy to update content Cons ❖ Needs download ❖ Needs app for each device ❖ Update with OS changes ❖ Not great for games / heavy interaction H
  24. 24. Mobile Focussed Site - “m.” Best Use ❖ Device genre optimized content ❖ Content heavy ❖ Audio / Video offering Pros ❖ Optimize for device genre ❖ Large content sites ❖ Bandwidth optimized ❖ Light and fast web Cons ❖ Media query / device query not optimal yet ❖ Planning for user wishes (desktop over other) ❖ Slightly different versions ❖ User cognitive dissonance ❖ Needs good server set-up M
  25. 25. Mobile Focussed: Site Options Generic Web ❖ Desk web content optimized for devices ❖ 1st step mobile optimized site Responsive ❖ Light and fast ❖ Small optimization for variance ❖ Portrait / Landscape shifts Native App Wrapper ❖ Optimize chrome ❖ Best for low bandwidth M
  26. 26. HTML5 Application Best Use ❖ Content heavy site ❖ Devices with modern browser ❖ Cross-OS content heavy Pros ❖ Developer build efficiency gain ❖ Light interactive with animations ❖ Control structure, layout, & interaction ❖ User can set as local app w/ storage / memory set aside Cons ❖ Animation, transitions, and interactions can be slower than native ❖ App size can grow quickly ❖ Keeping dev up-to-date with OS & browser updates 5
  27. 27. Considerations: Content
  28. 28. Constraints: Content Type Long Text R M Short Text R M Interactive N Multimedia N 5 H Scalable H graphics 5 Short structured (info cards) R H N 5 Alerts N H Chrome Heavy N H 5 Forms R M Applications N H 5 Maps N H
  29. 29. Framing with Constraints Spreadsheet N H 5 Agents N H Background Services N H Genre specific content N H M
  30. 30. Where to Start?
  31. 31. Start with This Pairing Physical Mechanical + Intellectual Perceptual Use Context ❖ Device ❖ Location ❖ Environment ❖ Interoperation / Continuity ❖ Task / Intent
  32. 32. Then, Work Your Way Out Content Focus is on consuming text, images, video, etc. Applications Users interact with forms, objects, and assets Services Content and apps that have assets that work without needing interaction
  33. 33. Interaction & Communication • Light interaction with others • Seeing others around an object of interest • Seeing differences of perception • Capturing context • Where • When • Tools • Background • Interactions with others
  34. 34. URL: www.vanderwal.net Blog: www.personalinfocloud.com E-mail: thomas@vanderwal.net Skype: tjvanderwal Twitter: @vanderwal or @infocloud

×