Smart / Responsive Mobile Design

by Shiloh Barnat on Nov 14, 2011

329 views

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 approach...

More…

Less

Statistics

Favorites: 0
Downloads: 3
Comments: 0
Embed Views: 0
Views on SlideShare: 329
Total Views: 329

Smart / Responsive Mobile Design — Presentation Transcript

Smart / Responsive Mobile Design BarCamp Memphis, 2011Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

passion :: purpose :: practicality Lokion is a proven, nimble team of experts crafting digital solutions that work for real people. @lokionProprietary 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 HumeProprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

Do Your Homework: Mobile EmpathyProprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

“But what I really want is…” Give users what they actually want, not what they say they want.Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

Do Your Homework: Audience ResearchJoe 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 OtterboxProprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

“A lot of times, people dont know what they want until you show it to them." ~Steve Jobs, BusinessWeek, May 25 1998Proprietary 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.

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

Fat Finger Math ¼ inchProprietary 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.

Works great in modern smart phoneshttp://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibuProprietary 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-yiibuProprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

Top Down vs. Bottom Up ApproachProprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

Recap • Define the vision. • Responsive design • Do your homework. • Flexible grid • Test. Refine. Retest. • Percentages and Simple Math • Design for distraction. • Flexible images and media • Avoid featuritus. • Top down vs. bottom up • Leverage hot zones. • Resources • Know fat finger math.Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.

Resources / Contact Give us a shout! www.lokion.com 901.591.1614 • 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 libraryProprietary 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.

Smart / Responsive Mobile Design

by Shiloh Barnat on Nov 14, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Smart / Responsive Mobile Design — Presentation Transcript