BROADCASTS.com

Misaligned elements is probably one of the most common issues I see with apps in the marketplace.  In this episode of Top Ranked, I delve into why this is an issue and how easy it is to check for that and fix it.  Alignment is a part of the overall Metro design language.  I’ve even seen some designers in our UK COE group actually put post-it notes on their screens or on a device to verify that elements align properly.  This acts as a sort of forcing mechanism for them to check alignment.  The reason they do that is that you may not explicitly notice that stuff is out of alignment but when it is, you intuitively feel like something is off.  In general your app will feel a little sloppy when the element alignment is out of kilter.

The Metro design language does take alignment into account and as a result there are some things that you can keep in mind when designing and building pages.  The magic number 12 seems to resonate throughout the experience. Most elements in the native apps align up in a grid of one form or another.

The ingenious Jeff Wilcox built a development utility that makes getting the alignment right super simple.  This utility is called MetroGridHelper is also simple to find since you can grab it with NuGet.  Once included in your project you turn it on in App.xaml.cs in the same place where you turn on and off the frame rate counters and redraw regions etc.  You simply add MetroGridHelper.IsVisible = true; in the if block where the profiling info is included.  By doing it there you are assured that you will only ever see that grid when the debugger is actually attached (i.e. only in development).  When you run your project with the MetroGridHelper turned on, you’ll see a series of red squares layered over every screen in the app.  Those squares are strategically placed to make it really easy for you to see when elements are out of alignment.

Another thing to keep in mind while we’re talking about element alignment is the amount of space you leave to allow users to tap on an element (like an item in a list for instance).  Again here the magic number 12 is the number that you need.  Make sure that you have at least 12 pixels between tappable items so that the user can easily tap the item they want as opposed to mistakenly tapping nearby items.

You can read up on Jeff Wilcox’s MetroGridHelper on the original blog post but really all you need to do to use it is to grab it using NuGet.

• Jeff’s original blog post (which includes source code): http://www.jeff.wilcox.name/2011/10/metrogridhelper/

Let me know what you think about this episode of Top Ranked.

If you have questions about any of the videos, about problems or issues you’re hitting or if you have topics that you think would be of interest to other devs on the Windows Phone platform then drop me a note. I’d be particularly interested in hearing about some of the best practices you’ve adopted that you think have raised your quality or your ratings/ranking in the Marketplace. I’ll be sure to give full credit and link love whenever I can.

The Top Ranked series is hosted on Channel 9. You can view all the past videos there. You can also subscribe to the entire series via Zune or iTunes. All that is available here:
https://channel9.msdn.com/Series/Top-Ranked

Let me know what you think by dropping me a note the contact form on my blog here:
https://blogs.msdn.com/b/benriga/contact.aspx

Or better yet follow me on twitter and drop me a note there:
https://twitter.com/benriga