Web Design On A Retina Display


I recently replaced my 6 year old Macbook Pro 17” with a sleek new 15” quad core MBP with retina display. Admittedly I wasn’t fully convinced on whether to go for the retina version or not, but I figured that its better to embrace new technology than to shy away from it – more machines will surely have retina displays as time passes.

A (not so) small problem

My first day using the new machine to design on hasn’t exactly filled me with confidence. Ordinarily I use Photoshop for almost all my web design work, so I began by setting up my standard sized document that I begin with – 1200 × 1200 pixels. At 100% zoom this takes up around a third of the 15” screen. Its absolutely tiny. It’s so small in fact, that you simply cannot design that way. Fonts are illegible and its like designing on the back of a postage stamp. Easy fix, zoom in to 200% right? Wrong. While 200% zoom feels about right on the monitor, fonts appear fuzzy, images look like poorly compressed jpgs – its not a workable solution.

A (partial) solution

For new projects I’m working with a document at double size. It displays well on screen and can be saved at 50% size for anyone wishing to view on their non retina display screens. It works but it feels wrong. It feels like a hack. Not only that, it doesn’t work if you’re editing files that have been created on a non retina display. You’re either back to working at postage stamp size, or zooming in to a fuzzy mess.

I’m not sure what the solution is and to be quite honest I’m thinking it was a mistake to buy a retina display. If anyone out there has found any workarounds then please let me know as I’m a little bit lost at the moment!

Update

I’ve done a little more digging on this and other than some users suggesting use another monitor (which is neither practical for me as a freelancer nor the type of solution I want having spent just shy of £2,000) or simply zoom in to 200% (which kind of ignores the issue), I haven’t found any real answers.

Screenshot - Illustrator & Photoshop

Interestingly, if you set up the same size document in Photoshop and Illustrator and view it at the same zoom (100%), the visual difference is huge, the Photoshop document is displayed at half the size of the Illustrator version. This makes absolutely no sense to me considering both apps are retina enabled.

Comments


Manpreet:

04 May 2015 14:03:20

Pulling my hair out coz of this. Just saw on the adobe forums that if you save at 144ppi nstead of 72ppi it should be fine, I will test it as soon as I am near my macbook.
https://forums.adobe.com/thread/1245069?start=200&tstart=0
It’s driving me mad.

Don't be shy! Leave a comment…