UI Guidelines for mobile and tablet web app design

Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes. Many of the guidelines focus on native application development, but we can apply most parts of them to mobile web design too.

Remember to provide the best possible experience on each platform. Do not deliver an iPhone experience to a BlackBerry user. Every platform has its own UI and usability guidelines that every user is expecting on your app.

More tips on mobile web design on the Programming the Mobile Web book.

Do you know any other UI Guideline? Insert the link on the comment area.


27 thoughts on “UI Guidelines for mobile and tablet web app design

  1. FANTASTIC post! Thanks so much for putting all this in one place. Be certain that it’s very much appreciated. I’m curious: do you find any of these guideline docs to be especially MORE thorough or complete?

  2. Please point out the pitfalls of NOT following the guidelines, mentioned above, perhaps then, people would understand how important they are & follow them!

  3. Although the lines are blurry, it should be pointed out that many of these do not relate to web site or app UIs, but tend to mean those built with native technologies

    Not that there need be a big cosmetic different between apps depending on how they are built, but some of the UI guidelines mentioned may actually be unimplementable in the browsers of some of these platforms.

  4. James, you are right. Many of these guidelines are for native apps and there is no official guidelines for many platforms.

    However, these are just UI guidelines. Even most native applications don’t implement them. They are just an idea of what the user should expect from UI interaction on each device. And that is helpful also for webapps/web UI design.

    For example, I’m seeing a lot of webapps for Android implementing the top-left back button (like in iOS) without capturing the Android Back button at least to provide the same functionality. The UI designer must know these diferences between devices and what users should expect. Ok, you can not capture back button from Android Browser, but you can emulate it using hashs in the URL ;) Most UI patterns are being emulated by UI frameworks, like Sencha or jQuery Mobile on compatible devices.


  5. What is a better user experience for a mobile phone game?
    A. Hit the game play button,see a ‘how to play’ screen with a ‘no don’t show again’ button before being allowed to play the game.

    B. Have a ‘help/how to play’ button on the main menu. But do not present this information unless a user actually clicks to read the how to play info.
    thanks in advance.

  6. Brilliant work:) but just wondering, as most of the platform support Java, so if i would like to implement some application which can be used on all the mobile devices(supported device), so what UI standard should i follow? can you please put some light on it or let me know some links or guidlines.


  7. Pingback: Quora
  8. This is a great resource! Thank you. At the end of your list, you ask for readers to let you know, via the comments, of any other resources. I don’t have those, but I did want to let you know that BlackBerry must have taken down the Guidelines 4.x and 5.x, as I received a 404 error when I tried both the web link and the PDF link. I think the info now resides in the 6.0 version of the document, which you already have identified in the preceding item in your list.
    Thank you again! This is a GREAT resource.

  9. Hi, for mobile web apps, I have combinations of different screen resolutions with different densities I want to fix the image size for buttons for those combinations. Can anyone help?

  10. for mobile web, use these native app guidelines as an indication of what not to include in your design. don’t dress your web app up like it is a native app. it will just irritate your users. instead follow a convention that does not look or feel like any OS.

Leave a Reply

Your email address will not be published. Required fields are marked *