# Saturday, 01 September 2012

This week I had the pleasure of speaking at devLINK.  I did 5 sessions over the 3 day conference and had a blast networking with the other speakers and attendees.  Kudos to the devLINK staff on a job well done.

Here are the 5 sessions I did at devLINK 2012 and links to the associated slides and demos.

posted on Saturday, 01 September 2012 18:45:00 (Central Daylight Time, UTC-05:00)  #    Comments [0]
# Monday, 06 February 2012

I have been working a lot with MVC sites lately and experimenting with how to make them *usable* on mobile browsers.  This is post is about the single line of mark-up you can add to your sites Master Page, or in this case your _Layout.cshtml.

Before I get to that line I am going to show you a quick screen shot of a vanilla MVC 3 application, that can be downloaded here.

First is a screen shot of the site running in a desktop browser.

image

 

Next, is the site rendered on Windows Phone 7, Android, and iPhone.

Windows Phone 7

Opera Mobile (Android)

iPhone

image image image

 

The first thing you notice is that iOS does a fairly good job adaptively rendering the site, damn Apple!  Next you will notice that all WP7 and Android do is zoom out so the site fits on the device.  A site of any significant content or functionality would be almost useless because of the amount of panning and zooming that would be required.  I am sure we have all dealt with sites on our mobile devices like that.  So what can we do to make the site render better in WP7 and Android?

You can actually get a long way towards perfect mobile rendering of your site by adding one simple html tag.

  1. <meta name="viewport" />

The meta viewport tag can be used to control how HTML content is displayed in mobile browsers.  The meta viewport tag has properties like width, height, minimum-scale, and maximum-scale.  In this example the particular property we are concerned with is the width property.  We want to tell the the browser to render our content width at the width of device.

  1. <meta name="viewport" content="width=device-width">

Let’s see what happens when we add that tag to the head of our _Layout.cshtml file

image

As you can see above, because the meta viewport tag only effects mobile browsers our desktop version looks exactly the same.  Let’s check on the mobile browsers.

Windows Phone 7

Opera Mobile (Android)

iPhone

image image image

The site looks much better on Windows Phone 7 and Android, and still looks the same in Apple.  So by adding that single line of mark-up we where able to give our mobile users a much better user experience.

Stay tuned for a future post on using CSS Media Queries to improve the mobile experience even further.

posted on Monday, 06 February 2012 08:15:38 (Central Standard Time, UTC-06:00)  #    Comments [2]