Responsive is a Question and not THE Answer
•
32 likes•2,696 views
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.
Recommended
Recommended
More Related Content
More from Thomas Vander Wal
More from Thomas Vander Wal (20)
Recently uploaded
Recently uploaded (20)
Responsive is a Question and not THE Answer
- 1. Responsive Design is a Question and not THE Answer Thomas Vander Wal 17 October 2014 User Focus :: Washington, DC, USA
- 2. We Have Content & Services
- 3. Users Have Devices & Interfaces
- 4. How We Got Here Mobile Use Exploded (2010) CMSs Suck Apps Not Perfect Fit Responsive
- 5. Mobile Focus
- 6. How We Got Here South Park Underpants Gnome Conjecture Content / Application / Services Something ? ? ? Application Responsive ? ? ?
- 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. 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. 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. How to Move Forward Content / Application / Services Thinking: âť– User âť– Device âť– Source Select Best Option
- 11. Design for Screens TV Laptop Mobile Wearable Dashboard PowerBook G4
- 13. Model of Attraction Receptors Intellectual Intellectual âť– What are things called - IA âť– Match mental model âť– Writing level âť– Content strategy
- 14. Model of Attraction Receptors Intellectual Perceptual Perceptual âť– What do things look like âť– Match user mental model âť– Quick judgement âť– Visual & interaction âť– Feel
- 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. Model of Attraction Receptors Intellectual Perceptual Physical Mechanical Physical ❖ User’s physical capabilities ❖ Hands / touch ❖ Sight ❖ Hearing ❖ Voice ❖ Vibration / Haptic ❖ Gesture
- 17. Model of Attraction Receptors Intellectual Perceptual Physical Mechanical
- 18. Model of Attraction Receptors Physical Mechanical + Intellectual Perceptual Use Context âť– Device âť– Location âť– Environment âť– Interoperation / Continuity âť– Task / Intent
- 20. User Facing Options Responsive R Native App N Hybrid - HTML in Native Wrapper H Mobile Focussed Site M HTML5 App 5
- 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. 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. 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. 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. 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. 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
- 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. Framing with Constraints Spreadsheet N H 5 Agents N H Background Services N H Genre specific content N H M
- 30. Where to Start?
- 31. Start with This Pairing Physical Mechanical + Intellectual Perceptual Use Context âť– Device âť– Location âť– Environment âť– Interoperation / Continuity âť– Task / Intent
- 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. 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. URL: www.vanderwal.net Blog: www.personalinfocloud.com E-mail: thomas@vanderwal.net Skype: tjvanderwal Twitter: @vanderwal or @infocloud