Contents tagged with Metro

  • Windows 8 and the Lethbridge Technology User Group

    Join me and 83,517 screaming nerds (everyone in the city is attending and a geek right?) on Thursday February 21st from 3-5pm to talk about building Metro style apps for WIndows 8. Here's what we'll be covering.

    Windows 8 Platform for Metro Style Apps

    Windows 8 is Windows re-imagined. Join this session to learn about the new platform for building Metro style apps. Get an understanding of the platform design tenets, the programming language choices and the integration points with the operating system and across Metro style apps

    Everything Web Developers Must know to build Metro Style Apps

    Learn how you can use your web skills to build Windows 8 Metro style apps using HTML5, CSS3 and JavaScript. In this session you’ll discover how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime. You will learn about navigation, user experience patterns and controls, inherent async design and the seamless integration with the operating system that will let you create great Metro style apps.

    I promise fun times, chaos monkeys, and live kitten juggling as per my usual presentations.

  • Metro SharePoint Directory–Reading from Lists

    As yet another follow-up to the various posts I made on building a Metro-style directory of sorts in SharePoint here and here, one thing that’s been asked a few times already is reading from a list.

    In the original post we called the getSubWebsForCurrentUser method to fetch a list of sites. What if you wanted something more generic? Here’s a solution that will let you read from a list instead.

    First we’re going to need a list. This part is easy. Create a new custom list through the Site Actions (Site Actions > More Options > List > Custom List, intuitive I know).

    image

    The custom list gives you a blank list with one column, Title. That will be our text to display. Next add a new column to the list of type Hyperlink. It can be called Url, Link, or Ganondorf if you’re feeling particularily Zelda-ish. This will be the link that will transport your users to magical places.

    image

    Now that we have our list we can use a modified version of the original script to iterate through the list items and build up our menu. I won’t get into the details of how everything works here (go back and read the first article in this series) but here’s the part that will create the menus. Replace your loadSites method with this one:

    1 function loadSites() 2 { 3 var context = new SP.ClientContext.getcurrent(); 4 5 if(context != undefined && context != null) 6 { 7 var web = context.getweb(); 8 var list = web.get_lists().getByTitle('Zelda'); 9 10 var query = SP.CamlQuery.createAllItemsQuery(); 11 this.sites = list.getItems(query, 'Include(Title, Link)'); 12
    13 context.load(this.sites); 14
    15 context.executeQueryAsync( 16 Function.createDelegate(this, this.onSuccess), 17 Function.createDelegate(this, this.onFailed)); 18 } 19 } 20

    Line 8 is where things get different from the original implementation. Instead of getting the sites for the user, we get our custom list. Then we create a new CAML query. The SP.CamlQuery object has a method to get all items so we’ll use that (we could construct a custom query here but we want everything for now).

    Line 11 we get all the list items based on the query and specify the fields we want to load.

    Line 13 is the same as line 18 in the original code and submits our job to the server for execution.

    Our onSuccess method is a little different now that we have to enumerate over list items instead of sites. Here’s the modified version:

    1 function onSuccess() 2 { 3 var listItems = this.sites.getEnumerator(); 4 var menuNavContent = ''; 5 var contentNavContent = ''; 6 7 menuNavContent += '<div id="applist">'; 8 menuNavContent += '<h1>Apps</h1>'; 9 menuNavContent += '<ul class="apps">'; 10 11 contentNavContent += '<div id="appbox">'; 12 contentNavContent += '<ul class="apps">'; 13 14 while(listItems.moveNext()) 15 { 16 var item = listItems.get_current(); 17 var itemId = item.get_id(); 18 var itemUrl = item.get_item('Link').get_url(); 19 var title = item.get_item('Title'); 20 21 menuNavContent += '<li>'; 22 menuNavContent += "<a href='" + itemUrl + "'>" + title + "</a>"; 23 menuNavContent += '</li>'; 24 25 contentNavContent += "<div style=\"cursor:pointer;\" onclick='location.href=" + itemUrl + "');\">"; 26 contentNavContent += '<li class="theme_blue">'; 27 contentNavContent += '<div>'; 28 contentNavContent += '<div class="tileTitle"><a href="' + itemUrl + '">' + title + '</a></div>'; 29 30 contentNavContent += '</div>'; 31 contentNavContent += '</li>'; 32 contentNavContent += '</div>'; 33 } 34 35 menuNavContent += '</ul>'; 36 menuNavContent += '</div>'; 37 38 // replace our left hand menu navigation 39 $('#menuNav').html(menuNavContent); 40 41 contentNavContent += '</ul>'; 42 43 // replace our right hand tile navigation 44 $('#contentNav').html(contentNavContent); 45 } 46

    A few things to note here on what happening.

    Line 3 we fetch the list item enumerator.

    Line 14 we step over each item in the list.

    Line 16-19 we grab the individual item and fields we want.

    Line 21-23 we setup the left hand menu navigation with the title and link to the site (from the custom list data)

    Line 25-32 we populate the Metro tiles with the same information.

    Finally we add it to our markup on the page using jQuery to replace our Loading tags.

    That’s it. Now you have your custom menu driven from a SharePoint list. Go ahead and add items to the list and magic will happen.

    Look for a more lengthy article on this entire series shortly where I pull it all together as well as adding a few more cool things like tracking and sorting the list based on popularity of clicks. I’m also going to present this whole thing at next weeks Calgary SharePoint User Group meeting if you’re in town so you can join us then.

    Enjoy.

  • Goodbye Ribbon–Going Full Screen Metro Style with SharePoint

    Having some fun with a previous post I did about generating a Metro-style menu from a Custom List in SharePoint for the purpose of building something like an Application Directory. It’s a great navigation system and by adding something like Live Tiles (that pulls information from each site) via JavaScript it can be an informative dashboard rather than a pretty menu. You can read the previous write-up I did on this here.

    Here’s what my Application Directory looks like:

    image

    Nice, but all that SharePoint chrome isn’t needed for the purpose of navigating the directory.

    The answer is simple. Just a few CSS styles you override to hide everything.

    Here’s the CSS markup you need:

    1 <style> 2 / hide the ribbon row / 3 #s4-ribbonrow 4 { 5 display: none; 6 } 7 / hide the title row (menus, social tags, search) / 8 #s4-titlerow 9 { 10 display: none; 11 } 12 / without overriding this your content 13 will get pushed down / 14 body #s4-leftpanel 15 { 16 width: 0; 17 } 18 / without this your content will be 19 pushed to the left / 20 .s4-ca 21 { 22 margin-left: 0; 23 } 24 </style>

    And here’s the result:

    image

    Nice and clean.

    If your admins need to get to the underlying system pages just navigate to “/_layouts/viewlsts.aspx” and they can navigate around normally from there. You could also create a link on the main page for that, even wrap it in a security token so only admins can see it!

    I have a blog post in the works on turning those pretty Metro icons into Live Tiles with data from the subsites, but that’s for another day.

    Until then, enjoy!

  • Get Juiced with me and 10,000 friends at Prairie Dev Con West

    I”m happy to say that Prairie Dev Con West 2012 is almost upon us. In just over a week geeks from the five corners of the planet will get together and talk about D’Arcy Lussier’s hair and hope that the Mad Mexican doesn’t crash their session.

    Why is this picture here?For me there’s a few sessions I’m presenting including a day long workshop on Windows Phone Development. If you’re looking to learn hands-on development with a Jedi Master then you’ll need to find a different conference. If however you want to try your hand at learning with me and watch me stumble through trying to run Windows on a MacBook Pro, then bring it. Here’s a rundown of what we’ll be covering with the Windows Phone Developer Workshop.

    Start your engines and we’ll go from 0-11 in 60 minutes with building more Hello World apps you’ve ever seen. They’ll be a Hello app, a World app, and even a Hello World app. Everything you need to know to get started with Windows Phone development. After a series of Hello World apps you’ll be ready to build anything (well, anything with the words Hello and World in them)

    • Everyone talks about the Model-View-ViewModel (or as we experts say MVVM) pattern when it comes to data binding on the Windows Phone. We’ll explore every concievable angle to using the MVVM pattern, tools that make it less painful to implement the pattern, and different ways we can spell MVVM (like MVMV, MVCM, and the ever popular MCMXXVII)
    • For me I’m all about the bling and love to criticize apps that make my eyes bleed. Help me make my eyes bleed less by learning the Metro design language. We’ll just randomly pick ones in the marketplace and rip them a new one. If you like watching Gordon Ramsay yell down at people that cook like donkeys then you’ll fit right into this part of day. I guarantee you’ll know the Metro ways after this or I’ll beat your with your own skull.
    • Mango introduces about 800,000 new API features and we’ll look at every one of them in detail. There are some cool tools that will help you debug and work with apps in the emulator and we’ll go over the new and old stuff in Mango. This part of the session may extend the day so bring a sleeping bag and some Red Bull to keep you going through the night.
    • Expression Blend is the most complex piece of software ever known to man. We’ll try to figure it out. Barring that, we’ll just sit around and sing Kumbaya and make jokes about people from Edmonton.

    I’m also presenting a session on using the JavaScript Client Object Model with SharePoint 2010. We’ll build some funky stuff and learn how to iterate lists, sites, and build alternate UIs for SharePoint without writing a single line of C# code. There are also two additional sessions on Windows Phone that I’m planning on doing which is a deep dive into marketing and design. Oh yeah, there are other people doing sessions at the conference too.

    The 10,000 friends? Okay, so I think the attendance for Prairie Dev Con West is only a few hundred, but I like to use my imagination and pretend I can see ten times more people than there really are. Same effect when I drink.

    In any case, if you haven’t registered already please consider it. D’Arcy puts on a damn good show and the quality being presented here (sans me) is top notch and there’s a huge diversity of sessions to take in.

    Also remember the pre-con day-long workshops are there. If all you want to take in is a workshop, that’s cool too and you’ll get a full day earful of Agile, Windows Phone Development, and TFS Build sessions. Still an absolute cheapskate like me? Then there’s a day long Windows Azure Boot Camp you can come out to that absolutely free (as in beer,  but space is limited) and even includes breakfast and lunch (sorry, the Microsoft IT Virtualization Boot Camp is sold out).

    Come on down and get smart(ish).

  • Metro Style Site Directory for SharePoint Using EMCAScript

    I’ve always been trying to come up with a useful and clever way to allow users to navigate around SharePoint sites. Recently I put together an “Application Directory” which basically displayed a menu system to navigate around apps. Using the JavaScript Class Library for SharePoint to pull values out of SharePoint I quickly put together something that normally would be a lot of C# code and a web part.

    The EMCAScript object model is powerful in that you can quickly pull data out of SharePoint sites and lists and make a pleasant user experience with just a little JavaScript, CSS, HTML, and jQuery. It still will make a call back to the server to fetch the data but it’s done asynchronously so the perception to the user is almost seamless.

    This post walks you through building a site directory of sorts. It could be used as a landing page on a top level site collection or as a web part sitting on a team site (to show the contents below the site). It’s up to you but the net result is a nice navigation system (done with a little “Metro” styling) all done in a hundred lines of JavaScript.

    Here’s what we’re building:

    Let’s start with the simplest thing possible. A script that we’ll insert into the page using the Content Editor Web Part via a Content Link. This is my preferred way of doing lightweight adds to SharePoint (like JavaScript or even just raw HTML). The Content Link points to a file in my SiteAssets library in the site and since it’s a link it just gobbles up the content and serves it up. If you try adding HTML to a Content Editor Web Part you’ll find a nice message after saving “Your HTML may have been modified”.

    WTF?

    Yeah, SharePoint deliciously will go in after you save your nicely formatted content and do some neat things like rename your CSS entities. Oh yeah, it’ll also strip away your JavaScript if it doesn’t like it.

    Trust me. Just include the file and you’ll be much better off in the end. Having the file located in the SiteAssets library also lets me just crack it open in SharePoint Designer and while the editor isn’t the greatest, it does give you some Intellisense but the real advantage is saving it in SPD then hitting refresh on your page to see the effect. The file will contain the CSS, JavaScript, and HTML markup. I like putting everything together so I don’t have to worry about files all over my system but you can just as easily use multiple files if you want.

    Alright, back to business. Create a new file in your SiteAssets library (you get a SiteAssets library when you create a new site regardless of what template you use or what feature you activate, it’s always there and accessible through SharePoint Designer).

    Name the file SiteDirectory.js or something. Doesn’t really matter and you can call it ISavedTheWorldUsingPork.HowAboutThat if you want, but leaving it with a .js extension will give you some semblance of Intellisense inside of SPD.

    Drop a Content Editor Web Part on the home page of your site (or wherever you want to put this). This could be a Wiki Page (the Home.aspx page is a wiki page if you activate the Wiki Home Page Feature on a site) or a Web Part Page. There are a few small tweaks you should do depending on what type of page you put this on but just adjust the CSS we’ll be building as you see fit.

    Starting simple we're going to just enumerate the child sites and display them in an unordered list. The list is easy to style and works well with jQuery later to be able to animate or attach plugins to.

    Here’s the initial code that we’ll put into the SiteDirectory.js file:

    1 <style> 2 </style> 3 4 <script type="text/javascript" src="/siteassets/jquery-1.4.2.min.js"></script> 5 6 <script> 7 8 var sites; 9 10 ExecuteOrDelayUntilScriptLoaded(loadSites, 'SP.js'); 11 12 function loadSites() 13 { 14 var context = new SP.ClientContext.getcurrent(); 15 if(context != undefined && context != null) { 16 var web = context.getweb(); 17 this.sites = web.getSubwebsForCurrentUser(null); 18 context.load(this.sites); 19 context.executeQueryAsync( 20 Function.createDelegate(this, this.onSuccess), 21 Function.createDelegate(this, this.onFailed)); 22 } 23 } 24 25 function onSuccess() 26 { 27 var items = this.sites.getEnumerator(); 28 var menuNavContent = ''; 29 30 menuNavContent += '<h1>Apps</h1>'; 31 menuNavContent += '<ul>'; 32 33 while(items.moveNext()) 34 { 35 var item = items.getcurrent(); 36 var itemUrl = item.getserverRelativeUrl(); 37 var title = item.gettitle(); 38 39 menuNavContent += '<li>'; 40 menuNavContent += '<a href="' + itemUrl + '">' + title + '</a>'; 41 menuNavContent += '</li>'; 42 } 43 44 menuNavContent += '</ul>'; 45 $('#menuNav').html(menuNavContent); 46 } 47 48 function onFailed(sender, args) 49 { 50 $('#menuNav').html(args.getmessage()); 51 } 52 53 </script> 54 55 <div id="appdir"> 56 <div id="menuNav">Loading...</div> 57 </div>

    Like I said, all this is doing is a) enumerating through the list of subsites then b) spitting them out into an unordered list. Here’s a breakdown of how this works:

    Line 1-2: We’ll include some CSS styles here later

    Line 4: We include jQuery so we can a) make it easy to replace elements on the page and b) support plugins later. You can choose to use pure JavaScript or omit this if your site already includes jQuery.

    Line 8: We declare a variable we’re going to use to hold the list of sites

    Line 10: We wait until the core JavaScript files are loaded by SharePoint. This ensures the ClientContext is setup for us when we need it.

    Line 12-23: This is the function  that calls the Client Object Model to get our web then get the subwebs for the current user. Finally on lines 19-21 we execute the call (which is where we talk to the server) and define the success and failed methods.

    Line 25-46: We define the success function to call with our list of subwebs. Here we’re getting an enumerator to the web collection and iterating through them, grabbing the url and title of the site then creating our unordered list using regular HTML markup. Finally on line 45 we find the DIV tag we’re replacing and substitute the HTML we just created.

    Line 55-57: This is the HTML markup we’re going to replace in our JavaScript. We initially set the text to “Loading…” so users will see this when the page loads then magically it’ll get replaced with our content.

    Here’s the result:

    Looks good and lets us know we’re on the right track. If there are any failures you’ll see them here because our failed function will get called and output the error message. This could be anything from a JavaScript error to not calling a known method. Also note that this is already security trimmed since we’re using the getSubwebsForCurrentUser method so we’ll only see sites the user has access to.

    Let’s add another list and DIV tag so we have two lists to use:

    1 function onSuccess() 2 { 3 var items = this.sites.getEnumerator(); 4 var menuNavContent = ''; 5 var contentNavContent = ''; 6 7 menuNavContent += '<h1>Apps</h1>'; 8 menuNavContent += '<div>'; 9 menuNavContent += '<ul>'; 10
    11 contentNavContent += '<div>'; 12 contentNavContent += '<ul>'; 13 var counter = 1; 14 15 while(items.moveNext()) 16 { 17 var item = items.getcurrent(); 18 var itemUrl = item.getserverRelativeUrl(); 19 var title = item.get_title(); 20 21 menuNavContent += '<li>'; 22 menuNavContent += '<a href="' + itemUrl + '">' + title + '</a>'; 23 menuNavContent += '</li>'; 24 25 contentNavContent += '<li>'; 26 contentNavContent += title; 27 contentNavContent += '</li>'; 28 } 29 30 menuNavContent += '</ul>'; 31 menuNavContent += '</div>'; 32 $('#menuNav').html(menuNavContent); 33
    34 contentNavContent += '</ul>'; 35 contentNavContent += '</div>'; 36 $('#contentNav').html(contentNavContent); 37 } 38 39 </script> 40 41 <div id="appdir"> 42 <div id="menuNav">Loading...</div> 43 <div id="contentNav">Loading...</div> 44 </div>

    Not much to explain here, just added a new DIV tag and built up the HTML just like the original. Now we have two unordered lists. We also wrapped up each list in its own DIV tag.

    Now we’ll do some simple styling by floating the list of sites down the left hand side and the second list on the right and applying a little styling to the text.

    1 <style> 2 #menuNav 3 { 4 float: left; 5 width: 170px; 6 padding-left: 9px; 7 } 8 #contentNav 9 { 10 float:left; 11 } 12 #applist > ul 13 { 14 list-style: none outside none; 15 padding-left: 0; 16 } 17 #applist > h1 18 { 19 margin-top: 12px; 20 color: #333333; 21 font: 36px/42px "Segoe WPC Light", "Segoe UI Light", Helvetica, Arial, Sans-Serif; 22 } 23 #appbox 24 { 25 width: 700px; 26 } 27 #appbox > ul 28 { 29 list-style: none; 30 float: left; 31 overflow: hidden; 32 margin: 0 auto; 33 padding: 10px; 34 } 35 </style> 36 37 function onSuccess() 38 { 39 var items = this.sites.getEnumerator(); 40 var menuNavContent = ''; 41 var contentNavContent = ''; 42 43 menuNavContent += '<div id="applist">'; 44 menuNavContent += '<h1>Apps</h1>'; 45 menuNavContent += '<ul>'; 46
    47 contentNavContent += '<div id="appbox">'; 48 contentNavContent += '<ul>'; 49 var counter = 1; 50 51 while(items.moveNext()) 52 { 53 var item = items.getcurrent(); 54 var itemUrl = item.getserverRelativeUrl(); 55 var title = item.get_title(); 56 57 menuNavContent += '<li>'; 58 menuNavContent += '<a href="' + itemUrl + '">' + title + '</a>'; 59 menuNavContent += '</li>'; 60 61 contentNavContent += '<li>'; 62 contentNavContent += title; 63 contentNavContent += '</li>'; 64 } 65 66 menuNavContent += '</ul>'; 67 menuNavContent += '</div>'; 68 $('#menuNav').html(menuNavContent); 69
    70 contentNavContent += '</ul>'; 71 contentNavContent += '</div>'; 72 $('#contentNav').html(contentNavContent); 73 } 74 </script> 75

    Here’s the updated output:

    Now it’s starting to look like our target. Let’s style the menu list with a larger font. We’ll also just make one line of code change in our markup in the onSuccess method. Find the line that says menuNavContent += ‘<ul>’ and change it to read menuNavContent += ‘<ul class=”apps”>’. This will style just the unordered list of items on the left.

    Here are the new styles to add to the CSS

    1 <style> 2 #appdir 3 { 4 font: 15px/19px "Segoe WPC", "Segoe UI", Helvetica, Arial, "Arial Unicode MS", Sans-Serif; 5 } 6 #applist > ul.apps li 7 { 8 margin-bottom: 9px; 9 overflow: hidden; 10 } 11 #applist > ul.apps li a 12 { 13 text-decoration: none; 14 } 15 #applist > ul.apps li a:hover 16 { 17 color: red; 18 } 19 </style> 20

    Now that we have the list done lets focus on the second list which will form our tiles. They’re not as live and vibrant as they could be but they do show some metadata from the site so are at least a little more informative than just navigation boxes.

    First we’ll apply some styles to the list to make them into boxes and space them apart. It’s just CSS markup here to add and a couple of small changes in the construction of the HTML for the second list.

    1 <style> 2 #appdir 3 { 4 font: 15px/19px "Segoe WPC", "Segoe UI", Helvetica, Arial, "Arial Unicode MS", Sans-Serif; 5 } 6 #menuNav 7 { 8 float: left; 9 width: 170px; 10 padding-left: 9px; 11 } 12 #contentNav 13 { 14 float:left; 15 } 16 #applist > ul 17 { 18 list-style: none outside none; 19 padding-left: 0; 20 } 21 #applist > ul.apps li 22 { 23 margin-bottom: 9px; 24 overflow: hidden; 25 } 26 #applist > ul.apps li a 27 { 28 text-decoration: none; 29 } 30 #applist > ul.apps li a:hover 31 { 32 color: red; 33 } 34 #applist > h1 35 { 36 margin-top: 12px; 37 color: #333333; 38 font: 36px/42px "Segoe WPC Light", "Segoe UI Light", Helvetica, Arial, Sans-Serif; 39 } 40 #appbox 41 { 42 width: 700px; 43 } 44 #appbox > ul 45 { 46 list-style: none; 47 float: left; 48 overflow: hidden; 49 margin: 0 auto; 50 padding: 10px; 51 } 52 #appbox > ul.apps li 53 { 54 width: 150px; 55 height: 150px; 56 margin-bottom: 9px; 57 margin-left: 12px; 58 padding-bottom: 4px; 59 padding-left: 4px; 60 float: left; 61 position: relative; 62 color: white; 63 } 64 #appbox > ul.apps li a 65 { 66 color: white; 67 text-decoration: none; 68 } 69 #appbox > ul.apps li a:hover 70 { 71 } 72 .themeblue 73 { 74 background-color: #1ba1e2; 75 } 76 </style> 77 78 <script> 79 80 function onSuccess() 81 { 82 var items = this.sites.getEnumerator(); 83 var menuNavContent = ''; 84 var contentNavContent = ''; 85 86 menuNavContent += '<div id="applist">'; 87 menuNavContent += '<h1>Apps</h1>'; 88 menuNavContent += '<ul class="apps">'; 89
    90 contentNavContent += '<div id="appbox">'; 91 contentNavContent += '<ul class="apps">'; 92 var counter = 1; 93 94 while(items.moveNext()) 95 { 96 var item = items.get
    current(); 97 var itemUrl = item.getserverRelativeUrl(); 98 var title = item.gettitle(); 99 100 menuNavContent += '<li>'; 101 menuNavContent += '<a href="' + itemUrl + '">' + title + '</a>'; 102 menuNavContent += '</li>'; 103 104 contentNavContent += '<div style="cursor:pointer;" onclick="'; 105 contentNavContent += "location.href='" + itemUrl + "';"; 106 contentNavContent += '">'; 107 contentNavContent += '<li class="themeblue">'; 108 contentNavContent += '<div>'; 109 contentNavContent += title; 110 111 contentNavContent += '</div>'; 112 contentNavContent += '</li>'; 113 contentNavContent += '</div>'; 114 } 115 116 menuNavContent += '</ul>'; 117 menuNavContent += '</div>'; 118 $('#menuNav').html(menuNavContent); 119
    120 contentNavContent += '</ul>'; 121 contentNavContent += '</div>'; 122 $('#contentNav').html(contentNavContent); 123 } 124 125 </script>

    We’re just adding some new styles here. There’s a class called themeblue set to the Metro blue (#1ba1e2) which we set as the background colour for each tile. In addition we set the entire tile to be clickable to the same url as the site. This lets the user click anywhere on the tile (or the list one the left) to launch the site rather than having to click on the title.

    Here’s the updated output.

    Now that we have our tiles we can add some dynamic metadata to them. This will be pulled from the website itself and give us a navigation system that’s more information than just links.

    1 <style> 2 / title for tiles / 3 .tileTitle 4 { 5 bottom: 8px; 6 left: 6px; 7 position: absolute; 8 font-size: 18px; 9 font-weight: bold; 10 } 11 / subtitle to display at top of tile / 12 .tileSubtitle 13 { 14 font-size: 13px; 15 position: absolute; 16 top: 4px; 17 left: 6px; 18 } 19 </style> 20 21 <script> 22 23 function onSuccess() 24 { 25 var items = this.sites.getEnumerator(); 26 var menuNavContent = ''; 27 var contentNavContent = ''; 28 29 menuNavContent += '<div id="applist">'; 30 menuNavContent += '<h1>Apps</h1>'; 31 menuNavContent += '<ul class="apps">'; 32
    33 contentNavContent += '<div id="appbox">'; 34 contentNavContent += '<ul class="apps">'; 35 var counter = 1; 36 37 while(items.moveNext()) 38 { 39 try 40 { 41 var item = items.getcurrent(); 42 var itemUrl = item.getserverRelativeUrl(); 43 var title = item.gettitle(); 44 var lastItemModified = getModifiedDateString(new Date(item.getlastItemModifiedDate())); 45
    46 menuNavContent += '<li>'; 47 menuNavContent += '<a href="' + itemUrl + '">' + title + '</a>'; 48 menuNavContent += '</li>'; 49
    50 contentNavContent += '<div style="cursor:pointer;" onclick="'; 51 contentNavContent += "location.href='" + itemUrl + "';"; 52 contentNavContent += '">'; 53 contentNavContent += '<li class="theme_blue">'; 54 contentNavContent += '<div>'; 55 56 contentNavContent += '<div class="tileTitle">' + title + '</div>'; 57 contentNavContent += '<div class="tileSubtitle">' + lastItemModified + '</div>'; 58
    59 contentNavContent += '</div>'; 60 contentNavContent += '</li>'; 61 contentNavContent += '</div>'; 62 } 63 catch(err) 64 { 65 menuNavContent = err.name; 66 contentNavContent = err.message; 67 } 68 } 69 70 menuNavContent += '</ul>'; 71 menuNavContent += '</div>'; 72 $('#menuNav').html(menuNavContent); 73
    74 contentNavContent += '</ul>'; 75 contentNavContent += '</div>'; 76 $('#contentNav').html(contentNavContent); 77 } 78 79 function getModifiedDateString(date) 80 { 81 var rc = ""; 82 rc += (date.getMonth()+1).toString(); 83 rc += "/"; 84 rc += date.getDate().toString(); 85 rc += "/"; 86 rc += date.getFullYear().toString(); 87 rc += " at "; 88 rc += date.getHours().toString(); 89 rc += ":"; 90 rc += date.getMinutes(); 91 if(date.getHours() > 11) 92 { 93 rc += " PM"; 94 } 95 else 96 { 97 rc += " AM"; 98 } 99 return rc; 100 } 101 102 </script> 103

    We wrap the title in a DIV tag with a class of tileTitle which lets us style it to place it at the bottom of the tile and give it a larger font. You do need to be careful of the length of the titles of your sites as this doesn’t work for all scenarios but just adjust it to fit your needs.

    We also pull the last modified item date from the web properties. Every site tracks whatever the last item that was modified is and holds onto the date for that item. So now users can see when some content on the site was last changed.

    Also we parse out the date from SharePoint into a JavaScript Date object and build a formatted date to display on the tile.

    The final image:

    That’s it! You now have a single script that you can just drop onto any site to create a Metro style navigation to the subsites. New sites can be added and will automatically show up and users can see when the content on the site was last modified and be able to click on the site to visit it.

    Here’s the full source code for the page for you play with.

    Remember, this is just a start. There are some fun things you can do with this. For example create custom styles for different colours (for example blue for team sites, red for wikis, etc.) and style them accordingly. Other ideas are to pull other data from the site like description, etc. and put that on a bigger tile. Enumerate the number of subsites in a site and display that. There are other properties you can access off the Web object like if RSS is enabled, etc. so you might want to display different icons on the tile to reflect that. The list of properties on the SP.Web class can be found here.

    If you’re following the “Metro” style then remember to keep the UI light and simple. Content over chrome. You don’t want to be dumping all kinds of information here, just enough that your users need to make it useful.

    Enjoy!

  • InstaCam MetroMakeover - Spacing, Margins, and Polish for your Windows Phone App

    In the spirit of a recent article that Jeff Wilcox posted on his blog about the MetroRadio app, I thought I would do something similar for the InstaCam app.

    InstaCam is a 3rd party app written by Dmitry Manayev to bring Instagram functionality to the Windows Phone platform. I contacted Dmitry about this post to get his permission. Here are a few tweaks that you can keep an eye out for in your own apps.

    First up is the Popular Page. This has small square images of the most popular pictures currently posted on Instagram. The page is built on the Panorama control so the title is the default. It’s the pictures that are off a bit here. If they were indented 14 (or maybe 15) pixels then the edge of the pictures would line up with the pano title. Part of Metro is about lining things up and keeping it clean. You should see an invisible line down the left side of your pages that align things up. I saw the same margin issue on the search results page.

    Next up is the search results page. I found the spacing to be a little tight so after measuring it I found that the spacing was in line with the minimum recommended target size from Microsoft, 7mm (check the guidelines here for target sizes). In the recommendations they suggest a target size of 9mm rather than the minimum of 7mm. The idea with Metro is to open up the design and make liberal use of white space. Don’t crowd things together if you can avoid it. There's plenty of space so hitting the target of 9mm (with perhaps a larger font) might open up the page a little more.

    On the feed page there are a few little tweaks I would look at. First is the title for the app. The unwritten rule is that a page title should be in all CAPS. Hey, it’s a style. Check out (most) of the core apps and you’ll see the style applied there. Next is spacing. Jeff Wilcox mentioned there’s no hard and fast rule with vertical spacing (I really wish there was so we could all follow it, hint, hint) but he does say he tends to use 4, 6, 12, or 24 pixels. The default vertical on some of the initially generated XAML you get from Microsoft pegs some vertical space at 17 pixels so the message here can be confusing. For the title spacing I thought a 14px top margin would work here (but 12 would be fine too).

    The thing about spacing is be consistent! I don’t think it matters if it’s 12, 17, or 24 but keep it the same on every page. That should be your mantra. Consistency. With vertical spacing (and especially page titles) watch out for the top margin where the system indicators are. If you leave them turned on, you lose 22 pixels. If you turn them off you get that back but remember to turn them on or off across your entire app (or compensate for pages where you have it turned on). For example Panorama pages have the system tray turned off by default so if your app goes from a Pano to a single page (or a pivot) then you might notice a slight “jump” with the title as it moves from a page without the system tray to one with.

    Down in the details for a single picture it shows the user who took it, some information about them, and the likes and comments for that photo.

    The name and when the picture was taken is a little crowded here and butts up against the profile picture. The suggestion here is to apply a 12 pixel margin to the left of the name (or the right of the picture) to open things up. In addition I would personally put the like and comment counts inside of the symbols (using white to offset the colour). That’s just a personal preference but it might make it a little tighter and gives you more space to be able to use larger symbols. There is a gotcha here of course with numbers inside of symbols. Some images will have 0 comments, other will have 10,000. I have seen a situation where the font scaled based on the width of the number so that might be an option. For sure when testing something like this you should consider ranges like this and try out the extremes. You might not be able to catch every scenario but don't just design for say 4 digits when the possibility of 8 exists for example.

    When you view a single image I noticed a few things that a slight adjustment would fix. Again, a lot of these changes here are just minor tweaks to the UI, nothing major. I think this is the case for a lot of applications out there. A couple of hours going over things and moving a few items around goes a long way.

    Here again the margin issue rears it’s ugly head. The margin for the Like button is fine (and bleeding the picture itself to the edge of the phone is a nice touch, lets you see more of the image). It’s the tags and detail labels. The colour doesn’t work against a dark background. Whenever you’re looking to highlight something consider using the PhoneAccentBrush colour (but use it sparingly). Dmitry did mention in the latest update that he fixed the colour to the blue phone accent colour. I took these sceenshots from the marketplace so maybe that hasn't been updated. On my phone the text does look better than here but again, watch out for themes when deciding on using accent colours, especially with fixed colour or image backgrounds.

    As for the buttons, they’re a little off so as your eye moves horizontally across you see text jump up or down. It’s only a few pixels but a design technique mentioned by Arturo Toledo, a Senior User Experience Designer at Microsoft. On his UX blog he recently talked about the design process for Metro apps. In it he talks about Redlines, marked up screenshots of your app with lines drawn across and up to show alignment and spacing. This is something everyone should incorporate into their release process. Yes, my lines are magenta but that was just for clarity. Red, yellow, magenta, whatever works for you.

    For the buttons themselves I would consider doing something with the extra space. Split the buttons (either using a Grid or a StackPanel with the Orientation set to Horizonal) so they’re evenly distributed (Width = 0.5* in the case of a grid). Then regardless of how much the content takes up, they’re consistent and not as jarring to the eyes. Again here I might consider putting the counts inside the symbols (to be consistent with the other views if you did that) but leave the words “Likes” and “Comments” so people know what it refers to. Here the words work because you’ve got the entire width of the phone to display them (vs. the previous image where there’s only room for the symbol).

    Finally the user profile page. I would suggest a few small changes here just like the other pages.

    For this page:

    • Align the profile picture with the page title
    • Align the counts and count labels (photos, following, etc.) on the left. This tends to be the norm rather than centered text which sometimes looks like its floating without an anchor. Again refer to the core apps for some guidance here, for example take a look at a persons profile page (your own or someone else). They’re a good model to follow.
    • The colours here are awkward again and hard to read. If you use the PhoneAccentBrush colour then pay attention to how the light and dark themes work against your backgrounds. Sometimes when using background images you need to adjust the Opacity dynamically. When testing, just go through all of the Theme colours in both light and dark mode. It takes an hour or so with a few screens and all of the combos but you’ll cover all the bases.

    That’s it. Hopefully that helps you in your own application development and gives you a few little things to look out for. They’re all minor tweaks but things that you can add to a final checklist of things to go over before you submit your app to the marketplace. Thanks for Dmitry for letting me write this post and perhaps he’ll put some of these suggesting in a future release.

  • Adopting the Metro Style for Line of Business Apps

    Here are some thoughts around adoption the new Metro style look and feel for line of business applications (LOB) in your organization.

    I am not a UX expert (is anyone?) but I think I know what looks and feels right and I strive to try to include that in every solution I build. Metro introduces us to some new concepts and as Jensen Harris pointed out, it isn’t just recompiling your app on WinRT. You have to re-imagine it and think about how it’s organized, how users will interact with it, and do some trimming of the fat so to speak as you move into the Metro world.

    Good design practices still apply here. Appropriate use of whitespace, good layout, clear typography, and consistent UI patterns make a big difference so remember these and use them. A UI checklist might be in order for any app, not just Metro ones. I’ll state this from my experience. Very few business users know what they need and most can’t visualize past what they already have. Know this and learn to adapt from this perspective and I think you’ll go farther with the success factor with your users. Far too many times users are stuck with what they have, perhaps a spreadsheet-like application (where the one and only screen is 8000 rows of data and 300 columns). Anything you present to them, no matter how effective, is just shadowed by that grid in their mind.

    I’m a strong advocate of the task oriented UI and think it works. Try to keep this in mind when designing the system and don’t let your user try to do 80 things at once on the same screen. You’ll just run around like a chicken with your head cut off trying to cater to everyone and in the end deliver a mediocre product that works for all cases rather than separate UX instances that are stellar for each situation.

    Metro is different. It forces you to think about your application in a different manner. No longer are you trying to get tree view feeding items into list view feeding details into file view. There are still groups and collection of groups and all that but remember your UI now is a functional, breathing, living thing. Minimalism is best here so you want to get out as much information in as effective space as possible. As Microsoft pointed out, a live tile isn’t something you should be posting every detail to. It’s an extension of the application so treat it as a first class citizen, not a UI element that needs to be pretty.

    Lists should contain just the right amount of information. Again, go back to your users and push them. Try not to take the route of “What do you need” but rather provide them with a solution that accomplishes the goal they’re aiming for (of course that means you need to establish a goal first). If they’re coming from a giant screen of data saying “We need this” then push them to answer what they use it for. What goal are they trying to accomplish? Are they trying to summarize information or are they looking for something (e.g. show me all the users with more than 10GB of storage). If they have a goal, key in on it and that might become the basis of a UI workflow.

    Again keep the focus on the goal. You don’t want this thing to get out of hand or you’ll end up with a Frankenstein monster of a UI like this:

    Take them by the hand and show them. Lead by example and show them what is possible. Giving them design documents might not be enough and don’t describe things like “Imagine this window over here with a list of things…”. You’ll probably be met with the deer in the headlight look. You might be thinking that Metro isn’t right for this app and perhaps you’re right. Don’t assume that you have to build a new UI in Metro just because it’s there. Photoshop isn’t going to be a Metro app (ever, at least I hope) but your LOB app might. You need to be sure you’re doing the right thing and don’t try to fit a square peg into a non-existent hole. LOB apps can be great looking and useful. I highly recommend you check out Billy Hollis’ screencast he did on LOB apps with WPF. While it’s not Metro, it does show that LOB apps can be great looking and functional. A lot of great tips from Billys talk.

    Build something. Even if you sit with them in a whiteboard session and draw pictures on the screen it’ll help. Build up the UI using something like Basalmiq is great and easy for them to see quickly. Visio is just too mechanical to fiddle around with and your users will quickly loose interest. Rapid feedback wins over here but then take that back to the development environment and build it. The next day show them it in action on the real website or desktop you’re building it for.

    There’s a danger here that I’ve seen of the “It’s done” syndrome. Users will see a mock-up in a website and think that all the work is done. It isn’t so temper your system with that and read your users. Find out if they really believe it’s just some if/then/else statements you have to do to make it work. I would opt to not call this “prototype” or “mockup”. I prefer to call it the working software. It’s what they’ll use in the production release and it’ll just evolve as they provide feedback, new elements are added, and parts of the system become functionally complete.

    Look for some re-imaging of “Classic” apps into Metro ones soon as I’m planning on doing a few blog posts about this.

    Many thanks to @colinbowern for some great tips on Twitter.

  • Demystifying the Windows 8 Grid Application

    If you’re looking to “re-imagine” your apps on the Windows 8 platform in Metro style you can start with the Grid Application template that’s provided in the Visual Studio 2011 preview.

    From Visual Studio choose New Project and select Grid Application under Windows Metro Style in the template tree:

    image

    When you start you’ll get a fully blown Windows 8 Metro application, ready to begin filling in with your own content.

    How did all that stuff get there and where does it go?

    First open up the Sample Data folder in the solution. In there you’ll find a file called SampleDataSource.cs. This contains some sample data to work with and is bound to the Xaml pages in the solution at runtime. You’ll of course replace this with runtime data but the sample helps you visualize your app along with understanding where stuff goes on the screen.

    Or does it? The default app is all in Lorem Ipsum speak and while this is great for visualizing a fully populated application, I thought it was a little confusing to know how it fit together. To make it clearer where everything goes I’ve modified the first collection and item in the SampleDataSource.cs calls with more descriptive labels. Here’s a better picture of the GroupedCollectionPage.xaml, the “Home” page in the app:

    image

    Note the collection title appears above the group but only the description and category for the item appears for each item. So if you’re relying on users finding things by the item title (maybe it’s the title of a recipe or a newsfeed) then you might want to modify the layout for this to bind the title somewhere. You can get creative for example and overlay the title on top of the image.

    And here’s the DetailPage.xaml, what you see when the users clicks on a single item in the collection:

    image

    The Collection Title is the prominent title here but it does show the Item Subtitle. Again this might not be the desired location for titles. For example the Item Title is a small item below the image and category. Personally I would swap out the Item Title and Item Subtitle here or even use the Item Title in place of the Collection Title and leave the Item Subtitle alone (removing the Item Title below the image).

    There may be some Metro guidelines coming out to help understand the reasoning behind this positioning and maybe my brain isn’t thinking “Metro” just yet, but it doesn’t make a lot of sense to me the way the default locations are.

    And here’s the CollectionSummaryPage.xaml, you would navigate to this if you clicked on the Back Arrow in the screen above (next to Collection Title).

    image

    Interesting to note with this is that the Collection Content isn’t used here, only the Collection Description. I would probably modify this to include the content or drop that property entirely and just use the description.

    You don’t necessarily need to follow all of the structures the default Grid Application layout offers but do keep true to the Metro style and keep things consistent. I urge you strongly to watch Jensen Harris’ keynote on the 8 traits of a Metro app and realize that by using the default setup they give you, you’ll achieve a consistent look to your app that will fit harmoniously within the Windows 8 operating system.

    Make more sense now?

    Enjoy.

  • SharePoint Server 2010 Windows Phone 7 Mobile Edition

    It’s wonderful to end the week with two of my favorite passions, SharePoint and Windows Phone 7. The last few months I’ve been working on a special project that you can install on your Windows Phone 7 starting today.

    SharePoint Server 2010 running on Windows Phone 7.

    That’s right. Now you no longer need an IT shop to use SharePoint. You can just deploy it on your own phone and decide how to run it.

    screenshot_4-1-2011_6.41.58.946screenshot_4-1-2011_6.42.3.906

    Why would anyone deploy a server to your phone? Several reasons but mostly it’s because you can totally control your entire SharePoint environment even if you’re out of the office or offline.

    Scott Haack, Senior Principle Program Manager in Bellevue, Oregon said this about why this project came about:

    “It’s about choices. SharePoint Server 2010 on the mobile platform allows users to have choices about who runs their IT systems and decides how the system is configured without having to go through complicated business processes.”

    It’s all about competition too. Here’s what Phil Haanselman, Principle Platform Program Manager in Portland, Washington says about the platform:

    “With SharePoint Server 2010 on the Windows Phone 7 this pushes the platform to the edge and beyond. There is nothing like this on the iOS or WebOS and nobody is thinking in this space. It’s going to be game changing.”

    Bringing the Pieces Together

    I knew it was going to be a big job but I was up for it. There were so many pieces to get co-ordinated and I knew I would have a few challenges along the way. Here’s what it took to bring it all together.

    IIS Express to the Rescue

    Back in June when Scott Guthrie announced IIS Express I got thinking about SharePoint and the Mobile user. Wouldn’t it be great if they could run SharePoint on their phones! I knew Windows Phone 7 was coming up as I was currently in the beta and building Silverlight apps already. I knew SharePoint would run on Window 7 so why not combine the best of both worlds.

    IIS Express is a lightweight component that weighs in at under 10mb. It also does not require administrative access to run applications and has a full feature set including SSL, URL Rewrite, and other IIS 7.x modules. All packaged together that can be run from a single location and does not require any registration/configuration steps.

    It seemed like IIS Express was perfect to run on WP7.

    NoDo Delays

    Getting IIS Express onto the phone was going to be a bit of a challenge however with some work and co-ordination with high ranking figures at Microsoft I was able to get it to compile down into a single DLL file.

    To get it onto the phone I worked with top people on the Windows Phone team and packaged IIS Express into the next update, the infamous NoDo release. So as of right now, anyone with NoDo installed actually has web server available to them. There were several other updates we packaged into NoDo that were put there for SharePoint Server to run (mostly around Kerberos ticket support and background processing).

    So as a result this was the primary reason why NoDo was delayed. I do apologize to the community for the NoDo delays, but now you know the reason. It was so mobile users could run SharePoint.

    Getting past the NoDo release the Windows Phone 7 was now ready and enabled for serving up .aspx pages and SharePoint.

    Redesigning Central Administration

    The biggest challenge was having to rebuild the Central Administration site to work with the Metro look and feel. It was a lot of work but we’ve built all the screens as new using the Windows Phone 7 controls. This was done so you have good touch targets to hit. In early betas, we were just using the out of the box Central Admin web pages but it was hard to click on things and I was always zooming in and out. So I built the Metro screens to make it easier for you to work with Central Admin.

    Everything is all there and hopefully organized in a good way so you won’t be totally thrown back when using the WP7 version of SharePoint. Here’s Central Admin running on WP7.

    screenshot_4-1-2011_6.42.6.786screenshot_4-1-2011_6.42.9.724

    The Metro Way

    With the Metro overhaul of Central Admin we wired everything back up. Using MVVM was key in being able to have the UI respond to what you did so it was easy to show real-time information about the server.

    Here’s how you can create a new Web Application with Central Admin on the Windows Phone 7

    First select Web Applications from Application Management pivot. You’ll see this menu

    screenshot_4-1-2011_6.42.13.323

    Now click on Manage web applications. We couldn’t implement the Ribbon in Windows Phone 7 so from the list select Create New Web Application. You’ll be presented with a data entry screen to enter all the information for your new web app:

    screenshot_4-1-2011_6.42.16.90

    All of the options are there just like the current release of SharePoint. Unfortunately due to some last minute problems and trying to get this done by the end of the week we were not able to include Claims Based Authentication so only Classic Mode is available. Anyone would be a Fool to try to deliver something in April without testing it so this was why this decision was made.

    Complete Feature Set, Almost

    Not exactly. As I said we don’t support Claims Based Authentication and there are few other features in SharePoint 2010 we don’t support. Here’s a list of the current restrictions. These have been left out either due to time constraints or technical limitations on the phone platform. A few of these features will be available in the Mango release of Windows Phone 7 due out sometime in 2012.

    • Kerberos. Kerberos support is not fully implemented so it’s suggested to keep web sites running under NTLM (most of the system works under Kerberos but without a true integrated authentication on the Windows Phone 7 not everything works, yet)
    • Content Deployment. This isn’t implemented at all in this release due to time constraints. It’s planned for a future release. Hopefully this doesn’t hinder people too much.
    • InfoPath Forms Services. This was tricky but with some clever coding, we’re able to convert, on the fly InfoPath forms into Windows Phone 7 controls. However in some last minute testing we found that InfoPath forms with complex rules breaks the model. Simple forms work, complex forms will be delivered in Service Pack 1 due out later in the year.
    • Define blocked file types. Unfortunately as we don’t have complete control over access to the Windows Phone 7 sub-systems (like the registry) so we’re unable to control blocked file types. No word on when this feature might be available.

    Leveraging the Phone

    This release doesn’t just allow you to run SharePoint Server on your phone but we’ve also leveraged specific features of the WP7 platform as well. For example you can now hook up SharePoint Picture Libraries to the Windows Phone 7 Media Library and any picture taken on the your phone can instantly be available to anyone browsing the site.

    The other big integration point is Geolocation. Windows Phone 7 devices all have a built-in GPS. SharePoint Server 2010 leverages this by geotagging any content. A new feature in Document Libraries allows users to geotag documents with location information which can then be used to filter documents and lists based on locality and even plot document creation locations on a Bing Map using the built-in Bing Map Controls.

    It’s really up to the SharePoint web part developer to figure out how best to leverage these new capabilities. Like it was said before, this is game changing.

    Availability

    Most importantly when can you get this?

    Right now!

    Download the .xap file here directly and you can instantly sideload it onto your Windows Phone 7 (developer unlock required). If you’re not a developer then you’ll have to wait for the app to make it through Marketplace Certification which should be any day now.

    You do require the NoDo update to be able to run SharePoint Server 2010 on your phone so please make sure you have that installed first. The software will detect if IIS Express is installed or not and unfortunately fail if you don’t have the update yet.

    The software will be released on CodePlex in the next while under the Apache License so anyone can contribute to it. Please contact me offline if you’re interested.

    After MIX11 we’ll be making the server available as a NuGet package that can be deployed anywhere without the need to access the Windows Phone Marketplace. Stay tuned for news on this.

    Many Thanks

    Many thanks to all the wonderful people that made this project possible. Without their co-operation we wouldn’t be where we are today:

    • Geoffrey Chaucer
    • Eduard de Dene
    • John Aubrey
    • Sizdah Bedar
    • Joseph Boskin

  • Metro Inspiration–Designing Better Looking Apps for Windows Phone 7

    Recently I had the pleasure of checking out @jeffwilcox’s newest app for the Windows Phone 7 platform called 4th & Mayor. It allows you to interact with the location-based platform called foursquare.

    His app allows you to check in, take pictures, find friends, etc. Everything other mobile apps for foursquare do. In the design of the app, Jeff has really done a nice job on embracing and extending the Metro look and feel that’s prevalent on the Windows Phone 7 platform.

    47b772da-c9a1-4c63-b664-b17abcaf1548 f2b0f7d7-7084-40ea-bcf0-38310453d8bc

    9075a83f-6342-475a-801a-ccffbe4eb77c f56efd0d-ab38-4b41-a45a-fc23c03bfa3e

    Inspiration

    For me, I’m not even a foursquare junkie. I (still) don’t see the value in telling the world where I am at any given moment but I gave it a shot with Jeff’s app. Using his app I created an account, checked into a few places, and even became mayor of a few local hops (like the corner variety store, go me). I still think foursquare is silly, but 4th & Major made it fun for me.

    Some key design features I saw in 4th & Mayor:

    • Large touchable icons. Not tiny little things but big, bold 200 pixel wide images that expanded out to full size when tapped.
    • Use of Accent Colour. Jeff uses it sparingly and doesn’t overdo it by setting subtitles and key information on the screens in whatever accent colour you use.
    • Light and Dark. Jeff makes sure that the app still looks good in both dark and light themes and uses bold Metro like icons for types of locations (instead of say photos)
    • Whitespace and Alignment. Nothing is too crowded in the design, even when there’s a lot of information to present and all the text aligns nicely so it’s not all over the place.

    Enter Metro

    What’s Metro? Metro is the name of the new design language created for the Windows Phone 7 interface. It’s heavily influenced by Swiss print and packaging and focusing on simplicity. You can read up more about Metro here and review the Windows Phone 7 design guide that talks about specific controls and implementation here.

    MetroDesign

    Since the release Jeff has also posted what he’s calling his Metro Design Guide. It’s a checklist (of sorts) that goes through the various aspects of the Metro design fundamentals and some things he’s sharing with everyone. It’s a great read and gets you into “thinking Metro” so I encourage everyone to check it out.

    So where were we? Oh yeah. After playing around with 4th & Major and checking out a few other apps (like the Rock & Snow App out of the U.K. Marketplace) I thought it would be appropriate to give my simplistic Hamurabi game a facelift, Metro style. Little tweaks here and there just to clean things up a little. Here’s how I transformed the app to the next version.

    The app is pretty basic. A pivot table with various sections for playing the app, getting help, etc. and one gameplay screen where all the action takes place. Here’s version 1.0

    screen002 screen003

    Bland and boring. The pivot control is the out of the box one. The gameplay screen is just a portrait page with some controls on it. I did do some styling in the first version around the slider control to make it a little better. I really didn’t care for the out of the box slider as my first test user claimed they didn’t know how to use it. So I just styled it with a round button with a little gradient background to make it more prominent. Yes, it looks a little like an iPhone control but there’s no real Metro equivalent and the default implementation sucks.

    Metrofication

    First up I went through the entire app and cleaned up the various offsets. In Jeff’s guide, the magic number is 12 pixels. I think I have engrained into my head now. 12, 12, 12, 12. And multiples of 12 are fine too, but by default regular text is indented 12 pixels from the edge of the screen. It’s a nice number so don’t mess with it.

    As you can see from the screenshots above, I’m not completely consistent in my alignment and spacing. Text overhangs various places and isn’t consistent. Also the text on the home page doesn’t seem to stand out. It’s hard to tell the difference between the titles and the descriptions (they’re larger in size but I think we can do better).

    The Prime Directive

    If there were a Prime Directive when building an app for WP7 this might be it. Simplicity through consistency. Stick with known styles and numbers. The default spacing is 12 pixels and while you might need some more, try to keep with that number in mind. Keep your spacing consistent throughout your entire app as well as colours and fonts. I don’t mean use the same font everywhere but I do mean to not arbitrarily space controls on the design surface.

    This idea here is that when a user is looking at one app, then flipping to another it shouldn’t be a jarring user experience. Your own app pages should be consistent in their font use and spacing as well. If everyone follows some simple consistent rules (both in and out of your app) then the user benefits. The experience is consistent and while you’re totally allowed to be creative, don’t overdo it.

    That is, don’t do this:

    badui2

    Here’s a Windows app that someone wrote which just goes to show that being unique isn’t the best experience in the world for the end user. Cluttered, multiple colours, multiple fonts. In a word, confusion just from an aesthetic sense (let alone the poor sucker who has to use this app).

    Metro is like a design pattern. In software development we have all kinds of patterns. Patterns for separation of responsibility, patterns for accessing external data. If you can program it, there’s probably a pattern for it. The thing is with patterns think of them like sewing patterns. They provide a shape to cut out and some instructions on how to use them. You can follow them by the book and get a good result. It’s the people that take patterns and apply their own creativity to them that makes them stand out. This is the same with Metro. There’s no rule written in stone that says you have to use a specific font in a specific size for a panorama title. What the Windows Phone toolkit provides out of the box is a default implementation.

    Pivot to Panorama

    For example let’s take a look at the Panorama control. As I was cleaning up the Hamurabi app I thought it might fare better as a panorama control instead of a pivot. It’s a choice as to what control to use as the two are very similar but I follow a simple rule. If the data presented is different slices of a bigger list (for example filtered views of a large list) then a pivot might be more appropriate. If the screens are somewhat disjointed and don’t really go well together then a panorama might work. Again, no hard and fast rule here but I thought I would try a panorama control.

    Here’s the default panorama control you get if you use the Microsoft template:

    screenshot_3-26-2011_19.26.53.560

    Simple and it works. Nothing special you need to do except replace the background image with you own.

    Or is there?

    For Hamurabi I didn’t want the harshness of the title that comes with the out of the box panorama control so I created a new style for the title and added it to the page:

    1 <phone:PhoneApplicationPage.Resources> 2 <Style x:Key="PanoHeaderTitle" TargetType="TextBlock"> 3 <Setter Property="FontSize" Value="120"/> 4 <Setter Property="FontFamily" Value="Segoe WP Light"/> 5 <Setter Property="Opacity" Value="0.6"/> 6 <Setter Property="Margin" Value="0,50,0,-20"/> 7 </Style> 8 </phone:PhoneApplicationPage.Resources>

    Then instead of using the default Header property I overrode that with a custom TitleTemplate:

    1 <!--Panorama control--> 2 <controls:Panorama> 3 <controls:Panorama.TitleTemplate> 4 <DataTemplate> 5 <TextBlock Text="my application" 6 Style="{StaticResource PanoHeaderTitle}"/> 7 </DataTemplate> 8 </controls:Panorama.TitleTemplate> 9 <controls:Panorama.Background> 10 <ImageBrush ImageSource="PanoramaBackground.png"/> 11 </controls:Panorama.Background>

    The result is a slightly less glaring title. It’s still a Panorama control but I like it better than the default one. The text doesn’t stand out as much and I find it more inviting. Also with the reduced font size from the default, I have a little more room for my application.

    screenshot_3-26-2011_19.33.48.651

    Next up were the Panorama Items. Again, here’s the default:

    screenshot_3-26-2011_19.26.53.560

    And again we do a little styling. Instead of a single text title I wanted to put in a subtitle and change up the font weights and sizes a bit. Here’s the new XAML styles that we’ll use in our custom item header:

    1 <Style x:Key="ItemHeaderTitle" TargetType="TextBlock"> 2 <Setter Property="FontSize" Value="48"/> 3 <Setter Property="FontFamily" Value="Segoe WP Semibold"/> 4 </Style> 5 <Style x:Key="ItemHeaderSubTitle" TargetType="TextBlock"> 6 <Setter Property="FontSize" Value="32"/> 7 </Style>

    And here’s the updated XAML for the Panorama Item:

    1 <!--Panorama item one--> 2 <controls:PanoramaItem> 3 <controls:PanoramaItem.Header> 4 <StackPanel> 5 <TextBlock Text="first item" 6 Style="{StaticResource ItemHeaderTitle}"/> 7 <TextBlock Text="this is the first item" 8 Style="{StaticResource ItemHeaderSubTitle}"/> 9 </StackPanel> 10 </controls:PanoramaItem.Header> 11 <!--Double line list with text wrapping-->

    And here’s the updated Panorama control from the app:

    screenshot_3-26-2011_20.9.46.839

    These are simple changes we’re making here. Nothing Earth shattering but they’re making a difference. I’m not saying everyone should go out and make their apps look like this but be creative. Look at your subject and think about what experience you want your user to have. Is it better to identify things with icons than words? If you’re building something common that everyone knows by sight, maybe you should use graphics for titles (or to supplement them). Again, don’t go overboard here. Look back at good examples like 4th & Mayor. It’s not littered with graphics in every corner. Use it sparingly as an accent, not as the cornerstone of your app.

    After doing the initial changes I found a suitable background image for the Panorama control. As Jeff points out in his article, don’t use a Panorama control if you only have two pages (it doesn’t flow very well) and keep the number down (he recommends no more than three). I went a little overboard with mine as I had help, tips, and strategy pages. If I combine them all I could bring that number and maybe I will.

    The other slight change I did was to style the default button. Again I didn’t go overboard here as I didn’t want buttons to look like WinForms apps or something. I just felt the default white border button was boring so I just used a simple gradient background and a colour that was more appropriate for the application. Hopefully it blends in a little more. Here’s some screenshots from the transformation.

    screenshot_3-26-2011_13.14.52.631 screenshot_3-26-2011_13.21.41.612

    A little different from the original but not by much. Here’s a summary of the UI changes I did:

    • Changed from Pivot control to Panorama (new background image)
    • Styled Panorama Title (smaller font; lighter opacity)
    • Styled Panorama Item Header to be two lines instead of one (plus slight font and size changes)
    • Styled default buttons
    • More use of Accent colours sprinkled on various pages to highlight important parts
    • Larger icons for game mode selection (130 pixels instead of 100)
    • More consistent alignment and spacing throughout the app

    All in all it took me about two hours to do all the changes (including hunting down some stock images and putzing around with the button gradient). No real investment and I think it’s an improvement over the original version. It’s still not perfect and I can see a few little tweaks here and there with margins that I need to correct. There’s also version 1.2!

    So if you’re going to take anything away from this its to be creative. Don’t always just accept the norm as norm. Apply your artistic talents to your apps and with a few slight modifications you can go from bland and boring to interesting and fun. And remember to not to go crazy. Get an outside opinion. Pass your app onto others, post screenshots, etc. Above all, go out and create.