I had the privilege of speaking at the Philly .NET Code Camp 2012.1 at Penn State Abington this past Saturday. My talk was titled Filling in the UX Gaps in Metro Style Apps, which should sound familiar since that was the title of my TechBASH presentation. However, I’ve modified the presentation quite a bit since then so the new title for it is Metro Design Fundamentals. The modifications I made were mostly related to beefing up the section on design inspirations and spending a bit more time talking about just how important design is to Metro style apps. Your app isn’t going to make it into the store without taking UX and design into account. This stuff’s important!
Thanks again to the folks at Philly .NET for allowing me to speak at this great event. I had a blast!
On Saturday, I gave a presentation at TechBash about Windows 8 application design and development. The talk introduces the Metro Design principles and shows how to apply these principles to convert a desktop application into a Metro style app. Also as part of this presentation, I prepared a Visual Studio template for Grid Applications that improves on the user and developer experience that Microsoft delivered in their Grid application template. I will have a series of blog posts that goes through the concepts in this presentation in detail at a later date.
If you are familiar with the Visual Studio templates for Metro style apps, you will recognize the following screenshot as the Grid Application template:
This template is fine for giving the correct layout and margins and typographic style for Metro style apps, but it doesn’t really inspire the developer to create engaging experiences. It’s actually a bit boring and uninspiring. The template also has some usability issues. The mouse scroll wheel does not work in the built-in template for the main GridView. There’s also no semantic zoom even though it would be easy to have this built-in as an option in the template. Users will come to expect semantic zoom for this style of application since it is part of the Windows 8 touch design language.
So, I offer you a template I call Better Grid Application. Here’s what it looks like:
It also has semantic zoom:
I’ll have more to say about the template and the design principles that went into it and my presentation in an upcoming blog post series.
In the meantime, the slides and Visual Studio template are here for your use. To install the template, put the BetterGridApplication.zip file in Libraries\Visual Studio 11\Templates\ProjectTemplates\CSharp\Windows Metro style\1033\ and then restart Visual Studio. The template should now show up in the Visual C#\Windows Metro style category in the New Project window. I will also be creating a WinJS version of this template soon. I will probably set up a repository for this somewhere soon as well so it is easier to get any updates I make to it.
Update: I originally uploaded an older version of the template. I have uploaded the correct version now. Sorry about that!
Windows 8 Consumer Preview is finally here! I’ve already talked about my initial impressions of Windows 8, followed along with the BUILD keynotes day 1 and day 2 and provided developers with tips on how to get started with Windows 8 development. For all of this time since the BUILD conference, everyone has been able to try Windows 8 but it has mainly been aimed at developers looking to develop apps for the new platform. That all changes today with the release of the Consumer Preview. Now it’s everyone else’s chance to try it out. What’s up first? The installation! Continue reading →
In the process of writing my first Windows 8 Metro style app using C# and XAML, I came across some limitations of the current WebView control’s implementation. The flow for the feature I was working on is fairly simple:
Content for a webpage is displayed in a WebView (using the WebView’s Source property).
User browses the page until they find something they want to save.
User clicks a save button and the app parses the information into a readable format for saving in the app’s storage.
This is a pretty straightforward concept and I thought the implementation would be just as intuitive. Judging by the similarity of the WebView control to the Silverlight WebBrowser control, I went about implementing this functionality as I would have for Silverlight. I set the WebView’s Source property to the initial Uri where I wanted the browsing to begin. I wired up a test button that I thought would kick off the parsing process. That’s when I started to run into problems.