6

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?

Improve this question
4
  • 1
    I'm not sure if this is what you are looking for, but there are a lot of mobile device "simulators" out there that will show you how your site looks on a mobile device. iPhone4Simulator is one, Here's one for iPads. These are best for testing responsive css designs, though. For DPI simulation I'm not sure.
    – JohnB
    Nov 29, 2012 at 17:52
  • Things link iPhone4Simulator are next to pointless IMHO. I can do a lot of that with a re-sized window :-) The points is that the physical screen size of the iPhone is a LOT smaller than the "screen" for iPhone4Simulator (and similar) when shown on a PC, which can considerably affect design decisions.
    – KevinD
    Nov 30, 2012 at 10:53
  • 3
    The absolute best way is to view the design on the device. In fact, that's the only method I'd recommend.
    – Marc Edwards
    Dec 1, 2012 at 11:51
  • The problem with simulation is that there are minor problems with reducing schemes that are not pixel perfect. A very low-tech first pass might be a reducing glass, but nothing will really be as accurate as using the target device itself.
    – horatio
    Feb 12, 2013 at 17:30

3 Answers 3

Reset to default
2

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.

Improve this answer
2
  • when I wrote this, I was for some reason assuming you use this meta: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> --- If you do, (I do) then scaling your browser is just like the devices... 320ox width in firefox looks just like the iphone - except the pictures are more crisp and the fonts as well. But the design structure is spot on.
    – sheriffderek
    Dec 14, 2012 at 7:38
  • ppi and pixels are a whole different thing. I would switch over to em's % and just leave the pixels behind.
    – sheriffderek
    Dec 14, 2012 at 7:40
1

There are virtual testing suits that are basically 'screen sharing' actual devices remotely. They work OK barring no other tools, but are cumbersome to use.

Ideally, you'd simply have the devices in-hand that you need to test against.

The problem with testing on screen is that it's simply different hardware. As you point out, you can't really change the PPI of your screen to match that of the device. In addition, you need to deal with emulating the default text sizes of the device in relation to the screen and other such parameters.

Finally, it's not necessarily universally true that your screen pixel will be larger than your high-def mobile screen. It depends on the OS and device.

iOS devices, for instance, will render your 1px desktop pixel as 4 retina pixels. Some other devices, though, such as high PPI BlackBerries, will simply render your 1px desktop pixel as 1 device pixel (meaning it may shrink everything way down).

Improve this answer
1
  • There is only one tool I have found to simulate PPI/DPI on a PC/Mac screen - the Android emulator. With this tool you can set the emulated device size and DPI, and have the physical size controlled by setting the DPI of the screen the emulator is being viewed on. This of course works by scaling down (so you lose pixels), so it is good for general sizing of elements, but not for 'fine grained' design.
    – KevinD
    Nov 30, 2012 at 10:56
1

Simulation is a waste of time. If you want to see what it will look like, go look at the device!

Here's my workflow: Export the graphics in question to a Dropbox folder that's connected on multiple devices where I can check it out. Fast, simple, and relatively accurate (it's not totally accurate until I see it in the browser).

Improve this answer
2
  • The Dropbox viewing app can scale images though. The iPad app never fits full screen. There's other tools for viewing designs on the device that are far better.
    – Marc Edwards
    Dec 1, 2012 at 11:57
  • You can pop images out of Dropbox into your image viewer of choice. As with most things, it's easier on Andoid than iOS ;)
    – plainclothes
    Dec 1, 2012 at 17:59

Your Answer

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

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