Although it is great to have the might of XAML for Silverlight development the fact is that any web site also needs to target HTML if it wants to have any kind of ‘reach’.
I recently built a web site using Silverlight 5 to test out an idea I had for promoting the use of Live Tiles in Windows Phone. (You can view the site here).
My plan is to add HTML5 support to this site in 3 stages:
1. Redo the header are in HTML (THIS POST)
2. Add basic HTML functionality using ASP.Net
3. Add the bells and whistles (mouse over/rotating tiles etc.) using HTML5
Here are the steps I went through with stage 1 – the header:
1. Comment out the XAML based header and check that the site still functions OK without it:
So far so good and this is what we end up with: http://livetiles.co.uk/Convert/1a/
2. Craft the same header using basic HTML in the host web page:
After: (version 1)
3. So my initial hand crafted effort only took a couple of minutes but is a little unsatisfactory, not to mention unsophisticated and it doesn’t properly reflect all the aspects of the Blog header on which it is based (yes, I could cheat by creating a static bitmap for the background but I don’t think that would pass muster)
So I decided to fire up Expression Web and use it to capture the header information, which I then simply pasted into my App’s host page.
So at this point the live site at http://LiveTiles.co.uk has an HTML rather than Silverlight based header.
Well and good, though the code/mark-up for that header tells tales of everything that is wrong with html, It being bloated and difficult to read. Oh, and I wonder if it will be OK in Firefox, Chrome, Opera and Safari (!)
Next time I will look at creating a basic ASP.Net page for the Silverlight body (the meat of the application)
If you haven’t done already you can view the current version at http://LiveTiles.co.uk
* So I removed all the references to the WordPress site (where this blog is posted) and things started to look a little tidier.