SlideShare a Scribd company logo
Designing for
Mobile Devices
Mobile Devices
  Maria Robertson
www.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 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         Apple

Android Phone     Open              Android         Android Browser   Google

Windows 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
    http://www.phonegap.co.uk
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

    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 Mobile
Mobile 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 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.
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.


http://www.definemedia.co.uk

More Related Content

What's hot

MW2015: Bring It On: Ensuring the success of BYOD programming in the museum e...
MW2015: Bring It On: Ensuring the success of BYOD programming in the museum e...MW2015: Bring It On: Ensuring the success of BYOD programming in the museum e...
MW2015: Bring It On: Ensuring the success of BYOD programming in the museum e...
scottsayre
 
TERMINALFOUR t44u 2011- Make it mobile, an introduction
TERMINALFOUR t44u 2011- Make it mobile, an introductionTERMINALFOUR t44u 2011- Make it mobile, an introduction
TERMINALFOUR t44u 2011- Make it mobile, an introductionTerminalfour
 
Levitum - Working With Us
Levitum - Working With UsLevitum - Working With Us
Levitum - Working With Us
Levitum
 
Leveraging Technology
Leveraging TechnologyLeveraging Technology
Leveraging TechnologyJessica Levin
 
chapter2
chapter2chapter2
chapter2
Pon Tovave
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptJonathan Stark
 
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)Guust Nieuwenhuis
 
Museum BYOD Variable NMC Future of Museums 2014
Museum BYOD Variable NMC Future of Museums 2014Museum BYOD Variable NMC Future of Museums 2014
Museum BYOD Variable NMC Future of Museums 2014
scottsayre
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
Tim Wright
 
Faculty of Engineering - Tanta University- Programmong world
Faculty of Engineering - Tanta University- Programmong worldFaculty of Engineering - Tanta University- Programmong world
Faculty of Engineering - Tanta University- Programmong world
Mostafa Elgamala
 
Rame mobile conference
Rame mobile conferenceRame mobile conference
Rame mobile conferenceAndrew Walker
 
Mobile web vs. native apps: It's not about technology, it's about psychology
Mobile web vs. native apps: It's not about technology, it's about psychologyMobile web vs. native apps: It's not about technology, it's about psychology
Mobile web vs. native apps: It's not about technology, it's about psychology
iQcontent
 
Share point 2010 , better place study case
Share point 2010 , better place   study caseShare point 2010 , better place   study case
Share point 2010 , better place study case
shmulik-tal
 
esaimen
esaimenesaimen
esaimen
mikhwal
 
Building Future Friendly Experiences
Building Future Friendly ExperiencesBuilding Future Friendly Experiences
Building Future Friendly Experiences
ISITE Design is now Connective DX
 
BookBrewer
BookBrewerBookBrewer
BookBrewer
Dan Pacheco
 
1A - MOBILIZING YOUR GIS - USING CROSS PLATFORM MOBILE APPLICATION DEVELOPMEN...
1A - MOBILIZING YOUR GIS - USING CROSS PLATFORM MOBILE APPLICATION DEVELOPMEN...1A - MOBILIZING YOUR GIS - USING CROSS PLATFORM MOBILE APPLICATION DEVELOPMEN...
1A - MOBILIZING YOUR GIS - USING CROSS PLATFORM MOBILE APPLICATION DEVELOPMEN...
Wisconsin Land Information Association
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
Woody Pewitt
 

What's hot (20)

iOS 9 (Seminar)
iOS 9 (Seminar)iOS 9 (Seminar)
iOS 9 (Seminar)
 
MW2015: Bring It On: Ensuring the success of BYOD programming in the museum e...
MW2015: Bring It On: Ensuring the success of BYOD programming in the museum e...MW2015: Bring It On: Ensuring the success of BYOD programming in the museum e...
MW2015: Bring It On: Ensuring the success of BYOD programming in the museum e...
 
TERMINALFOUR t44u 2011- Make it mobile, an introduction
TERMINALFOUR t44u 2011- Make it mobile, an introductionTERMINALFOUR t44u 2011- Make it mobile, an introduction
TERMINALFOUR t44u 2011- Make it mobile, an introduction
 
Levitum - Working With Us
Levitum - Working With UsLevitum - Working With Us
Levitum - Working With Us
 
Leveraging Technology
Leveraging TechnologyLeveraging Technology
Leveraging Technology
 
chapter2
chapter2chapter2
chapter2
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
 
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
 
Museum BYOD Variable NMC Future of Museums 2014
Museum BYOD Variable NMC Future of Museums 2014Museum BYOD Variable NMC Future of Museums 2014
Museum BYOD Variable NMC Future of Museums 2014
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
 
Faculty of Engineering - Tanta University- Programmong world
Faculty of Engineering - Tanta University- Programmong worldFaculty of Engineering - Tanta University- Programmong world
Faculty of Engineering - Tanta University- Programmong world
 
Rame mobile conference
Rame mobile conferenceRame mobile conference
Rame mobile conference
 
Mobile web vs. native apps: It's not about technology, it's about psychology
Mobile web vs. native apps: It's not about technology, it's about psychologyMobile web vs. native apps: It's not about technology, it's about psychology
Mobile web vs. native apps: It's not about technology, it's about psychology
 
Share point 2010 , better place study case
Share point 2010 , better place   study caseShare point 2010 , better place   study case
Share point 2010 , better place study case
 
esaimen
esaimenesaimen
esaimen
 
Building Future Friendly Experiences
Building Future Friendly ExperiencesBuilding Future Friendly Experiences
Building Future Friendly Experiences
 
BookBrewer
BookBrewerBookBrewer
BookBrewer
 
1A - MOBILIZING YOUR GIS - USING CROSS PLATFORM MOBILE APPLICATION DEVELOPMEN...
1A - MOBILIZING YOUR GIS - USING CROSS PLATFORM MOBILE APPLICATION DEVELOPMEN...1A - MOBILIZING YOUR GIS - USING CROSS PLATFORM MOBILE APPLICATION DEVELOPMEN...
1A - MOBILIZING YOUR GIS - USING CROSS PLATFORM MOBILE APPLICATION DEVELOPMEN...
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Presentation1
Presentation1Presentation1
Presentation1
 

Similar to Designing for Mobile Devices

Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with IonicMaulik Bamania
 
Engage 2013 - Mobile solution strategies
Engage 2013 - Mobile solution strategiesEngage 2013 - Mobile solution strategies
Engage 2013 - Mobile solution strategies
Avtex
 
Consider Starting Small
Consider Starting SmallConsider Starting Small
Consider Starting Small
Andrew Smith
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Ermias Bayu
 
Mobile JS Frameworks
Mobile JS FrameworksMobile JS Frameworks
Mobile JS Frameworks
Ibrahim Ersoy
 
Possible_EOnline_responsive_design_sxsw2013
Possible_EOnline_responsive_design_sxsw2013Possible_EOnline_responsive_design_sxsw2013
Possible_EOnline_responsive_design_sxsw2013asupawanich
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
Reto Meier
 
Beyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and TabletsBeyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and Tablets
Webvanta
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
Manesh Lad
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
Mahmoud Farrag
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
saritasingh19866
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010
Tom Deryckere
 
Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know Code
Carli Spina
 
Adapting Expectations to Fit a Mobile Workflow
Adapting Expectations to Fit a Mobile WorkflowAdapting Expectations to Fit a Mobile Workflow
Adapting Expectations to Fit a Mobile WorkflowJoseph Labrecque
 
Rwd Testing Baiju Joseph
Rwd Testing Baiju JosephRwd Testing Baiju Joseph
Rwd Testing Baiju Joseph
vodQA
 
RWD Testing - Baiju Joseph
RWD Testing - Baiju JosephRWD Testing - Baiju Joseph
RWD Testing - Baiju Joseph
Thoughtworks
 
Creating Large-Scale Responsive Websites
Creating Large-Scale Responsive WebsitesCreating Large-Scale Responsive Websites
Creating Large-Scale Responsive Websites
Keith Doyle
 

Similar to Designing for Mobile Devices (20)

Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with Ionic
 
Engage 2013 - Mobile solution strategies
Engage 2013 - Mobile solution strategiesEngage 2013 - Mobile solution strategies
Engage 2013 - Mobile solution strategies
 
Consider Starting Small
Consider Starting SmallConsider Starting Small
Consider Starting Small
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
 
Mobile JS Frameworks
Mobile JS FrameworksMobile JS Frameworks
Mobile JS Frameworks
 
Possible_EOnline_responsive_design_sxsw2013
Possible_EOnline_responsive_design_sxsw2013Possible_EOnline_responsive_design_sxsw2013
Possible_EOnline_responsive_design_sxsw2013
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Beyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and TabletsBeyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and Tablets
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Mobile applications development
Mobile applications developmentMobile applications development
Mobile applications development
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010
 
Drupal & Mobile
Drupal & MobileDrupal & Mobile
Drupal & Mobile
 
Simple mobile Websites
Simple mobile WebsitesSimple mobile Websites
Simple mobile Websites
 
Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know Code
 
Adapting Expectations to Fit a Mobile Workflow
Adapting Expectations to Fit a Mobile WorkflowAdapting Expectations to Fit a Mobile Workflow
Adapting Expectations to Fit a Mobile Workflow
 
Rwd Testing Baiju Joseph
Rwd Testing Baiju JosephRwd Testing Baiju Joseph
Rwd Testing Baiju Joseph
 
RWD Testing - Baiju Joseph
RWD Testing - Baiju JosephRWD Testing - Baiju Joseph
RWD Testing - Baiju Joseph
 
Creating Large-Scale Responsive Websites
Creating Large-Scale Responsive WebsitesCreating Large-Scale Responsive Websites
Creating Large-Scale Responsive Websites
 

Recently uploaded

State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 

Recently uploaded (20)

State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 

Designing for Mobile Devices

  • 1. Designing for Mobile Devices Mobile Devices Maria Robertson www.definemedia.co.uk 11 July 2012 - COPA, Oxon Digital
  • 2. 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 browsing will have outstripped desktop browsing.
  • 3. Why is mobile exciting? • Immediate publishing • Geo-specific information • Information at point of interest • Truly personal device • Inbuilt payment
  • 4. Mobile Devices • Android • iPhone • Windows Mobile • Blackberry • Nokia
  • 5. Mobile Devices and Platforms Device 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 Multiple (Symbian, Nokia Phones Open Nokia Browser Nokia MeeGo, MaeMo, S60 )
  • 6. Types of Mobile Delivery • Native App • Hybrid App • Web (or Browser) App • Mobile Optimised Website • Responsive Website
  • 7. 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
  • 8. 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 http://www.phonegap.co.uk
  • 9. 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 http://www.jquerymobile.com
  • 10. 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
  • 11. Designing for Mobile Mobile 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)
  • 12. 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 ?
  • 13. Planning • Information Architecture • Creating a Sitemap • Developing Wireframes • Prototype
  • 16. Visual Design • Look and Feel • User Interface • Layout • Typography • Graphics • Photos
  • 19. Delivery • Wireframes with Mark Up • Layered Photoshop files (or sliced) • Icons to correct size • Screen graphics as .pngs or .svg format
  • 21. 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.
  • 23. 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