Presentation for FlashTent in Hawaii

1. Designing for Mobile

2. Dee Sadler
Adobe Community Professional
Adobe Certified Expert / Instructor
Adobe Freelancer Program
and... am a UI strategist for Sprint
Dreamweaver and Fireworks video presenter
currently doing a Designing for mobile video title,
and a Dreamweaver book
@DeeSadler

3. Areas of mobile design
1. Mobile web or mobile app?
2. Does size really matter?
3. Human Interaction - what?
4. Wireframing/prototyping
5. Choices, choices..

6. Mobile web, or app?

8. Media Queries
/* Smartphones (portrait and landscape) -----------
*/ /* iPads (landscape) ----------- */
@media only screen @media only screen
and (min-device-width : 320px) and (min-device-width : 768px)
and (max-device-width : 480px) { and (max-device-width : 1024px)
/* Styles */ and (orientation : landscape) {
} /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen /* iPads (portrait) ----------- */
and (min-width : 321px) { @media only screen
/* Styles */ and (min-device-width : 768px)
} and (max-device-width : 1024px)
and (orientation : portrait) {
/* Smartphones (portrait) ----------- */ /* Styles */
@media only screen }
and (max-width : 320px) {
/* Styles */ /* Desktops and laptops ----------- */
} @media only screen
and (min-width : 1224px) {
/* iPads (portrait and landscape) ----------- */ /* Styles */
@media only screen
and (min-device-width : 768px)
From Hard Boiled Web Design, by Andy Clarke
and (max-device-width : 1024px) {
/* Styles */
}

9. Example for iPhone
.myImage {
height: 40px;
width: 100px;
-webkit-background-size: 100px 40px;
background: url("images/myImage.jpg");
}
@media screen and (-webkit-device-pixel-ratio: 2) {
.myImage {
background: url("images/myImage@2x.jpg");
}
}

10. Flex media queries
ActionBar { chromeColor: #000000; }
@media (os-platform: "Android")
{
ActionBar { chromeColor: #999999; /* dark gray */ }
}
@media (os-platform: "IOS")
{
ActionBar { chromeColor: #6DA482; /* blue */ }
}
This example code uses the default ActionBarSkin skin class from the Mobile theme and changes
thechromeColor property.You can use this same technique to completely replace the default skin with
your own platform-specific skin.

11. Choices using themes
• Create your own build scripts
• Manually change the arguments per platform
• Refactor your project into multiple projects that share the
same base project and/or libraries

12. Design for..
• latency
• segment your content (provide your own app structure and navigation
• pixel denisty and screen size
• use true full screen for video
• reinforce spation relationships with motion

22. If you are going to bother making a web app, consider the
experience

23. http://pttrns.com

31. Decide things like,
How is the user going to navigate?

32. Size
Does it matter?

33. Pixel Density/Screen size
To get the ppi, you first need to find out how many pixels there are diagonally.
This is the square root of each side squared, added together
(from a2 + b2 = c2)
Android densities: low, medium, high and extra high
Density-independent pixel (dp)
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium"
density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The
conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels.You should always use
dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.
http://developer.android.com/guide/practices/screens_support.html

34. So much for easy
Resolution
The total number of physical pixels on a screen.
• Screen density
The quantity of pixels within a physical area of the screen, usually referred to as DPI (dots per inch).
• Density-independent pixel (DP)
This is a virtual pixel unit that you would use when defining a layout’s UI in order to express the
layout’s dimensions or position in a density-independent way. The density-independent pixel is
equivalent to one physical pixel on a 160 DPI screen, which is the baseline density assumed by the
system of a “medium”-density screen. At runtime, the system transparently handles any scaling of the
DP units as necessary, based on the actual density of the screen in use. The conversion of DP units to
screen pixels is simple: pixels = DP * (DPI / 160). For example, on a 240 DPI screen, 1 DP equals 1.5
physical pixels. Always use DP units when defining your application’s UI to ensure that the UI displays
properly on screens with different densities.

35. Device Screen res (height x
width)
iPhone - 320 x 480
iPhone 4 - 320 x 480 (scaled up by a factor of 2)
Nokia N97 - 360 x 640
HTC Legend - 320 x 480
LG eXpo - 480 x 800
Apple Human Interface Guidelines recommends a
hit target no less than 44 X 44px

36. Pixel Screen Densities. Bad above, and good below

37. From Apple’s guidelines

38. Fingers, where to go

40. Gestures
by Steven Hoober

41. Human Interactioin Guidelines

42. Be aware of orientation
Add detail and depth
Typography is just as important
Think twice before you design
a standard control!
Create a great brand experience

43. Think top down
Where is their hand going to be?
Make usage easy and logical
Design using physicality and realism
Always work at a higher resolution
than you need.

45. Where to go
http://developer.android.com/guide/practices/screens_support.html
http://developer.apple.com/library/ios/#documentation/userexperience/
conceptual/mobilehig/Introduction/Introduction.html#//apple_ref/doc/uid/
TP40006556-CH1-SW1
http://www.adobe.com/devnet/devices/articles/designing-blackberry-
playbook.html

46. Wireframing/prototyping

50. Fireworks Android template

55. Vector or Raster?
Vector is fine for simple shapes
If it is complex... rasterize it!
Think in terms of render times

56. Wireframes
Balsamiq
Axure
Fireworks
Omnigraffle
EightShapes for InDesign
iMockups for iPad
SketchyPad for iPad
Keynotopia for Keynote
Many, many more

57. Using Fireworks
Pages/Master Pages

58. Why I use Fireworks
Canvas size
Vectors vs bitmaps
Layers, sublayers
Master pages
States and sharing to layers
slices
9-alice scaling guides
symbols
orientation and resizing

59. Choices and more choices!
Flex 4.5.x (design view has improved!)
Fireworks: Great for wireframing, is a vector web graphics too, has 9-slice scaling, master
pages, great export options, symbols, drag and drop to Flash for continued functionality.
States, click throughs, and more.
Photoshop: pixel-level control
Illustrator:Visuals, Flash integration, SVG
After Effects: High-fidelity prototyping, transitions
Flash Pro: Interactive design, High-fidelity prototypes, AIR applications, export for mobile,
works great with Flash Builder
Flash Catalyst: Great for wireframing, prototyping click-through and transitions

63. Thanks!
http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/anatomy-of-a-html5-mobile-app
http://www.unitymobile.com/
http://www.modernizr.com/
http://developer.android.com/guide/practices/ui_guidelines/index.html
http://help.adobe.com/en_US/flex/mobileapps/WSe11993ea1bd776e514f77f1212a431f2a35-8000.html
www.androidpatterns.com and www.pttrns.com
http://developer.apple.com/library/ios/navigation/
http://developer.android.com/guide/index.html
http://www.usercentric.com/news/2009/08/26/best-practices-designing-mobile-applications
http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html

64. The Mobile Design Process
http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/the-mobile-...
MobileTuts
http://mobile.tutsplus.com/
jQuery Touch-Optimized Web Framework for Smartphones & Tablets
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/
The Dos and Do Nots of Mobile Applications
http://www.getelastic.com/mobile-app-dos-donts/
iPad Apps Dos and Don'ts
http://www.uxbooth.com/blog/ipad-app-dos-and-donts/
Considerations for Mobile Design
http://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/
Best sites ti get mobile resources
http://www.ekoob.com/best-sites-to-get-mobile-resources-4523/
Smartphone Infographic
http://rww.readwriteweb.netdna-cdn.com/assets_c/2011/06/the-intellegent-...
14 Differences Between Mobile Search & Desktop Search Results
http://searchengineland.com/14-differences-between-smartphone-search-des...
Best Practices for Designing Mobile Touch Screen Applications
http://www.usercentric.com/news/2011/06/15/best-practices-designing-mobi...
Stencils and UI Elements
http://designmodo.com/30-free-web-mobile-ui-element-kits-and-stencils-fo...
Wireframe Tools and Kits
http://www.smashingapps.com/2011/02/02/50-free-web-ui-mobile-ui-wirefram...