Mobile Creativity 2008
Going Mobile
A Pragmatic Look at Mobile Design
Bryan Rieger
bryan.rieger@futureplatforms.com

http://www.flickr.com/photos/ishane/2478049891/
mobile is different

multiple networks
limited memory tiny small cpu
screen
one app
many variations
no mouse
limited battery life
indirect manipulation
numerous platforms and technologies

context of use
http://www.flickr.com/photos/psd/2197649475

http://www.flickr.com/photos/robyn-gallagher/185437944
private device – public context

http://www.flickr.com/photos/zac-attack/2506457417/
expect distractions

http://www.flickr.com/photos/gaetanlee/118885175
expect diversity

http://www.flickr.com/photos/hawksanddoves/325231714
a few walled gardens...

WAP T9 MMS predictive text
location-based services
GPRS transcoding SMS WURFL
GPS
GSM
3GP EDGE
WiFi NTT DoCoMo
OEMs haptics
CLDC 3G
MIDP OpenWave
.mobi NetFront
SVG WebKit
operators Symbian
Java ME Android
Opera UiQ
Flash Lite Series 60
Bluetooth Series 40
nSeries
tri-band
and lots of jargon.

Some things change quickly...

voice
monochrome
sms
wap
bitmaps
circa 2001

voice web WiFi
Java
3G podcasting
Bluetooth
mega-pixel+
video
cameras
gesture
blogging haptic
SVG full colour
music
Flash
gigabytes location-based services
circa 2007

but not everywhere at once...

2003 device
VERY popular in SE Asia in 2007....
Silicon Valley South East Asia
circa 2007

and other things
change very slowly...

two hands
two eyes
two ears
two feet
http://en.wikipedia.org/wiki/Human_being

design for human beings

http://www.flickr.com/photos/ikkoskinen/311484235
do research

http://www.flickr.com/photos/veganstraightedge/2256486567
iterate quickly

http://www.flickr.com/photos/yandle/761632009
test ideas often

http://www.flickr.com/photos/mellis/304872324
get something on a device quickly

http://www.flickr.com/photos/viriyincy/2491840552
focus on the content

http://www.flickr.com/photos/robyn-gallagher/185437944
don’t forget the context

design for mobile
the problem with pixels...

2.0“
2.6“ right there 240 x 320 pixels
240 x 320 pixels ~100 ppi
exactly how big is a pixel?
A real problem faced when dealing with pixel fonts...

limited support
SVG vs Flash?
the future...
what about vectors?
http://en.wikipedia.org/wiki/Image:VectorBitmapExample.png

small
medium
large
bold
italic
regarding mobile typography...

but it’s starting to get better!
http://patterns.littlespringsdesign.com/index.php/Mobile_Typography
http://sender11.typepad.com/sender11/2008/01/prototyping-mob.html

design-time to runtime
from _________________ to _______________
insert favorite design tool insert final runtime

filters
animation multiply, screen, inverse, etc
great animation sequence created in Flash
gradients
typically can’t be rendered dynmaically
effects
anti-aliasing drop shadows, glows, reflections, etc
often makes re-use difficult
custom fonts
different sizes, colours and styles
large images
backgrounds, buttons, splash screens, etc
12.34K+
original design

Does this text change?
might need to include other versions...
unselected?
we’ll need to include the white versions as well
background
still haven’t included 13.86K image...
custom fonts
do we need to include different sizes, colors?
8.68K+
original resources

index transparency
animation 1bit instead of 8bit transparency
revisit animation later
solid colours
much faster to render dynamically
no effects
box drawn dynamically at least simple Photoshop effects
no resources required
system fonts
designed for the device
flat background
no additional memory/storage required
5.35K+
simplified design

margins + padding
as numeric values
composite
anti-aliased angle is added to drawn box
composite elements shadow
combine bits and pieces as required simple offset solid drop shadow adds depth
device fonts
no additional resources or cpu cycles needed
design notes

animation + states
single image - works much like a flipbook
aliased edges
can be used on different colours
2.87K
all resources

highlight_colour: 0x00FFFF
like css, no?
use what already works margin: 4 easy to update
colour changes can often be made by developers
padding: 4
shadow_colour: 0x333333
shadow_offset-x: 2
shadow_offset-y: 2
screen_width: 240 or 176 x 220
screen_height: 320 tweaking values making porting ui much easier!
constants

simple expressions
header.height = icon.height + (padding*2)
known value
much more flexible than
highlight.width = (screen_width/2) - (padding*2)
highlight.height = icon.height + font.leading + (padding*2)
value easily tweaked
useful when porting to different screen sizes
constraints

+ 871 bytes base shape
reused by all similar elements
+ 530 bytes font could be separate
composited from a complete set of glyphs
+ 388 bytes transparent overlay
typically used as a ‘screen’ filter
= 1,789 bytes vs 2,147 bytes
final composite image single exported image
requires designer + developer co-operation designer as lone wolf...
composites

design for humans the mobile web is different
don’t just design on a computer Flash, SVG, Ajax, etc aren’t standard
do research and prototypes define constants
understand your users and the experience border: 4px; text-colour: 0xFF33EE;
get something on a device asap apply constraints
solve design problems in context ${this.width = screen.width/2}
very limited typography create composites
type on mobile has a long way to go button = base + icon + highlight;
pixel sizes will likely vary design flexible layouts
as will pixel density on many devices for screen widths of 176px to 240px+
colour will vary between devices optimize for file size and memory
no standard gamuts or depths render just-in-time if possible
tips + techniques

Little Springs Mobile Resources Adobe Mobile & Devices
http://patterns.littlespringsdesign.com http://www.adobe.com/devnet/devices
dotMobi: Mobile Web Development Forum Nokia
http://dev.mobi http://forum.nokia.com
mobiledesign.org Mobile Monday
http://log.mobiledesign.org/ http://www.mobilemonday.net/
Squidoo: Mobile Design Mobile Processing
http://www.squidoo.com/mobiledesign http://mobile.processing.org/
Cameron Moll: Mobile Web Design Mobile User Experience
http://mobilewebbook.com/ http://www.mobileuserexperience.com/
mobile design resources

thank you
Bryan Rieger
bryan.rieger@futureplatforms.com