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
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?