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