Download - Designing for Mobile Devices
Designing forMobile Devices
Maria Robertsonwww.definemedia.co.uk
11 July 2012 - COPA, Oxon Digital
Introduction
Design is changing rapidly from desktop to mobile platforms, billions of apps are now downloaded daily,
and it's anticipated that by 2014 mobile browsingwill 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 PlatformsDevice Type Platform Browser Owner
iPhone, iPad Proprietary iOS Safari Apple
Android Phone Open Android Android Browser Google
Windows Phone Open Windows Mobile Explorer Microsoft
Blackberry Proprietary Blackberry OS Opera RIM
Nokia Phones OpenMultiple (Symbian,
MeeGo, MaeMo, S60 )Nokia Browser Nokia
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 nativehardware features
• Distributed through app store
http://www.phonegap.co.uk
Mobile Web App
• Built with familiar web technologies(HTML / CSS / javascript)
• Uses devices browser and is made toresemble a native apps functionality
• Can be accessed by most mobile device
• No approval needed by app store
http://www.jquerymobile.com
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 timeall 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 accessibilitycompliance 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 responsive layouts. 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.
Benefits of ResponsiveWeb Design
• Optimum user experience across all devices
• 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.
http://www.definemedia.co.uk