I’ve been fighting a problem for the last few days, as I’ve been trying to identify why my blog (and a friend’s blog) are not formatting Windows Phone Live Tile content properly. For those of you who don’t use a windows phone, this is one of the uber-cool features of the device where I can bookmark a website as a tile on the start screen and updates to the site are broadcast as new text that rotates across the “back of the tile”.
In my Phone home screen, you can see that I have a number of websites pinned so that I can quickly get to them. This is from the lower part of the screen, but you can see the sites:
You can immediately see headlines on a number of those site’s tiles. Others, a simple and sometimes crappy looking screenshot of what the site looked like when I pinned the site.
On Android and iPhone devices, you have a similar feature that creates an icon on the start screen. The device will typically take a screenshot and shrink that down for use as an icon. Other times, it will use the favicon with some simple formatting to create a home screen button. Yuck…
In this article, I’m going to outline all of the tags to add to your site to make it look cool on your visitor’s home screens.
Get Started Easy – Android Icons
The easiest device to support is Android. With thee simple tags and two simple images, we can support a custom icon on the start screen. For my blog, I added these lines to my HTML header:
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="http://csharpfritz.github.io/icons/large_and.png">
<link rel="icon" sizes="128x128" href="http://csharpfritz.github.io/icons/small_and.png">
The meta tag is required in order for the phone to enable the “Add to Homescreen” button. Now you can add a link to CsharpFritz.com to your home screen on Android and see the following:
Next Up: Apple iOS
Apple’s mobile devices come in four different sizes, and the following meta link tags are needed to add icons for devices with white cables:
<link rel="apple-touch-icon" href="http://csharpfritz.github.io/icons/small_ios.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://csharpfritz.github.io/icons/small_ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://csharpfritz.github.io/icons/larse_ios.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://csharpfritz.github.io/icons/large_ipad.png">
At this point, we now have six different shortcut icon sizes. But wait! That’s not all!!
Windows and Windows Phone – Internet Explorer Meta Tags
This is the pair that really drives some neat functionality in the mobile devices. Microsoft provides a three-step wizard to build out some initial pinned tiles functionality for your website at: http://www.buildmypinnedsite.com
This wizard will help you generate the following markup:
<meta name="application-name" content="CSharp on the Fritz"/>
<meta name="msapplication-TileColor" content="#2714cb"/>
<meta name="msapplication-square70x70logo" content="http://csharpfritz.github.io/icons/small_w.png"/>
<meta name="msapplication-square150x150logo" content="http://csharpfritz.github.io/icons/medium.png"/>
<meta name="msapplication-wide310x150logo" content="http://csharpfritz.github.io/icons/wide.png"/>
<meta name="msapplication-square310x310logo" content="http://csharpfritz.github.io/icons/large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&id=5;cycle=1"/>
These tags should be fairly self-explanatory:
- application-name is the name to present on the tile for your website
- TileColor is the background color to present for your tile
- the logo tiles are all location for four more images to possibly present as the tile content on the start screen.
- notification is an service location for Windows to poll for updates to present
For more information about the API Internet Explorer, Windows and Windows Phone uses to present tiles for your website, check MSDN at: http://msdn.microsoft.com/en-us/library/ie/bg183312(v=vs.85).aspx
Summary
With a little bit of simple HTML header tags and 10 different sized images you can make your website appear like an application on the home screen of your mobile visitors. Next thing we need to figure out is a standard button that can be placed on our web pages that, when clicked, forces the browser to make an icon or tile for our website on the device home screen.
We are almost to the BETA cycle of ASP.NET vNext, and I’ve been following the ASP.NET team’s development on GitHub. If you didn’t know already, the all-star developers at Microsoft are cranking away on the next version of ASP.NET in a completely open-source model.One of the cool new features set to be released with the next version is a significant addition to the HTML Helper model that we currently have in MVC 5, and its called TagHelpers. Continue reading 