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 d

Answer 1

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 2

Check this out! It's pretty cool! http://mobstac.com/developer/

The MobStac API platform is the fastest way to build and manage mobile sites! You get access to developer documentation and API keys.

Answer 3

The best way of doing all of this is to do it at a server level.

Use a web service to check whether the visitor is a mobile and deliver your output based on this. Use the same URL and perform the same business logic on your application - just change the view layer of your app.

A great option is Wapple Architect (http://wapple.net) - it allows you to do these checks at a server level with some web services and then perform logic and add code if it's a mobile device.

Definitely worth a look.

Answer 4

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 5

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 6

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 :)