Designing for Mobile DevicesPresentation Transcript
Designing forMobile DevicesMobile Devices Maria Robertsonwww.definemedia.co.uk 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
Mobile Devices• Android• iPhone• Windows Mobile• Blackberry• Nokia
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
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
Visual Design• Look and Feel• User Interface• Layout• Typography• Graphics• Photos
Visual metaphors - icons
Delivery• Wireframes with Mark Up• Layered Photoshop files (or sliced)• Icons to correct size• Screen graphics as .pngs or .svg format
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