Setting the "viewport" meta tag appropriately will take care of things on mobile devices.
If you want to control the width in desktop and laptop browsers, set a reasonable max-width which would be about 980px. Since its not a good idea to use column layouts for mobile devices, I set the max-width a lot less than this.
If you use a single column liquid layout with the header and footer divs inside the main content div, you can apply this max-width to the content div.
Otherwise, add a "wrap" inside the opening and closing body tags and apply the max-width to it.
Columns can be made to fold down for narrower devices but this creates a long, long page for smart phone users.
Web designers who like to impress with all the whistles and bells will have a hard time adapting to mobile design where less is definitely more. I am constantly looking for ways to simplify mobile designs. Here's a test site which I have named "simple"...
http://www.ezmacwebdesign.com/simple/
You can look at the source to see how little code is used compared with an average web page. The navigation is adapted from a standard "select" drop down using some javascript to get the items to act as hyperlinks. This is how it works on the iPhone...
There probably is some law against doing this but it seems to work OK.
iWeb is actually quite useful for deciding how much content to add for mobile devices. While doing this design for iPhone...
http://www.iwebformusicians.com/iWeb/Mobile-iWeb.html
... it struck me that I could set up a page with a width of 320px and a height of about 1500px to see how much content I could get into it as a rough guide to what is reasonable for smart phone users.
