infoShare 2014: Maciej Saganowski, Designing Mobile Services.
Designing for Mobile Devices
-
Upload
oxondigital -
Category
Technology
-
view
443 -
download
4
Transcript of Designing for Mobile Devices
![Page 1: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/1.jpg)
Designing forMobile Devices
Maria Robertsonwww.definemedia.co.uk
11 July 2012 - COPA, Oxon Digital
![Page 2: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/2.jpg)
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.
![Page 3: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/3.jpg)
Why is mobile exciting?
• Immediate publishing
• Geo-specific information
• Information at point of interest
• Truly personal device
• Inbuilt payment
![Page 4: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/4.jpg)
Mobile Devices
• Android
• iPhone
• Windows Mobile
• Blackberry
• Nokia
![Page 5: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/5.jpg)
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
![Page 6: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/6.jpg)
Types of Mobile Delivery
• Native App
• Hybrid App
• Web (or Browser) App
• Mobile Optimised Website
• Responsive Website
![Page 7: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/7.jpg)
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
![Page 8: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/8.jpg)
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
![Page 9: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/9.jpg)
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
![Page 10: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/10.jpg)
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
![Page 11: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/11.jpg)
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)
![Page 12: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/12.jpg)
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 ?
![Page 13: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/13.jpg)
Planning
• Information Architecture
• Creating a Sitemap
• Developing Wireframes
• Prototype
![Page 14: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/14.jpg)
Sitemap
![Page 15: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/15.jpg)
Wireframes
![Page 16: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/16.jpg)
Visual Design
• Look and Feel
• User Interface
• Layout
• Typography
• Graphics
• Photos
![Page 17: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/17.jpg)
Design types
![Page 18: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/18.jpg)
Visual metaphors - icons
![Page 19: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/19.jpg)
Delivery
• Wireframes with Mark Up
• Layered Photoshop files (or sliced)
• Icons to correct size
• Screen graphics as .pngs or .svg format
![Page 20: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/20.jpg)
Icon sizes
![Page 21: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/21.jpg)
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.
![Page 22: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/22.jpg)
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
![Page 23: Designing for Mobile Devices](https://reader037.fdocument.pub/reader037/viewer/2022110118/554d20c9b4c905c5208b4aa7/html5/thumbnails/23.jpg)
Thank you.
http://www.definemedia.co.uk