Your SlideShare is downloading. ×
Designing for Mobile Devices
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Designing forMobile DevicesMobile Devices Maria 11 July 2012 - COPA, Oxon Digital
  • 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. Why is mobile exciting?• Immediate publishing• Geo-specific information• Information at point of interest• Truly personal device• Inbuilt payment
  • 4. Mobile Devices• Android• iPhone• Windows Mobile• Blackberry• Nokia
  • 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. Types of Mobile Delivery• Native App• Hybrid App• Web (or Browser) App• Mobile Optimised Website• Responsive Website
  • 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. 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. 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. 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. 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. 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. Planning• Information Architecture• Creating a Sitemap• Developing Wireframes• Prototype
  • 14. Sitemap
  • 15. Wireframes
  • 16. Visual Design• Look and Feel• User Interface• Layout• Typography• Graphics• Photos
  • 17. Design types
  • 18. Visual metaphors - icons
  • 19. Delivery• Wireframes with Mark Up• Layered Photoshop files (or sliced)• Icons to correct size• Screen graphics as .pngs or .svg format
  • 20. Icon sizes
  • 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. Responsive Web Design
  • 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. Thank you.