Get thee to the mobile web
The mobile web? Do I need more than one version of my web site? Will this be like when separate sites were needed for IE and Netscape? I'll make the assumption that you are a good little camper (after all, you are reading this site) and have made sure that your web site is fully laid out via CSS. Right? If you haven't let me assure you that it is not really that hard. Going from tables to CSS is a bit of a psychic shift but once you make the leap you'll never go back. On top of that, when you abstract your content from the display your life will become a thousand times easier when you need to get the site to display nicely on the VP of Marketing's Blackberry.

First off, let's link the stylesheets from our HTML. Be sure to specify a media type for your CSS file. The media types this article will focus on are:
Screen, intended for color computer screens.
Handheld, for small screen, limited bandwidth displays.

<link rel="stylesheet" type="text/css" href="style.css" media="Screen" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

Note that I've capitalized the S in screen. This is to overcome a bug in Windows Mobile Internet Explorer. If the S is not capitalized the browser will render both stylesheets.

The mobile web: New constraints
When thinking about your CSS for handheld devices begin with thinking about constraints that you'll face. I can think of three big ones for handheld devices such as mobile phones:
small screen size
slow connection speeds
many users paying per the kilobyte

Now you need to design around these limitations. The following example will be for a simple two column layout with the navigation on the left and the content on the right with a masthead at the top of the page.

<div id="masthead"><a href="index.html"><span>Cool Site</span></a></div>

<div class="navigation">
<ul>
<li><a href="navchoice1.html">Nav Choice 1</a></li>
<li><a href="navchoice2.html">Nav Choice 2</a></li>
<li><a href="navchoice3.html">Nav Choice 3</a></li>
</ul>

<img src="images/FancyImage.png"/>

</div>

<div class="mainColumn">
<h1>Here is my content</h1>
<p>content here</p>
</div>

The CSS for the screen display is:

#masthead a {
display: block;
margin: auto;
background: #7b0a0b url(images/masthead.jpg) no-repeat;
width: 800px;
height: 100px;
border-bottom: solid #000 4px;
}


#masthead a span {
display: none;
}

.navigation {
width: 210px;
float: left;
font-size: 1em;
}


.navigation ul {
list-style: none;
}


.navigation li {
line-height: 2em;
font-size:.8em;
text-align:left;
}

.mainColumn {
width: 575px;
float: right;
margin-top: 1em;
}

The above CSS uses pixels to layout the widths of the two columns. The navigation column is 210px wide and the mainColumn is 575px wide. Good luck finding a handheld device that has a display over 700px wide. The largest generally max out around 320px with some going a little wider. Also, that masthead is 800px.

Do you attempt to scale everything down in size to a 320px display? Well the problem is that you have no idea what the final display size will be. Some handheld devices will handle 320px fine while others might only handle half of that. For the two columns try going to percentages instead. So the handheld CSS would look like this:

.navigation {
width: 20%;
float: left;
font-size: 1em;
}

.mainColumn {
width: 80%;
float: right;
margin-top: 1em;
}

You may need to experiment with the above percentages but now the columns will scale to the screen size.

Now, what can we do with the 800px masthead? If we take a look at the HTML for the masthead we can see that we have a really nice option for handheld devices.

<div id="masthead"><a href="index.html"><span>Cool Site</span></a></div>

The text inside the span is smart namely because it will get indexed by search engines. Additionally it will allow us to get a win on the handheld CSS. The screen CSS has this chunk in it:

#masthead a span {
display: none;
}

Very simply this says to not display the link text inside the span. By removing this from the handheld CSS that text can now display. By further modifying the remainder of the masthead CSS we can remove the image that is displayed and alter the widths. So the screen version of masthead goes from:

#masthead a {
display: block;
margin: auto;
background: #7b0a0b url(images/masthead.jpg) no-repeat;
width: 800px;
height: 100px;
border-bottom: solid #000 4px;
}


#masthead a span {
display: none;
}

To this in the handheld CSS:

#masthead {
background: #7b0a0b;
height:3.1em;
color:#fff;
}


#masthead a span {
display: inline;
margin: auto;
color:#fff;
border-bottom: solid #000 4px;
font-size: 2.8em;
font-weight:bold;
}

This change removed the widths and the images while stylizing the text to make it still masthead worthy. Additionally, you could have replaced the original masthead image with a smaller size image file, but remember that image would need to display on the smallest screen size of your site visitors. Since this can be very small, I opted to use text instead. Remember text can scale whereas rasterized images cannot.

Anything else in the HTML that can affect the constraints of handheld devices? Remember this line from inside the navigation class?

<img src="images/FancyImage.png"/>

While on the desktop version of the site this can be some super glossy, reflected 80k work of art. On the handheld device since folks are paying for the bandwidth this piece of “art” can be removed. By inserting this line into the handheld CSS, the image will not display and hence not download to the users device:

.navigation img {display: none;}

Let's put it all together and this is our complete handheld CSS file:

#masthead {
background: #7b0a0b;
height:3.1em;
color:#fff;
}
#masthead a span {
display: inline;
margin: auto;
color:#fff;
border-bottom: solid #000 4px;
font-size: 2.8em;
font-weight:bold;
}

.navigation {
width: 20%;
float: left;
font-size: 1em;
}

.navigation img {display: none;}

.mainColumn {
width: 80%;
float: right;
margin-top: 1em;
}

Just for phones
Since the odds are pretty good that the handheld devices people will be using to access your site will be a mobile phone of some sort, let's make your site really cool. Got a phone number on your site? Want folks to be able to “click to call”? Here's how:

<a href=”tel:5551231234”>call me at (555)123-1234</a>

Clicking on this link will dial the phone. Now if you tried clicking on this link from your desktop you'd probably be met with a message about how the browser does not have an application configured for the tel protocol. Let's use our friend display:none to make sure that desktop users do not see this.

<a href=”tel:5551231234” class=”phone”>call me at (555)123-1234</a>

Now that I've added a class to it, I just need to add this to my Screen CSS file:

.phone {
display: none;
}

I hope this gets you on your way to making your site handheld ready.