Smart / Responsive Mobile Design

transcript

Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

Smart / Responsive Mobile DesignBarCamp Memphis, 2011

Lokion is a proven, nimble team of experts crafting digital solutions that

work for real people.

@lokion

passion :: purpose :: practicality

Focus First

1.Define the vision.2.Do your homework.3.Test. Refine. Retest.

Define the Vision

• WHO are we designing for?• WHICH devices are they using?• WHERE and WHEN do they use it?• WHAT do THEY need / want /

expect?• WHAT do WE need / want / expect?• HOW will this improve their

experience?• WHY are we designing this mobile

“You can’t tell how well something will

work until it’s sitting in your sweaty palm.”

~Tom Hume

Do Your Homework: Mobile Empathy

Give users what they actually want, not what they say they

“But what I really want

is…”

Do Your Homework: Audience Research

Joe Sarah Helen JakeYoung Cocky Pilot Friendly Flight Attendant PT Ground Service Agent Pragmatic MechanicEvo Android HTC Inspire she calls iPhone Costco Samsung T939 iPhone with

Otterbox

“A lot of times, people don't know

what they want until you show it to

them."~Steve Jobs, BusinessWeek, May 25 1998

Test. Refine. Retest.

Mobile Design Quick Tips

1.Design for distraction.2.Avoid featuritus.3.Leverage hot zones.4.Know fat finger math.

Hot Zones

Fat Finger Math

¼ inch

Responsive Design

Single set of front end code for all devices.

What is responsive design?

Works great in modern smart phones

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

But what about everyone else?

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Top Down vs. Bottom Up Approach

• Define the vision.• Do your homework.• Test. Refine. Retest.• Design for distraction.• Avoid featuritus.• Leverage hot zones.• Know fat finger math.

• Responsive design• Flexible grid• Percentages and Simple Math• Flexible images and media • Top down vs. bottom up• Resources

Resources / Contact

• A User-Centered Approach To Web Design For Mobile Devices• Designing for Mobiles: Users & Context from Niek Dekker on Vimeo.• Responsive Web Design by Ethan Marcott• Responsive Design How To & Gallery• Mobile First by http://www.lukew.com • Yiibu’s proof of concept site based on Mobile First• iPhone Human Interface Guidelines• Windows Phone UI Design and Interaction Guide (PDF)• Ubuntu Designing for Finger Uis• DeviceAtlas • Opera’s State of the Mobile Web• Google keyword tool in AdWords• Less responsive design framework• Frameless responsive design framework• Tim Thumb image scaling• Zebra Image media scaling• Imagine media scaling library

Give us a shout!www.lokion.com

901.591.1614

Smart / Responsive Mobile Design

Technology