Great article–“Designing a Mobile App? Don’t Make These 10 Mistakes”

This is a great article on Mashable on things to consider in designing a mobile app:  http://mashable.com/2012/04/11/mobile-app-design-tips/

Their 10 points summarized are:

  1. Don’t Begin Wireframes or Designs Without a Flowmap
  2. Don’t Disregard the Development Budget
  3. Don’t Start With Low Resolutions & Avoid Bitmaps
  4. Don’t Undersize the Hit Area
  5. Don’t Gratuitously Use Intro Animations
  6. Don’t Leave Users Hanging
  7. Don’t Blindly Copy Style From Other Operating Systems
  8. Don’t Overstuff Pixel-Dense Screens
  9. Don’t Assume Everyone Will Use Your App The Same Way You Do
  10. Don’t Forget About Gestures, But Don’t Abuse Them Either

Limitations of HTML5 Video and Audio in iOS

ipad-videoAs cool as the new HTML5 Video and Audio tags are for avoiding the need for plug-ins, in iOS (mobile Safari), it still has some problems.  Miller H. Borges Medeiros has a good blog post covering the issues.  Here are topics he discusses in more detail:

  • Can’t screenshot a video frame
  • Can’t play sound and video together
  • Can’t play multiple sounds or videos at the same time
  • Can’t control volume or mute using JavaScript
  • Can’t play video inline on iPhone
  • Can’t play sound or video without user interaction
  • Multiple HTML5 video elements on the same page cause bugs
  • Can’t play HTML5 video backwards (OK, I’m not sure why I’d do that anyway)

I recently was using JWPlayer which provides a nice one-stop Flash with HTML5 fallback (or vice-versa).  But it has the same limitations on iOS.  No real workarounds—just know the limitations and design around them.

Couple of iPad/iPhone web design links

Designer Michael Critz did a nice page showing all the fonts supported by Mobile Safari.  Since the @font-face tag only supports SVG fonts (with some limitations as documented here, it’s best to use these whenever possible:

http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/

Also, Yummygum just posted hundreds of free icons for iPad:

http://iconsweets2.com/