A single website for multiple clients is certainly more maintainable.
The first thing to do is to have multiple CSS files that the browser will pick up according to the media attribute:
<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">
You can adapt the layout of elements, their size, and even hide some of them for smaller devices.
If large parts of your layout have to be stripped on small devices, it is better to remove them on the server to spare some bandwidth.
document.body.clientHeight), while on the server you have mostly to rely on the
HTTP_USER_AGENT header (test it here along with other headers).
Another important technique is to abandon using HTML tables for page layout in favor of floating blocks, that adapt better to different screen resolutions or window resize.
Take also care of the actual screen size, as small devices tend to have a much higher resolution (DPI, Dots Per Inch) that can make things unreadable.
Both techniques have to be combined (client and server side) to get the best results. The Responsive Web Design example is impressive but you really have to master the techniques to achieve this, and there are still limitations.
I think that this question, even if asked because of new connected mobile devices, should even be considered for computer as the user can resize the browser window.