Interaction Design for Mobile Web Sites

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

site?


“You can’t tell how well something will

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

~Tom Hume

http://www.tomhume.org/


Do Your Homework: Mobile Empathy


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

want.

“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

http://www.gettyimages.com/detail/78050378/Comstock-Images







“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?


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


Bottom Up

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


Bottom Up



Bottom Up



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

http://code.google.com/p/timthumb/






http://stefangabos.ro/php-libraries/zebra-image/

http://stefangabos.ro/php-libraries/zebra-image/

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




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• 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

http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/

http://vimeo.com/2447785

http://vimeo.com/niekdekker

http://vimeo.com/niekdekker

http://vimeo.com/

http://www.lukew.com/ff/entry.asp?933

http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/DesigningNativeApp/DesigningNativeApp.html#/apple_ref/doc/uid/TP40006556-CH4-SW1

http://yiibu.com/about/site/



http://go.microsoft.com/?linkid=9713252

https://help.ubuntu.com/community/UMEGuide/DesigningForFingerUIs

http://deviceatlas.com/explorer

http://www.opera.com/smw/

https://adwords.google.com/select/KeywordToolExternal

https://adwords.google.com/select/KeywordToolExternal

http://www.lokion.com/



Documents

Interaction Design for Mobile Web Sites