“We should make an app”, says your boss while playing with her new smartphone. This statement tends to can get very expensive and scary for developers since there are so many “app” platforms out there. Yet, it is a totally valid request from a product owner. Luckily for us, Microsoft has our back by giving us a solution that can make building multi-platform apps easier with HTML5 and Internet Explorer 9.
David Wesst has been working with web and user experience development for the past 5 years and currently works for Imaginet as a User Experience Consultant in Winnipeg, Manitoba. After finishing university, David has continued to follow his passion about the future of web development, experience design, technology, and game development both in and outside of the workplace. David has spoken at a number of conferences across Canada about HTML5 development and recently received his MVP award in the area of Internet Explorer.
Author’s Note: A completed version of the app this article talks about is available at http://appswithhtml5.codeplex.com for you to download and follow along.
Iteration 0: Ideation and Design Phase
Before starting, think about what multi-platform apps are, such as the Facebook or Twitter app that you use in your browser, your phone, or your desktop. On the technical side, they are very different since each platform uses a different technology (Silverlight, Objective-C, HTML), but to the user they are just different experiences of the same thing.
That’s enough talk. Let’s get started.
The app we are going to build is going to be an Expert Directory app that allows users to browse through contacts for a company, in my case the company is Imaginet. There will be a list of contacts displayed on screen, and when one is selected that contact’s details will appears.
Here is a simple sketch to help visualize what we are going to build.
Keep in mind that this is only a sketch, which is really meant to demonstrate how things are laid out rather than how they will look in the end. The user will be able to select a name on the left and their details on the right.
With our idea clear and our design complete, let’s get to the code.
Iteration 1: The Web App (HTML)
To start, we are going to use HTML mark-up with some CSS and get things laid out properly.
Our code is pretty straightforward HTML, except that we are using the new semantic tags like section and nav to provide some metadata to how our app is organized.
The semantic tags make it easier for screen readers to go through our web app and for some web crawlers crawl our site and understand what is what. With that laid out, we apply some CSS floating and positioning, and we are in business.
You might have also noticed that the images of code are from Visual Studio 2010. I tend to use VS2010 for my web development because: a) I’ve been working with VS since 2005, but not for web and b) the JScript Editor Extensions make the environment feel like my C# environment with code folding and intellisense.
For us, we only need one object, the contact object. Our object is pretty simple as it really just contains a number of getter functions and a couple of helper functions that fetch the private variables for us, which I do just like I would in any other OO application.
With our object created, you can see it being used extensively throughout main.js. We create new ones in SampleApp.setupData, and use the object’s functions in SampleApp.showContact.
…Unfortunately, it doesn’t look to hot, but we can fix that with a little CSS3.
Iteration 3: The Web App (CSS3)
CSS has really been the magic of the web for a long time, but for us it will be the magic for our multi-platform app (in more ways than one). For this bit of magic, we are going to make it look good with our traditional practices, but make some of that painful work easy with some of the new features, like Box Shadow.
Generally, when it comes to implementing drop shadows or rounded corners developers tend to cringe, including me. With CSS3, the new box-shadow and border-radius property makes it easy-peezy lemon squeezy. Check out the class with this code:
And with that, take a look at our app:
And there you have it! The Web Experience for our Expert Directory App is complete! We can push this out onto the web and get people using it ASAP. But that is only one platform, and one experience. Thanks to IE9, we can take our app experience beyond the web and go further by providing a desktop experience to our users.
Iteration 4: The Desktop App
Our next stop is the desktop experience, which if you think about desktop and web apps, they really aren’t all that different from the user experience side of things.
Web apps live inside of a web browser, which in turn, is a desktop app. One of the major differences in the experience is that when you use a web app, the window in which you view your app is part of the web browser experience, rather than your app’s experience. For example, the taskbar shows the web browser icon and provides web browser functions (in the case of Windows 7), and the look of browser window itself is branded for the developers of the web browser.
If we could change the web browser experience to better reflect our web app when it’s on screen, then we could provide our users with a custom desktop experience, and with Internet Explorer 9 Pinned Sites, we can do that with our existing code base.
I won’t go through the details of the implementation because there is a much better resource than this. Follow the first two steps at http://buildmypinnedsite.com/ and you’ll be done.
Once the user pins the site to their taskbar, we not only get a branded window, but we also get some custom functionality in the taskbar. And with that, we have taken our existing code and expanded it to provide a custom desktop experience.
Author’s Note: I strongly recommend that you complete step 5 in the BuildMyPinnedSite tutorial as you’ll want to make sure your users know they can make your app a desktop app with no work at all.
Future Iterations: Mobile and Windows 8 [Hopefully]
With the web and desktop experiences in the bag, we can take our code back to our boss’ smartphone by using Media Queries in CSS3. Media queries allow you to put some logic around your styling rules in CSS. If you check out the future-style.css you will these examples:
The first query will apply the style wp7 only to devices that have a maximum width of 480px (e.g. Windows Phone 7, iPhones, etc…). If you don’t want to be specific at the device level, you can apply your rules based on the browser width rather than getting device specific.