Putting Mobile First
Download as PPTX, PDF0 likes390 views
The document discusses different approaches to developing mobile experiences: 1. Mobi - focuses on providing clear structure and navigation for mobile, without impacting the main website. Content is designed specifically for phones. 2. Responsive - uses the same content across devices by reflowing content based on screen size. Requires designing for all screen sizes. 3. Framework - balances rich design and wide reach by simplifying interfaces while enabling key functionality. Develop once and deploy across devices. 4. Native - provides optimal performance and rich interfaces through platform-specific development, but requires separate development for each device/platform. It analyzes the pros and cons of each approach and when each is most suitable.
Putting Mobile First
- 1. Putting mobile first 24th May, 2012 John Campbell Mark Baillie Head of mobile Creative Director @precedentcomms #PrecSem
- 2. app
- 3. 1.A changing world 2.What are my options 3.The optimum approach 4.Making it happen 5.Considering the future End
- 6. 1.A changing world 2.What are my options? 3.The optimum approach 4.Making it happen 5.Considering the future End
- 9. 1.A changing world 2.What are my options? 3.The optimum approach 4.Making it happen 5.Considering the future End
- 10. Mobi
- 11. UI flow flow
- 13. Mobi What it’s good for: Consideration: - Providing focus and clear - Careful consideration to content structure impacting performance. - Deploying without impact on - Keep the design simply effective main website - You need to design for tablet and - Delivering quickly phone to maximise experience. - Wide reach working via browser - Links to m. or mobi domain name - Can be designed to understand and respond to screen size or orientation
- 15. Responsive
- 19. Responsive What it’s good for: Consideration: - Reflows the same content from - Cannot apply a different t tone of the website voice for mobile usage. - Content is presented on all - Experience not built around the user or context devices and screen sizes. - Requires to think in % and not - Architecture of the site fixed width remaining the same - Supported screen size has to be - Single update of content chosen Jakob Neilsen – 21st May 2012 It's cheap but degrading to reuse content and design across diverging media forms like print vs. online or desktop vs. mobile. Superior UX requires tight platform integration.
- 21. Frameworks
- 23. Framework What it’s good for Considerations: - Lets you develop once and deploy - Will not be a rich interface many - Restricted in functions - Cross device support widening - Balance between features and reach reach - A balance between rich design - Typically uses HTML5 and and reach JavaScript. - Simplifying the interface whilst enabling functionality - Deployment via app stores
- 24. Yes No
- 25. Native apps
- 28. Native What it’s good for Considerations: - Provides a rich interface - Needs to be developed for each - Uses the full phone feature set device type - Designed around the user - Designs typically can be shared - Optimal performance - Data is a key consideration for - Provides joy of use unconnected use - Can differentiate your brand
- 31. 1.A changing world 2.What are my options 3.The optimum approach 4.Making it happen 5.Considering the future End
- 32. Content Mobile from the ground up Making mobile from pre-existing - Custom approaches - Desktop applied to mobile - Considered context - Stress / break points - Specific content - Reworked content A mobile first content approach An adaptation approach
- 34. Images Typical assets - Logos “What about - Iconography performance. Won’t a - Image galleries lot of images slow - Product shots down the mobile experience?”
- 36. Data The four point plan: 1. Ensure your existing web API Sadly not true: does not bundle unnecessary data with requests for data Users are sympathetic to 2. Expand your API to deal with poor network coverage short, quick requests and hook it into your CMS solution as soon and adjust their as possible 3. FEO is vital. Use mobile expectations when WIFI optimisation and analytics tools isn’t available. to see where your delivery speeds can be improved 4. Track user interaction in your app using an analytics tool
- 37. Resource & Process Avoid digital bloat by monitoring the effectiveness of your channels and adjust your resourcing accordingly “The more channels I run, the more resource I’ll need, right?”
- 39. Work sheet
- 40. 1.A changing world 2.What are my options? 3.The optimum approach 4.Making it happen 5.Considering the future End
- 41. UI flow flow
- 42. The future of shopping
- 43. 1.A changing world 2.What are my options? 3.The optimum approach 4.Making it happen 5.Considering the future End
- 44. About us A communications consultancy specialising in delivering creative solutions for a digital world. – 80 experts – 5 sectors – 5 locations – 21 years A UK Top 10 digital design agency Digital Finance Forum 2011
- 45. We believe in…
- 46. Find our Precedent group and follow us at on LinkedIn for a chance @precedentcomms for to find out more about Precedent news, seminar info our seminars, network, and general observations share ideas and quiz the #PrecSem Precedent team on seminar issues and more!
- 47. Content A quick show of hands… Q. Could you support a new IA, navigation and structure (Mobi)? Q. Could you streamline your content and IA for multi device (Responsive) Q. Could you create content that would support a broad user base (Framework app) Q. Could you create content that would enhance advanced functionality (Native app)
Editor's Notes
- #3: Ask the audience what app means to them? (suggest if they don’t repsond)
- #8: Your 4 options: mobi, responsive, framework, native
- #11: Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reachJump to JC machine
- #16: One website, that flows across multiple devicesBrowser basedSame content delivered to all usersJump to JC machine to show squishy thrive
- #17: CLCHIlly coffee
- #18: Westminster abby
- #19: Baystate. Actually telling me off….Lesson to remember that all this squishy stuff is for show. Don’t try and view it small on a desktop browser.
- #21: Responsive frameworks such as The Golden Grid system
- #22: One website, that flows across multiple devicesBrowser basedSame content delivered to all users
- #23: Examples of some framework providers
- #25: Jump over to JC machine for voting on mobiles
- #26: Mobile browser basedStandard mobiWeb app mobi
- #27: Whisper sync – Apple changing the in app purchase policy (amazon mobi to the rescue)
- #28: Use on the go
- #30: Take them to school demo…
- #33: There are two approachesEither is fine2. Is probably the most comfortable fit given you already have Corporate website; Microsite ; Campaign site is fine
- #34: Going the long way round is cool tooChallenging yourself to try get those desktop element working in the mobile contextLINK OUT TO SHOW CRAP GOLF APP (result of taking the easy route and plapping same content in)
- #35: You will likely have at least some imagery in a mobile solution and you want them to look their best. These will range from your logo and iconography to richer elements like image galleries and product shots.
- #36: Link to these and to BLAZE
- #37: You will likely have at least some imagery in a mobile solution and you want them to look their best. These will range from your logo and iconography to richer elements like image galleries and product shots.
- #38: Digital bloat
- #39: Scrum for mobile solutions
- #43: http://www.youtube.com/watch?v=fGaVFRzTTP4
- #48: You will likely have at least some imagery in a mobile solution and you want them to look their best. These will range from your logo and iconography to richer elements like image galleries and product shots.