2

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?

Improve this question

3 Answers 3

Reset to default
3

When designing for handheld devices you need understand the following concepts

Screen size - Actual physical size, measured as the screen's diagonal.

Screen density - quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch).

Orientation - orientation of the screen from the user's point of view. landscape or portrait

Density-independent pixel (dp) A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen.

To answer your question: You will need to provide the sliced images in pixels depending on the screen density of device which you are developing for and also consider the orientation. Basically, Screen densities are categorized into 3 categories ldpi/mdpi/hdpi having their own screen resolution. And depending on the screen density you can load the specific set of images.

Improve this answer
3

I'm restraining myself from ranting about designing web experiences, especially mobile, as PSD layouts to be "sliced up". You might consider gently suggesting that your designers google "responsive web design" and "mobile first" and read the conversations/debates around design approaches for the modern, multi-device web. Wait, I said I wouldn't rant, didn't I? Sorry.

It sounds like you are trying to deploy a fixed width design across a range of mobile devices with differing screen width, viewport widths, and pixel densities. Unfortunately, there is no one "best way" approach to achieving this. I suggest reading Peter-Paul Koch's excellent research into mobile devices & browsers at www.quirksmode.org. Specifically, look at his posting "A tale of two viewports". Pay particular attention to the section "Meta Viewport" in part two of the article.

Try experimenting with some of the techniques PPK discusses, and make sure to test across a variety of mobile devices and browsers.

Good Luck!

Improve this answer
1
  • I've actually just read these 2 articles that you mention a few hours ago. +1 for the reference.
    – diceler
    Dec 7, 2011 at 15:00
2

How about querying the form-factor / resolution and then loading the corresponding set of images? Just a thought.

Improve this answer
2
  • As I'm new at this, I had no idea this was a possibility. I'll look into it.
    – diceler
    Dec 7, 2011 at 11:32
  • @Dandroid: You can up-vote any answers that you found useful/ helpful to you.
    – Kris
    Dec 7, 2011 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.