DESIGNING & BUILDING
IPHONE APPS
by Brian Fling

DESIGNING & BUILDING
MOBILE APPS
by Brian Fling

Available
SOON
http://mobiledesign.org

WHO AM I?

How I got here...
1975 Born
...some time passed
1993 Graduated High School
1993 Trained as a Barista
1994 Started at Starbucks
1995 Married my wife
1996 My “Jerry McGuire” moment
1997 Quit Starbucks
1998 Made an animated series
1999 My first web & mobile job
2000 Lost my job.
2000 Got my first mobile phone
2001 September 11

How I got here...
2002 Started at Children’s Hospital
2004 Started at Classmates
2004 Started at Dwango
2005 Fired then sued
2005 Cameron Moll’s articles
2005 Mobile or Web?
2006 Created Blue Flavor
2007 Wrote dotMobi Guide
2008 Created Leaflets
2008 Focused on iPhone
2009 Started my Book
2009 Created pinch/zoom
2009 Here today

AGENDA
Why Mobile? Types of Mobile Apps
New Rules Context Exercise
Design Process <lunch>
Designing for Context
<break>

AGENDA
Mobile IA iPhone Web Apps
Mobile Design Supporting Devices
(maybe?)
Web Apps vs.
Native Apps
<break>
Mobile 2.0
Mobile Web Dev

HOUSEKEEPING
These slides are available upon request
(available on Slideshare around 9/5)
slideshare.net/fling
flingmedia.com
linkedin.com/in/fling
mobiledesign.org
@fling

What do
you want
to learn?

What is Mobile
Design?

JARGON ALERT
Mobile Design
The creation of user experiences
for the mobile context.

It doesn’t start
with Photoshop

Part 1:
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.
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

Part 2:
New
Rules

Rule
Forg #1
et W
You hat
Thin
You k
Kno
w

Rule
Belie #2
ve W
You hat
See,
Wha Not
t You
Read

Rule
Con #3
strai
Nev nts
er C
ome
First

Rule
#4
Focu
s on
Con
text,
Goa
ls an
Nee d
ds

Rule
You #5
Can
Supp ’t
Ever ort
ythin
g

Rule
#6
Don
Con ’t
vert
Crea ,
te

Rule
#7
Keep
Simp It
le

Part 3:
Design
Process

IDEA
The first thing we need is
an idea that inspires us.

NEED
Identify a basic need with
our desired user.

CONTEXT
The circumstances where
information can add value.

STRATEGY
How we can add value to
the business.

DEVICES
Choose the devices to
support that best serves our
audience.

DESIGN
Create a compelling user
experience based around
needs.

DEV
Put all the pieces together.

TEST
And test, and test, and test
some more.

OPTIMIZE
Reduce all assets to its
lowest possible size.

PORT
Adapt for other devices
that fit our strategy.

Part 4:
Context

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.

context with a lowercase
context c is the mode, medium,
little c or environment in which
we 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—but also 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?

Example

Exercise:
Defining
the
Context

Lunch

DESIGNING & BUILDING
IPHONE APPS
by Brian Fling

Part 5:
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

LOCALE

INFORM
ATIVE

PRODUC
TIVITY

IMMERSI
VE

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

Part 6:
Mobile
IA

KEEP IT
SIMPLE

SITEMAPS

CLICKSTREAMS

Start
? No View Option View
Option
Yes
Action Yes ? No Action
Action
Maybe
? No
?
No Yes
Yes
No
Action View
View
No
No
View
?
Yes
?
Yes
View
View
Finish

WIREFRAMES

PROTOTYPING

DIFFERENT IA
FOR
DIFFERENT
DEVICES?

THE
DESIGN
MYTH

Back Title New
Content
Navigation

Exercise:
IA
Critique

Part 7:
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
difficult to produce.

Color
The most common obstacle you
encounter when dealing with color
is mobile screens.
When complex designs are displayed
on different 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
microscopic 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 difficult to create
that best possible experience for a
plethora of different
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

Part 8:
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 #
1
mentat
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
on #
Con 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?

Part 9:
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”

Part 10:
Mobile
Web Dev

Using
Web Standards

Multiple Mobile Browsers
Designing and • Being able to visualize
developing for how your designs will
multiple mobile be rendered on a
browsers variety of devices in
simultaneously is a your head, as you lay
challenge, but not an down code.
impossibility.
• It requires looking at
your designs and code
from many contexts.

Progressive Enhancement

LAYOUT

Fixed vs. Fluid

Multiple vs. Single
Column Layouts

DEVICE
PLANS

Class A Browsers
Excellent XHTML 1.0 support positioning, floats, and
• Good HTML5 support; complex CSS-based layouts
specifically, the canvas • Support for image
element and offline storage replacement techniques
• Excellent CSS support, • Excellent JavaScript support
including most of CSS Level • Ability to toggle the display
2.1 (scores 90 percent or property
higher
• Support for DOM events,
• on the ACID2 test) and the including Ajax
majority of CSS Level 3 (scores
• Considered comparable to a
75 percent or higher on the “desktop-grade” browser
ACID3 test)
• Support for web standards
layouts, including absolute

Class B Browsers
Excellent XHTML 1.0 support • Can support complex tables—
• Good CSS Level 2.1 support not necessarily nested tables—
(scores 75 percent or higher on up to four cells in a row
the ACID2 test) • Setting a font size of 10 pixels
• Padding, border, and margin or more produces readable
properties are correctly text
applied • Has limited JavaScript
• Can reliably apply colors to support, being at least able to
links, text, and background toggle the display property
• Supports image replacement
techniques
• Minimum screen width: 164
pixels

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 • “Width” expressed as a
• Limited CSS support percentage may be
(CSS Level 1, or does not unreliable
recognize cascading)
• Minimum screen width:
120 pixels
• Hyperlinks may not be
colorable by CSS
• Basic table support: 2!2
or more
• colspan and rowspan
may not be supported
• No JavaScript support

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

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 effects reduces
time to download as well

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.

Part 11:
iPhone
Web Apps

What makes a
Mobile Web App?

URL Bar
Browser Controls

What is WebKit?

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, offline
storage, document
editing, and media

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

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 Effects
CSS Transforms
Frameworks
Fixed Footer Scrolling
Multi-touch
Standalone Mode

Part 12:
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.

Conclusion:
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.

neurolinguistic
programming

Lear
ni ng T
Aud 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
ni
Kine ng T
ype
sthe
45%
of al t ic
incorp
orat
l peop
and
hand e muscl le
proc -eye e me
ess a movem mory
nd re ent t
infor tain o
mat new
ion

The Mobile Generation
2009 2010 2011 2012 2013 2014 2015
Everyone Else
source: us census bureau

Today’s investors, boardrooms, and entrepreneurs are
looking for value in all the wrong places. Facebook’s game
of musical chairs won’t solve big economic problems—
and neither will making token investments in green tech.
Where is the next industrial revolution crying out for
revolutionaries? Simple: in industries dominated by clear,
durable, structural barriers to efficiency and productivity.
—Umair Haque, 21st Century Industrial Revolution

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)