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.

  • 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.
    – Livinda
    May 30, 2012 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, 2012 at 16:18
  • @BenBrocka thank you for editing my question. That's what i mean.
    – Livinda
    May 30, 2012 at 16:18
  • 1
    @BenBrocka it will focus on the sketching process. The maximum pixel is 960 and it has 30grid.
    – Livinda
    May 30, 2012 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, 2012 at 16:27

1 Answer 1


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.


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/

  • 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?
    – Livinda
    May 30, 2012 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
    – user15170
    May 30, 2012 at 16:57
  • it works. so, the sample adapts with the browser because it's using percentage on width?
    – Livinda
    May 30, 2012 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
    – user15170
    May 30, 2012 at 17:10

Your Answer

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

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