Designing for Mobile

Dee SadlerAdobe Community Professional

Adobe Certified Expert / InstructorAdobe Freelancer Program

and... am a UI strategist for SprintDreamweaver and Fireworks video presenter

currently doing a Designing for mobile video title, and a Dreamweaver book

@DeeSadler

Areas of mobile design1. Mobile web or mobile app?

2. Does size really matter?

3. Human Interaction - what?

4. Wireframing/prototyping

5. Choices, choices..

Mobile web, or app?

Media Queries/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/* Styles */}

/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) {/* Styles */}

/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) {/* Styles */}

/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */}

/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Styles */}

/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}

/* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) {/* Styles */

From Hard Boiled Web Design, by Andy Clarke

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");     }}

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.

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

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

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

http://pttrns.com

Decide things like,

How is the user going to navigate?

SizeDoes it matter?

Pixel Density/Screen sizeTo 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 highDensity-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

So much for easyResolutionThe total number of physical pixels on a screen.

• Screen densityThe 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.

Device Screen res (height x width)

iPhone - 320 x 480iPhone 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

Pixel Screen Densities. Bad above, and good below

From Apple’s guidelines

Fingers, where to go

Gestures

by Steven Hoober

Human Interactioin Guidelines

Be aware of orientation

Add detail and depth

Typography is just as important

Think twice before you designa standard control!

Create a great brand experience

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 resolutionthan you need.

Where to gohttp://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

Wireframing/prototyping

Fireworks Android template

Vector or Raster?

Vector is fine for simple shapes

If it is complex... rasterize it!

Think in terms of render times

WireframesBalsamiqAxure

FireworksOmnigraffle

EightShapes for InDesigniMockups for iPad

SketchyPad for iPadKeynotopia for Keynote

Many, many more

Using Fireworks Pages/Master Pages

Why I use FireworksCanvas size

Vectors vs bitmaps

Layers, sublayers

Master pages

States and sharing to layers

slices

9-alice scaling guides

symbols

orientation and resizing

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

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

The Mobile Design Processhttp://mobile.tutsplus.com/tutorials/mobile-design-tutorials/the-mobile-...

MobileTutshttp://mobile.tutsplus.com/

jQuery Touch-Optimized Web Framework for Smartphones & Tabletshttp://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/

The Dos and Do Nots of Mobile Applicationshttp://www.getelastic.com/mobile-app-dos-donts/

iPad Apps Dos and Don'tshttp://www.uxbooth.com/blog/ipad-app-dos-and-donts/

Considerations for Mobile Designhttp://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/

Best sites ti get mobile resourceshttp://www.ekoob.com/best-sites-to-get-mobile-resources-4523/

Smartphone Infographichttp://rww.readwriteweb.netdna-cdn.com/assets_c/2011/06/the-intellegent-...

14 Differences Between Mobile Search & Desktop Search Resultshttp://searchengineland.com/14-differences-between-smartphone-search-des...

Best Practices for Designing Mobile Touch Screen Applicationshttp://www.usercentric.com/news/2011/06/15/best-practices-designing-mobi...

Stencils and UI Elementshttp://designmodo.com/30-free-web-mobile-ui-element-kits-and-stencils-fo...

Wireframe Tools and Kitshttp://www.smashingapps.com/2011/02/02/50-free-web-ui-mobile-ui-wirefram...