Download - Mobile Web Anti-Patterns
![Page 1: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/1.jpg)
Anti-Patterns for the Mobile Web
OpenRoad Lunch & Learn // James Byun // September 18, 2013
![Page 2: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/2.jpg)
![Page 3: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/3.jpg)
![Page 4: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/4.jpg)
![Page 5: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/5.jpg)
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.
![Page 6: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/6.jpg)
wtfmobileweb.commobilewebbestpractices.com
![Page 7: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/7.jpg)
#1: No Mobile Site
![Page 8: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/8.jpg)
Responsive and mobile are not yet considered defaults
![Page 9: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/9.jpg)
The current site build may not be suited for having a mobile version.
![Page 10: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/10.jpg)
Device Testing
![Page 11: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/11.jpg)
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
![Page 12: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/12.jpg)
#2: Doorslams
![Page 13: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/13.jpg)
![Page 14: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/14.jpg)
![Page 15: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/15.jpg)
![Page 16: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/16.jpg)
#3: m.yoursite.com
![Page 17: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/17.jpg)
- Search Engine Optimization- Redirect Delays- Sharing
![Page 18: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/18.jpg)
![Page 19: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/19.jpg)
W3C’s One Web PhilosophyOne web, one URL, any device.
![Page 20: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/20.jpg)
#4: Add to Home
![Page 21: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/21.jpg)
![Page 22: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/22.jpg)
![Page 23: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/23.jpg)
- Don’t assume user’s browser- Chrome: - no bottom toolbar- Mail, Social Med. Clients: - all different- Don’t assume user’s environment.
![Page 24: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/24.jpg)
#5: Bad Touch Affordances
![Page 25: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/25.jpg)
![Page 26: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/26.jpg)
![Page 27: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/27.jpg)
Fitts Law
![Page 28: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/28.jpg)
Fitts LawAcquiring a target is faster as a target is larger. More errors occur as targets become smaller.
![Page 29: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/29.jpg)
PrioritiesMake it easy for your user to achieve the page goal you have set for that page. Prioritize everything else after.
![Page 30: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/30.jpg)
![Page 31: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/31.jpg)
![Page 32: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/32.jpg)
#6: Default HiDPI Images
![Page 33: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/33.jpg)
![Page 34: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/34.jpg)
To consider- Does it need to be hi resolution?- Will it make a big difference if it’s not?- Can it be vectorized?
![Page 35: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/35.jpg)
#7: Ignoring the Fold
![Page 36: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/36.jpg)
![Page 37: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/37.jpg)
![Page 38: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/38.jpg)
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.
![Page 39: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/39.jpg)
#8: Mystery Meat
![Page 40: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/40.jpg)
![Page 41: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/41.jpg)
![Page 42: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/42.jpg)
“If I don’t understand why it happened, I probably can’t repeat it.”
![Page 43: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/43.jpg)
![Page 44: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/44.jpg)
Show visual cues for all actions and use text labels with icons where possible.
![Page 45: Mobile Web Anti-Patterns](https://reader034.vdocuments.mx/reader034/viewer/2022052322/557dde7fd8b42a83568b47f5/html5/thumbnails/45.jpg)
Thanks!