No Mod Required

(all apologies to, I believe, Bob Ryan, for stealing the title of this post)

The new A List Apart article, Switchy McLayout: An Adaptive Layout Technique, got me thinking about methods to serve content to mobile browsers. To play around with that in a real world environment (without having to wait around for a client to ask) I started to think seriously about how I want to handle serving content for mobile browsers here at Drunkenfist.com. The above article is nice in concept (especially since it works on the other end of the spectrum), but it doesn't do anything to limit the overall file sizes (in fact I imagine it adds to the size of the style sheets) or how much/what type of content is sent to the browsers. What I really want is a low overhead scheme for serving proper mobile friendly pages.

After thinking about it for a little bit, what I'm thinking about is setting up a sub-domain (mobile.drunkenfist.com) overlaying the main drunkenfist.com content and then using the URL as a test in my template files for whether or not to serve up certain content (only serving a single mobile sheet, serving alternative ads, no footer, no images, etc.)

In addition to that, I would use JS on my regular pages to redirect to the sub-domain based on screen resolution- one of the things I hate about mobile browsing is when sites that have a mobile version don't detect that I'm on a small screen and point me to it (I'm looking at you Yahoo.)

Thinking about it, I'm betting I could work something out in a day or two.

Of course there are a lot of variables involved here- finding the time to mess around with this being one and not breaking the regular version of my site being another…

…

Ajax Performance » Circumventing browser connection limits for fun and profit

I got this link from Ajaxian. It talks about using sub-domains to increase the number of practical connections available to a browser. Yet another thing I might mess around with here.

…

Here's a "handsome" chart outlining the slow and steady weekly growth of IE7 here at Drunkenfist.com. It's still slow as hell, but nearly 20% is a definite improvement.

Here are the actual numbers (Google docs is awesome)

…

Speaking of Iframes, I'm working on a project that uses a hidden iframe instead of the XMLHttp Request object to get data from the server and I discovered something absolutely bizarre about the way that IE calculates the DOM in a situation where there is raw XML held as the content of a hidden iframe. If there's not a blank style sheet attached, IE rewrites the XML document as a series of DIVS and SPANS, completely obliterating the structure. Attach a dummy style sheet and everything is fine and dandy.

I made it work in FireFox and then switched over to smashing at it in IE. Nothing worked off the bat so I set about doing some discovery. Right off the bat I was getting results from getElementsByTagName that made no sense. I would do xmlObject.getElementsByTagName("*").length and get some totally off the wall result (50-something instead of the 10 or 12 I was expecting). That was driving me crazy since I could tell it was an object; I could tell it had structure (since it had tags to return); but I wasn't seeing the structure I expected. When I viewed the DOM using the IE developer toolbar I saw this:

After googling around for a few minutes, I came across some mention of using a dummy style sheet to get this to work in IE. I tried it out and immediately the app started behaving the way I expected. I'm curious whether or not this issue is resolved in IE7 (I'll find out soon enough as this app will have to work in Microsoft's latest and greatest)