SlideShare a Scribd company logo
DESIGNING
MOBILE
EXPERIENCES
with Brian Fling
Available
NOW
http://mobiledesign.org
HOUSEKEEPING
mobiledesign.org
mobiledesign.org/workshop
flingmedia.com
slideshare.net/fling
linkedin.com/in/fling
@fling
The Layers
  of the
  Mobile
Experience
IDEA   The first thing we need is an idea that inspires us.
NEEDS & GOALS      Identify a basic need with our desired user.

   IDEA         The first thing we need is an idea that inspires us.
CONTEXT        The circumstances where information adds value.

NEEDS & GOALS      Identify a basic need with our desired user.

   IDEA         The first thing we need is an idea that inspires us.
STRATEGY         How we can add value to the business.

 CONTEXT        The circumstances where information adds value.

NEEDS & GOALS      Identify a basic need with our desired user.

   IDEA         The first thing we need is an idea that inspires us.
DEVICE PLAN      Choose the devices that best serves our audience.

  STRATEGY         How we can add value to the business.

 CONTEXT        The circumstances where information adds value.

NEEDS & GOALS      Identify a basic need with our desired user.

   IDEA         The first thing we need is an idea that inspires us.
DESIGN         Create a user experience based around needs.


DEVICE PLAN       Choose the devices that best serves our audience.

  STRATEGY          How we can add value to the business.

 CONTEXT         The circumstances where information adds value.

NEEDS & GOALS       Identify a basic need with our desired user.

   IDEA          The first thing we need is an idea that inspires us.
PROTOTYPE      Test the experience within the context.

  DESIGN         Create a user experience based around needs.


 DEVICE PLAN        Choose the devices that best serves our audience.

   STRATEGY           How we can add value to the business.

  CONTEXT          The circumstances where information adds value.

 NEEDS & GOALS        Identify a basic need with our desired user.

    IDEA          The first thing we need is an idea that inspires us.
DEVELOPMENT       Put all the pieces together.

PROTOTYPE      Test the experience within the context.

  DESIGN         Create a user experience based around needs.


 DEVICE PLAN        Choose the devices that best serves our audience.

   STRATEGY           How we can add value to the business.

  CONTEXT          The circumstances where information adds value.

 NEEDS & GOALS        Identify a basic need with our desired user.

    IDEA          The first thing we need is an idea that inspires us.
TESTING        And test, and test, and test some more.


DEVELOPMENT       Put all the pieces together.

PROTOTYPE      Test the experience within the context.

  DESIGN         Create a user experience based around needs.


 DEVICE PLAN        Choose the devices that best serves our audience.

   STRATEGY           How we can add value to the business.

  CONTEXT          The circumstances where information adds value.

 NEEDS & GOALS        Identify a basic need with our desired user.

    IDEA          The first thing we need is an idea that inspires us.
OPTIMIZATION        Reduce all assets to its lowest possible size.


  TESTING        And test, and test, and test some more.


DEVELOPMENT       Put all the pieces together.

PROTOTYPE      Test the experience within the context.

  DESIGN         Create a user experience based around needs.


 DEVICE PLAN        Choose the devices that best serves our audience.

   STRATEGY           How we can add value to the business.

  CONTEXT          The circumstances where information adds value.

 NEEDS & GOALS        Identify a basic need with our desired user.

    IDEA          The first thing we need is an idea that inspires us.
PORTING            Adapt for other devices that fit our strategy.


OPTIMIZATION        Reduce all assets to its lowest possible size.


  TESTING        And test, and test, and test some more.


DEVELOPMENT       Put all the pieces together.

PROTOTYPE      Test the experience within the context.

  DESIGN         Create a user experience based around needs.


 DEVICE PLAN        Choose the devices that best serves our audience.

   STRATEGY           How we can add value to the business.

  CONTEXT          The circumstances where information adds value.

 NEEDS & GOALS        Identify a basic need with our desired user.

    IDEA          The first thing we need is an idea that inspires us.
Discussion
What do you want to learn
today?
• Is it to create visual experiences?
• Is it to take advantage of the mobile
  opportunity?
• Is it to figure out how to make sense of
  this new medium?
• Is it something more?
• All of the above?
What is Mobile
  Design?
JARGON ALERT

Mobile Design
The creation of user experiences
for the mobile context.
It doesn’t start
with Photoshop
Why
Mobile?
What’s Next?
Generation Y
97% own a computer
94% own a mobile phone
76% use Instant Messaging
69% use Facebook
56% own an iPod
Generation Z
 Born in the modern digital
age. Technology is infused at
           birth.
Generation Z
 Born in the modern digital
age. Technology is infused at
           birth.

   The iPhone is to them
Generation Z
 Born in the modern digital
age. Technology is infused at
           birth.

   The iPhone is to them
as the Macintosh was to us.
The Mobile Generation




2009 2010 2011 2012 2013 2014 2015

      Everyone Else




                              source: us census bureau
In less five years, the
  mobile generation
   could have more
buying power than all
 other demographics
Discussion
Why are you here?
• What is it about mobile that appeals to
  you the most?
• What do you see as being the obstacles?
  (your understanding? your company? the
  technology? etc.)
• What are the biggest opportunities?
New
Rules
Rule
Forg #1
     et W
 You     hat
     Thin
You       k
    Kno
        w
Android
           7%

              Java ME
                7%

iPhone         Symbian
 69%             6%

            Windows Mobile
                 5%

           Blackberry
               3%
            Palm
             2%
Rule
Belie #2
     ve W
You        hat
    See,
Wha Not
     t You
  Read
Experiment
Share your
 findings
Rule
 Con #3
    strai
Nev       nts
   er C
        ome
  First
vs.
Rule
  Focu      #4
       s on
 Con
      text,
Goa
   ls an
 Nee     d
     ds
Rule
  You       #5
       Can
  Supp ’t
Ever    ort
     ythin
          g
Android
           7%

              Java ME
                7%

iPhone         Symbian
 69%             6%

            Windows Mobile
                 5%

           Blackberry
               3%
            Palm
             2%
Rule
           #6
  Don
Con    ’t
   vert
Crea      ,
     te
Rule
       #
 Keep   7

Simp  It
     le
Needs
  &
Goals
JARGON ALERT

Needs
The circumstances in which
something is necessary, or that
require some course of action.
Abraham Harold Maslow
(April 1, 1908 – June 8, 1970)
was an American psychologist.
He is noted for his concept-
ualization of a "hierarchy of
human needs", and is
considered the founder of
humanistic psychology.
JARGON ALERT

Goals
The object of a person's ambition
or e ort; an aim or desired result
Te
         ls
      oa




                       ch
   sG




                       nic
 es




                           al
              Sweet
sin




                              G
                             oa
               Spot
Bu




                              ls
          User Goals
JARGON ALERT
Neurolinguistic
Programming
A model of interpersonal
communication chiefly concerned with
the relationship between successful
patterns of behavior and the subjective
experiences underlying them.
Lear
                ni
     Aud            ng T
                        ype
   20%   itory
       o    f all
 conn
      ect w          peop
   is al ith oth            le
conn l they n ers verb
     ecte       eed
          d an      to fe ally
       with    d pro     el
            othe ductive
                 rs
Lear
                   ni  ng T
         Visu              ype
     35%      al
             of al
   Bein
         g ab
                   l     peop
  illus
        trate
              le to
                     see c
                                  le
char
      ts an d as dia oncepts
for t       d gra       gram
      his m         phs        s or
            ajor        is he
                 ity le       lpful
            type        arni
                  .          ng
Lear
    Kine        ni   ng T
                         ype
        sthe
   45  % of
               all p
                           tic
 inco
      rpor             eopl
and
     hand
           ate m
                 uscl          e
  proc     -eye      e me
       ess a movem mory
            nd re       ent t
       infor      tain        o
             mat       new
                 ion
Exercise
Needs & Goals
• Let’s examine BBC
• What human needs does the BBC serve?
• What are the goals of the BBC’s
  audience?
• Does the BBC utilize neurolinguistic
  programming models? If so, how?
• How do we document our findings?
Context
JARGON ALERT

Context
The circumstances that form the
setting for an event, statement, or
idea, and in terms of which it can
be fully understood and assessed.
Context with a capital C
Context   is how the user will derive
 BIG C    value from something
          they are currently doing.
          In other words, the
          understanding of
          circumstance. It is the
          mental model they will
          establish to form
          understanding.
The mode, medium, or
context     environment in which we
 little c   perform a task or the
            circumstances of
            understanding.
            • our present location
            • our device of access
            • our state of mind
My present location.
Physical
           My physical context will
Context    dictate how I access
           information and therefore
           how I derive value from it.
My device of access.
 Media
          The media context isn’t
Context   just about the immediacy
          of the information we
          receive
          How to engage people in
          real time.
Our present state of
Modal     mind.
Context   • Where should I eat?
          • Should I buy it now or
            later?
          • Is this safe or not?
Radio                    TV




    Live                                                Billboard




                         ry




                                            Vi
                       to




                                               su
                    di




                                              al
                    Au


Word of                                                      Print Ad
Mouth

                              Kinesthetic


           Mobile                                   Events
           Device
                                                                        QR
WAP


             Bluetooth
                                             Radio                  TV

                                                                                                          SMS


      SMS


                             Live                                              Billboard

                                                                                                                WAP




                                                ry




                                                                   Vi
                                              to
MMS




                                                                      su
                                             di




                                                                     al
                                             Au
                                                                                                                 QR Cod
                         Word of                                                    Print Ad
                         Mouth
SMS


                                                     Kinesthetic
                                                                                                                SMS




       WAP                          Mobile                                 Events
                                    Device
                                                                                                     QR Code
                                                       Website
                   MMS
WAP
                       Discuss                                                                  IVR
                                                                   SMS                                                                          Buy

                                                                                                                SMS

                                                  IVR
             Notify                                                                                                                                        Send to
                                                                                                                                                            Friend
                                                                                                                             WAP


                                   Bluetooth
                                                                         Radio                 TV
  Send to
   Friend                                                                                                                                                             Notify
                                                                                                                                        SMS


                            SMS


                                                   Live                                                       Billboard
d to                                                                                                                                                                           B
 nd
                                                                                                                                                WAP




                                                                            ry




                                                                                               Vi
                                                                          to
                      MMS




                                                                                               su
                                                                         di




                                                                                                al
                                                                        Au
                                                                                                                                                                               W
                                                                                                                                                 QR Code
                                               Word of                                                            Print Ad
                                               Mouth
                      SMS

ify
                                                                                 Kinesthetic                                                                               No
                                                                                                                                               SMS




                             WAP                               Mobile                                 Events
       Buy                                                     Device                                                                                                Send to
                                                                                                                                                                      Friend
                                                                                                                                   QR Code
                                                                                   Website
                                         MMS
             Join
                                                                                                                                                           Notify
                                                                                                                      SMS


                                                         SMS
                                                                                                      Email
                      WAP Site
                                                                          MMS                                                                WAP Site
Join            Down
                                                                             Notify                             load

                                                            Vote                                                                   Vote


                                            Down
                                            load                                                                                                 Notify



                                                                                          WAP
                           Discuss                                                                           IVR
                                                                       SMS                                                                                         Buy

                                                                                                                                 SMS

                                                      IVR
                 Notify                                                                                                                                                       Send to
                                                                                                                                                                               Friend
                                                                                                                                                WAP


                                       Bluetooth
                                                                              Radio                        TV
       Send to
        Friend                                                                                                                                                                           Notify
                                                                                                                                                           SMS


                                SMS


                                                       Live                                                                    Billboard
Send to                                                                                                                                                                                           Buy
 Friend
                                                                                                                                                                   WAP




                                                                                    ry




                                                                                                           Vi
                                                                                   to
                          MMS




                                                                                                           su
                                                                              di




                                                                                                            al
                                                                            Au
Join                                                                                                                                                                                              WAP Site
                                                                                                                                                                    QR Code
                                                   Word of                                                                          Print Ad
                                                   Mouth
                          SMS

Notify
                                                                                         Kinesthetic                                                                                          Notify
                                                                                                                                                                  SMS




                                 WAP                               Mobile                                              Events
          Buy                                                      Device                                                                                                               Send to
                                                                                                                                                                                         Friend
                                                                                                                                                      QR Code
                                                                                           Website
                                             MMS
                 Join
                                                                                                                                                                              Notify
                                                                                                                                          SMS


                                                             SMS
                                                                                                                       Email
                          WAP Site
                                                                                   MMS                                                                          WAP Site
                                                                                                     SMS


                                        Send to
                                         Friend                                                                                                 Send to
                                                                                                                                                 Friend


                                                       Notify
                                                                                                                                 Notify

                                                                            Post                            WAP Site
                                                                                           Send to
                                                                                            Friend
Exercise
Define the Context
• Again lets use the BBC as our example
• What are the physical contexts?
• What are the media contexts?
• What are the modal contexts?
• What is the BIG Context?
• What are some of the possible business
  strategies simply by addressing
  context?
Types
of Apps
Type
      s
App       of A
              pps
    licat
 Med      ion
      ium
SMS



Experiences where the goal
is to alert users of new
information.
WEBSITE



Experiences that provide
the user with simple
informational data.
WIDGETS



Experiences that are based
on an existing multi-
platform framework.
WEB
  APPS



When you want to employ a
cross-platform application
strategy.
NATIVE
 APPS



Experiences that take
advantage of the native
features of the device.
GAMES




Experiences that entertain.
MEDIUM MATRIX
               Device                   User                    Offline    Device                   Long Term
                        Complexity                Language                           Initial Cost
              Support                Experience                Support    Features                     Cost


SMS             All       Simple      Limited        N/A         No        None         Low           High


Mobile
                All       Simple      Limited       HTML         No        None         Low           Low
Websites


Mobile
Web            Some      Medium        Great        HTML       Limited    Limited       Low           Low
Widgets

Mobile
                                                  HTML, CSS,
Web            Some      Medium        Great                   Limited    Limited       Mid           Low
                                                     JS
Application


Native
                All      Complex      Excellent    Various       Yes        Yes         High          Mid
Application


Games           All      Complex      Excellent    Various       Yes        Yes      Very High        High
Type
      s
App       of A
              pps
    licat
 Con      ion
     text
UTILITY




A simple at-a-glance tool.
LOCALE




An application based on
the physical context.
INFORM
 ATIVE



An application meant to
inform.
PRODUC
 TIVITY



Meant to increase our
available time.
IMMER-
  SIVE



An application meant to
distract or entertain.
CONTEXT MATRIX
               User Experience Type         Task Type          Task Duration   Combine with



   Utility         At-a-Glance          Information Recall      Very Short      Immersive



  Locale          Location-based      Contextual Information      Quick         Immersive



Informative       Content-based         Seek Information          Quick           Locale



Productivity        Task-based        Content Management           Long            Utility



Immersive           Full Screen           Entertainment            Long        Utility, Locale
Mobile
 IA
KEEP IT
SIMPLE
SITEMAPS
CLICKSTREAMS
!"#$"




  !      -&   (%)*                ./$%&'         (%)*
                       ./$%&'
 +),


              "#$%&'   +),         !        -&   "#$%&'
"#$%&'
                                                          0123)

                !            -&
  !
                                       -&         +),

 +),
                        -&
              "#$%&'                             (%)*

(%)*
                                                          -&
                             -&
              (%)*
                                                   !


                                                  +),
                !

               +),
                                                 (%)*


              (%)*




                              %&'&()
WIREFRAMES
PROTOTYPING
DIFFERENT IA
    FOR
 DIFFERENT
  DEVICES?
Exercise
Designing a Mobile
Information Architecture
• Lets build a mobile wireframe for the
  BBC
• Sketch out an IA for both touch and
  traditional devices.
• What are the primary navigation items?
• How can you can you “tease” content?
• How are they di erent? How are they
  the same?
THE
DESIGN
 MYTH
Back      Title     New




       Content




       Navigation
Mobile
Design
The Tent Pole
The business goal of a tent-pole
production is to support or prop
up the losses from other
productions.
However, to create a tent-pole
production, the creators involved
must make an artistic
work that they know
will appeal to the
largest possible
audience, providing
something for everyone.
vs.
Best Possible Experience
In mobile development, the risks
and costs of creating that tent-
pole product are just too high.
This lesson is so easily seen
through bad or just plain
uninspired mobile design.
Asking creative people
to create uninspiring
work is a fast track
to mediocrity.
vs.




iPhone         The Rest
Elements of Mobile Design

| CONTEXT
| MESSAGE
| LOOK & FEEL
| LAYOUT
| COLOR
| TYPE
| GRAPHICS
Context
Who are the users?                        Where are the users?
What do you know about them?              Are they in a public space or a private
                                          space? Are they inside or outside?
What type of behavior can you assume
or predict about the users?               Is it day or is it night?

What is happening?                        Why will they use your app?
What are the circumstances in which       What value will they gain from your
the users will best absorb the content    content or services in their present
you intend to present?                    situation?

When will they interact?                  How are they using their mobile
Are they at home and have large           device?
amounts of time? Are they at work         Is it held in their hand or in their
where they have short periods of time?    pocket?

Will they have idle periods of time       How are they holding it?
while waiting for a train, for example?   Open or closed? Portrait or landscape?
Message
What you are trying to say about
your site or application visually?
Your message is the overall mental
impression you create explicitly
through visual design.
How someone will
react to your design?
If you take a step back,
and look at a design
from a distance, what
is your impression?
Look & Feel
Look & Feel is used to describe the
appearance
As in “I want a clean look and feel”
or “I want a usable look and feel.”
The problem is:
As a mobile designer,
what does it mean?
Layout
How the user will visually process
the page
The structural and visual
components of layout often get
merged together, creating
confusion and making
your design more
di cult to produce.
Color
The most common obstacle you
encounter when dealing with color
is mobile screens.
When complex designs are
displayed on di erent mobile
devices, the limited color depth
on one device can cause
banding, or unwanted
posterization in the
image.
Typography
How type is rendered on mobile
screens:
• subpixel-based screens
• A subpixel is the division of each
  pixel into a red, green, and blue
  (or RGB) unit at a micro-
  scopic level, enabling
  for a greater level of
  antialiasing for each
  font character or glyph.
Typography
How type is rendered on mobile
screens:
• pixel density or greater pixels per
  inch (PPI)
The pixel density is determined by
dividing width of the display
area in pixels, by width
of the display area in
inches.
Graphics
Use of images that are used to
establish or aid a visual
experience.
Graphics can be used to
supplement the look and feel, or as
content displayed inline with the
text.
• Iconography
• Photos & Images
Different Screen Sizes
Mobile devices come in all shapes
and sizes. Choice is great for
consumers, but bad for design.
It can be incredibly di cult to
create that best possible experience
for a plethora of di erent screen
sizes.
The Right Device
The truly skilled designer doesn’t
create just one product—they
translate ideas into experiences.
The spirit of your design should be
able to be adapted to multiple
devices.
The days of tent-poles
are gone.
Exercise
Design Critique
• Lets pick on the BBC one last time...
• Does the current design address
  context? If so how?
• What message does it convey?
• What about the look & feel?
• What about layout?
• What about color & type?
• What about graphics?
Web Apps
    vs.
Native Apps
The
Ubiquity Principle
JARGON ALERT

Ubiquity Principle
 The easiest it is to produce
 quality content and services
 for the largest available
 market will always win.
Reas
Frag    on #
     mentat
            1
                ion
Getting your application
on one platform is a snap,
 but getting it on two is a
  challenge, five a costly
headache, and supporting
fifty virtually impossible.
Reas
     on #
The      2
      Web
Anyone who’s betting
against the Web right
now is an idiot.
Daniel Appelquist,
Co-Chair W3C Mobile Web Initiative
Reas
     on #
Con       3
    trol
Mobile application
  distribution cannot
and will likely never be
 under the control of
     the developer.
Reas
  Con    on #
            4
Expe  sum
            er
     ctati
           ons
Consumers
expect things
to just work.
THE MOBILE WEB IS
 THE ONLY LONG-
      TERM
 COMMERCIALLY
 VIABLE CONTENT
  PLATFORM FOR
 MOBILE DEVICES
When to make a
native application?
CHARGING
 MONEY
GAMES
Game   Game




Game   Game   Game




Game          Game




Game   Game




       Game   Game




Game          Game
67%
OF ALL PAID APPS
  ARE GAMES
65%
OF ALL FREE APPS
 AREN’T GAMES
LOCATION
CAMERA
ACCELERO-
 METERS
FILESYSTEM
OFFLINE
An initiative is defining new interfaces (Javascript APIs)
and a security framework to enable the access to mobile
phone functionalities.

• Application Invocation      • Messaging
• Application Settings        • Persistent Data
• Camera                      • Personal Information
• Communications Log          • Phone Status
• Gallery                     • User Interaction
• Location
So what is the deal
  with BONDI?
When to make a
Mobile Web App?
Mobile 2.0
Web 1.0        Web 2.0
    Proprietary   Standards
Walled Gardens    Web Services
First to market   Web as a Platform
Brand-centered    User-centered
What I Learned at Mobile 2.0
#1 Mobile 2.0 = The web               The Mobile User Experience
                                      Sucks
The mobile web browser is the
next killer app                       Mobile Widgets are the next
                                      big thing
Mobile Web Applications are
the future                            The Carrier is the new “C” word
Javascript is the next frontier       Mobile Needs to Check Its Ego
Rich Interactions kill battery life   We are creators not consumers
JARGON ALERT

Mobile 2.0
The convergence of mobile services
and web services. The promise of
Mobile 2.0 is to add portability,
ubiquitous connectivity and location-
based services to enhance information
and services found on the web.
Enterprise     Mobile Advertising
Microblogging Location-based             Audio
  Imaging   Video   App Stores
 Messaging          Media Sharing   Point of Sale
     Widgets                 VoIP    Search
                        Shopping Transactions
  Social Media          QR Codes Platforms
Hot Trends
sensoring           augmented reality
biometrics          mobile connected games
transactions        location-based social media
lifestreaming       retail proximity media
recommendation      consumption

image recognition
Mobile 1.0        Mobile 2.0
    Proprietary   Standards
Walled Gardens    Web Services
First to market   Web as a Platform
Brand-centered    User-centered
Mobile Evolution
        Brick Era

   Candy Bar Era

Feature Phone Era

 Smart Phone Era

       Touch Era
                    1970   1980   1990   2000   2010
Change occurs
because there is
a gap between
what is and what
should be.
— Craig McCaw
the mythical
“Future-Phone”
Mobile
Web Dev
Using
Web Standards
Multiple Mobile Browsers
Designing and developing for
multiple mobile browsers
simultaneously is a challenge, but
not an impossibility.
It requires looking at your designs
and code from many contexts.
Being able to visualize
how your designs will
be rendered on a
variety of devices in
your head, as you lay down code.
Progressive Enhancement
LAYOUT
Fixed vs. Fluid
Multiple vs. Single
 Column Layouts
DEVICE
PLANS
Class A Browsers
• Excellent XHTML 1.0 support
• Good HTML5 support; specifically,
  the canvas element and o ine
  storage
• Excellent CSS support, including
  most of CSS Level 2.1 (scores 90
  percent or higher on the ACID2 test)
  and the majority of CSS Level 3
  (scores 75 percent or higher on the
  ACID3 test)
• Support for web standards layouts,
  including absolute positioning, floats,
  and complex CSS-based layouts
• Support for image replacement
  techniques
Class A Browsers
• Excellent JavaScript support
• Ability to toggle the display property
• Support for DOM events, including
  Ajax
• Considered comparable to a
  “desktop-grade” browser
Class B Browsers
• Excellent XHTML 1.0 support
• Good CSS Level 2.1 support (75% or
  higher on the ACID2 test)
• Padding, border, and margin
  properties are correctly applied
• Can reliably apply colors to links,
  text, and background
• Supports image replacement
  techniques
• Can support complex tables—not
  necessarily nested tables
• Setting a font size of 10 pixels or
  more produces readable text
• Has limited JavaScript support, min.
  toggle the display property
Class C Browsers
• Good XHTML 1.0 support
• Limited CSS Level 2.1 support (scores
  50 percent or higher on the ACID2
  test)
• Limited or no JavaScript support
Class D Browsers
• Basic XHTML
• Limited CSS support (CSS Level 1, or
  does not recognize cascading)
• Minimum screen width: 120 pixels
• Hyperlinks may not be colorable by
  CSS
• Basic table support: 2 or more
  colspan and rowspan may not be
  supported
• No JavaScript support
• “Width” expressed as a percentage
  may be unreliable
Class F Browsers
• No (or very unreliable) CSS support
• Poor table support or none at all
• Basic forms: text field, select option,
  submit button
• May not be able to support input
  mask on fields
• No JavaScript support
The Device Matrix
 Class           Markup                 CSS                 Javascript


Class A   XHTML, XHTML-MP, HTML5    CSS2, CSS3      Great, includes DHTML, Ajax




Class B      XHTML, XHTML-MP       CSS2 (Decent)      Limited, some DHTML




Class C      XHTML, XHTML-MP       CSS2 (Limited)            Limited




Class D         XHTML-MP            CSS2 (Basic)               None




Class F       XHTML-MP, WML            None                    None
MARKUP
XHTML
The same XHTML we use in
web browsers every day has
worked in most mobile
browsers for over five years.
XHTML-MP
A mobile version of XHTML
is supported on virtually all
modern mobile browsers.
It is practically the same as
XHTML Basic.
HTML5
While HTML5 is still being
defined, it is only supported
by a handful of Class A
browsers.
CSS
CSS-MP
THE BOX MODEL
The box model is one of the
key concepts of CSS design,
and therefore the first thing
that tends to go wrong in
mobile devices. The box
model is the imaginary box
that is around every element
in your markup.
THE BOX MODEL
            Class A   Class B   Class C   Class D   Class F


Box Model   Great     Good       OK        Poor      Fail
SELECTORS
The selector is used to tell
which markup elements it
should apply rules to—
basically, what makes CSS
work to control the
presentation.
SELECTORS
                     Class A   Class B   Class C   Class D   Class F

    Universal         Yes       Yes       Yes       Yes       Yes

      Type            Yes       Yes       Yes       Yes       Flaky

   Descendent         Yes       Yes       Flaky     Flaky      No

      Child           Yes       Yes       Flaky     Flaky      No

    Adjacent          Yes       Yes       Flaky      No        No

      Class           Yes       Yes       Yes       Yes       Flaky

       ID             Yes       Yes       Yes       Yes       Flaky

 Simple Attribute     Yes       Flaky      No        No        No

Advanced Attribute    Yes        No        No        No        No

  Pseudoselector      Yes       Flaky      No        No        No
FONTS & TEXT
The typography options on
mobile devices can be less
than stellar, but like most
things CSS-related, we are
seeing mobile browsers move
closer to their desktop
cousins in this respect.
FONTS & TEXT
                   Class A    Class B      Class C          Class D          Class F
                                         Sans-serif and   Sans-serif and   Sans-serif and
 Available Fonts   Web-safe   Web-safe
                                             serif            serif            serif

   Font Size        Any        Any        Keyword          Keyword          Keyword

  Font-weight        Yes        Yes          Yes              Yes            Limited

   Font-style        Yes        Yes          Yes              Yes            Limited

 Text-transform      Yes        Yes          Yes              Yes            Limited

Text-decoration      Yes        Yes          Yes              Yes             Flaky

   Line-height       Yes        Yes          Yes              Yes             Flaky

   Text-align        Yes        Yes          Yes              Yes              Yes

  White-space        Yes        Yes          Yes            Limited           Flaky

  Text Shadow        Yes        No            No               No               No

Font replacement   Limited      No            No               No               No
BOX PROPERTIES
Being able to style the box
area around an element is a
crucial part of web standards
design. Basic CSS level 2 box
styling techniques work well
on most mobile devices,
allowing you to style content
with some level of precision.
BOX PROPERTIES
                  Class A   Class B   Class C   Class D   Class F


Height & Width     Yes       Yes      Limited    Flaky     Flaky


Min & Max dim      Yes       Flaky      No        No        No


   Margins         Yes       Yes       Yes       Yes      Limited


   Padding         Yes       Yes       Yes       Flaky     Flaky


   Borders       Advanced   Limited   Limited    Flaky     Flaky


 Box Shadow        Yes        No        No        No        No
COLOR
Styling an element means
defining colors and
background images. Relying
on CSS instead of images to
create desired visual e ects
reduces time to download as
well as cost.
COLOR
                    Class A   Class B   Class C   Class D    Class F


Background color     Yes       Yes       Yes       Yes        Yes


Background image     Yes       Yes       Yes       Flaky      Flaky


     Multiple
                     Yes        No        No        No         No
background images
PAGE FLOW
CSS can also be used to
define the design layout of
the page. Using positioning
and page flow attributes, we
can add style to the page and
help make it easier to read or
interact with on small
screens.
PAGE FLOW
                 Class A   Class B   Class C   Class D    Class F


   Display        Yes       Yes       Yes        Yes       Flaky


Toggle Display    Yes       Yes      Limited      No        No


    Floats        Yes       Yes      Limited    Limited    Flaky


   Clearing       Yes       Yes      Limited    Limited    Flaky


 Positioning      Yes       Yes      Limited     Flaky      No


  Overflow        Yes      Limited    Flaky       No        No


Stacking Order    Yes       Yes      Limited     Flaky      No
JAVA-
SCRIPT
JAVASCRIPT
                     Class A   Class B   Class C   Class D   Class F


Javascript Support    Yes      Some        No        No        No


     DHTML            Yes      Limited     No        No        No


      Ajax            Yes      Limited     No        No        No
Don’t count on it.
iPhone
Web Apps
What makes a
Mobile Web App?
URL Bar




Browser Controls
What is WebKit?
Android   Palm webOS
                       Nokia S60
Android   Palm webOS
                       Nokia S60
Android   Palm webOS
                       Nokia S60
Android   Palm webOS
                       Nokia S60
98%
 OF ALL U.S. MOBILE WEB
TRAFFIC IS COMING FROM
         WEBKIT
MARKUP
XHTML
The iPhone and WebKit
support the XHTML 1.0 Strict
and Transitional doctype,
which is the recommended
language for writing iPhone
web apps.
XHTML-MP
The iPhone will render
XHTML Basic and XHTML-
MP pages, but it won’t like it.
Given the option to render a
desktop version, or a mobile
or WAP version of a site, the
iPhone will render the
desktop version.
HTML5
HTML5 creates some
interesting new
opportunities for mobile web
applications, like the canvas
element, o ine storage,
document editing, and media
playback.
CANVAS
The canvas element allows
designers and developers to
essentially draw content
within your HTML page. The
canvas HTML tag defines a
custom drawing area within
your content that you can
then access as a JavaScript
object and draw upon.
OFFLINE DATA
Also part of HTML5 and
supported by WebKit and the
iPhone is the ability to create
client-side data storage
systems, which essentially
allow you to create web
applications that work when
o ine.
CSS
CSS2
The iPhone has excellent
CSS2 support for a mobile
browser. In fact, the iPhone
might render CSS a bit better
than the desktop web
browser you’re using these
days.
CSS3
The iPhone supports the
majority of the CSS3
specification, allowing us to
create visually stunning and
bandwidth-friendly designs
using minimal amounts of
code.
JAVA-
SCRIPT
Supported!
Demos
CSS Image E ects
CSS Transforms
Frameworks
Fixed Footer Scrolling
Multi-touch
Standalone Mode
Now
What?
RAWK
Be in the App Store.
Charge money for your app.
Be in full control of your app.
Be able to define the design
how ever you want.
Spend less making your app.
Increase your profitability.
Support multiple devices.
What’s
 Next
EVERYTHING
Tomorrow
Tomorrow’s innovations will not
only involve mobile technology,
but they will come from the mobile
investments that are made today.
This won’t be because of the iPhone
or Android phones,
operators, or the big
device makers, but
because of people.
1985
The Web is supposed to bring us
together, but people feel more
isolated than ever.
In a survey conducted in 1985,
respondents said that they had at
least three close friends
they felt they could
talk to about
important issues.
2006
In 2006, a Duke University study
found that the number of friends
people felt they could talk to was
down to two people.
25 percent stated they had no
close friends at all.
Mobile technology by its
 Go       nature is designed to
Mobile!   facilitate interaction
          between people.
          It is portable, personal,
          and ubiquitously
          connected.
          It enables us to not just to
          communicate in real time,
          but to collaborate.
The Mobile Generation




   2009   2011   2013   2015

    Everyone Else




                        source: us census bureau
Toda
                  y’s i
          entr          nves
               epre          tors
         wron        neur         , boa
               g pla        s are        rdro
                                  look         oms
        chai          ces.               ing f       , and
             rs w           Face               or v
       and        on’t           book                alue
            neit         solv           ’s ga              in al
     gree        her          e big           me o               l the
           n tec      will           econ            f mu
                           mak
                 h.              ing t omic pr             sica
   Whe                                 oken            oble l
         re is                                 inve         ms—
  out f        the n                                 stme
        or re         ext i                                 nts i
              volu          ndu                                   n
 dom               tion         stria
      inat               arie         l rev
barr       ed b               s? S           olut
     iers       y cle              imp             i
          to e        ar, d
                            urab        le: in on cryin
                 cien             le, s         indu           g
                        cy a            truc           strie
                             nd p                            s
                                  rodu tural
                                         ctiv
           21st                               ity.
                 Cen
                      tury            —Um
                             Indu
                                   stria air Haq
                                          l Rev         ue
                                                olut
                                                      ion
IN 100 YEARS
We need a new Industrial
Revolution that will define the
stepping stones for the next
hundred years.
We need a deep examination of the
impact that the Information
Age will have on real
people for generations
to come.
MOBILE IS
 WHERE THE
CONVERSATION
   STARTS
MOBILE IS...
...the introduction to the larger concepts of how
to address the user’s context in a multi-device
environment
...how to deal with data portability
...about making content accessible to all people,
regardless of location, education,
or ability
...how to leverage the mobile
web, the social web, the
desktop web, desktop
software, and other
emerging technologies
to the benefit of your users.
What do you
  think?
http://mobiledesign.org
THANK YOU
My name is Brian Fling and I’m a Mobile Designer
twitter.com/fling
company: pinchzoom.com
blog: flingmedia.com
Fonts used: Archer & Avenir
Illustrations by Simon Oxley (www.idokungfoo.com)

More Related Content

What's hot

Recommendation system
Recommendation system Recommendation system
Recommendation system Vikrant Arya
 
UX Lesson 2: User Research
UX Lesson 2: User ResearchUX Lesson 2: User Research
UX Lesson 2: User ResearchJoan Lumanauw
 
Mini UX Workshop: Creating Persona & Scenario
Mini UX Workshop: Creating Persona & ScenarioMini UX Workshop: Creating Persona & Scenario
Mini UX Workshop: Creating Persona & ScenarioNatt Phenjati
 
The Golden Rules by Theo Mandel - Software Engineering
The Golden Rules by Theo Mandel - Software EngineeringThe Golden Rules by Theo Mandel - Software Engineering
The Golden Rules by Theo Mandel - Software EngineeringAmit Baghel
 
Collaborative Filtering Recommendation System
Collaborative Filtering Recommendation SystemCollaborative Filtering Recommendation System
Collaborative Filtering Recommendation SystemMilind Gokhale
 
Cross-channel ecosystems strategy
Cross-channel ecosystems strategyCross-channel ecosystems strategy
Cross-channel ecosystems strategyAndrea Resmini
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL Um e Farwa
 
Item Based Collaborative Filtering Recommendation Algorithms
Item Based Collaborative Filtering Recommendation AlgorithmsItem Based Collaborative Filtering Recommendation Algorithms
Item Based Collaborative Filtering Recommendation Algorithmsnextlib
 
UX research report
UX research reportUX research report
UX research reportDariaRolina1
 
Fundamentals Of Software Architecture
Fundamentals Of Software ArchitectureFundamentals Of Software Architecture
Fundamentals Of Software ArchitectureMarkus Voelter
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design ProcessesMuhammad Hijazi
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignJoan Lumanauw
 
Insights into Customer Behavior from Clickstream Data by Ronald Nowling
Insights into Customer Behavior from Clickstream Data by Ronald NowlingInsights into Customer Behavior from Clickstream Data by Ronald Nowling
Insights into Customer Behavior from Clickstream Data by Ronald NowlingSpark Summit
 
IOTA Presentation - BlockchainHub Graz Meetup #5
IOTA Presentation - BlockchainHub Graz Meetup #5 IOTA Presentation - BlockchainHub Graz Meetup #5
IOTA Presentation - BlockchainHub Graz Meetup #5 BlockchainHub Graz
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
WORKFLOW OF THE PROCESS IN SPM
 WORKFLOW OF THE PROCESS IN SPM WORKFLOW OF THE PROCESS IN SPM
WORKFLOW OF THE PROCESS IN SPMgarishma bhatia
 
The path to success with Graph Database and Graph Data Science
The path to success with Graph Database and Graph Data ScienceThe path to success with Graph Database and Graph Data Science
The path to success with Graph Database and Graph Data ScienceNeo4j
 

What's hot (20)

User centered Design
User centered DesignUser centered Design
User centered Design
 
Recommendation system
Recommendation system Recommendation system
Recommendation system
 
UX Lesson 2: User Research
UX Lesson 2: User ResearchUX Lesson 2: User Research
UX Lesson 2: User Research
 
Mini UX Workshop: Creating Persona & Scenario
Mini UX Workshop: Creating Persona & ScenarioMini UX Workshop: Creating Persona & Scenario
Mini UX Workshop: Creating Persona & Scenario
 
The Golden Rules by Theo Mandel - Software Engineering
The Golden Rules by Theo Mandel - Software EngineeringThe Golden Rules by Theo Mandel - Software Engineering
The Golden Rules by Theo Mandel - Software Engineering
 
Collaborative Filtering Recommendation System
Collaborative Filtering Recommendation SystemCollaborative Filtering Recommendation System
Collaborative Filtering Recommendation System
 
Extreme Programming ppt
Extreme Programming pptExtreme Programming ppt
Extreme Programming ppt
 
Cross-channel ecosystems strategy
Cross-channel ecosystems strategyCross-channel ecosystems strategy
Cross-channel ecosystems strategy
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL
 
Item Based Collaborative Filtering Recommendation Algorithms
Item Based Collaborative Filtering Recommendation AlgorithmsItem Based Collaborative Filtering Recommendation Algorithms
Item Based Collaborative Filtering Recommendation Algorithms
 
UX research report
UX research reportUX research report
UX research report
 
Fundamentals Of Software Architecture
Fundamentals Of Software ArchitectureFundamentals Of Software Architecture
Fundamentals Of Software Architecture
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
Insights into Customer Behavior from Clickstream Data by Ronald Nowling
Insights into Customer Behavior from Clickstream Data by Ronald NowlingInsights into Customer Behavior from Clickstream Data by Ronald Nowling
Insights into Customer Behavior from Clickstream Data by Ronald Nowling
 
IOTA Presentation - BlockchainHub Graz Meetup #5
IOTA Presentation - BlockchainHub Graz Meetup #5 IOTA Presentation - BlockchainHub Graz Meetup #5
IOTA Presentation - BlockchainHub Graz Meetup #5
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
User interface-design
User interface-designUser interface-design
User interface-design
 
WORKFLOW OF THE PROCESS IN SPM
 WORKFLOW OF THE PROCESS IN SPM WORKFLOW OF THE PROCESS IN SPM
WORKFLOW OF THE PROCESS IN SPM
 
The path to success with Graph Database and Graph Data Science
The path to success with Graph Database and Graph Data ScienceThe path to success with Graph Database and Graph Data Science
The path to success with Graph Database and Graph Data Science
 

Similar to Designing Mobile Experiences

DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCESDESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCESAlexander Anikin
 
Designing the mobile experience powerpoint
Designing the mobile experience powerpointDesigning the mobile experience powerpoint
Designing the mobile experience powerpointDaniel Downs
 
Custom Mobile Learning: What Influences Scope and How to Avoid Screwing Up
Custom Mobile Learning: What Influences Scope and How to Avoid Screwing UpCustom Mobile Learning: What Influences Scope and How to Avoid Screwing Up
Custom Mobile Learning: What Influences Scope and How to Avoid Screwing UpMaestro
 
140506 next14 app_prototyp
140506 next14 app_prototyp140506 next14 app_prototyp
140506 next14 app_prototypStefanie Kuhnhen
 
Seminar Medical Informatics | University Utrecht
Seminar Medical Informatics | University UtrechtSeminar Medical Informatics | University Utrecht
Seminar Medical Informatics | University UtrechtSynappz
 
Inclusive Design: Designing with all the genders in mind - Anat Katz-Arotchas...
Inclusive Design: Designing with all the genders in mind - Anat Katz-Arotchas...Inclusive Design: Designing with all the genders in mind - Anat Katz-Arotchas...
Inclusive Design: Designing with all the genders in mind - Anat Katz-Arotchas...nois3
 
Selling technique - With NLP
Selling technique - With NLPSelling technique - With NLP
Selling technique - With NLPPratibha Mishra
 
Remote Usability - Indigo.Design
Remote Usability - Indigo.Design Remote Usability - Indigo.Design
Remote Usability - Indigo.Design Poojitha B
 
Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014Gonçalo Veiga
 
7 things startups should know about outsourcing
7 things startups should know about outsourcing 7 things startups should know about outsourcing
7 things startups should know about outsourcing Your Team in India
 
8 Tips on How To Leverage Mobile for Marketing
8 Tips on How To Leverage Mobile for Marketing8 Tips on How To Leverage Mobile for Marketing
8 Tips on How To Leverage Mobile for MarketingMatthieu Houle
 
Culture of Innovation
Culture of InnovationCulture of Innovation
Culture of InnovationAxway
 
@TypicalAppical talks #mobile revolution at #offshore #marine #crewing
@TypicalAppical talks #mobile revolution at #offshore #marine #crewing    @TypicalAppical talks #mobile revolution at #offshore #marine #crewing
@TypicalAppical talks #mobile revolution at #offshore #marine #crewing Gerrit Brouwer (格里特)
 
Visual Content Rule The World
Visual Content Rule The WorldVisual Content Rule The World
Visual Content Rule The WorldStefanos Karagos
 
Visual Content Rules The World
Visual Content Rules The WorldVisual Content Rules The World
Visual Content Rules The WorldXPLAIN
 
What is data science? No really, what is a data scientist?
What is data science? No really, what is a data scientist?What is data science? No really, what is a data scientist?
What is data science? No really, what is a data scientist?Dr. Melissa Sassi
 
Sentinel Report | Q1 2017
Sentinel Report | Q1 2017Sentinel Report | Q1 2017
Sentinel Report | Q1 2017Globant
 
Idean_LeanResearch_Jan2014_FINAL
Idean_LeanResearch_Jan2014_FINALIdean_LeanResearch_Jan2014_FINAL
Idean_LeanResearch_Jan2014_FINALLiya James
 

Similar to Designing Mobile Experiences (20)

DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCESDESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
 
Designing the mobile experience powerpoint
Designing the mobile experience powerpointDesigning the mobile experience powerpoint
Designing the mobile experience powerpoint
 
Custom Mobile Learning: What Influences Scope and How to Avoid Screwing Up
Custom Mobile Learning: What Influences Scope and How to Avoid Screwing UpCustom Mobile Learning: What Influences Scope and How to Avoid Screwing Up
Custom Mobile Learning: What Influences Scope and How to Avoid Screwing Up
 
140506 next14 app_prototyp
140506 next14 app_prototyp140506 next14 app_prototyp
140506 next14 app_prototyp
 
Seminar Medical Informatics | University Utrecht
Seminar Medical Informatics | University UtrechtSeminar Medical Informatics | University Utrecht
Seminar Medical Informatics | University Utrecht
 
Inclusive Design: Designing with all the genders in mind - Anat Katz-Arotchas...
Inclusive Design: Designing with all the genders in mind - Anat Katz-Arotchas...Inclusive Design: Designing with all the genders in mind - Anat Katz-Arotchas...
Inclusive Design: Designing with all the genders in mind - Anat Katz-Arotchas...
 
Selling technique - With NLP
Selling technique - With NLPSelling technique - With NLP
Selling technique - With NLP
 
Remote Usability - Indigo.Design
Remote Usability - Indigo.Design Remote Usability - Indigo.Design
Remote Usability - Indigo.Design
 
Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014
 
7 things startups should know about outsourcing
7 things startups should know about outsourcing 7 things startups should know about outsourcing
7 things startups should know about outsourcing
 
8 Tips on How To Leverage Mobile for Marketing
8 Tips on How To Leverage Mobile for Marketing8 Tips on How To Leverage Mobile for Marketing
8 Tips on How To Leverage Mobile for Marketing
 
Culture of Innovation
Culture of InnovationCulture of Innovation
Culture of Innovation
 
@TypicalAppical talks #mobile revolution at #offshore #marine #crewing
@TypicalAppical talks #mobile revolution at #offshore #marine #crewing    @TypicalAppical talks #mobile revolution at #offshore #marine #crewing
@TypicalAppical talks #mobile revolution at #offshore #marine #crewing
 
Visual Content Rule The World
Visual Content Rule The WorldVisual Content Rule The World
Visual Content Rule The World
 
Visual Content Rules The World
Visual Content Rules The WorldVisual Content Rules The World
Visual Content Rules The World
 
What is data science? No really, what is a data scientist?
What is data science? No really, what is a data scientist?What is data science? No really, what is a data scientist?
What is data science? No really, what is a data scientist?
 
Sentinel Report | Q1 2017
Sentinel Report | Q1 2017Sentinel Report | Q1 2017
Sentinel Report | Q1 2017
 
Idean_LeanResearch_Jan2014_FINAL
Idean_LeanResearch_Jan2014_FINALIdean_LeanResearch_Jan2014_FINAL
Idean_LeanResearch_Jan2014_FINAL
 
SXSW 2015
SXSW 2015SXSW 2015
SXSW 2015
 
FJORD Trends – Fran Merino
FJORD Trends – Fran MerinoFJORD Trends – Fran Merino
FJORD Trends – Fran Merino
 

More from Brian Fling

Global BBC iPlayer designed by pinch/zoom
Global BBC iPlayer designed by pinch/zoomGlobal BBC iPlayer designed by pinch/zoom
Global BBC iPlayer designed by pinch/zoomBrian Fling
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)Brian Fling
 
Native v. Hybrid v. Web
Native v. Hybrid v. WebNative v. Hybrid v. Web
Native v. Hybrid v. WebBrian Fling
 
6 Rules for Building Amazing Apps for Mobile & Tablet Devices
6 Rules for Building Amazing Apps for Mobile & Tablet Devices6 Rules for Building Amazing Apps for Mobile & Tablet Devices
6 Rules for Building Amazing Apps for Mobile & Tablet DevicesBrian Fling
 
What's Next: How Mobile is Changing Design
What's Next: How Mobile is Changing DesignWhat's Next: How Mobile is Changing Design
What's Next: How Mobile is Changing DesignBrian Fling
 
Mobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondMobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondBrian Fling
 
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Brian Fling
 
How the iPhone will forever change the mobile space (Over the Air)
How the iPhone will forever change the mobile space (Over the Air)How the iPhone will forever change the mobile space (Over the Air)
How the iPhone will forever change the mobile space (Over the Air)Brian Fling
 
Mobile Monday Austin: How the iPhone will forever change the Mobile Space
Mobile Monday Austin: How the iPhone will forever change the Mobile SpaceMobile Monday Austin: How the iPhone will forever change the Mobile Space
Mobile Monday Austin: How the iPhone will forever change the Mobile SpaceBrian Fling
 
Web Directions North: The Mobile Web Landscape
Web Directions North: The Mobile Web LandscapeWeb Directions North: The Mobile Web Landscape
Web Directions North: The Mobile Web LandscapeBrian Fling
 
Web Builder 2.0 Workshop: iPhone Design and Development Workshop
Web Builder 2.0 Workshop:  iPhone Design and Development WorkshopWeb Builder 2.0 Workshop:  iPhone Design and Development Workshop
Web Builder 2.0 Workshop: iPhone Design and Development WorkshopBrian Fling
 
Web 2.0 Expo 2007
Web 2.0 Expo 2007Web 2.0 Expo 2007
Web 2.0 Expo 2007Brian Fling
 
Web Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopWeb Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopBrian Fling
 
Web Design World 2007: iPhone Design and Development Workshop
Web Design World 2007: iPhone Design and Development WorkshopWeb Design World 2007: iPhone Design and Development Workshop
Web Design World 2007: iPhone Design and Development WorkshopBrian Fling
 
Everything you always wanted to know about the Mobile Web, but were afraid to...
Everything you always wanted to know about the Mobile Web, but were afraid to...Everything you always wanted to know about the Mobile Web, but were afraid to...
Everything you always wanted to know about the Mobile Web, but were afraid to...Brian Fling
 
The Next Generation of the Mobile Web
The Next Generation of the Mobile WebThe Next Generation of the Mobile Web
The Next Generation of the Mobile WebBrian Fling
 
Getting Started in the Mobile Web
Getting Started in the Mobile WebGetting Started in the Mobile Web
Getting Started in the Mobile WebBrian Fling
 
Future of Mobile iPhone Presentation
Future of Mobile iPhone PresentationFuture of Mobile iPhone Presentation
Future of Mobile iPhone PresentationBrian Fling
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for MobileBrian Fling
 
Blue Flavor's Leaflets
Blue Flavor's LeafletsBlue Flavor's Leaflets
Blue Flavor's LeafletsBrian Fling
 

More from Brian Fling (20)

Global BBC iPlayer designed by pinch/zoom
Global BBC iPlayer designed by pinch/zoomGlobal BBC iPlayer designed by pinch/zoom
Global BBC iPlayer designed by pinch/zoom
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
 
Native v. Hybrid v. Web
Native v. Hybrid v. WebNative v. Hybrid v. Web
Native v. Hybrid v. Web
 
6 Rules for Building Amazing Apps for Mobile & Tablet Devices
6 Rules for Building Amazing Apps for Mobile & Tablet Devices6 Rules for Building Amazing Apps for Mobile & Tablet Devices
6 Rules for Building Amazing Apps for Mobile & Tablet Devices
 
What's Next: How Mobile is Changing Design
What's Next: How Mobile is Changing DesignWhat's Next: How Mobile is Changing Design
What's Next: How Mobile is Changing Design
 
Mobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondMobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and Beyond
 
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
 
How the iPhone will forever change the mobile space (Over the Air)
How the iPhone will forever change the mobile space (Over the Air)How the iPhone will forever change the mobile space (Over the Air)
How the iPhone will forever change the mobile space (Over the Air)
 
Mobile Monday Austin: How the iPhone will forever change the Mobile Space
Mobile Monday Austin: How the iPhone will forever change the Mobile SpaceMobile Monday Austin: How the iPhone will forever change the Mobile Space
Mobile Monday Austin: How the iPhone will forever change the Mobile Space
 
Web Directions North: The Mobile Web Landscape
Web Directions North: The Mobile Web LandscapeWeb Directions North: The Mobile Web Landscape
Web Directions North: The Mobile Web Landscape
 
Web Builder 2.0 Workshop: iPhone Design and Development Workshop
Web Builder 2.0 Workshop:  iPhone Design and Development WorkshopWeb Builder 2.0 Workshop:  iPhone Design and Development Workshop
Web Builder 2.0 Workshop: iPhone Design and Development Workshop
 
Web 2.0 Expo 2007
Web 2.0 Expo 2007Web 2.0 Expo 2007
Web 2.0 Expo 2007
 
Web Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopWeb Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development Workshop
 
Web Design World 2007: iPhone Design and Development Workshop
Web Design World 2007: iPhone Design and Development WorkshopWeb Design World 2007: iPhone Design and Development Workshop
Web Design World 2007: iPhone Design and Development Workshop
 
Everything you always wanted to know about the Mobile Web, but were afraid to...
Everything you always wanted to know about the Mobile Web, but were afraid to...Everything you always wanted to know about the Mobile Web, but were afraid to...
Everything you always wanted to know about the Mobile Web, but were afraid to...
 
The Next Generation of the Mobile Web
The Next Generation of the Mobile WebThe Next Generation of the Mobile Web
The Next Generation of the Mobile Web
 
Getting Started in the Mobile Web
Getting Started in the Mobile WebGetting Started in the Mobile Web
Getting Started in the Mobile Web
 
Future of Mobile iPhone Presentation
Future of Mobile iPhone PresentationFuture of Mobile iPhone Presentation
Future of Mobile iPhone Presentation
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobile
 
Blue Flavor's Leaflets
Blue Flavor's LeafletsBlue Flavor's Leaflets
Blue Flavor's Leaflets
 

Recently uploaded

Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentationssuser8fae18
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxDoraemon495609
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理cyebo
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyJaime Brown
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designGOWSIKRAJA PALANISAMY
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisPeclers Paris
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidiLivengood
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Remy Rey De Barros
 
Second Order Systems Qhhhhhhhhuestions.pptx
Second Order Systems Qhhhhhhhhuestions.pptxSecond Order Systems Qhhhhhhhhuestions.pptx
Second Order Systems Qhhhhhhhhuestions.pptxjoshuaclack73
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfjeffreycarroll14
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themmadhavlakhanpal29
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..GB Logo Design
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfJon Freach
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.rrimika1
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationJIT KUMAR GUPTA
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headersekinlvnt
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理cyebo
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxAlecAnidul
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...JIT KUMAR GUPTA
 

Recently uploaded (20)

Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in Technology
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive design
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
Second Order Systems Qhhhhhhhhuestions.pptx
Second Order Systems Qhhhhhhhhuestions.pptxSecond Order Systems Qhhhhhhhhuestions.pptx
Second Order Systems Qhhhhhhhhuestions.pptx
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 

Designing Mobile Experiences

  • 2.
  • 3.
  • 6. The Layers of the Mobile Experience
  • 7. IDEA The first thing we need is an idea that inspires us.
  • 8. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 9. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 10. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 11. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 12. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 13. PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 14. DEVELOPMENT Put all the pieces together. PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 15. TESTING And test, and test, and test some more. DEVELOPMENT Put all the pieces together. PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 16. OPTIMIZATION Reduce all assets to its lowest possible size. TESTING And test, and test, and test some more. DEVELOPMENT Put all the pieces together. PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 17. PORTING Adapt for other devices that fit our strategy. OPTIMIZATION Reduce all assets to its lowest possible size. TESTING And test, and test, and test some more. DEVELOPMENT Put all the pieces together. PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  • 18. Discussion What do you want to learn today? • Is it to create visual experiences? • Is it to take advantage of the mobile opportunity? • Is it to figure out how to make sense of this new medium? • Is it something more? • All of the above?
  • 19. What is Mobile Design?
  • 20. JARGON ALERT Mobile Design The creation of user experiences for the mobile context.
  • 23.
  • 25. Generation Y 97% own a computer 94% own a mobile phone 76% use Instant Messaging 69% use Facebook 56% own an iPod
  • 26. Generation Z Born in the modern digital age. Technology is infused at birth.
  • 27. Generation Z Born in the modern digital age. Technology is infused at birth. The iPhone is to them
  • 28. Generation Z Born in the modern digital age. Technology is infused at birth. The iPhone is to them as the Macintosh was to us.
  • 29. The Mobile Generation 2009 2010 2011 2012 2013 2014 2015 Everyone Else source: us census bureau
  • 30. In less five years, the mobile generation could have more buying power than all other demographics
  • 31. Discussion Why are you here? • What is it about mobile that appeals to you the most? • What do you see as being the obstacles? (your understanding? your company? the technology? etc.) • What are the biggest opportunities?
  • 33. Rule Forg #1 et W You hat Thin You k Kno w
  • 34.
  • 35.
  • 36.
  • 37. Android 7% Java ME 7% iPhone Symbian 69% 6% Windows Mobile 5% Blackberry 3% Palm 2%
  • 38. Rule Belie #2 ve W You hat See, Wha Not t You Read
  • 39.
  • 41.
  • 43.
  • 44.
  • 45. Rule Con #3 strai Nev nts er C ome First
  • 46.
  • 47. vs.
  • 48. Rule Focu #4 s on Con text, Goa ls an Nee d ds
  • 49.
  • 50. Rule You #5 Can Supp ’t Ever ort ythin g
  • 51.
  • 52. Android 7% Java ME 7% iPhone Symbian 69% 6% Windows Mobile 5% Blackberry 3% Palm 2%
  • 53. Rule #6 Don Con ’t vert Crea , te
  • 54.
  • 55.
  • 56.
  • 57. Rule # Keep 7 Simp It le
  • 58.
  • 59.
  • 61. JARGON ALERT Needs The circumstances in which something is necessary, or that require some course of action.
  • 62. Abraham Harold Maslow (April 1, 1908 – June 8, 1970) was an American psychologist. He is noted for his concept- ualization of a "hierarchy of human needs", and is considered the founder of humanistic psychology.
  • 63.
  • 64. JARGON ALERT Goals The object of a person's ambition or e ort; an aim or desired result
  • 65.
  • 66. Te ls oa ch sG nic es al Sweet sin G oa Spot Bu ls User Goals
  • 67. JARGON ALERT Neurolinguistic Programming A model of interpersonal communication chiefly concerned with the relationship between successful patterns of behavior and the subjective experiences underlying them.
  • 68. Lear ni Aud ng T ype 20% itory o f all conn ect w peop is al ith oth le conn l they n ers verb ecte eed d an to fe ally with d pro el othe ductive rs
  • 69. Lear ni ng T Visu ype 35% al of al Bein g ab l peop illus trate le to see c le char ts an d as dia oncepts for t d gra gram his m phs s or ajor is he ity le lpful type arni . ng
  • 70. Lear Kine ni ng T ype sthe 45 % of all p tic inco rpor eopl and hand ate m uscl e proc -eye e me ess a movem mory nd re ent t infor tain o mat new ion
  • 71. Exercise Needs & Goals • Let’s examine BBC • What human needs does the BBC serve? • What are the goals of the BBC’s audience? • Does the BBC utilize neurolinguistic programming models? If so, how? • How do we document our findings?
  • 73. JARGON ALERT Context The circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.
  • 74.
  • 75.
  • 76.
  • 77. Context with a capital C Context is how the user will derive BIG C value from something they are currently doing. In other words, the understanding of circumstance. It is the mental model they will establish to form understanding.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83. The mode, medium, or context environment in which we little c perform a task or the circumstances of understanding. • our present location • our device of access • our state of mind
  • 84. My present location. Physical My physical context will Context dictate how I access information and therefore how I derive value from it.
  • 85.
  • 86. My device of access. Media The media context isn’t Context just about the immediacy of the information we receive How to engage people in real time.
  • 87.
  • 88. Our present state of Modal mind. Context • Where should I eat? • Should I buy it now or later? • Is this safe or not?
  • 89.
  • 90. Radio TV Live Billboard ry Vi to su di al Au Word of Print Ad Mouth Kinesthetic Mobile Events Device QR
  • 91. WAP Bluetooth Radio TV SMS SMS Live Billboard WAP ry Vi to MMS su di al Au QR Cod Word of Print Ad Mouth SMS Kinesthetic SMS WAP Mobile Events Device QR Code Website MMS
  • 92. WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard d to B nd WAP ry Vi to MMS su di al Au W QR Code Word of Print Ad Mouth SMS ify Kinesthetic No SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site
  • 93. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard Send to Buy Friend WAP ry Vi to MMS su di al Au Join WAP Site QR Code Word of Print Ad Mouth SMS Notify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend
  • 94. Exercise Define the Context • Again lets use the BBC as our example • What are the physical contexts? • What are the media contexts? • What are the modal contexts? • What is the BIG Context? • What are some of the possible business strategies simply by addressing context?
  • 96. Type s App of A pps licat Med ion ium
  • 97. SMS Experiences where the goal is to alert users of new information.
  • 98.
  • 99. WEBSITE Experiences that provide the user with simple informational data.
  • 100.
  • 101. WIDGETS Experiences that are based on an existing multi- platform framework.
  • 102.
  • 103. WEB APPS When you want to employ a cross-platform application strategy.
  • 104.
  • 105. NATIVE APPS Experiences that take advantage of the native features of the device.
  • 106.
  • 108.
  • 109. MEDIUM MATRIX Device User Offline Device Long Term Complexity Language Initial Cost Support Experience Support Features Cost SMS All Simple Limited N/A No None Low High Mobile All Simple Limited HTML No None Low Low Websites Mobile Web Some Medium Great HTML Limited Limited Low Low Widgets Mobile HTML, CSS, Web Some Medium Great Limited Limited Mid Low JS Application Native All Complex Excellent Various Yes Yes High Mid Application Games All Complex Excellent Various Yes Yes Very High High
  • 110. Type s App of A pps licat Con ion text
  • 112.
  • 113. LOCALE An application based on the physical context.
  • 114.
  • 115. INFORM ATIVE An application meant to inform.
  • 116.
  • 117. PRODUC TIVITY Meant to increase our available time.
  • 118.
  • 119. IMMER- SIVE An application meant to distract or entertain.
  • 120.
  • 121. CONTEXT MATRIX User Experience Type Task Type Task Duration Combine with Utility At-a-Glance Information Recall Very Short Immersive Locale Location-based Contextual Information Quick Immersive Informative Content-based Seek Information Quick Locale Productivity Task-based Content Management Long Utility Immersive Full Screen Entertainment Long Utility, Locale
  • 123.
  • 125.
  • 126.
  • 127.
  • 128.
  • 130.
  • 131.
  • 133. !"#$" ! -& (%)* ./$%&' (%)* ./$%&' +), "#$%&' +), ! -& "#$%&' "#$%&' 0123) ! -& ! -& +), +), -& "#$%&' (%)* (%)* -& -& (%)* ! +), ! +), (%)* (%)* %&'&()
  • 134.
  • 135.
  • 136.
  • 138.
  • 140.
  • 141.
  • 142.
  • 143. DIFFERENT IA FOR DIFFERENT DEVICES?
  • 144. Exercise Designing a Mobile Information Architecture • Lets build a mobile wireframe for the BBC • Sketch out an IA for both touch and traditional devices. • What are the primary navigation items? • How can you can you “tease” content? • How are they di erent? How are they the same?
  • 146. Back Title New Content Navigation
  • 148. The Tent Pole The business goal of a tent-pole production is to support or prop up the losses from other productions. However, to create a tent-pole production, the creators involved must make an artistic work that they know will appeal to the largest possible audience, providing something for everyone.
  • 149. vs.
  • 150. Best Possible Experience In mobile development, the risks and costs of creating that tent- pole product are just too high. This lesson is so easily seen through bad or just plain uninspired mobile design. Asking creative people to create uninspiring work is a fast track to mediocrity.
  • 151. vs. iPhone The Rest
  • 152. Elements of Mobile Design | CONTEXT | MESSAGE | LOOK & FEEL | LAYOUT | COLOR | TYPE | GRAPHICS
  • 153. Context Who are the users? Where are the users? What do you know about them? Are they in a public space or a private space? Are they inside or outside? What type of behavior can you assume or predict about the users? Is it day or is it night? What is happening? Why will they use your app? What are the circumstances in which What value will they gain from your the users will best absorb the content content or services in their present you intend to present? situation? When will they interact? How are they using their mobile Are they at home and have large device? amounts of time? Are they at work Is it held in their hand or in their where they have short periods of time? pocket? Will they have idle periods of time How are they holding it? while waiting for a train, for example? Open or closed? Portrait or landscape?
  • 154. Message What you are trying to say about your site or application visually? Your message is the overall mental impression you create explicitly through visual design. How someone will react to your design? If you take a step back, and look at a design from a distance, what is your impression?
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160. Look & Feel Look & Feel is used to describe the appearance As in “I want a clean look and feel” or “I want a usable look and feel.” The problem is: As a mobile designer, what does it mean?
  • 161.
  • 162.
  • 163. Layout How the user will visually process the page The structural and visual components of layout often get merged together, creating confusion and making your design more di cult to produce.
  • 164.
  • 165.
  • 166.
  • 167. Color The most common obstacle you encounter when dealing with color is mobile screens. When complex designs are displayed on di erent mobile devices, the limited color depth on one device can cause banding, or unwanted posterization in the image.
  • 168.
  • 169.
  • 170. Typography How type is rendered on mobile screens: • subpixel-based screens • A subpixel is the division of each pixel into a red, green, and blue (or RGB) unit at a micro- scopic level, enabling for a greater level of antialiasing for each font character or glyph.
  • 171.
  • 172.
  • 173. Typography How type is rendered on mobile screens: • pixel density or greater pixels per inch (PPI) The pixel density is determined by dividing width of the display area in pixels, by width of the display area in inches.
  • 174.
  • 175. Graphics Use of images that are used to establish or aid a visual experience. Graphics can be used to supplement the look and feel, or as content displayed inline with the text. • Iconography • Photos & Images
  • 176.
  • 177.
  • 178. Different Screen Sizes Mobile devices come in all shapes and sizes. Choice is great for consumers, but bad for design. It can be incredibly di cult to create that best possible experience for a plethora of di erent screen sizes.
  • 179.
  • 180.
  • 181. The Right Device The truly skilled designer doesn’t create just one product—they translate ideas into experiences. The spirit of your design should be able to be adapted to multiple devices. The days of tent-poles are gone.
  • 182. Exercise Design Critique • Lets pick on the BBC one last time... • Does the current design address context? If so how? • What message does it convey? • What about the look & feel? • What about layout? • What about color & type? • What about graphics?
  • 183. Web Apps vs. Native Apps
  • 185. JARGON ALERT Ubiquity Principle The easiest it is to produce quality content and services for the largest available market will always win.
  • 186. Reas Frag on # mentat 1 ion
  • 187. Getting your application on one platform is a snap, but getting it on two is a challenge, five a costly headache, and supporting fifty virtually impossible.
  • 188. Reas on # The 2 Web
  • 189. Anyone who’s betting against the Web right now is an idiot. Daniel Appelquist, Co-Chair W3C Mobile Web Initiative
  • 190. Reas on # Con 3 trol
  • 191. Mobile application distribution cannot and will likely never be under the control of the developer.
  • 192. Reas Con on # 4 Expe sum er ctati ons
  • 194. THE MOBILE WEB IS THE ONLY LONG- TERM COMMERCIALLY VIABLE CONTENT PLATFORM FOR MOBILE DEVICES
  • 195. When to make a native application?
  • 197.
  • 198. GAMES
  • 199.
  • 200. Game Game Game Game Game Game Game Game Game Game Game Game Game
  • 201. 67% OF ALL PAID APPS ARE GAMES
  • 202. 65% OF ALL FREE APPS AREN’T GAMES
  • 204.
  • 205.
  • 206. CAMERA
  • 207.
  • 209.
  • 211.
  • 213.
  • 214.
  • 215. An initiative is defining new interfaces (Javascript APIs) and a security framework to enable the access to mobile phone functionalities. • Application Invocation • Messaging • Application Settings • Persistent Data • Camera • Personal Information • Communications Log • Phone Status • Gallery • User Interaction • Location
  • 216. So what is the deal with BONDI?
  • 217.
  • 218. When to make a Mobile Web App?
  • 220.
  • 221. Web 1.0 Web 2.0 Proprietary Standards Walled Gardens Web Services First to market Web as a Platform Brand-centered User-centered
  • 222.
  • 223. What I Learned at Mobile 2.0 #1 Mobile 2.0 = The web The Mobile User Experience Sucks The mobile web browser is the next killer app Mobile Widgets are the next big thing Mobile Web Applications are the future The Carrier is the new “C” word Javascript is the next frontier Mobile Needs to Check Its Ego Rich Interactions kill battery life We are creators not consumers
  • 224. JARGON ALERT Mobile 2.0 The convergence of mobile services and web services. The promise of Mobile 2.0 is to add portability, ubiquitous connectivity and location- based services to enhance information and services found on the web.
  • 225. Enterprise Mobile Advertising Microblogging Location-based Audio Imaging Video App Stores Messaging Media Sharing Point of Sale Widgets VoIP Search Shopping Transactions Social Media QR Codes Platforms
  • 226. Hot Trends sensoring augmented reality biometrics mobile connected games transactions location-based social media lifestreaming retail proximity media recommendation consumption image recognition
  • 227. Mobile 1.0 Mobile 2.0 Proprietary Standards Walled Gardens Web Services First to market Web as a Platform Brand-centered User-centered
  • 228. Mobile Evolution Brick Era Candy Bar Era Feature Phone Era Smart Phone Era Touch Era 1970 1980 1990 2000 2010
  • 229. Change occurs because there is a gap between what is and what should be. — Craig McCaw
  • 231.
  • 234. Multiple Mobile Browsers Designing and developing for multiple mobile browsers simultaneously is a challenge, but not an impossibility. It requires looking at your designs and code from many contexts. Being able to visualize how your designs will be rendered on a variety of devices in your head, as you lay down code.
  • 236.
  • 237.
  • 238.
  • 239. LAYOUT
  • 241.
  • 242. Multiple vs. Single Column Layouts
  • 243.
  • 245. Class A Browsers • Excellent XHTML 1.0 support • Good HTML5 support; specifically, the canvas element and o ine storage • Excellent CSS support, including most of CSS Level 2.1 (scores 90 percent or higher on the ACID2 test) and the majority of CSS Level 3 (scores 75 percent or higher on the ACID3 test) • Support for web standards layouts, including absolute positioning, floats, and complex CSS-based layouts • Support for image replacement techniques
  • 246. Class A Browsers • Excellent JavaScript support • Ability to toggle the display property • Support for DOM events, including Ajax • Considered comparable to a “desktop-grade” browser
  • 247.
  • 248. Class B Browsers • Excellent XHTML 1.0 support • Good CSS Level 2.1 support (75% or higher on the ACID2 test) • Padding, border, and margin properties are correctly applied • Can reliably apply colors to links, text, and background • Supports image replacement techniques • Can support complex tables—not necessarily nested tables • Setting a font size of 10 pixels or more produces readable text • Has limited JavaScript support, min. toggle the display property
  • 249. Class C Browsers • Good XHTML 1.0 support • Limited CSS Level 2.1 support (scores 50 percent or higher on the ACID2 test) • Limited or no JavaScript support
  • 250. Class D Browsers • Basic XHTML • Limited CSS support (CSS Level 1, or does not recognize cascading) • Minimum screen width: 120 pixels • Hyperlinks may not be colorable by CSS • Basic table support: 2 or more colspan and rowspan may not be supported • No JavaScript support • “Width” expressed as a percentage may be unreliable
  • 251. Class F Browsers • No (or very unreliable) CSS support • Poor table support or none at all • Basic forms: text field, select option, submit button • May not be able to support input mask on fields • No JavaScript support
  • 252. The Device Matrix Class Markup CSS Javascript Class A XHTML, XHTML-MP, HTML5 CSS2, CSS3 Great, includes DHTML, Ajax Class B XHTML, XHTML-MP CSS2 (Decent) Limited, some DHTML Class C XHTML, XHTML-MP CSS2 (Limited) Limited Class D XHTML-MP CSS2 (Basic) None Class F XHTML-MP, WML None None
  • 253. MARKUP
  • 254. XHTML The same XHTML we use in web browsers every day has worked in most mobile browsers for over five years.
  • 255.
  • 256. XHTML-MP A mobile version of XHTML is supported on virtually all modern mobile browsers. It is practically the same as XHTML Basic.
  • 257.
  • 258.
  • 259. HTML5 While HTML5 is still being defined, it is only supported by a handful of Class A browsers.
  • 260. CSS
  • 261. CSS-MP
  • 262.
  • 263.
  • 264. THE BOX MODEL The box model is one of the key concepts of CSS design, and therefore the first thing that tends to go wrong in mobile devices. The box model is the imaginary box that is around every element in your markup.
  • 265.
  • 266. THE BOX MODEL Class A Class B Class C Class D Class F Box Model Great Good OK Poor Fail
  • 267. SELECTORS The selector is used to tell which markup elements it should apply rules to— basically, what makes CSS work to control the presentation.
  • 268. SELECTORS Class A Class B Class C Class D Class F Universal Yes Yes Yes Yes Yes Type Yes Yes Yes Yes Flaky Descendent Yes Yes Flaky Flaky No Child Yes Yes Flaky Flaky No Adjacent Yes Yes Flaky No No Class Yes Yes Yes Yes Flaky ID Yes Yes Yes Yes Flaky Simple Attribute Yes Flaky No No No Advanced Attribute Yes No No No No Pseudoselector Yes Flaky No No No
  • 269. FONTS & TEXT The typography options on mobile devices can be less than stellar, but like most things CSS-related, we are seeing mobile browsers move closer to their desktop cousins in this respect.
  • 270. FONTS & TEXT Class A Class B Class C Class D Class F Sans-serif and Sans-serif and Sans-serif and Available Fonts Web-safe Web-safe serif serif serif Font Size Any Any Keyword Keyword Keyword Font-weight Yes Yes Yes Yes Limited Font-style Yes Yes Yes Yes Limited Text-transform Yes Yes Yes Yes Limited Text-decoration Yes Yes Yes Yes Flaky Line-height Yes Yes Yes Yes Flaky Text-align Yes Yes Yes Yes Yes White-space Yes Yes Yes Limited Flaky Text Shadow Yes No No No No Font replacement Limited No No No No
  • 271. BOX PROPERTIES Being able to style the box area around an element is a crucial part of web standards design. Basic CSS level 2 box styling techniques work well on most mobile devices, allowing you to style content with some level of precision.
  • 272. BOX PROPERTIES Class A Class B Class C Class D Class F Height & Width Yes Yes Limited Flaky Flaky Min & Max dim Yes Flaky No No No Margins Yes Yes Yes Yes Limited Padding Yes Yes Yes Flaky Flaky Borders Advanced Limited Limited Flaky Flaky Box Shadow Yes No No No No
  • 273. COLOR Styling an element means defining colors and background images. Relying on CSS instead of images to create desired visual e ects reduces time to download as well as cost.
  • 274. COLOR Class A Class B Class C Class D Class F Background color Yes Yes Yes Yes Yes Background image Yes Yes Yes Flaky Flaky Multiple Yes No No No No background images
  • 275. PAGE FLOW CSS can also be used to define the design layout of the page. Using positioning and page flow attributes, we can add style to the page and help make it easier to read or interact with on small screens.
  • 276. PAGE FLOW Class A Class B Class C Class D Class F Display Yes Yes Yes Yes Flaky Toggle Display Yes Yes Limited No No Floats Yes Yes Limited Limited Flaky Clearing Yes Yes Limited Limited Flaky Positioning Yes Yes Limited Flaky No Overflow Yes Limited Flaky No No Stacking Order Yes Yes Limited Flaky No
  • 278. JAVASCRIPT Class A Class B Class C Class D Class F Javascript Support Yes Some No No No DHTML Yes Limited No No No Ajax Yes Limited No No No
  • 281. What makes a Mobile Web App?
  • 282.
  • 284.
  • 285.
  • 286.
  • 287.
  • 289.
  • 290.
  • 291. Android Palm webOS Nokia S60
  • 292. Android Palm webOS Nokia S60
  • 293. Android Palm webOS Nokia S60
  • 294. Android Palm webOS Nokia S60
  • 295.
  • 296.
  • 297. 98% OF ALL U.S. MOBILE WEB TRAFFIC IS COMING FROM WEBKIT
  • 298. MARKUP
  • 299. XHTML The iPhone and WebKit support the XHTML 1.0 Strict and Transitional doctype, which is the recommended language for writing iPhone web apps.
  • 300. XHTML-MP The iPhone will render XHTML Basic and XHTML- MP pages, but it won’t like it. Given the option to render a desktop version, or a mobile or WAP version of a site, the iPhone will render the desktop version.
  • 301.
  • 302. HTML5 HTML5 creates some interesting new opportunities for mobile web applications, like the canvas element, o ine storage, document editing, and media playback.
  • 303.
  • 304.
  • 305.
  • 306. CANVAS The canvas element allows designers and developers to essentially draw content within your HTML page. The canvas HTML tag defines a custom drawing area within your content that you can then access as a JavaScript object and draw upon.
  • 307.
  • 308. OFFLINE DATA Also part of HTML5 and supported by WebKit and the iPhone is the ability to create client-side data storage systems, which essentially allow you to create web applications that work when o ine.
  • 309.
  • 310. CSS
  • 311. CSS2 The iPhone has excellent CSS2 support for a mobile browser. In fact, the iPhone might render CSS a bit better than the desktop web browser you’re using these days.
  • 312.
  • 313. CSS3 The iPhone supports the majority of the CSS3 specification, allowing us to create visually stunning and bandwidth-friendly designs using minimal amounts of code.
  • 314.
  • 317. Demos CSS Image E ects CSS Transforms Frameworks Fixed Footer Scrolling Multi-touch Standalone Mode
  • 319.
  • 320.
  • 321.
  • 322.
  • 323.
  • 324.
  • 325.
  • 326.
  • 327. RAWK Be in the App Store. Charge money for your app. Be in full control of your app. Be able to define the design how ever you want. Spend less making your app. Increase your profitability. Support multiple devices.
  • 328.
  • 331. Tomorrow Tomorrow’s innovations will not only involve mobile technology, but they will come from the mobile investments that are made today. This won’t be because of the iPhone or Android phones, operators, or the big device makers, but because of people.
  • 332. 1985 The Web is supposed to bring us together, but people feel more isolated than ever. In a survey conducted in 1985, respondents said that they had at least three close friends they felt they could talk to about important issues.
  • 333. 2006 In 2006, a Duke University study found that the number of friends people felt they could talk to was down to two people. 25 percent stated they had no close friends at all.
  • 334. Mobile technology by its Go nature is designed to Mobile! facilitate interaction between people. It is portable, personal, and ubiquitously connected. It enables us to not just to communicate in real time, but to collaborate.
  • 335. The Mobile Generation 2009 2011 2013 2015 Everyone Else source: us census bureau
  • 336. Toda y’s i entr nves epre tors wron neur , boa g pla s are rdro look oms chai ces. ing f , and rs w Face or v and on’t book alue neit solv ’s ga in al gree her e big me o l the n tec will econ f mu mak h. ing t omic pr sica Whe oken oble l re is inve ms— out f the n stme or re ext i nts i volu ndu n dom tion stria inat arie l rev barr ed b s? S olut iers y cle imp i to e ar, d urab le: in on cryin cien le, s indu g cy a truc strie nd p s rodu tural ctiv 21st ity. Cen tury —Um Indu stria air Haq l Rev ue olut ion
  • 337. IN 100 YEARS We need a new Industrial Revolution that will define the stepping stones for the next hundred years. We need a deep examination of the impact that the Information Age will have on real people for generations to come.
  • 338. MOBILE IS WHERE THE CONVERSATION STARTS
  • 339. MOBILE IS... ...the introduction to the larger concepts of how to address the user’s context in a multi-device environment ...how to deal with data portability ...about making content accessible to all people, regardless of location, education, or ability ...how to leverage the mobile web, the social web, the desktop web, desktop software, and other emerging technologies to the benefit of your users.
  • 340. What do you think?
  • 342. THANK YOU My name is Brian Fling and I’m a Mobile Designer twitter.com/fling company: pinchzoom.com blog: flingmedia.com Fonts used: Archer & Avenir Illustrations by Simon Oxley (www.idokungfoo.com)