Today, I was looking around my home office and realized that it might be useful to do another one documenting all of the gear I have at my desk.  (I work from home, so this is the dedicated space in my house where I work every day.)  There’s another reason I’m writing this, though, and it’s because I received so many great responses and recommendations from the last article.  I’d love to hear what’s important enough to keep on your desk, as well as your recommendations for the “weak spots” in my setup.

Let’s start with a picture (click to enlarge):

With the exception of the books on the bookshelves (though I might add a few of those as well), here’s the list:

The Chair

When I decided to work from home 6 years ago, I decided to invest in a good chair.  In my days working for advertising agencies, I had fallen in love with the comfort and durability of the Herman Miller Aeron Chair, and splurged on one for myself.  No regrets whatsoever.

Under the chair, I started with plastic chair mats, but they ended up cracking and chipping away.  I recently picked up an Anji Mountain Roll-Up Bamboo Chairmat, and couldn’t be happier.  It’s gorgeous, durable, and is much easier to move than a giant plastic mat.

The Desktop

I’m currently using a Dell Studio XPS 8100 that I’ve had since March 2010.  Three years is usually my limit on hardware, but I loaded this one up when I bought it, and it’s still going strong.

I also added a bigger video card (two years ago) for the time that I was still trying to play World of Warcraft.  Those days are far behind me, thankfully, but this is the GeForce GTX 560.

Here’s what Windows 8 thinks of my machine:

The Monitors

I’ve been running some kind of dual monitor setup for almost ten years now, so when I’m forced to just work on a laptop natively, it’s painful.  That being said, monitors seem to last forever anymore, so I’ve had these two for 5-7 of those ten years.  The first one is a Dell 2408WFPb 24” monitor.  The second is a Dell E228WFPc 22” screen.  I’ve held on to this smaller one for a while, only because it supports much higher resolutions than most of the monitors on the market right now.

The Webcam

I’ve also been using this for several years now (probably 4), and it’s on my list of things to replace.  Not because it doesn’t work, because it’s excellent, but mostly because of the microphone.  I’ve been doing more conference calls and podcasts, and it just picks up way too much ambient machine noise from around my desk.  In general, however, it’s an excellent webcam for a reasonable price.  This is the Microsoft Lifecam Cinema.

The Smart Card Reader

As part of the security measures at Microsoft, I need a smart card to access our internal network.  The Omnikey 3021 Reader gets the job done, without being very large or inconvenient.  It fits nicely under my primary monitor.

The USB Hubs

On each side of my monitors, I have installed in-desk USB hubs.  Underneath the desk, they’re powered, and connected directly to the desktop machine.  They’re only USB 2.0, but for everything I’m currently doing, I haven’t seen the need for USB 3.0 yet.  There’s also space on either side of the ports to run cables through the desk.  Excellent design.  While this one is no longer manufactured, you can get the similar Belkin In-Desk USB Hub for about $35.

I am also running an iHome 7-port USB hub behind my monitors for the webcam, keyboard, smart card reader, and other USB accessories that find their way to my desk.

The Power and Networking Hub

I’ve also added a Sunway PowerTap into my desk’s surface.  It adds three power outlets, and two wired network connections, making it easy to plug a machine in temporarily on my desk without having to run a bunch of wires underneath.

The Mouse

This is one of the most recent additions to my office, the Logitech Performance MX Mouse.  I love it for several reasons.  First, it’s very accurate.  Some of the cheaper mice (even wired ones) that I’ve used in the past have been difficult to use for precision work like Photoshop.  This is top-notch for that.  Second, it is super comfortable in my hand.  Finally, it has solved the problem that so many wireless mice in the past have been plagued with: it has a rechargable battery that can be charged while you’re using it.  Just plug in a micro-USB cable to the front of it, and you’re back up and running.  An exceptional mouse.

The Keyboard

I have tried literally dozens of keyboards over the past few years, but none of them have justified the price.  I’m actually still using the default keyboard that came with my desktop machine.  It’s nothing fancy whatsoever, and I’m still looking for the keyboard that will change everything for me.  Until that time, however, I’ll stick with the Dell SK-8165.

The Headphones

A few weeks ago, my headphones broke.  They still worked, but the part that goes over the top of your head snapped, making them unusable.  I spent a few weeks looking around for a replacement, and fell in love with the Beats by Dre Studio Over-Ear headphones.  They’re the first noise-cancelling headphones I’ve ever owned, and the sound is excellent.  (Not to mention they come in obnoxious colors, like the orange ones I got.)  They also completely surround my ears, which means I can wear them all day without my ears starting to hurt from the pressure of them pressing down.

The Speakers

Sometimes, you want more than headphones can offer, and you want to listen to music without wearing headphones.  For this, I’ve had a trusty set of speakers/subwoofer for years.  They’re not for sale anymore (the speaker business seems to churn quickly), but the Creative Inspire 2.1 2400 are plenty to fill my office with enough sound to get my wife to knock on the door and tell me to turn it down.

The Audio Switch

Because this is my home office, and I’m super lazy and averse to wires laying everywhere, I’ve also grabbed an audio switch to jump back and forth between the headphones and the speakers.  I actually mounted it right under my desk, so when I reach down to toggle the button on the switch, I feel like a Bond villain reaching to open the trap door.  (OK, maybe not.)  It also has a volume dial, so it’s easy to modify the volume of my system without having to jump to some menu on my system.  One of the best purchases I have made for my office, and it only cost $15.

The Mobile Phone Stand

I do a bunch of mobile development, and in many cases, I need to test my software on a physical device.  This little stand can often be found as a giveaway at conference sponsors booths, but you can also pick one up on Amazon if it works for you.  It’s the Blue Lounge Milo Phone Stand. It uses “micro-suction” to adhere both to the desk and to your device, and it really works.  When I was writing this section, it took me about 5 minutes to get it off of my desk.  The only real downside to this stand is that my Nokia Lumia 920 needs to be plugged in to transfer my software to it, and the USB port on the phone is on the bottom.  Getting it plugged in and sticking to this stand can be tricky, but it can be done.

The Desk Phone

Working from home, I don’t want to have to use my cell phone for all of my calls.  (Yes, this means I still have a home phone number, don’t judge.)  I wanted a phone that was cordless, took up minimal space, and offered a speakerphone function because I hate holding a phone to my ear.  The VTech DS6321-3 DECT 6.0 Cordless Phone package did the trick.  It comes with 3 handsets which don’t require a phone cord (except for the primary base, which is elsewhere in the house.)  It has a tiny footprint on my desk, but gets a ton of use.  It also has a nice feature (which I don’t use) that allows you to connect your mobile phone to the primary base via Bluetooth, so that when you’re home, you can answer your mobile phone from any of the handsets.  It even uses a different ringtone, so you know which phone is ringing.

The Scanner

I seem to constantly need to scan in a business card, a signed document, or just a photo, and I don’t want to have to walk across my office to the big print/scan/fax/copy combo.  I picked up the NeatReceipts Scanalizer Pro a few years ago to catch up on all of the business cards that were cluttering up my desk.  It comes with some great software that does OCR, and imports that data directly into my Outlook contacts.  Very convenient.  It sits vertically on a stand behind my monitors, but is in easy reach when I need it.

Cable Management

As you can tell from the length of the list already, I have tons of cables on my desk, and I’d rather have none.  To contain the chaos that is the wiring at my desk, I’ve been using Blue Lounge’s CableDrop cable clips.  They’re adhesive, so they’ll stay where I want them to, and they grab and hold the cables I put in them.  They’re great for keeping my keyboard wire in one place, my smart card reader in easy reach without moving all over the place, and even for running the wires directly under my desk instead of just hanging everywhere.  Highly recommended.  They come in a bunch of colors, but the ones I’ve been using are white, brown, and orange.

The “Other” Desktop

As I mentioned earlier, I do a bunch of mobile development, and this includes all of the platforms: Windows 8, Windows Phone, Android, and iOS.  In order to build apps for iOS however, you actually need a Mac to do it.  This is why I picked up a Mac Mini (with 8GB of RAM), which lives behind my monitors, and is a simple input toggle away.  Visual Studio (with Xamarin) connects directly to it, which makes development a snap thus far.

Accessories for the Mac

I also picked up a Magic Mouse and Apple Wireless Keyboard for the Mac, mostly because they’re convenient, but also because I haven’t had much luck with KVM switches in the past, and for as rarely as I’ll actually need to use them, that seemed like significantly more work.  They work great, but the Magic Mouse really doesn’t compare the mouse I’m currently using, and the keyboard is a little small for my everyday use.

The Surface RT

I’m accumulating quite the collection of tablet devices in this office, but there are three specifically that have a permanent place on the desk.  First is the Microsoft Surface RT.  I added the white Touch Cover, but mostly I use this device to test my Windows 8 apps that I’m building.  Visual Studio can connect wirelessly to the device for debugging, so I never need to move it.

The iPad

In addition to the Mac Mini, I also have an iPad with Retina Display.  This serves several purposes for me.  First, it has a retina screen, so I can see what my websites look like at this resolution.  (Usually not great.)  Second, I can deploy my iOS apps that I’m working on to this device for testing.  Finally, as a dedicated Microsoft guy, it has become a research tool for me.  I now have the ability to see what all the hype is about with certain apps I hear about that might only be available for iOS.  So far, the apps have been the only differentiator from my Surface RT.

The Android Tablet

A mobile development environment wouldn’t be complete without an Android device, and while I acknowledge that there are literally hundreds of Android form factors out there, I picked the Google Nexus 10 32GB to be my reference device.  Thus far, it’s been the tablet I’m least likely to pick up, but I’ve only had it for a few weeks, so time will tell.

The Tablet Stands

For the iPad and the Nexus, I wanted a simple way to make the accessible while charging.  That’s where the Belkin FlipBlade comes in.  It’s a strong but lightweight tablet stand that adjusts to several different angles.  It also folds up flat for when you want to throw one in your laptop bag.

The Laptop

When I’m working from home, I rarely touch my laptop, but I’ve made a place at my desk for it simply so that I remember to update it, install software when I need it, and so it doesn’t just gather dust in my bag.  This is the machine that goes everywhere with me on the road, however, so it needs to be up-to-date.  This is the Lenovo X1 Carbon Touch.

The Laptop Stand

Finally, for the last item in the list, there’s the laptop stand.  This is where my laptop lives when I’m home.  I use the Griffin Elevator Laptop Stand because it creates a place my laptop should go, it’s beautiful, and it leaves plenty of space for things below it.

Summary

So that’s pretty much everything on my desk.  At least, that’s everything related to technology that’s on my desk.  I’d love to know what you’ve got on yours, and how it makes your work as a software developer easier.  Link to your article in the comments, or just send me an email if you’d rather not share it with the world.

“Let’s take a quick break for station identification on the Cleveland Indians Radio Network.”

Now, I understand that there is a law in place that actually requires radio stations to identify themselves, but I never really understood why.  Last Thursday, Wil Wheaton posted an article similar to this one, reminding his subscriber readers who he is, and why you’re subscribed to him.  In the same way that radio stations sometimes remind you who you’re listening to, I want to make sure you know there’s a real person behind this site, who cares about making this place a useful, informative, and reliable resource for software developers around the world.

--------------------------------------------------------------------------------------------------------

You’re listening to Jeff Blankenburg.  I’m a software developer, a dad, a husband, a golfer.  I love board games (both making and playing them.)  I love mobile computing.  All flavors.  I’ve published over 30 apps to various marketplaces.  I play competitive volleyball at least once a week, and have been since high school.

I work for Microsoft as a Technical Evangelist.  This means I spend my days educating myself and others about Microsoft’s development tools and technologies, with a specific focus on Windows 8, Windows Phone, and Azure applications.  If you ever need any help, I hold virtual and in-person office hours every Thursday.

You can reach me just about anywhere, but here’s where I pay the most attention:

• Email: jeblank AT microsoft DOTCOM
• Twitter: @jeffblankenburg
• Blog: http://jeffblankenburg.com (but you probably already knew that)
• YouTube: http://youtube.com/jeffblankenburg
• LinkedIn: http://linkedin.com/in/jeffblankenburg
• GitHub: http://github.com/jeffblankenburg

Thanks for reading my articles.  Your feedback and questions are what keep this thing going.

Mind you, the first couple of updates were meant to solve two specific problems:

1)  Address a couple of small bugs I had identified.

2)  Get the Microsoft Advertising Control to actually work in my app.

Every app is going to have a bug or two, and there’s nothing terribly interesting about those, but the ads WERE tricky.  I created my ad units at PubCenter (which as it turns out, is not a place to find a frosty pint.)  I added an AdControl to the pages of my app using the identifiers from my ad units.  But they didn’t show up in my app when I published it.  In fact, after I published the first time, they didn’t show up in my development environment anymore either.

Being Lazy Was a Problem

One of the consistent pieces of feedback I had given developers was to uncheck the “Internet” option in the app capabilities if you weren’t using it.  Having that box checked also requires you to publish and include a privacy policy, and being lazy and averse to legalese, I decided my poker app, which didn’t have any need to connect to the internet, would not get this box checked.  (Of course, you do this right before you publish, not realizing you’re breaking everything.)

I opened a support ticket with PubCenter, and after a couple of days of trading emails and eliminating the obvious problems, they simply asked to see my code, if possible.  I pointed them to my github repository, where they identified that I had turned off “Internet” capabilities, and the AdControl needs this to serve ads.

Looking back, this is one of the most obvious statements I have ever written.

At the time, however, I seemed to me that the AdControl would probably have its own mechanisms for serving ads, and that they weren’t dependent on my app’s settings.  WRONG.

Anyways, once I flipped that switch on March 8th, the ads started showing up, and much to my surprise, I started making a little money.

Let’s Define “Making Money”

In the first few days after the ads started working, I averaged about $1.30 a day.  Not retirement money by any means, but my expectations were in the pennies a day range.  A dollar or more seemed HUGE.  Here’s a chart of my first month:

As you can see, March 18th was a huge day, grabbing me $4.55 that day.  I thought this thing was just going to take off.  As it turns out, that was my first day in the “New & Rising” category, and the shine slowly faded on that $4+ day.  Regardless, I’ve been consistently averaging more than $2 a day, which would be over $700 annually.  Not a fortune, but now I’ve got a baseline to start from, and I’ve got big plans to elevate that number over time.

What About eCPM?

The important number in the mobile app game is something called eCPM.  If you haven’t seen this term before, everyone uses is, but nobody really seems to define it.  eCPM means “effective cost per thousand impressions.” 

In simpler terms, this breaks down to the amount of money you made for every 1,000 times an ad was shown.  For the month of March 2013, my eCPM fluctuated as I was adding users, and ended up at an average of $0.73.  This number seemed a little low, until I looked at where I’m hovering each day lately:

Day to day, I’m averaging about $2.30 for my eCPM.  Since I’m averaging around 1,000 impressions per day, it makes sense that I’d be making about $2.00 a day.  (I’ve had peaks of 5,000+ impressions in a day, but lately it’s been more in-line with 1,000 per day.

So What’s Next?

My plans for the future are pretty simple: drive more impressions per day.  One idea I have for this is to offer a prize to users who hit a royal flush in the game.  This should incentivize people to play more, in the hopes they’ll win the prize.  I need to determine whether or not this is really legal, as well as whether or not it’s permitted in the Windows Store.

Another one is to make it more simple, and just reward those players that play more than a specific number of video poker hands each month.  Something like 10,000 hands.

In either case, I’m looking for ways to get more players to play more often, to drive up the number of impressions I’m getting each day, which should also drive up the amount of money I’m making each day.

I’ll keep you posted on how this all works out.

Is that gambling?

Let’s now say, hypothetically, that in this video poker app, you created an offer to all of your users to award the first person each month that achieves a ROYAL FLUSH a prize of a giant, stuffed teddy bear.  The users still risk none of their own money, but playing the game “might” win them the prize.

Is that gambling?

Now let’s swap out that teddy bear for a $100 gift card.  Does that change anything?

Now is it gambling?

I’m considering this approach with my app, to encourage more people to play more often, but I also am jail-averse.  I’m also massive-fine-averse.  But to me, this seems about as cut and dried as it can get.  How could it possibly be gambling if the player never risks anything?

Please leave your thoughts in the comments.  I am sincerely interested in your opinions, and if you know a lawyer that has any insight into this, I’d love a chance to chat with them.

Thanks!

I’m still working on my Windows 8 application, King Poker, and have I learned some things this week.  (It’s also available for Windows Phone, btw.)

In general, my app is pretty straightforward.  It’s a video poker application designed to look as similar to the real video poker machines in casinos as it can.  Last week, I got ambitious, and decided to add some functionality that goes above and beyond the core functionality you’d expect.

I added Azure Mobile Services, and if the user was online, every single hand was recorded to my cloud storage database.  In the 10 days it’s been live, I’ve recorded over 45,000 random hands of video poker to my database.

In addition, I added Microsoft Account authentication, which means that if you log in with your Microsoft credentials, I could persist your credit count and hand history across all of your devices.  This is where the story gets ugly.

I spent HOURS writing and testing this functionality.  Log in on my Surface RT.  Play some hands of Deuces Wild.  Log out.  Keep playing.  Log in.  Play some more.  Cut the wi-fi connection.  Play some more.  Reconnect.  Sync the hands that were played when disconnected.  Log in to the Windows Phone 8 version.  See the identical credit count.  If you were logged in to these apps, everything worked marvelously.

When you weren’t logged in, it still worked marvelously.  It still logged your hands in my cloud database.  My mistake was that I didn’t notice that even when you were logged out, it was trying to sync your credits.  Anonymously.

So I pushed this new update chock full of new features to the store.  And it passed.  I was so excited!  And then the negative reviews started flowing in. 

“Used to work well on RT. Last update broke it. Lost all my money, well pretend money anyway. Please fix it”

“This is a great poker game. Play it all the time. However installed update yesterday and now it crashes all the time.”

“Credit counter still going crazy...Change the word HELD...back to HOLD, like in Vegas and Atlantic city...”

As it turns out, everyone that wasn’t logged in was synching their credits with everyone else that wasn’t logged in.  Ouch.

I’ve been really careful about thorough manual testing, as well as running a full suite of unit tests, but this one got by me.  I was so focused on what the experience was like for authenticated users, I didn’t give enough to time to think through all of the scenarios for those people that chose not to authenticate. 

I fixed it immediately, but it was Friday night, and the Windows Store team doesn’t approve apps on the weekends.  It wasn’t until Monday afternoon that my new patch was finally released, and almost immediately, I found yet another issue.  (It’s funny how much more obvious bugs are when they’re in production vs. development.)  I now have to wait at least another day before this issue will finally be solved.

Take Your Time

My point in all of this is to take your time.  I was so anxious to get my new set of features into the hands of my users, I completely neglected to remember that apps that have to go through stores are SIGNIFICANTLY harder to fix than a simple website.  If I find an issue on my website, I can fix it instantly.  In your app, your users may have to suffer through days or bugs before you’re able to fix an issue.  Take your time, get it right, and give your users the experience they deserve.  It’s the only way you’re going to get MORE users.

In short, no matter how great your set of features is, a little extra diligence to think through ALL of the user scenarios will benefit everyone in the long run.  That’s how you build a great app.  Keep your users’ confidence high, and give them a reason to tell their friends about it.

If you’d like to

Many of you have probably done this before: you want to recognize a specific key that has been pressed when a user is entering something into a TextBox.  Maybe you want to take action when they press the Enter key, for example.  This is generally simple enough, you just set up a KeyDown (or KeyUp, depending on your needs) event on the TextBox in question, and then just check every time the event fires until you find the key you’re looking for.

That’s not what I wanted to do.

To give you some context, here’s a screenshot of my app:

For the cards in question, I want to hold the three Queens, and then re-deal, hoping to get the 4th Queen, or maybe one of the Wild Deuces.  (If I’m very lucky, BOTH!)

As the game currently stands, it is designed for use on a touch screen or with a mouse.  Clicking/tapping on a card will mark it as “HELD,” and won’t replace it when you click the “DEAL” button.  But you have to actually move your fingers or mouse to each card to mark them.  For speed players, they’d prefer physical buttons that can be pressed over having to touch a screen.

This is where my key capture needs come in.

I don’t have a control that I can just drop a KeyDown event on.  I want to be able to monitor keystrokes at all times.  For this, we can simply wire up an event in the code-behind file, and capture it there.  Here’s what it looks like:

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;

}

void CoreWindow_KeyDown(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.KeyEventArgs args)

{

    switch (args.VirtualKey)

    {

        case Windows.System.VirtualKey.Number1:

            if (HoldRound) HoldCard(Card0);

            else SetBet(1);

            break;

        case Windows.System.VirtualKey.Number2:

            HoldCard(Card1);

            break;

        case Windows.System.VirtualKey.Number3:

            HoldCard(Card2);

            break;

        case Windows.System.VirtualKey.Number4:

            HoldCard(Card3);

            break;

        case Windows.System.VirtualKey.Number5:

            if (HoldRound) HoldCard(Card4);

            else SetBet(5);

            break;

        case Windows.System.VirtualKey.Space:

            Deal();

            break;

    }

}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)

{

    Window.Current.CoreWindow.KeyDown -= CoreWindow_KeyDown;

}

As you can see above, I subscribe to the Window.Current.CoreWindow.KeyDown event, which fires before anything else gets access to the key event.  This is also a great way to capture keystrokes before they get to your TextBox controls, etc.

Once I’ve got this event rigged up (and un-rigged it with my OnNavigatingFrom event), I can now easily provide physical keys for my power users by enabling the #1 - #5 keys to hold the cards rather than having to move their mouse all over the screen.  In addition, I’ve also set the Spacebar up to provide “Deal” functionality, which means they never need the mouse once they start playing the game.  Here’s a look at the cards held:

And finally, in case you were wondering, here’s what I drew (I got that wild 2) to get my four of a kind!

Summary

So there you have it.  A simple way to capture keystrokes in C# and XAML applications for Windows 8/Windows RT applications.  Many apps have a need for this in some way (even if it’s to provide a shortcut or even an Easter Egg), so consider this in your applications as well.

In my numerous years of XAML and C# development,  I’ve almost always had the good fortune to be working in a constrained box.  In Silverlight, I knew exactly what size the control was going to be when it was embedded on a web page.  In Windows Phone 7, there was only one resolution: 480 x 800.  It allowed me to get lazy.

With Windows 8, laziness is no longer possible.  You’re required to support 3 distinct resolutions out of the gate:

• 1024x768 (filled view)
• 1366x768 (minimum full screen resolution)
• 320x768 (snapped view)

Using Grids

I knew going into this project that I was going to be making extensive use of the Grid control.  By setting the widths to “*”, I could have my content automatically scale to the size of the container, effectively scaling everything up to the appropriate sizes.  I had another problem though: the amount of content I was presenting varied also.

ProTip: When layout a dynamic grid system, figure out what you want your layout to look like in fixed values on a 1366x768 screen.  Set every ColumnDefinition and RowDefinition explicitly, so that it is EXACTLY the way you want it to look.  Once you know those values, figure out what percentage of the width or height of the screen that takes up.  Use these percentages as the dynamic values in your Column and RowDefinitions.  Like this:

<Grid.RowDefinitions>

   <RowDefinition Height="38*" />

   <RowDefinition Height="36*" />

   <RowDefinition Height="7*" />

   <RowDefinition Height="5*" />

   <RowDefinition Height="12*" />

</Grid.RowDefinitions>

At the top of each game, there is a “paytable” that indicates how many credits you will win for certain types of poker hands.  Some games, like Jacks or Better, have only 9 different hands that pay out.  Other games, especially those that include wild cards, can have as many as 15!  Here’s two screenshots of my app (before I solved all of my scaling issues.)

Jacks or Better (9 rows)	White Hot Aces (11 rows)

As you can see, the paytables are different heights, and there’s a variable amount of space between the cards and the content below them.  This was unacceptable, but I couldn’t figure out how to keep my paytable box a consistent height while having the content inside of it scale to fill it appropriately.

Discovering the Viewbox Control

Last night, after fighting with this issue for a couple of weeks, I discovered the Viewbox control.  Not sure how this has eluded me for so long, but that time has passed, and I am a HUGE fan.  Its simplicity is its genius.  Wrap any content inside a Viewbox control, and it will automatically scale it to fill its container.  What this meant for me was that I could set my paytable box to be a fixed percentage of the screen, and the text inside that box would simply scale to fill the box.  This means that 9 rows can fit in the same box as 15 rows, because it will just make the font size smaller for me automatically.

Sidenote: I had already started writing an elaborate “Page_SizeChanged” method that was going to manually set all of the font sizes, image sizes, etc. based on the resolution of the user’s machine. I am so glad I don’t have to do that.

You don’t need to do this with everything.  For example, I’m only using it for my paytable grid and the advertisement.  Everything else is able to scale on its own by the default behavior of a Grid.  Here’s some screenshots of the new interface, with many more rows, yet more available vertical space:

Black Jack Bonus Poker (14 rows)	Deuces Wild (10 rows)

You can see that now, my interface looks identical, regardless of how many rows I add to that paytable box.  What’s also cool is that the second image, the Deuces Wild one, is actually at a significantly higher resolution than the Black Jack Bonus Poker one.  Yet they look identical.  THIS is exactly what I was going for.

Struggling with Dynamic Layout

So it may seem, at this point, that my problem is solved, and we’re done talking about scaling.  Wrong.  See those 5 card images?  Their size is dynamically determined by the size of the grid cells they reside in.  This works perfectly fine until I want to swap them out for other graphics (like when a user deals new cards, for example.)  When I change their source, for a brief moment, they don’t have a width or height.  More specifically, their width and height are zero.  My intial solution (so far) to this problem is to determine what size the images are when they are loaded, and then set their MinHeight, MinWidth, MaxHeight, and MaxWidth equal to their “loaded” size, so that even when I swap out their source, they’ll remain the same size.  I tried many different events until Tim Heuer suggested I try the ImageOpened event on each image.  This is where I landed:

private void Card_ImageOpened(object sender, RoutedEventArgs e)

{

   ResizeSingleCard(sender as Image);

 }

private void ResizeSingleCard(Image i)

{

   i.MinWidth = i.ActualWidth;

   i.MaxWidth = i.ActualWidth;

   i.MinHeight = i.ActualHeight;

   i.MaxHeight = i.ActualHeight;

}

By doing this, each of our images are “locked” to their size for the duration of the user’s game session.  I am also handling some weird stuff for the very unlikely situation that a user changes their resolution during a game session, but that’s not something most of us need to worry about.

Summary

In short, getting your app to scale to multiple resolutions is hard, but it’s much easier than I was making it thanks to the Viewbox control.  Now to find a way to get this control into my Windows Phone version, and I’ll be set.

A special shout-out needs to go to Ryan Lowdermilk, because without his constant beta-testing and encouragement to clean up my scaling issues, I probably never would have fought through it to get where I am today.  (Also, check out his great podcast, The Windows Developer Show.  I’m hooked on this weekly broadcast of the latest news for Windows 8 & Windows Phone Developers.)

1. Use the WACK (Windows App Certification Kit)

The first time I was denied, most of it was completely avoidable.  There is an amazing tool called the WACK (Windows App Certification Kit) baked in to Visual Studio 2012 that will analyze your app package for all of the computer-verifiable issues your app may have.  This includes things like:

• Forgetting to provide all of the appropriate icons.
• Accurately checking your capabilities vs. functionality.
• Performance metrics.
• Many more (the entire list can be found here.)

2. Don’t advertise outside of your app.

In my Settings charm menu, I included an About page.  On this about page, I included a way to get a hold of me if you have comments, suggestions, requests, or discover a bug.  I also included a mention that this same app exists in the Windows Phone marketplace, if you’re interested in that.

THIS IS APPARENTLY A BIG NO-NO.

2.3 Your app must not use its description, tiles, notifications, app bar, or the swipe-from-edge interactions to display ads

The elements of your app's description, such as screenshots, text, and promotional images must describe your app and not contain additional advertising.

This means that you cannot provide links to your other apps, because this is considered “advertising,” which I guess in its truest definition is accurate.

3. Be prepared for the challenge that Taiwan, South Africa, Korea, and Brazil will present.

More accurately, those four countries require a game to have an age rating verification, and the Windows Store doesn’t do a great job of warning you about this before you submit your app.  (They also don't offer any guidance on how to accomplish it.)  On one screen, you have the ability to choose from well over 80 countries.

On a completely separate screen related to game ratings, they subtly mention that there are four countries that require a game rating:

If you don’t put two and two together to make four, you’ll likely get denied for this, so take one of two approaches here:

1)  Take the time to wait for the official ratings boards to get you a certificate that verifies your rating.

2) Submit your app without these four countries initially, and then update the app to support them once you receive your ratings.

Here's where you can submit an application for each country:

Brazil - DJCTQ

Korea - GRB

South Africa - FPB

Taiwan - CSRR

Summary

So, those are my simple lessons learned from my first Windows 8 app submission.  I hope to have many more in the near future, and I’ll be sure to announce them here when it happens.  If you would like to check out this app I’ve made, you can check it out here:

It’s an authentic re-creation of the video poker machines you find in every casino.  I’d love your feedback, your requests for more features, and especially your positive reviews.

Let me know what you think!

1. Their app is making great progress, but they’ve hit a technical hurdle that they can’t solve.

2. Their app is nearly done, but it really needs some UX help and some design sense.
3. In order to accomplish the goals of the app, they need some funding to buy data, developers, time, resources, etc.

To that end, I’ve constructed a way to try and help you in each of these regards.

Technical Office Hours – I am dedicating every Thursday to helping you with your apps.  Have technical questions?  Bring them (and your code), and we’ll work our way through it.  To sign up for a slot, I’ve started using OHours at http://bit.ly/blankenhours.  You can attend in-person at TechColumbus, or join me via Skype, Lync, or Google Hangout.

Design & UX – I will help guide your app design to the best of my ability, but I’m also partnering with some of the top designers in Columbus to help you take a good app to great.

Funding – I am working directly with TechColumbus, and if you have an idea that interests them (and you’re based in Columbus), they might just be interested in investing in you.  Come talk to me.  I think you’ll be surprised what you can do.

Finally, if you haven’t found it already, check out Generation App.  You’ll find free technical and design support via phone, as well as contests and giveaways just for building apps.

Today is the last day of this series, and we’re going to focus on designing Windows 8 applications today.  You might be asking yourself:

I’m a developer…why would I want to read an article about design?

I’ll tell you why.  Because we developers have been making user interfaces that look like this for decades:

The point of this article is to get you to think differently about you user interface, not just the colors and shapes that are user, but the ENTIRE EXPERIENCE.  The way pages show content.  The navigation experience.  Even page transitions.  It all matters now. Here’s more proof, if you need it.  Think, for a moment, about what an app running in Windows 7 looks like.  Any app.  Picture it in your mind.  It probably looks like this:

If you take a closer look at this diagram, there’s no indication whatsoever about what this app does.  We’ve tended to focus on how we use the app, not what the content is.  Windows 8 fundamentally shifts that idea.  Now think about a Windows 8 application in your mind.  It probably looks more like this:

In this illustration, the ENTIRE image shows content.  This means that instead of remembering how to use your app, users are far more focused on the content of your app.  This is part of the conversation we’re going to have today.  This article will be divided into several sections, and each section talks about a different part of user interface creation.  Here’s the topics we’ll cover:

• Content Before Chrome
• Using The Windows 8 Silhouette
• Navigation Patterns
• Fluid Motion
• Make Touch a Priority

That’s a ton of topics, so let’s get right to it.

Content Before Chrome

In this section, I want to focus on one of the most important lessons in this entire article:

STOP MAKING BUTTONS.

The focus of every screen of your application should be about the content.  If you’re adding buttons, you’re likely doing it wrong.  Here’s a very common scenario:

We have several sections to our application, and we want to provide an interface for our users to get to each section.  In general, most people would say that there’s absolutely nothing wrong with this interface (except that maybe those giant gray boxes should have photos in them.)  The key lesson to remember is that the entire colored block IS the button.  There’s no reason to add the circled arrow icons.  Instead, consider this:

By removing the circled arrows, we’ve made the interface cleaner by removing the clutter, we’ve provided the user with a larger touch target for their fingers on touch devices, and given ourselves less to worry about on the page.  “One button to rule them all",” if you will.

When you desperately feel the need to add a button to the screen, ask yourself:

Could this live in an application bar?

If it can, do it.  For more on the application bar, check out Day #4.  In short, let the user tap the content instead of creating another button for them to click.  If an action can be taken on more than one item at a time, use the App Bar to provide contextual actions when multiple items are selected.

Using the Windows 8 Silhouette

It would be a dreary, boring world if every app looked exactly the same.  That considered, it is also difficult for users to learn a new interface with every application that they use.  This is where the idea of a silhouette comes into play.  Take a look at the four different application examples below.  They all present very different content in very different ways, but there’s a uniform experience about them that makes it very obvious to the user where the important content lives.

There are many ways to utilize this familiar silhouette, here are just a few examples:

All of the previous images follow a familiar format, which makes it easy for the user to figure out how to use your application, while still looking diverse enough to make your app visually unique.  The reason for all of this is because there will be learned behaviors your users will acquire simply from using Windows 8.  They’ll start to rely on the Charms bar.  They’ll start to expect that right-clicking brings up an AppBar with more options.  They’ll try pinching the screen to zoom.  Taking advantage of these silhouettes is another example of the expectations users will have about your application.

Navigation Patterns

As developers, we have a tendency to try to accommodate our users’ needs, almost to a fault.  One example of this that is rampant in both desktop applications as well as the web is this idea:

We need to allow the user to get TO any page, FROM any page.

You do NOT need to do this.  When we provide this type of functionality, we limit the amount of space that can actually be used for the purpose of the app.  Here’s an example of an RSS reader app that practices the “everywhere navigation” pattern (click to enlarge).

As you can see, an app that is dedicated to reading only uses about 30% of the screen for actual content.  We need to think about our application in a navigational scheme that makes sense for our content, which will almost always be hierarchical or flat.

Hierarchical Navigation

In this style of navigation, we work in a hub-and-spokes model, where the users’ choices move them further and futher from the home page, and using the back button allows them to return backwards through their path before choosing another branch of the tree to travel down.  Like this:

We build pages with a master/detail structure so that navigation is intuitive and simple to use.  The user should always know where they are in the app, without having to lay an elaborate trail of breadcrumbs for them.  They should be diving into deeper and deeper detail about the original choice they made.  The default News application in Windows 8 is a great example of this hierarchy.

On the home page of the app, I can scroll to the right to see a few articles from each section (Entertainment and Sports are currently shown):

Using Semantic Zoom, the user can easily see all of the categories, and jump to the one they want to read more about.

If I tap on one of the section headers on the main page (like the word Entertainment above the large photo of the woman, Lynn Shelton), I am taken to a new page that contains only Entertainment news.

Finally, and this can be done from anywhere in the app that I see an article, when I tap on a specific article, I am taken to a detail page for that item.

In each instance, there is the presence of a back button which will take me back through my previous choices.  What you don’t see, however, is the ability to jump from an Entertainment news article over to a Sports article.  In fact, there’s not even a way to get to the Sports category without using the back button.  That is, until you take a look at the AppBar for this app.

There, you’ll see that they succumbed to the need to let the user navigate quickly between sections without cluttering up the screen with all of this navigation.  The AppBar is a great way to provide some of these navigation mechanisms without taking away from the visual appearance of your application.

This is a hierarchical navigation pattern.  Learn to use it.  It will be your friend, and clear your screen of all of the navigation elements you would need otherwise.

Flat Navigation

Flat navigation is something that you see every day in your web browser.  You also see it in instant messaging apps, and other places that have similarly formatted, but somewhat unrelated content.  A picture would look like this:

When we navigate a website, we’re using this flat navigation style.  We can move forwards and backwards, but there is really no concept of branches in this format.  Since you’re likely using a web browser to view this article, I’m going to assume you know what I’m talking about.

Fluid Motion

Motion is one of those things that we never think about as developers.  We tend to focus on the important topics, like data, and never really consider how much nicer our app would look if it incorporated a little animation.

When I talk about animation, however, I’m not talking about it for visual adornment.  It’s not a decoration that you slap on your page.  Animation should be purposeful.  If you can use animation to transition between screens of your app, your user will perceive load times to be shorter, and feel that your app is faster and more responsive than it actually is.

In addition, there are a bunch of animations available to you with minimal effort.  Check out this article on Animating Your UI from MSDN.

Make Touch A Priority

A “tap” and a “click” in Windows 8 are the same thing.  It requires no effort on your part to make touch happen.  Making your click targets big enough for a finger, however, does.  Always, always, always make anything on your page that is clickable larger than 48 x 48 pixels.

Incorporate gestures where possible.  Your users will expect them.  It requires minimal extra effort, and it lets your users interact with your app the way they expect to:

In addition, it’s important to remember that because your users will be touching the screen, this also means that there are optimal places to put your buttons and content.  Generally, a user will hold a tablet horizontally, with their thumbs hovering over the two sides of the tablet.  This means your primary buttons should probably live in these regions as well.  What shouldn’t live there is your content.  If the user’s thumbs are hovering over this region of the screen, this also means they can’t see what is happening on that region of the screen.  Here’s a good rule of thumb:

Summary

In this article, we covered some of the important things you should be thinking about when you start building, and more specifically designing, your Windows 8 applications.  There are tons of additional resources at

http://design.windows.com

and you should definitely make a trip over to the site to check them out.  There are additional design patterns, UX guidelines, Adobe Photoshop templates and much more.

This article also puts the finishing touches on this lengthy series, and we want to sincerely thank each of you that have taken the time to read our words.  There are many reasons to write an article series like this, but our primary reason is that it’s an amazing excuse to dive deep into a technology stack and really understand it.  My second reason, however, is you, the reader.  Clark and I have made our best effort to understand each of these topics thoroughly, and explain them in a “no assumptions, start from the beginning” manner.  You, our readers, bring us comments and questions that we hadn’t anticipated, and for that, we truly are thankful.

Please leave comments and questions on our articles.  These will continue to live on as excellent learning resources for developers looking to build Windows 8 apps, and your contributions only make them that much better.

Thanks.