As the design community moves to design applications & interfaces for mobile devices, a new problem has arisen: Varying Screen DPI’s. Here’s the situation:
Touch:
* iPhone 3G/S ~ 160 dpi
* iPhone 4 ~ 300 dpi
* iPad ~ 126 dpi
* Android device @ 480p ~ 200 dpi
Point / click:
* Laptop @ 720p ~ 96 dpi
* Desktop @ 720p ~ 72 dpi
There is certainly a clear distinction between desktop and mobile so having two separate front-ends to the same app is logical, especially when considering one is “touch”-based and the other is “point/click”-based.
The challenge lies in designing static graphical elements that will scale between, say, 160 dpi and 300+ dpi, and get consistent and clean design across zoom levels. Any thoughts on how to approach this? Here are some scenarios, but each has drawbacks as well:
* Design a single set of assets (high resolution), then adjust zoom levels based on detected resolution / device
o Drawbacks: Performance caused by code layering, varying device support of Zoom
* Develop & optimize multiple variations of image and CSS assets, then hide / show each based on device
o Drawbacks: Extra work in design & QA.
Anyone have thoughts or experience on how to deal with this? We should certainly be looking at methods that use / support HTML5 and CSS3.
This isn’t the first time I’ve had to deal with this. Hang around long enough and you see everything.
I come down on option two. In the vast number of circumstances, it is better to sacrifice time in development for improved performance in use. We succeed by making the customer happy not by saving ourselves some sweat. Which ever use improves the user experience and the apps utility is the way to go.
These days, you can get batch image processors that you can set up to churn out a wide range of resolutions and sizes based on a high resolution source image. That makes producing multiple resolutions pretty much a 15 minute job.