Let’s get small
For the benefit of those of you who just absolutely can’t do without your dose of There Is No Cat while you’re mobile, I’ve added a stylesheet to automagically reformat the site so that it displays in a more pleasing manner on such things as PDAs and maybe even telephones. Laura recently won a Siemens SX66 Windows Mobile 2003-based phone/PDA, so I finally have access to a copy of Pocket Internet Exploder, and I realized that what I had been seeing on my Palm Tungsten C with WebPro 2.5 wasn’t just an aberration based on WebPro’s mediocre CSS support, but rather something fundamental within how I had set up my CSS that was causing the site to display poorly on mobile devices. Basically, when you only have a couple hundred pixels to work with, three columns just doesn’t work very well. Widths for things like sidebar columns that work fine on a large computer screen when specified as "23%" can only fit one word per line on a tiny screen, which was the worst thing I noticed. Floating columns is also problematic. So I’ve created a separate CSS stylesheet for handheld computers that resets column widths to something more appropriate, and changes the three column layout to a single column, with the postings displaying first, then the left navigation, then the right navigation.
There doesn’t seem to be a whole lot of information out there about developing sites that work on handheld devices. I did find one interesting e-mail message from someone at Opera, who have found their greatest success in the mobile arena (largely for phones). It’s a year and a half old, but still interesting and helpful. Blithely assuming that because you use standard (X)HTML and do the styling with CSS didn’t seem to work too well for me, and I assume it won’t work too well for a lot of other sites either. But using standard (X)HTML and CSS means that fixing the problem will be quick work. It took me less than an insomniac hour to come up with a display that works. Basically, I import my regular stylesheet within a style tag that sets the media type to all:
<style type="text/css" media="all">
<!--
@import url(/nocat50s-aqua.css);
-->
</style>
Then I take advantage of the cascading nature of CSS to import a stylesheet just for handhelds using the same method:
<style type="text/css" media="handheld">
<!--
@import url(/nocat50s-aqua-mobile.css);
-->
</style>
The mobile CSS file, since it is imported after the main CSS file, overwrites problematic CSS directives in the handheld’s browser.
The design I’ve created for handhelds isn’t perfect; I need to adjust the colors, and the background graphic that works so well on a computer is kind of big for a handheld. When I was originally designing this site, the squares that make up the background graphic were much smaller; I’ll have to dig up those files and see if it makes sense to use those graphics for handhelds. But that’s work for later; it’s five in the morning, and I just wanted to get something that works posted. (And it’s now taken me as long to write this up as it did to make the changes, so it’s almost six in the morning now....) I’ll tweak later.
Before posting my changes, I tested everything in all the browsers I have for the Macintosh and Windows, but I suppose it’s possible that something that I did broke some obscure browser out there. If you have a problem displaying the site, please let me know.
Tags: handheld mobile HTML css web development PDA
Posted at 5:55 AM