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?

closed as off topic by yannis, Walter, user8, pdr, ChrisF Oct 15 '12 at 12:19

Questions on Software Engineering Stack Exchange are expected to relate to software engineering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here. If this question can be reworded to fit the rules in the help center, please edit the question.

  • I think the core question (pixels vs percentage for mobile devices) would be best answered at User Experience Stack Exchange. I'm not 100% sure it fits their faq in it's current form though. – yannis Dec 7 '11 at 9:46

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.

  • Very helpful information, thank you. But what would you suggest me to do with images? Because the navigation is using images instead of text, and some places content divider images (like gradient pipelines). Should I have multiple versions of them for different platforms (e.g. desktop, ipad) ? – user42401 Dec 7 '11 at 12:34
  • On the images, you should be able to incorporate them into the grid pattern. I've found CSS Blueprint to be a bit better than 960 in this regard. You might also be able to use a <ul> with your dividers as background graphics. – jfrankcarr Dec 7 '11 at 14:33