There Is No Cat

Hollering into the void since 2002

Saturday, July 15, 2006

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:

Posted at 5:55 AM

Comments

Note: I’m tired of clearing the spam from my comments, so comments are no longer accepted.

Trackbacks

This site is copyright © 2002-2024, Ralph Brandi.

What do you mean there is no cat?

"You see, wire telegraph is a kind of a very, very long cat. You pull his tail in New York and his head is meowing in Los Angeles. Do you understand this? And radio operates exactly the same way: you send signals here, they receive them there. The only difference is that there is no cat."

- Albert Einstein, explaining radio


There used to be a cat

[ photo of Mischief, a black and white cat ]

Mischief, 1988 - December 20, 2003

[ photo of Sylvester, a black and white cat ]

Sylvester (the Dorito Fiend), who died at Thanksgiving, 2000.


Stylesheets


This site is powered by Missouri. Show me!

Valid XHTML 1.0!

Valid CSS!

XML RSS feed

Read Me via Atom

new host

Me!

Home Page
Resume
Married
Photographs
Flickr Photostream
Instagram Archive
Twitter Archive

last.fm

There Is No Cat is a photo Ralph Brandi joint.


Archives

Search



Family Blogs

Geneablogy
Jersey Girl Dance
Awakening
DullBlog
Mime Is Money

Blogs I Read

2020 Hindsight
AccordionGuy
Adactio
Allied
Apartment Therapy
Assorted Nonsense
Backup Brain
Burningbird
Chocolate and Vodka
Creative Tech Writer
Critical Distance
Daily Kos
Dan Misener likes the radio
Daring Fireball
Design Your Life
design*sponge
Doc Searls
Edith Frost
Elegant Hack
Emergency Weblog
Empty Bottle
Five Acres with a View
Flashes of Panic
Future of Radio
Groundhog Day
Hello Mary Lu
iheni
Inessential
Interllectual
Jeffrey Zeldman Presents
Jersey Beat
John Gushue ... Dot Dot Dot
john peel every day
JOHO The Blog
Kathryn Cramer
Kimberly Blessing
La Emisora de la Revolucion
Lacunae
Loobylu
mamamusings
Medley
mr. nice guy
MyDD
Orcinus
oz: the blog of glenda sims
Pinkie Style
Pinkie Style Photos
Pop Culture Junk Mail
Seaweed Chronicles
Shortwave Music
Slipstream
Talking Points Memo
The Unheard Word
Tom Sundstrom - trsc.com
Typographica
Unadorned
Vantan.org
WFMU's Beware of the Blog