These postings are provided "AS IS" with no warranties, and confers no rights. You assume all risk for your use.
Paul LabergeDeveloper Evangelist
Frédéric HarperDeveloper Evangelist
HTML5 is all the rage these days and with good reason. As the HTML5 specification moves closer to ratification as a standard (and yes, that’s still a ways away), the capabilities of HTML5 continue to improve, as does support for it on browsers. Now the debate is starting to rage as to whether app developers should build native OS apps or web-only apps (my take on this debate is here).
Regardless of which side you take, chances are you’ll likely make use of at least a web control in your apps at some point for a myriad of reasons. With that in mind, I want to provide you with some tips and tricks for building great web experiences for Windows Phone (in other words, on IE9 Mobile).
The Windows Phone Browser: IE9
It’s worth noting that some features found on the PC version of IE9 are not included on IE9 for Windows Phone including Jump List capabilities, accelerators, web slices, etc. as they do not make sense in the context of the mobile browsing experience. You can, however, pin a web page to your Windows Phone start screen, so that is something to keep in mind.
Web App Development Tools
As I’ve mentioned on several posts on this blog, if you’re building native Windows Phone 7 apps (even if they use web controls), the best thing to do first is download the free Windows Phone Developer Tools so you can get started building your apps. The download package contains Visual Studio 2010 for Windows Phone (for building your app logic), Expression Blend for Windows Phone (for creating your interactive design elements), XNA Studio (for building games for Windows Phone), the emulator (for testing your apps in a virtual environment) and a number of training resources.
The great thing about the emulator is that is has IE9 for Windows Phone on it so you can test your web apps there to ensure they render properly. That said, there may be other scenarios where you need greater debugging capabilities for your web app on IE9 for Windows Phone. You may remember me saying that the engine for IE9 on Windows Phone is largely the same as IE9 for the PC. This means that you can actually debug your web app targeting IE9 using the developer tools included with the PC version of the browser (just press F12 in the browser to get into the developer tools – a good set of tutorials on how to use these tools can be found here, here, here and here).
If you decide to use the PC version of IE9, you may be interested in using the Agent Strings specific to IE9 Mobile. The general Agent String format is as follows:
Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; <DeviceManufacturer>;<DeviceModel>)
where <DeviceManufacturer> is the OEM manufacturer of the device and <DeviceModel> is the model of the device in question. For the emulator, the agent string is as follows:
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; Microsoft; XDeviceEmulator)
To get deeper into Agent Strings for IE9 Mobile, you should check out this post from the IE9 Team.
Finally, if your looking for tools that will help you create professional mobile web sites, you may want to look into Expression Web, which is Microsoft’s professional web design tool. There is a ton of great features in Expression Web that make building web experiences a whole lot easier. Everything from full CSS management support, tools to ensure your sites are standards-based, a feature called SuperPreview that allows you review your site side-by-side with all the major browsers on the market to help you see differences in rendering immediately, and many other capabilities.
I’ve been on the road for the better part of the month of November, meeting with developers and IT Pros across the country and it’s been a blast. Because I’m the guy on the MS Canada evangelism team most focused on Windows Phone, more often than not those conversations trend towards mobile. One of the really neat things about these conversations is the fact that that one of the more popular topics that we end up talking about is Metro, the design language responsible for the look, feel and flow of Windows Phone apps. If you’ve talked to me about Metro, you’ll probably quickly realize that I’m very passionate about great mobile design and how it affects user experience for mobile apps and how I think Metro is the perfect way to express that experience in your Windows Phone apps.
That said, not many people are aware that there are some really great resources on how to design great metro experiences for Windows Phone and, to be honest, many of the great resources on Metro are kind of hidden. With this in mind, I wanted to share with you some of the great Metro guidance that is out there to help you build great experiences on Windows Phone:
Presentations on Metro
The following bullet points provide you links to presentations (video and slides) that describe what Metro is and how to implement it in your Windows Phone apps.
Documentation on Metro Design Guidance
Metro is bigger than just flat tiles and catchy phrases like “Fast and Fluid”. The resource links below help you understand what Metro is and how you should fit it into the software design lifecycle (SDLC) for your app. Also included is some tutorials on how to use the developer tools (which you can download here) effectively with Metro.
If you attended TechDays, you may have also seen my presentation on mobile application design where I talk about effective mobile application user experiences in general and then about Metro specifically. That presentation will be available online in December, 2011 and when it is live I will update this post.
TechDays is in full swing, with (as of the time of writing of this post), TechDays Toronto complete and TechDays Vancouver and Montreal upcoming, now is a good time to provide you with some post-conference resources that you can refer to if you want to try out the technologies from the sessions you saw in the Windows Client / Windows Phone track. So without further delay, here are the post-event resources you can use to get further acquainted with the technologies discussed in the track:
Happy exploring! I hope these post-event resources help you start trying the technologies you saw at TechDays!
Although many of the attendees from TechDays Toronto already know this, for those of you attending TechDays in Vancouver or Montreal (or maybe this is added incentive to register for Techdays in those cities…), our great partner Telerik has generously supplied every attendee with a free license for their Telerik Rad Controls for Windows Phone suite.
This is a truly world-class set of controls that will make your Windows Phone apps have an amazing experience to them.
Having seen these controls in action on several apps, clearly Telerik knows Windows Phone controls.
Some of the features include access to:
If you attended TechDays Toronto (or after you sign in at TechDays Vancouver/Montreal), you can get your copy of the Telerik Rad Controls for Windows Phone here. You’ll need the code that you will find on the back of your badge that you receive when you show up at TechDays to fulfill the offer. But remember – this offer is exclusive to TechDays attendees!
If you’re looking to start learning Windows Phone 7.5 development, this could be the perfect place for you to start! Jeff Blankenburg from Microsoft has compiled (or rather, at the time of publication of this post is compiling) a series of 31 tutorials on how to implement Windows Phone 7.5 Apps.
The tutorials are “snack-sized”, meaning they won’t take you three hours to go through and they have been laid out to provide you with a learning path to getting comfortable with Windows Phone 7.5 development so you can create awesome apps for Windows Phone. Basically, Jeff is providing a new tutorial every day in the month of November (2011). Below is a list of these tutorials:
Check them out and let me know what you think of them!