Designing for Mobile Devices
Upcoming SlideShare
Loading in...5

Designing for Mobile Devices






Total Views
Views on SlideShare
Embed Views



1 Embed 36 36



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Designing for Mobile Devices Designing for Mobile Devices Presentation Transcript

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