Tools to simulate different DPI screens?

When designing for mobile web, its important to check designs at the physical screen size of target device. Merely looking at your PC / Mac screen at designs of the same resolution isn’t enough:
* Mobile devices have smaller pixels (higher pixel density), and thus X x Y pixels on a PC screen will be physically smaller on mobile devices (generally)
* One ‘web pixel’ (i.e. a CSS pixel) will be re-sized by the mobile device. e.g. retina devices doubling up pixels.

Has anyone encountered any good tools for simulating web designs (image based, not HTML prototypes) at the correct physical size (on a PC screen) for mobile devices?


There isn’t any way to actually make a desktop display appear to have smaller pixel density. That is what you are asking about I think. Otherwise you would just minimize your browser or zoom out, depending on your approach. You could stand twice as far away I guess.

However, If you have a Mac with a retina display, you can zoom it in double and then see what the graphics look like on a standard resolution monitor. So it does work in that one direction.

I think your best bet for testing (besides buying a new mac pro or ipad) would be to buy a cheap 4th gen ipod touch and check your images on there. That’s what I’ve been doing.

For the most part, if you are designing responsively, you could have a div – set width or percentage – and inside and img. Then in the css you would just width: 100%; height: auto; the img. I’ve been making my images about 1.5->2 times the size as the max size I want them to be viewed – and then compressing them down a bit more then normal. They look great on retina – and they are still as small – it’s crazy – and now I just don’t really even worry about checking them. I just follow the recipe.

There were some really great articles on this. I tried to find them, but they have been buried by a ton of really silly ones.

Source : Link , Question Author : KevinD , Answer Author : sheriffderek

Leave a Comment