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.

Seminar: Putting Mobile First

472 views

Published on

John Campbell and Mark ba

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Seminar: Putting Mobile First

  1. 1. Putting mobile first24th May, 2012John Campbell Mark BaillieHead of mobile Creative Director@precedentcomms #PrecSem
  2. 2. app
  3. 3. 1.A changing world2.What are my options3.The optimum approach4.Making it happen5.Considering the futureEnd
  4. 4. 1.A changing world2.What are my options?3.The optimum approach4.Making it happen5.Considering the futureEnd
  5. 5. MobiResponsiveFramework Native
  6. 6. 1.A changing world2.What are my options?3.The optimum approach4.Making it happen5.Considering the futureEnd
  7. 7. Mobi
  8. 8. UI flow flow
  9. 9. MobiWhat 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
  10. 10. Responsive
  11. 11. ResponsiveWhat 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 chosenJakob Neilsen – 21st May 2012Its cheap but degrading to reuse content and design across divergingmedia forms like print vs. online or desktop vs. mobile. Superior UXrequires tight platform integration.
  12. 12. Frameworks
  13. 13. FrameworkWhat 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
  14. 14. Yes No
  15. 15. Native apps
  16. 16. NativeWhat 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
  17. 17. 1.A changing world2.What are my options3.The optimum approach4.Making it happen5.Considering the futureEnd
  18. 18. ContentMobile from the ground up Making mobile from pre-existing- Custom approaches - Desktop applied to mobile- Considered context - Stress / break points- Specific content - Reworked contentA mobile first content approach An adaptation approach
  19. 19. ImagesTypical assets- Logos “What about- Iconography performance. Won’t a- Image galleries lot of images slow- Product shots down the mobile experience?”
  20. 20. DataThe four point plan:1. Ensure your existing web API Sadly not true: does not bundle unnecessary data with requests for data Users are sympathetic to2. 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 possible3. FEO is vital. Use mobile expectations when WIFI optimisation and analytics tools isn’t available. to see where your delivery speeds can be improved4. Track user interaction in your app using an analytics tool
  21. 21. 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’llneed, right?”
  22. 22. Work sheet
  23. 23. 1.A changing world2.What are my options?3.The optimum approach4.Making it happen5.Considering the futureEnd
  24. 24. UI flow flow
  25. 25. The future of shopping
  26. 26. 1.A changing world2.What are my options?3.The optimum approach4.Making it happen5.Considering the futureEnd
  27. 27. About usA communications consultancyspecialising in deliveringcreative solutions for a digitalworld. – 80 experts – 5 sectors – 5 locations – 21 yearsA UK Top 10 digital design agencyDigital Finance Forum 2011
  28. 28. We believe in…
  29. 29. Find our Precedent group and follow us aton LinkedIn for a chance @precedentcomms forto find out more about Precedent news, seminar infoour seminars, network, and general observationsshare ideas and quiz the #PrecSemPrecedent team onseminar issues and more!
  30. 30. ContentA 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)

×