Simulating a non-retina display

Question

Sometimes I need to test my designs (SVGs) in a regular, non-retina display, so I can feel how it looks for users behind such displays. What I normally do is using an old Windows notebook, but it'd be handy if I could do that quickly in my retina MacBook.

As suggested here, I tested the "Open in Low Resolution" option in Get Info:

However, it seems to me that the whole window (in this case, Safari) was blurred, just like as a massive anti-aliasing was applied. It doesn't seem that only the PPI was reduced.

My question is: is there a better way for simulating a non-retina display in my retina MacBook, or is this the best I can get?

Answer 1

Since you're a JavaScript programmer and you need to see your SVGs in a browser there are two potential solutions. First, you can use the chrome dev tools to simulate a non HiDPI (Retina Display) screen in the browser. Or you can use the EasyRes app to quickly switch the resolution of your entire display.

Solution 1

Steps to view websites as different devices on Google Chrome:

1. Open up desired page in Google Chrome and enable Developer Tools for the page ⌥+⌘+I

2. Click the device toolbar located in the upper left of the dev tools window ⌘+⇧+M

3. Click the type of device at the top toolbar and click on edit to add a new device to emulate

4. Now in your case you want to be able to emulate a non-retina display so would you add "Laptop with MDPI screen" to your list of emulated devices. If you wanted to emulate any other device add it from this list. Or for instance if you wanted to emulate a retina display you would choose "Laptop with HiDPI screen." Note: If you want to switch quickly between both resolutions to compare add "Laptop with HiDPI screen" as well.

5. Close the emulated devices window and click on the current device chrome is emulating (on the left side of the toolbar above the webpage) and switch it to "Laptop with MDPI screen"

6. To get a better view of the webpage, undock the dev tools window into a separate window by clicking the menu options (the three vertical dots on the right side of the dev tools window) and the selecting the leftmost option for the "Dock side." Or use this shortcut ⌘+⇧+D. This will pop out the dev tools into a separate window so you can view the whole page as if you were browsing normally

7. Then your browser should look like this. You can also change the zoom options of the emulated webpage in the toolbar to better suit your needs.

Solution 2

http://easyresapp.com/

Link to download EasyRes from Mac App Store.

Also, here is a link to a video demo of EasyRes

Answer 2

You could use Affinity Designer, which has modes for working with regular resolutions and HiDPI screens. You can switch between them seamlessly. It even shows the aliasing occurring on regular resolutions, which is probably what you want to check for.

Other than that, you’d have to attach a non-retina display to your Mac and just move everything there. It’s what some interaction designers do to check icons on different screens. However, if you have specific devices as targets, it’s better to use them, as screen resolutions and pixel density are very different from one screen to the other and different operating systems also apply different anti-aliasing algorithms. You’re usually better off using the respective hardware devices/screens.