Advertisement


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.

2011/11/25
1
6
11/25/2011 5:05:00 PM

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.

2011/11/27
7
11/27/2011 1:12:00 PM