Scott Hanselman

Making DasBlog work on Mobile Devices

August 30, 2006 Comment on this post [12] Posted in ASP.NET | DasBlog
Sponsored By

DasblogblackberryI was screwing around last night with my Blackberry and was frustrated to see how crappy my blog (and most blogs) looked on a small device.

So, here's what I did.

I noticed that you can cast the Request.Browser object in ASP.NET to a System.Web.Mobile.MobileCapabilities. In ASP.NET 1.1, this uses the browsercaps section of your machine.config or web.config. In ASP.NET 2.0, the architecture is much cleaner, using .browser files.

Since DasBlog compiles under ASP.NET 1.1 and typically runs under 1.1, I'll talk about this in the context of ASP.NET 1.1, but the essence is the same.

There's a property called IsMobileDevice on the MobileCapabilities object that most folks consider useless. That's because the default browser caps stuff with ASP.NET 1.1 is poo. Here's a good explanation:

Microsoft pawns the job off on Cyscape.com, which doesn't care about doing the world a service (it's busy selling its competing BrowserHawk product instead).  As a result, machine.config is already woefully out-of-date and unaware of newer browsers like Mozilla/Firefox, Netscape 7, Safari, and Konqueror, so it tells Request.Browser that they are "Netscape 5" (though Safari and Konqueror are wholly unrelated rendering engines).

Cyscape hasn't done the job and instead wants to upsell to their (very capable, but often overkill) application.

Instead I Googled around for Browsercaps XML sections...there are many, and they are in various levels of disarray, but this one from last year was pretty darn good. If you're using ASP/PHP the current Patron Saint of BrowserCaps (non-ASP.NET) is Gary Keith. The ASP.NET one from Chris Maunder at CodeProject is also lovely.

DasBlog supports theming, so I added a bare-bones XHTML-ish mobile-friendly theme for small devices - essentially TinyHTML (my term).

I added this code to the SharedBasePage where we decide what theme to use:

//Are we on a Mobile Device? See if we have a mobile theme and use it instead.

System.Web.Mobile.MobileCapabilities mobile = (System.Web.Mobile.MobileCapabilities)Request.Browser;

if(mobile.IsMobileDevice == true)

{

    theme = themes["mobile"];

    if(theme == null)

    {

        loggingService.AddEvent(new EventDataItem(EventCodes.Error,

            String.Format("If you have a theme called 'mobile' in your themes folder, readers who visit your site via a Mobile Device will automatically get that theme. User-Agent: {0}",Request.UserAgent),

            String.Empty));

    }

    else

    {

        return theme;

    }

}

...continue on...

And boom, shiny, mobile support for this blog. (It is crazy stuff like this at the last minute that keeps 1.9 from being release, but I promise, it's close. For now, remember that unsupported Daily Builds are here: http://blogs.tamtam.nl/paulb/bits/)

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
August 30, 2006 3:08
With the screenshot in there, that was almost a recursive blog post...
aC
August 30, 2006 3:12
Just curious. Have you tried specifying a CSS media type of "handheld"?
ex...
<link rel="stylesheet" href="style/default.css" type="text/css" media="handheld" />

I don't have a blackberry so I can't test if it would pickup that style. That way each theme could have a stylesheet specifically for small devices.

http://www.w3.org/TR/REC-CSS2/media.html
August 30, 2006 3:18
Phil - I tried and the blackberry ignored it...note the View Source of my site, it has that set already. I haven't been too impressed with that. Since so few devices seem to care and fewer sites care, it doesn't seem to work.

aC - That's called the Droste Effect http://en.wikipedia.org/wiki/Droste_effect
August 30, 2006 7:44
The code section rusn off the edge of the screen on my WM5 PPC, but aside from that your site looks beautiful in PIE.

If I click a specific post, such as the one about Open in New Window IE7, it looks perfect...
August 30, 2006 16:12
Scott, your media=handheld base.css file imports all your screen page layout css files -- so there doesn't seem to be any difference between your media=screen css and your media=handheld css. I don't see any difference when viewing media=handheld in Firefox.
August 30, 2006 16:23
oops. my bad. the files imported are not your zen theme. weird that the screen css files are being pulled in when media=handheld is requested.
August 30, 2006 16:27
if(mobile.IsMobileDevice == true)?

Why not just "if (mobile.IsMobileDevice)"

The former seems redundant and doesn't read as well as the latter. Reading the latter: "if mobile is mobile device".

The former: "if mobile is mobile device equals true"

I know.. being picky.. I digress.. :)
August 30, 2006 20:11
Diego - it's just an old habit from years and years of writing "C." I like to be explicit.

Carl - Ya, the media=handheld stuff just doesn't seem very clever.
August 31, 2006 4:03
Scott: I was only being light hearted. I know that that sort of thing brings light on an individual's religious beliefs. :) Dangeours ground, I know. Which is better.. Windows or Linux... OK I'll stop. :)
September 01, 2006 18:15
So. When 'is' the code for DasBlog moving to ASP.Net 2.0?
This would have been as easy as Page.Theme = "Mobile"
September 07, 2006 21:31
Scott, you need to add media="screen" or media="screen, print" to the admin.css LINK element. Since there is no stated media type, the admin.css is being included in all media types. Then when viewing the handheld media, it is overriding the base.css settings via CSS specificity rules. So the handheld stylesheet is working but there is no apparent change.

And your LINK elements should be non-closing HTML style, not XHTML style since your DOCTYPE is HTML.
September 09, 2006 5:46
I'm developing a mobile website and when I heard about the media="handheld" attribute ,I was very excited and went right out and set it up. Then I found that most mobile browsers don't support it. So I defaulted to just present the mobile site and provide a link somewhere to a site for full sized browsers.

For blogs with rss feeds you can use my mobile rss reader at http://wampad.com/rss/, for your blog it would be http://wampad.com/rss/ScottHanselman. It's designed to take advantage of feedburner feeds to cut down on the need to type urls on the phone, but you can pass it a full url and it will handle it. I've added OPML support but it's new so your milage may vary.

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.