Designing for Mobile Devices


Published on

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing for Mobile Devices

  1. 1. Designing forMobile DevicesMobile Devices Maria 11 July 2012 - COPA, Oxon Digital
  2. 2. IntroductionDesign is changing rapidly from desktop to mobile platforms, billions of apps are now downloaded daily, and its anticipated that by 2014 mobile browsing will have outstripped desktop browsing.
  3. 3. Why is mobile exciting?• Immediate publishing• Geo-specific information• Information at point of interest• Truly personal device• Inbuilt payment
  4. 4. Mobile Devices• Android• iPhone• Windows Mobile• Blackberry• Nokia
  5. 5. Mobile Devices and Platforms Device Type Platform Browser Owner iPhone, iPad Proprietary iOS Safari AppleAndroid Phone Open Android Android Browser GoogleWindows Phone Open Windows Mobile Explorer Microsoft Blackberry Proprietary Blackberry OS Opera RIM Multiple (Symbian,Nokia Phones Open Nokia Browser Nokia MeeGo, MaeMo, S60 )
  6. 6. Types of Mobile Delivery• Native App• Hybrid App• Web (or Browser) App• Mobile Optimised Website• Responsive Website
  7. 7. The Native App• Built for devices native programming language• Fast and reliable• Access to native hardware• Ability to store data offline• Distributed through app store• Approval required by third party
  8. 8. Hybrid App• Built with familiar web technologies (HTML / CSS / javascript) then ‘wrapped’ to act like a native app• Uses a single codebase• Access to some, but not all native hardware features• Distributed through app store
  9. 9. Mobile Web App• Built with familiar web technologies (HTML / CSS / javascript)• Uses devices browser and is made to resemble a native apps functionality• Can be accessed by most mobile device• No approval needed by app store
  10. 10. Mobile Website• A browser based website, optimised for viewing on a mobile screen• Operates in a similar way to a website but more efficiently designed for mobile• A responsive website repurposes content with css styling and @media query• Flexible approach, efficient use of content
  11. 11. Designing for MobileMobile offers some unique design challenges, designing for an audience on the move, with limited time all fitting in to a small screen size (320 x 480 px). (graphic)
  12. 12. Research• What is the primary use of your app or website?• Who are the users and what are their circumstances?• Which browsers are you designing for?• What range of devices are you designing for?• Are there any specific accessibility compliance criteria ?
  13. 13. Planning• Information Architecture• Creating a Sitemap• Developing Wireframes• Prototype
  14. 14. Sitemap
  15. 15. Wireframes
  16. 16. Visual Design• Look and Feel• User Interface• Layout• Typography• Graphics• Photos
  17. 17. Design types
  18. 18. Visual metaphors - icons
  19. 19. Delivery• Wireframes with Mark Up• Layered Photoshop files (or sliced)• Icons to correct size• Screen graphics as .pngs or .svg format
  20. 20. Icon sizes
  21. 21. Responsive Web Design Finally, a recent hot topics in web design is the use of responsivelayouts. Responsive design adapt the content your page according to the device you are viewing on using @media query. Most responsive designs include at least three sets of style rules, one for desktop, one for mobile and one for tablets.
  22. 22. Responsive Web Design
  23. 23. Benefits of Responsive Web Design Web Design all devices• Optimum user experience across• Uses the same content across all sites, one update and all sites change• Same links work across all devices• Endorsed by Google for SEO• Flexible for future screen sizes
  24. 24. Thank you.