Designing for Mobile

About Me

• .Net developer for 12+ years

• Architect for 6+ years

• Mobile development for 3+ years

• Moved to mobile architecture 3 years ago

• Currently a mobile solutions architect at Southwest

http://www.slideshare.net/uxisrael/designing-for-touch-and-beyond-josh-clark

Responsive DesignApproach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Web is not just for mouse. What responsive really means

Multiple Displays

Variety of Inputs (text only, screen readers, voice and gestures)

Responsive layouts allow for standardization across multiple hardware platforms

Responsive frameworks are now common place among web developer tools

What about the Web?

Touch Targets

And here’s some math..

CSS : 1 pixel = 1/96 inch7mm = 26.457 pixels (round up to 30 pixels)

So 30 pixels is the ideal touch size? DynamicViewports

name phys width phys height css width css height

Apple iPhone 7 750 1334 375 667

Apple iPhone 6 Plus, 6s Plus 1080 1920 414 736

Apple iPhone 6, 6s 750 1334 375 667

Apple iPhone 5 640 1136 320 568

Apple iPhone 4 640 960 320 480

Apple iPhone 3 320 480 320 480

Apple iPod Touch 640 1136 320 568

LG G5 1440 2560 360 640

LG G4 1440 2560 360 640

LG G3 1440 2560 360 640

LG Optimus G 768 1280 384 640

Samsung Galaxy S7, S7 edge 1440 2560 360 640

Samsung Galaxy S6 1440 2560 360 640

Samsung Galaxy S5 1080 1920 360 640

Samsung Galaxy S4 1080 1920 360 640

Samsung Galaxy S4 mini 540 960 360 640

44 Pixels

48 Pixels

2.75 ems, based on 16 pixel default size

44

29

Mobile Design Best PracticesThese concepts will help your mobile application or mobile website

become more usable and more effective. This is the fun stuff!

Clarity trumps density

Progressive Disclosure

Extra taps and clicks are not evil!

Speed matters & Speed Kills

CarouselsDetail Views

Extra Fields Form

Fie

lds

Select

Men

us

Confirm

ation

Button

s

The Best Touch interface is sometimes No

Touch at all

Clarity Trumps Density

Progressive Disclosure

Extra Taps and Clicks Are not Evil!

Turbo Tax does it right!

Speed Matters

Google's latest study — The Need for Mobile Speed

53% sites are abandoned if page takes longer than 3 seconds to load.

1 in every 2 people expect the page to load in less than 2 seconds

Morgan Stanley did a study that found:

91% adults use smart phones

14% consumers buying products online

People are browsing on their mobile device and move to their personal computer to shop online.

52 taps

102 seconds

40 taps

109 seconds

4 taps/swipes

8 seconds

Speed Kills

Extra Fields

40 Fields!

10 Fields!

Speed Kills

Select Menus

Speed Kills

ConfirmationButtons

Warning about Gestures

Speed Kills

Detail Views

Speed Kills

Carousels

Speed Kills

Long Scroll

Best Touch is sometimes No Touch

at all

1. How did you get into programming?

2. How do you learn new things/stay good at programming/keep up-to-date?

3. Based on your experience with working with young developers, what's some of the most important advice that you think you can give?

4. What kinds of jobs have you had (startups, stable corporate jobs, freelancing, etc.) and what are some of the goods and bads of the different career paths?