A Lunch and Learn talk on what not to do when designing for the mobile web. Credits: Dave Shea, wtfmobileweb.com, mobilewebbestpractices.com

1. Anti-Patterns for
the Mobile Web
OpenRoad Lunch & Learn // James Byun // September 18, 2013

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

6. wtfmobileweb.com
mobilewebbestpractices.com

7. #1: No Mobile Site

8. Responsive and mobile are not yet
considered defaults

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

10. Device Testing

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

12. #2: Doorslams

16. #3: m.yoursite.com

17. - Search Engine Optimization
- Redirect Delays
- Sharing

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

20. #4: Add to Home

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

24. #5: Bad Touch Affordances

27. Fitts Law

28. Fitts Law
Acquiring a target is faster as a target
is larger. More errors occur as targets
become smaller.

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

32. #6: Default HiDPI Images

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

35. #7: Ignoring the Fold

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

39. #8: Mystery Meat

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

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

45. Thanks!