Ingredients for great mobile web

In general, all of the aspects which make for a great desktop web app application will also contribute to an excellent mobile experience - both phone and tablet. However, there are additional elements which are unique to providing an optimized mobile experience (highest priority listed first).

• Tappable. UI components and navigation should be easy to tap with a finger, or sausage.
• Fluid Design. Since mobile devices vary dramatically in their resolution and physical size, the user interface should be fluid in its ability to fill the screen - making sure it looks equally great on an iPhone 3G, Samsung Note, iPad, and tablets which are a bit larger.
  
• Speed. Worth calling out explicitly, because if the web app isn’t snappy your users won’t give you a pass just because of a phone’s underpowered chip or low memory. They want speed, and they want it on their phone… today.
• Scrolling. Smooth scrolling infinite lists with non-jarring bounce physics is a polish detail that users expect on a mobile device - we can thank Apple for this elevated expectation. You likely want to spend time getting this right. Just ask Facebook.
• Familiar Navigation. UI components and navigation elements should evoke those of popular mobile operating systems, but should not attempt to copy any one operating system. The goal is for the web app to be obvious to use, but not be tied to the design of a given operating system. Instead, it should serve users of all mobile devices, equally. Yes, even Blackberry.
• Be Useful. Every web application should solve a real user problem in the simplest way possible. Obvious stuff, right?
• Down with full page refreshes. These are distracting, time wasting, and a remnant of a bygone era. As the user navigates, we should only be updating elements on the screen which absolutely need to change. All else stays put, and untouched. This will go a long way to the making app feeling like a native solution.
• Minimize logins. Minimize the frequency in which the user is required to enter credentials into the application. Login means typing, and most mobile users will thank you for less typing.
• Love your new users. Provide a great first time user experience so that new users can get started easily and immediately. Make new users feel welcome; roll out the web app red carpet. Let’s not dump them into an empty white canvas, but show them a path to success, or at least what they should do next.
• Less Keyboard. Minimize keyboard input required to use the application. We like to tap and swipe, not type.
• Feedback. Provide active feedback to the user for any network calls or long running tasks; spinner/progress indicator.
• Low Chrome, yo. Hide the browser chrome to provide user with maximum screen real estate. We don’t want to see the address and search bar while we’re using the web app, so let’s hide the browser stuff we don’t need.
• Full Site Access. Even though your mobile web app provides access to all features of the desktop version, it should still allow the user to single tap their way to the full desktop experience. Just in case.
• Respect the Data (transmission). Minimize round trip calls to the backend for data; favouring a single trip for lots of data versus many trips for smaller amounts of data. Also, try to not exhaust the customer’s data plan limit.
• Animations. Makes use of animated effects to provide additional feedback to the user and bring a native feel to the user experience. Be sure not to overdo it with animations, using them as subtle hints of activity, or adding a fun feel to the app.
• Orientation Friendly. Ensure the application looks and functions great in both landscape and portrait orientations - especially on tablets. There is much variation in how customers use their mobile devices; avoid assumptions in this regard. Personally, I’m all-landscape in tablet and all-portrait on my phone, except when I’m typing.
• Consistent with Desktop. If applicable, ensure the navigation/layout and design aesthetic of the full desktop web app matches your mobile web experience. There may be exceptions to this rule, but the idea is to provide familiar navigation across form factors, where it’s reasonable.
• Launch Icon. Provide a special launch icon that will be displayed if the user adds the web application to the home screen (iOS only). This is more for the power user, but a nice touch.
• Launch Image. Consider providing a launch image if the user launches from the home screen. Presented while app content is loaded and prepared for presentation (iOS only). Polish makes perfect.
• Gestures. Consider the use of multi-touch gestures to enhance the navigation and user experience. Advanced gestures should either be easily discoverable in some way, or reserved for power user functions that are not required for normal operation of the web app.
• Retina. Consider supplying all artwork in retina resolution so that users of iOS devices with retina will experience the application in full resolution.
• Fast Update UI. Or, ‘Instagram-ify your web app’. Consider updating the UI immediately to reflect a user action, even if the action requires a response from a call to the server. For example, if the user taps a Star button to favorite a post. Update the Star button immediately to reflect the action, and then make the call to the server to save the Favorite action. This gives the UI a responsive feel, even though we’re still waiting on the server for final result.

More ideas? Please let me know.

Thanks to @briandotnet, @DJJeffPrice, @Dave Jones, @bobbeaton for their input on this list.