What is the best resolution to work at for Android devices?

Question

I am trying to design an app for Android devices, but they come in all sizes and stuff... with different resolutions and its a bit confusing. What is the best way to do it?

Work at the biggest resolution and then the programmer scales everything down for other devices? ... The problem is that devices come with different resolutions and the proportions don't match... so I'm really confused, if he scales down and doesn't keep the proportions...the whole design will be ruined...

What approach should I follow when designing for screens with different proportions ? Any tips, workflows, links, advice... is more than welcome.

I found this on the Android website, it is quite usefull ... but I'm wondering if I can get an answer from someone who's done a design for and app... what was the workflow?

Thank you.

Answer 1

This is answer is purely from a website standpoint.

Media querie, curtesy of CSS3, gives us more control over how a website will look at various resolutions. As you scale down the width of the browser it will swap to the code for that width.

Some info on Media Queries - http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

This falls under Responsive Web Design, which is the current craze.

Some info on responsive web design and media queries - http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Now for the downside of responsive design - responsive/scaling images:

"Viewing a responsive website on a mobile device forces the CPU and memory of it while resizing images because you are downloading a large image, uncompressing it in your phone’s memory and then resizing it to fit a small screen. This process takes about 3 bytes per pixel of memory, so a 1024×768 image will take about 2.36 MB of memory. Most clients only request 4 images in average at the time, but 9.44 MB is still a lot for a page load. A recommended file size for images in a mobile context could be 100×100, but this is kind of utopic since a suitable image for desktop websites exceeds that resolution." - http://www.webdesignshock.com/responsive-design-problems/

There are several solutions for this:

http://stuffandnonsense.co.uk/projects/320andup/

http://adaptive-images.com/

It is relatively new way of creating websites but there is a lot of information online from smashing magazine to a list apart.

*Edit: You will probably get a lot more answers if the question was on stackoverflow or webmasters.

Answer 2

Ok, a lot of these answers are great, but let me give you a few thoughts from a designer.

1. Right now, you have 3 different densities to design for (mdpi, hdpi, and xhdpi).

2. Although choosing a density to start with is your preference, I would recommend starting with hdpi, and scaling your design from there. If you look up the stats on how many people are using xhdpi devices, it's quite low. And, mdpi devices are just small physically, and you'd probably want to start designing with a bit more detail. Hopefully you're not designing for the mdpi device owning user ;)

3. As far as process goes, what I usually do is open up photoshop, create a new document, and make the canvas 480x800 (average hdpi device resolution). From there, I will design out the whole app. Once the design is finished, I start to cut assets (unless your developer knows his/her way around a photoshop document). During the process of cutting the hdpi assets, I will scale each individual asset in photoshop to fit the appropriate density, and then save them out.

Scaling is another issue. Here's some quick references:
hdpi > mdpi = -66%
hdpi > xhdpi = +133%

Scale each by either subtracting or adding by a percentage. Once you've scaled an asset, make sure to check it for mis-aligned pixels, before you save it out.

1. When it comes to assets, there is one really important thing to remember. If you are designing an app for multiple resolutions, you'll want to create as many 9-patch assets as possible. Check out this link for the explanation of a 9-patch: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Sorry if this was long, but I figured you would appreciate a detailed answer. I know how awesome it is to have a fellow designer come alongside and help out.

Good luck!

Answer 3

First off, are you going to support only phones, or tablets too?

Secondly, you have it pretty much right. My experience comes from games, but I'm sure it applies to other apps just as well. Just create your High-Res assets first, and then scale them accordingly for Med- and Low-Res devices. You shouldn't have to worry about minuscule screen size differences, say less then 20px, as the content should be able to flow alright thanks to the way android apps work. This is another thing to bear in mind. You need to design your application so that it can be subject to a little bit of free flowing.

The bottom line is, design your graphical assets based on pixel densities, rather than resolutions, and have your layout adapt based on the resolutions instead. (the application will automatically choose the appropriate-res assets based on the device's ppi)

Hope this helps! :)

Answer 4

Android uses density-independent pixels and scales the UI to match the resolution of the device’s screen. Since there are a variety of different manufacturers, designers usually create assets at 160ppi, 240ppi and 320ppi, which relates to scales of 100%, 150% and 200%.

From the Android developer guidelines:

“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. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels.”

When you scale your work, consider using nearest neighbor method to avoid poor quality scaling for different resolutions. Bjango has a useful set of Photoshop actions to make designing for mobile a bit easier.