Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 1 down vote favorite

I have problem with choosing the right pixel size to design for when sketching Mobile user interfaces.

I'm designing a mobile web that can be opened by different mobile devices (iPhone, Blackberry, and Android) and thus different screen sizes. I have to consider which pixel size should I choose for touchscreens and other mobile devices that might use the web app.

share|improve this question
Yes, i mean the resolution. It'll different when using different devices. I'm using grid sketch paper, but it's hard to choose among 320x480px or any kind of pixel. – Livin May 30 '12 at 16:13
Okay, I think I edited this to be clearer. Are you more focused on what resolution to target or the sketching process (eg how many "pixels" per grid on your sketch paper?) – Ben Brocka♦ May 30 '12 at 16:18
@BenBrocka thank you for editing my question. That's what i mean. – Livin May 30 '12 at 16:18
1  
@BenBrocka it will focus on the sketching process. The maximum pixel is 960 and it has 30grid. – Livin May 30 '12 at 16:25
I'd recommend a look at Responsive Web Design though sketching responsive designs is it's own challenge – Ben Brocka♦ May 30 '12 at 16:27
show 2 more comments

1 Answer

up vote 2 down vote accepted

There are a few different approaches that can be taken here. The first approach is to specify dimensions using percentages. In other words, instead of specifying the website menu as 300px wide for a 320px screen, make it 94%. By using percentages, the menu will stretch to the appropriate screen size. Another approach is to define set sizes for each screen size. By using this method, you can target devices with specific screen resolutions.

There are various articles around the web which give much more detailed solutions. Here is one I found useful.

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Also take a look at fluid layouts. http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

share|improve this answer
thanks for the explanation and those articles. So, the web will adapt with the screen size by using the percentage? Then, if i'll use the second method, i have to know about the maximum and minimum screen size for each devices, right? – Livin May 30 '12 at 16:50
Correct. Here is a sample of the fluid layout. Resize your browser to see how the layout adapts to the new size. maxdesign.com.au/articles/liquid/liquid-sample1 – f4f4fd May 30 '12 at 16:57
it works. so, the sample adapts with the browser because it's using percentage on width? – Livin May 30 '12 at 17:04
Exactly. If you want to see how the layout will appear on various screen sizes you can use this to resize your window to the desired screen resolution. setmy.browsersize.com – f4f4fd May 30 '12 at 17:10
wow, thank you! – Livin May 30 '12 at 17:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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