Web Site Designing for Mobile

Question

I just added printing capability to a web site using a style sheet (ie. @media print, etc.) and was wondering if I could use a similar method for adding support for mobile devices.

If not, how do I detect a mobile device? My pages are C# (.aspx) and I'd like to scale back the pages for ease of use on a mobile device.

Any advice for me?

EDIT: My wife has a BlackBerry, so at a miminum I'd like to enable our company's web site for that.

Answer 1

I'm not sure how the IPhone/iPod Touch declare themselves when requesting the stylesheet, but for most, using

<style type="text/css">
    @media handheld
    {
      /* handheld styles */
    }
</style>

should do the trick. It works in the same way @media print does (or doesn't).

For a complete list of media types, see here.

Answer 2

You'd want to have a look at the type of user agent you've got and see if it's a mobile device. The following code would be an example of this:

public static bool IsMobile(string userAgent)
{
    userAgent = userAgent.ToLower();

    return userAgent.Contains("iphone") |
      userAgent.Contains("ppc") |
      userAgent.Contains("windows ce") |
      userAgent.Contains("blackberry") |
      userAgent.Contains("opera mini") |
      userAgent.Contains("mobile") |
      userAgent.Contains("palm") |
      userAgent.Contains("portable");
}

That should work in most cases! This link might help you get more specific too.

Answer 3

Mobile browsers are a real hodge-podge in terms of what they support, whether they follow the "media" attribute on your styles, etc.

I would say aim for progressive enhancement (that's one of a series of articles) and make sure that if the browser only understands plain HTML, your content is still viewable and in the right order - for example, you want your main content to appear before the sidebar in the code, since the main content is more important.

A decent looking resource was mentioned in the article above.

Answer 4

You might want to use something like WURFL, which is a fairly nice database that knows a lot about devices and their user agents, if the other solutions do not work.

And please, remember to reduce download sizes :)