interaction design for mobile web sites
DESCRIPTION
TRANSCRIPT
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Interaction Design for Mobile Web SitesOctober, 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
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 We Need
1.Flexible grid.2.Flexible images and media 3.Media queries to scale it all
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.
How did we get here?
1.CSS 32.Percentages and EMs3.Min-width and Max-width 4.Simple Math
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.
Top Down
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Bottom Up
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Bottom Up
@media (max- ‐device- ‐width:480px)
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Bottom Up
@media (max- ‐device- ‐width:780px)
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Bottom Up
@media (max- ‐device- ‐width:1280px)
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Bottom Up
480px 1280px +
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Scale your images on mobile devices.
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Handling responsive images
1. Images should be flexible.
img,object { max-width: 100%;}
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
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
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Responsive Resources
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Less Framework
http://www.lessframework.com/
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
Frameless
http://framelessgrid.com/
Proprietary to Lokion . Sample images drawn from Google Images. Do not distribute without permission.
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
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• Flexible images and media • CSS 3• Percentages and Simple Math• 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.• 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
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.