I'm currently working on a website which is also supposed to be mobile optimized.  My client has provided me with a layout of how the mobile version of how the website should look like. Making their design wish come true is no biggie, but making the design fit the screen is my issue. Right now I'm facing some issues regarding the width on the <body> tag of the site, as the design is measured to a width of 640px, but that leaves a big gap on the right side of the screen on e.g. iPhones and Android phones.The website is being developed in ASP.NET and C#. We're only using 1 masterpage, thus the optimizing can be tricky. The design I've been provided with is a .psd file which I'm supposed to just slize up and take images etc. directly out of. Problem is all the navigation images, content dividing images etc. are all in specified widths and heights, thus I've put the width of 640px on the <body> tag.So my question really is, what's the best way of fitting a design to a handheld screen? Should I forget all about pixels, em and inches and go all the way with % for both width, font-size etc? Or can I just copy/paste the provided design and some how force the screen resolutions on the phones to fit their zoom to the width of the 640px body width without leaving gaps of space in either sides of the screen?
Branding websites aimed for mobile devices
html;css;optimization;mobile
Actually, those wide gaps are helpful since it prevents accidental clicking from gripping the device. Having a gutter for thumbs is especially helpful on tablets in landscape orientation. If you haven't used an iPad or Android tablet yourself, try one so that you can get a feel for this. Don't use a fluid layout. This tends to break pinch-zoom and landscape/portrait orientation flips, two important aspects of the mobile UX. My wife, who is an avid tablet user, really hates sites that do this. From what I've observed, breaking basic mobile functionality is the worst thing for tablet users, closely followed by overly watered down mobile sites.I've been using the somewhat standard 960 layouts (960 Grid or CSS Blueprint) and using 1 or 2 columns on either side as gutter space. These systems make placement, especially with ASP.NET master pages, easy to do. 