Don’t want to go all-out with a separate mobile mini-site, but you still want your site to be accessible on phones and PDAs? You can just add a new stylesheet intended only for mobile browsers, in which you can reformat the page to render acceptably on a wide range of handheld web browsing devices.
<link rel="stylesheet" href="style.css" type="text/css" media="Screen" /> <link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />
By linking a stylesheet with a media of “handheld,” you tell mobile browsers to remove any of the preceding styles. You can then apply some new styles within, taking care to avoid explicitly setting widths or anything that might foul-up mobile browsers.
It’s a little bit more complicated than that in reality, but not too much so. You can find a full how-to over at Perishable Press: The 5-Minute CSS Mobile Makeover.
