thoughts of a ramblin gal

Mobile best practices by me

MOBILE BEST PRACTICE LINKS

Apple:
- http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html

Android:
- http://developer.android.com/design/index.html
- http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
- https://developer.android.com/design/style/iconography.html#launcher
- http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html
- http://developer.android.com/resources/dashboard/screens.html
- Downloads PSDs icons: http://developer.android.com/design/downloads/index.html
- http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
- Generic icons: http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-generic.html#source.space.trim=1&source.space.pad=0&size=24&padding=8&color=33b5e5%2C0&name=ic_example
- Android dpi calculator - http://coh.io/adpi/

Designing for iPhone 4, 5 Retina Display screen res:
- http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml
- http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
- http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
- http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14
- http://developer.android.com/guide/practices/screens_support.html
- PPI + CSS http://static.zealous-studios.co.uk/projects/web_tests/PPI%20tests.html

SVG Images:
- http://www.w3.org/TR/2003/REC-SVG11-20030114/
- use SVGs as much as possible for Android tablets + iOS tablets
- http://www.svgbasics.com/filters3.html
- http://www.xml.com/pub/a/2004/06/02/svgtype.html
- http://www.codedread.com/svg-support-table.html

Touch zones:
- http://www.kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/

Inspiration + Usability testing ideas:
- http://www.ourmobileplanet.com/
- http://pttrns.com/
- http://androidpttrns.com/
- http://dribbble.com/tags/iphone
- http://mokk.me/
- Great for testing! http://itunes.apple.com/us/app/prototypes/id430812258?mt=12
- http://www.androidpatterns.com/
- also good for quick UI testing -> http://verifyapp.com/
- http://www.lovelyui.com/
- http://uxformobile.com/mobile-pattern-galleries
- http://mobile-patterns.com/
- Pixel conversions: http://reeddesign.co.uk/test/points-pixels.html
- Screens of despair: http://screenshotsofdespair.tumblr.com/page/3
- Mobile patterns: www.mobiledesignpatterngallery.com/mobile-patterns.php
- Inspired UI: http://inspired-ui.com/
- iOS inspired: http://www.iospirations.com/component/iphoneinspirations/category/2-iphone-web-design-inspirations
- Travel apps: http://www.tappgala.com/travel/
- Mobile patterns: http://uxdesign.smashingmagazine.com/2012/04/10/ui-patterns-for-mobile-apps-search-sort-filter/
- http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/
- Speed of instagram’s background loading: http://speakerdeck.com/u/mikeyk/p/secrets-to-lightning-fast-mobile-design?slide=82

- Subtle patterns for backgrounds: http://subtlepatterns.com/

Wireframing and Mocks for Mobile + Tablet Ideas/Concepts:
- http://speckyboy.com/2012/02/22/tips-for-wireframing-a-usable-mobile-app-interface/
- Pencil on paper (my favorite)
- Teehan + Lax: http://www.teehanlax.com/downloads/

Mobile should have…
- really focused content and features, mobile does not have a lot of real estate so think carefully about what you show and why you show it
- UI flows should be logical and easy and always cater to the user’s task goal at hand
- keep it simple stupid (KISS)
- check out Luke W’s book on “Mobile First” and his guidelines / http://www.lukew.com/ff/entry.asp?933
- Use buttons not links
- use cell clicks for better affordance
- Consider touch target sizes / Affordance should be a nice thumb click size
- Where does my thumb land on the screen
- Spinners during load

Responsive Design:
- http://www.lukew.com/ff/entry.asp?1514
- http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
- http://bradfrostweb.com/blog/web/responsive-nav-patterns/
- http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

Responsive VS Adaptive Infographics:

- The Battle for Mobile

- Year of Responsive Design

- Responsive web designer interface

- Responsive web design

- Server-side solution