Anti-Patterns for the Mobile Web

OpenRoad Lunch & Learn // James Byun // September 18, 2013

Anti-pattern?A repeated pattern of action, process or structure that initially appears to be beneficial, but ultimately produces more bad consequences than beneficial results. Wikipedia, Anti-pattern.

wtfmobileweb.commobilewebbestpractices.com

#1: No Mobile Site

Responsive and mobile are not yet considered defaults

The current site build may not be suited for having a mobile version.

Device Testing

Why You Should Build Mobile

- Better user engagement- Sites that feel built for their device

encourage users to use them.- People use mobile differently now

#2: Doorslams

#3: m.yoursite.com

- Search Engine Optimization- Redirect Delays- Sharing

W3C’s One Web PhilosophyOne web, one URL, any device.

#4: Add to Home

- Don’t assume user’s browser- Chrome: - no bottom toolbar- Mail, Social Med. Clients: - all different- Don’t assume user’s environment.

#5: Bad Touch Affordances

Fitts Law

Fitts LawAcquiring a target is faster as a target is larger. More errors occur as targets become smaller.

PrioritiesMake it easy for your user to achieve the page goal you have set for that page. Prioritize everything else after.

#6: Default HiDPI Images

To consider- Does it need to be hi resolution?- Will it make a big difference if it’s not?- Can it be vectorized?

#7: Ignoring the Fold

Consider:If you have user interaction that potentially leads to $, make it visible on load.

Narrow your page’s purpose down to one primary action, make it visible.

#8: Mystery Meat

“If I don’t understand why it happened, I probably can’t repeat it.”

Show visual cues for all actions and use text labels with icons where possible.

Thanks!