Designing on Retina Display

[xGPaul]

Hello folks!

I just changed my laptop and I bought a Macbook with Retina display. Everything is fine, except the Design related issues.

As you know, Retina has a huge display compared to 15'' laptops. All my designs made on my laptop (if you take a look from a normal display, you see them full HD) are low quality if you take a look from Retina.

Regarding my problem, I've got few questions.

1) How should I work in order to have the same view for my designs, on Retina and normal display?
2) What resolution should I use now? (if I send a design to someone who does not own a Retina display, the layout will be quite bigger than normal / If someone sends me a layout designed on a normal display, I have to zoom out to be...almost hd on retina display) I used to work on 1349px width on my laptop.

Thanks a lot.
I'm looking forward hearing from you.

All the best,
Paul

 

[Pakaku]

You just work as you always do, the only real difference is 100% zoom will appear half-sized on a retina screen.

For web design specifically, you'll probably want to design your images at 2x-4x the intended size, then downscale the images in CSS accordingly. An image scaled down to 50% will look 100% crisp on a '2x retina' screen. Some formats like SVG don't have specific scales, so they'll look good at any resolution.

 

[rsdotscot]

Use media queries to load two versions of each image. Retina devices will download the higher resolution image and other devices with download the regular image.

 

[ErikGrim]

Don't bother serving two separate versions using media queries (both devices will download two sets of images if you do). Rather just use retina resolution images (2x what you used to) and scale them with css instead. The key is to reduce the file size by compressing them much more than you used to (I never use more than 51 JPEG compression). The images will still look better on both retina and non-retina devices.

And use SVG for all your icons/illustrations and they'll be sharp everywhere.

 

[NutsNGum]

Use media queries to load two versions of each image. Retina devices will download the higher resolution image and other devices with download the regular image.

Should say this only really applies to background images. To do it neatly in templating with normal images and with cross-browser compat. you need to use a javascript library like retina.js or picturefill.

 

[ErikGrim]

Should say this only really applies to background images. To do it neatly in templating with normal images and with cross-browser compat. you need to use a javascript library like retina.js or picturefill.

Definitely not. Just setting the image dimensions with CSS is far cleaner and faster.

 

[NutsNGum]

Definitely not. Just setting the image dimensions with CSS is far cleaner and faster.

You misunderstand me.

CSS is obviously best to set image dimensions globally, but it's not so good for serving different versions of the same image dependant on a user's connection speed or device size ( which Picturefill or RESS will take care of ).

Unless, of course you don't care about users on slower connections or scalability, in which case, keep those @2x images all over.

 

[iPaintCode]

You don't need a retina display when designing for the web but I would seriously suggest you look into two apps (1st one is highly recommended):

1. Sketch (hands down a godsend to app/web design)
2. Affinity Designer (new kid on the block but very promising and BLAZING FAST).