In his Magic Ponies, Microsoft & the Mobile Web: What We Learned on the Journey talk at Breaking Development in Dallas, TX Christopher Bennage shared what the Microsoft Patterns & Practices team learned when adapting an existing desktop Web application to today's mobile and multi-device Web. Here's my notes from his talk:
Building Modern Mobile Web Apps: complete details, downloads, resources, and more on the project described here.
- Microsoft asked developers what their top problems building software today were? Answers: what to do about mobile, challenges writing code for multiple platforms, business application development, etc.
- Legacy apps can have heavy assets, minimum resolution design, broken Javscript, and other issues that force you into a tough set of choices. When you need to deliver Web content to mobile devices you can: use a proxy service to change content, upgrade your existing site, or start from scratch with a new site.
- You also need to choose a platform strategy: the range goes from completely native to HTML only. But there are a few elements in between: HTML inside apps. Apps inside HTML.
- If you need to support lots of devices and to be prepared for the unknown plus you don’t need native features, or to sell the application, the mobile Web is the right solution for you.
- Step one in building a new site: list out existing features of your application in order to prioritize what matters most. Focus on what is really important.
- Detecting capabilities: this can be done on the client and the server. Some client side detection can be done on the client, then sent to server and merged with 3rd party database to do detection from that point on.
- Third party authentication can be a problem on mobile because you don’t control the third party services’ site.
- What you do should depend on your target: who are you trying to reach and what kinds of devices they are using. Not browser detection.
- Testing on actual devices is critical. You'll find things that you can't learn from emulators.
Lessons Learned
- What’s good for mobile is good for the desktop. Mobile first is a strategy that forces you to make decisions that are ultimately good for the entire experience.
- Tomorrow, Today, and Yesterday is important. We can’t always be building to the future, we have to make things work today and learn from the past. You will need hacks, not everything is perfect today.
- If you build a new experience on mobile, over time it can take over the desktop version. Build the new experience in a responsive way.
- The mobile Web is a transitional moment. There is only one Web but starting with mobile is how you can get there effectively.