Supporting mobile devices

by Mads Kristensen 31. October 2007 04:46

I’ve been thinking about supporting mobile devices on this website for a while now. It’s not that the website doesn’t work on mobile devices, but the whole experience could be more optimized for phones and PDA’s. The weight of the HTML and CSS had to be reduced and I thought a simpler interface would improve the readability.

The plan was to auto-discover when a mobile client accessed the site and then apply the mobile theme at runtime. To determine if the client was a mobile device I used the Request.Browser.IsMobileDevice property, but then I realized that it isn’t bullet proof. New devices and manufacturers are popping up all the time and the .NET Framework is relatively old in that regard.

So, instead I used a combination of the Request.Browser.IsMobileDevice property and a custom regular expression lookup.

The code

First of all, I used a very simple regular expression and added it to the appSettings in the web.config.

<add key="MobileDevices" value="(nokia|sonyericsson|blackberry|samsung|sec-|windows ce|motorola|mot-|up.b)" />

Then I wrote a property called IsMobile which tries the Request.Browser.IsMobileDevice property first, and then tries the regular expression afterwards.

private static readonly Regex MOBILE_REGEX = new Regex(ConfigurationManager.AppSettings.Get("MobileDevices"), RegexOptions.IgnoreCase | RegexOptions.Compiled);

 

public static bool IsMobile

{

  get

  {

    HttpContext context = HttpContext.Current;

    if (context != null)

    {

      HttpRequest request = context.Request;

      if (request.Browser.IsMobileDevice)

        return true;

 

      if (!string.IsNullOrEmpty(request.UserAgent) && MOBILE_REGEX.IsMatch(request.UserAgent))

        return true;

    }

 

    return false;

  }

}

The reason I didn’t use some of the web.config features such as browserCaps is because then the web.config would be filled with browser related markup. There is nothing wrong with that, but I like to keep the web.config as clean as possible.

With this method it is now easy to apply a special mobile theme for mobile clients only. You can test it out by visiting this website using your phone or PDA or force the theme.

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

Tags:

ASP.NET

Comments

10/31/2007 9:24:31 AM #

Josh Stodola

>>  I like to keep the web.config as clean as possible  <<

Ditto.  Which is why I probably would have not made an appSetting out of this!  You can't change it on the fly without restarting the application.  You can't setup a form to add new phones to the list (you know how quickly that RegEx could potentially become outdated).

Definitely a good idea to begin with, though, thanks for sharing.

Best regards...

Josh Stodola United States |

10/31/2007 3:49:34 PM #

trackback

Trackback from DotNetKicks.com

Supporting mobile devices

DotNetKicks.com |

10/31/2007 6:01:52 PM #

Cristiano

mmm,
why don't use a dedicated css file ? ex:

<link rel="stylesheet" media="handheld" href="handeld.css" type="text/css" />

Cristiano Italy |

10/31/2007 10:09:04 PM #

pingback

Pingback from mhinze.com

17 Links Today (2007-10-31)

mhinze.com |

10/31/2007 10:22:59 PM #

Bryan Peters

That worked like a champ!

I've had issues with IE on Windows Mobile and this is a great way to serve up the proper css.  IE seems to disregards my media attributes - it should ignore media="screen", but doesn't, and ends up displaying half of the styles. Yuck.

Thanks again for sharing!

Bryan Peters United States |

10/31/2007 10:51:56 PM #

Dan Atkinson

@Cristiano:

The alternate stylesheet would still download data which may not be displayed on a mobile phone, but merely hides it. Because mobiles and PDA's are often subject to speed restrictions and expensive download charges, it's better (and ultimately better for the host) for user agent/IsMobileDevice checks to be done on the server side so that appropriate content can be transferred to the client.

You can analyse the difference by downloading User Agent Switcher for Firefox:
https://addons.mozilla.org/en-US/firefox/addon/59

Page size with user agent set to "Windows CE":
7.82 kB (8,009 bytes)

Page size with user agent set to "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8":
15.85 kB (16,229 bytes)

Saving
8.03 (8,220 bytes)

As you can see, this method is better than simply having an alternate stylesheet.

Dan Atkinson United Kingdom |

10/31/2007 11:13:42 PM #

Nathan

This looks very good on my WM6 SmartPhone.  I was also going to suggest the dedicated style sheet to support mobile devices as I would have thought it would be most appropriate way to achieve this.

Once issue that I did have was that I can not leave comments via my SmartPhone - I typed out a lengthy message last night regarding using a "handheld" style sheet, etc, and then found out that it was all for nothing as I could not sumbit the comment.

Other than the above it looked very tidy.

Nathan United Kingdom |

10/31/2007 11:22:47 PM #

Mads Kristensen

@Nathan:

The comment issue is because of my very strict anti-spam mechanism that uses AJAX and other JavaScript to keep bad guys out. It doesn't work on my SonyEricsson K800i either. However, it works on an iPhone...

Mads Kristensen Denmark |

11/1/2007 3:45:43 PM #

Aleksey

Have you tried WURFL (http://wurfl.sourceforge.net) ?

It contains the most detailed info about all mobile devices and is updated frequently. Of course it's a hard way for just adding mobile support. But you can do really nice things like switching between XHTML/WML output based on device capabilities. When working on a project for mobile content provider I even did image resizing to fit the screen.

Aleksey Russia |

11/1/2007 7:45:35 PM #

Cristiano

@Dan:

I will try to test the difference by downloading the FireFox Plugin...
Thank you

Smile

Cristiano Italy |

11/1/2007 10:16:44 PM #

Joacim Andersson

I actually didn't really appreciate the look this site got on my Nokia N95. The line spaceing became to narrow so the letters of two lines almost overlap each other.

Joacim Andersson Sweden |

11/2/2007 7:00:47 PM #

Finn Christensen

Hey Mads,

I recon that a distinction between request.Browser.PreferredRendering = "html32", with true as a desktop calling and false as a mobile device calling!

Love your block.

Regards Finn.

Finn Christensen Denmark |

11/28/2007 1:58:20 PM #

Chris Blankenship

Can you elaborate on how I could repro how you configured your BlogEngine.Net site with this functionality?  I would really like to be able to serve up to Windows Mobile devices.  I understand the code but don't know where to put it...

Thanks in advance!

Chris

Chris Blankenship United States |

9/25/2008 4:11:08 PM #

Sarkie

Hi mate, nice bit of code, I also added the "|symbian" to the Regex, to support that device range. Smile

Sarkie.

Sarkie United Kingdom |

12/9/2008 4:27:50 PM #

Tony Steele

You may find this of interest: http://wurfl.sourceforge.net/
and it has a .Net api: http://wurfl.sourceforge.net/dotnet/index.php

as well as telling me its a mobile it also can tell me most of its capabilities.

Tony

Tony Steele United Kingdom |

1/16/2009 12:58:32 AM #

steven

Soryy... I'm a newbie learn to code. What Library can I choose to use the RegEx function?

steven United States |

Comments are closed

About the slave

Mads Kristensen Mads Kristensen
Web developer at ZYB and founder of BlogEngine.NET. More...

LinkedIn ZYB Facebook Last.fm Twitter View Mads Kristensen's profile on Technorati

The Lounge

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008