smart / responsive mobile design
DESCRIPTION
Designing for touch interactions on an ever-growing array of devices and screen sizes can be daunting. We will discuss efficient ways to focus mobile features, tips for designing for touch and approaches to implement a “responsive” design that adapts to any screen size.TRANSCRIPT
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Smart / Responsive Mobile DesignBarCamp Memphis, 2011
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Lokion is a proven, nimble team of experts crafting digital solutions that
work for real people.
@lokion
passion :: purpose :: practicality
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
???
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Focus First
1.Define the vision.2.Do your homework.3.Test. Refine. Retest.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
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
site?
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
“You can’t tell how well something will
work until it’s sitting in your sweaty palm.”
~Tom Hume
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Do Your Homework: Mobile Empathy
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Give users what they actually want, not what they say they
want.
“But what I really want
is…”
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
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
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
“A lot of times, people don't know
what they want until you show it to
them."~Steve Jobs, BusinessWeek, May 25 1998
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Test. Refine. Retest.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Mobile Design Quick Tips
1.Design for distraction.2.Avoid featuritus.3.Leverage hot zones.4.Know fat finger math.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Hot Zones
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Fat Finger Math
¼ inch
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Responsive Design
Single set of front end code for all devices.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
What is responsive design?
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
What is responsive design?
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Works great in modern smart phones
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
But what about everyone else?
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Top Down vs. Bottom Up Approach
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Recap
• 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
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
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
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.