Gartner Research

Build Great Mobile Apps With HTML5

Published: 14 March 2014

ID: G00260826

Analyst(s): Danny Brian

Summary

You don't need to sacrifice portability, deployment flexibility or the world of Web tooling for a great user experience. To build great mobile apps with HTML5, designers and developers must be familiar with mobile interface behaviors and the proper techniques to create them using Web technologies.

Table Of Contents

Summary of Findings

Guidance Context

  • Problem Statement
  • Guidance Applicability
  • Related Guidance

The Gartner Approach

The Guidance Framework

  • Prework
    • Gain Buy-In for Simplicity
    • Create Requirements Using Personas and Scenarios
    • Understand Modern Web App Architecture
  • Part 1: Create Simple Designs
    • Create a Tentative and Minimal Design for Your App
    • Don't Mimic Native UI Controls
    • Keep the Interface Clean With Flat Design
    • Favor CSS, Vector Images and Web Fonts for a Crisp Look
    • Use Responsive Design to Adapt to Device Form Factors
    • Maintain Clean and Minimal CSS
  • Part 2: Implement Mobile Interface Behaviors
    • Do Mimic Native Interface Behaviors
    • Lock Down Default Browser Behaviors for Scroll, Zoom and Drag
    • Use a Library to Manage Touch Events
    • Implement Smooth Real-Time Drag Behaviors
  • Part 3: Provide Constant Visual Feedback
    • Utilize Smooth Transitions With CSS3
    • Apply Consistent and Appropriate Timing to Behaviors
    • Make Obvious to Users What They Should Do
    • Create App Icons and Splash Screens for Target Devices
  • Part 4: Maintain an Agile Client Architecture
    • Keep a Current Cache Manifest to Improve Browser Caching
    • Stay Compatible With a Hybrid Container
    • Minimize Dependencies, and Keep Code Compact
    • Keep the DOM Small

Risks and Pitfalls

  • Organizations Fail to Make Simplicity Their Principal Concern
  • Teams Expect a JavaScript Framework to Provide an Improved User Experience
  • Teams Lack Knowledge of HTML5, JavaScript and CSS3
  • Low-Level JavaScript APIs Make Cross-Browser Web Development More Difficult

Notes

Gartner Recommended Reading

©2020 Gartner, Inc. and/or its affiliates. All rights reserved. Gartner is a registered trademark of Gartner, Inc. and its affiliates. This publication may not be reproduced or distributed in any form without Gartner’s prior written permission. It consists of the opinions of Gartner’s research organization, which should not be construed as statements of fact. While the information contained in this publication has been obtained from sources believed to be reliable, Gartner disclaims all warranties as to the accuracy, completeness or adequacy of such information. Although Gartner research may address legal and financial issues, Gartner does not provide legal or investment advice and its research should not be construed or used as such. Your access and use of this publication are governed by Gartner’s Usage Policy. Gartner prides itself on its reputation for independence and objectivity. Its research is produced independently by its research organization without input or influence from any third party. For further information, see Guiding Principles on Independence and Objectivity.

Already have a Gartner Account?

Log In

Become a client

Learn how to access this content as a Gartner client.

Learn More