Don’t call me DOM

20 September 2006

Making this blog mobile friendly

I still had to deal with the 34Ko image that is used for decorating the banner of my theme. Once I removed the EXIF data (including… an embedded thumbnail) in it, I got it down to 28Ko (thanks jhead -de), but given its byte-size and its pixels dimensions as well as its limited usefulness, the only sensible thing to do was to ensure it didn’t get downloaded by mobile devices; given that it was set using CSS (with a background: url() directive), it was through CSS that I needed to switch it off.

The current definition of the Default Delivery Context says that it only supports CSS1, so the simplest solution was for me to put the relevant rules in a @media block, which a CSS1 parser would simply ignore. Given the context, an @media screen should have done the trick:

Screen: Intended primarily for color computer screens.

Of course, the jury is still out to tell whether mobile devices should or should not apply these @media screen rules; in practice, a fair number of devices do support the @media rules, since it is required by OMA’s WCSS specification [pdf], and the most arrogant of them (to which my Treo belongs) apply the rules for @media screen.

To cater for these ambitious devices while keeping my pages light, I added after the @media screen block an @media handheld block that basically unset the properties that was defined the screen block. For instance:


/* What a CSS1 parser will only apply */
#header {
	border-bottom: double 3px #aba;
	border-left: solid 1px #9a9;
}
/* What will be applied only by browsers that support the screen media 
    including some a bit too smart phones
*/
 
@media screen {
 #header {
        background:url("/2006/spring.jpg") no-repeat;
        background-repeat:no-repeat;
	padding: 140px 10px 15px 60px;
 }
}
/* Ensuring that these devices really don't apply the @media screen rules*/
@media handheld {
 #header {
	background: #90a090;
        padding:0.2em;
 }
}

I applied the same principles to get rid of the CSS-based tabular layout for mobile devices, which was in practice the most annoying aspect of my blog in my Treo, making the content hardly readable in a very narrow column of characters.

One Response to “Making this blog mobile friendly”

  1. Justin Thorp Says:

    Awesome technique on serving up XHTML Basic. I have never really written anything in XHTML Basic before and was really confused until now about how I was going to make it work.

Picture of Dominique Hazael-MassieuxDominique Hazaël-Massieux (dom@w3.org) is part of the World Wide Web Consortium (W3C) Staff; his interests cover a number of Web technologies, as well as the usage of open source software in a distributed work environment.