Designing on Retina Display

Discussion in 'Web Design and Development' started by xGPaul, Oct 25, 2015.

  1. xGPaul macrumors newbie

    Joined:
    Oct 25, 2015
    #1
    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
     
  2. Pakaku macrumors 68000

    Pakaku

    Joined:
    Aug 29, 2009
    #2
    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.
     
  3. Rab Simpson macrumors regular

    Rab Simpson

    Joined:
    Feb 10, 2006
    Location:
    Glasgow, Scotland
    #3
    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.
     
  4. ErikGrim macrumors 68030

    ErikGrim

    Joined:
    Jun 20, 2003
    Location:
    Brisbane, Australia
    #4
    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.
     
  5. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #5
    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.
     
  6. ErikGrim macrumors 68030

    ErikGrim

    Joined:
    Jun 20, 2003
    Location:
    Brisbane, Australia
    #6
    Definitely not. Just setting the image dimensions with CSS is far cleaner and faster.
     
  7. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #7
    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.
     
  8. iPaintCode macrumors regular

    iPaintCode

    Joined:
    Jun 24, 2012
    Location:
    Metro Detroit
    #8
    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).
     

Share This Page