Building Modern Mobile Web Apps

patterns & practices Developer Center

On this page: Download:
Summary | Authors and contributors | Related titles | Feedback and support Download code samples

June 2012


This project provides guidance on building mobile web experiences using HTML5, CSS3, and JavaScript. Developing web apps for mobile browsers can be less forgiving than developing for desktop browsers. There are issues of screen size, the availability of specific feature support, and other differences between mobile browsers that will impact how you develop your apps. In addition, there are various levels of support for the emerging standards of HTML5 and CSS3, and standards for some features, such as touch, are just beginning to take shape. All of these factors suggest that it is best to keep your HTML, CSS, and JavaScript as simple as you can in order to ensure compatibility with as many devices as possible. This project illustrates how to do this, as well as how to add more advanced functionality where supported.


Download Reference Implementation code

Guidance topics

Choosing between a web and native experience

Defining the mobile web app experience

Choosing devices and level of support

Options for building mobile web experiences

Mobilizing the Mileage Stats app

Delivering mobile-friendly styles and markup

Developing mobile-friendly forms

Delivering mobile-friendly images

Delivering a responsive layout

Additional usability enhancements

Detecting devices and their features

Delivering the SPA enhancements

Testing mobile web experiences

Changes to the server-side code

Implementing geolocation

Delivering mobile-friendly charts



Microsoft patterns & practices License

Authors and contributors

This guide was produced by the following individuals:

  • Program and product management: Eugenio Pace and Don Smith.
  • Subject matter experts and advisors: Erick Porter, Abu Obeida Bakhach, Stephanie Rieger, Bryan Rieger.
  • Development: Christopher Bennage, Francis Cheung, Pablo Cibraro, Bryan Rieger, Stephanie Rieger.
  • Test team: Carlos Farre, Amrita Bhandari (Satyam), Jaya Mahato (Satyam).
  • Edit team: Nancy Michell, RoAnn Corbisier.
  • Release Management: Nelly Delgado and Richard Burte (Channel Catalyst).

We want to thank the customers, partners, and community members who have patiently reviewed our early content and drafts. Among them, we want to highlight the exceptional contributions of Pablo Cibraro (AgileSight), Ducas Francis (Senior Consultant, Readify), Akira Inoue (Microsoft Japan), Chris Love (Chief Mobility Officer, Tellago), Luca Passani (CTO, ScientiaMobile, Inc.), Steve Presley (Mobile Technology Architect), Jon Arne Sæterås (, Don Smith (Intergen Ltd.), and Alexander Zeitler (PDMLab).

Related titles

Feedback and support

Questions? Comments? Suggestions? Visit the patterns & practices community site on CodePlex: This content is a guidance offering, designed to be reused, customized, and extended. It is not a Microsoft product. Code-based guidance is shipped "as is" and without warranties. Customers can obtain support through Microsoft Support Services for a fee, but the code is considered user-written by Microsoft support staff.

Next Topic | Home | Community

Last built: June 5, 2012