Interaction Design for Mobile Web Sites

transcript

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

Interaction Design for Mobile Web SitesOctober, 2011

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

that work for real people.

#lokion

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 We Need

1.Flexible grid.2.Flexible images and media 3.Media queries to scale it all

What is responsive design?

How did we get here?

1.CSS 32.Percentages and EMs3.Min-width and Max-width 4.Simple Math

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

Top Down

Bottom Up

@media (max- ‐device- ‐width:480px)

Bottom Up

480px 1280px +

Scale your images on mobile devices.

Handling responsive images

1. Images should be flexible.

img,object { max-width: 100%;}

Don’t be a jerk to your mobile audience2. Images should adjust according to bandwidth assumptions.

Resizing backgrounds with TimThumb

timthumb.php?src=cat.jpg&h=200&w=120

Basic example with minimum parameters. Uses a different width and height to show that everything else works the same as with normal image resizing

New cat .jpg 200px x 120px

Responsive Resources

Less Framework

http://www.lessframework.com/

Frameless

http://framelessgrid.com/

Handling Images

2. Images should adjust according to bandwidth assumptions.

Many other resizing libraries:

Tim Thumbhttp://code.google.com/p/timthumb/

Zebra Imagehttp://stefangabos.ro/php-libraries/zebra-image/

Imaginehttp://imagine.readthedocs.org/en/latest/index.html

• 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• Flexible images and media • CSS 3• Percentages and Simple Math• Resources

Resources / Contact

• A User-Centered Approach To Web Design For Mobile Devices• Designing for Mobiles: Users & Context from Niek Dekker on Vimeo.• 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

Give us a shout!www.lokion.com

901.591.1614

Interaction Design for Mobile Web Sites

Documents