6

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:

enter image description here

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?

4
+200

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 Step 1 Screenshot

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

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

  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. Step 4 Screenshot

  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" Step 5 Screenshot

  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 Step 6 Screenshot

  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. Step 7 Screenshot

Solution 2

http://easyresapp.com/

Link to download EasyRes from Mac App Store.

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

  • Thanks for your answer. Yes, I often use the Chrome device toolbar, specially for testing tablets/mobiles. However, there is no difference between MDPI and HiDPI: I keep switching them but, except for the page's width, the image is exactly the same, no change at all. I'll do some more research on that to check what are Chrome real capabilities of emulating MDPI, because right now I see no difference. – Gerardo Furtado Nov 18 at 23:41
  • You might not notice a difference because the change wouldn't be that drastic. If not you could always use the app to simulate the different resolutions. – Derek Pearson Nov 19 at 1:00
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.

  • Thanks for the tip regarding Affinity. I didn't get into details in my answer but I'm a JavaScript programmer, my SVGs are dynamically created and I need to see them in a browser, so Affinity is not an option (but thanks anyway). I reckon that my only option is the one I have now: using another computer to check the image in a non-retina display. – Gerardo Furtado Nov 17 at 9:14
  • You don’t necessarily have to use another computer. You can just connect a display with a lower resolution. macOS takes care of the rest. Unless you want to test for Windows/Linux anti-aliasing specifically. – herrbischoff Nov 17 at 9:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .