SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Designing for retina displays

    I'm wondering how the experts on here are designing for retina displays (if at all).

    Many laptops now have retina displays and there are many more devices out there that can be considered 'retina'.

    I've done a lot of research and can get the code/methods easy enough, but wondering of other thoughts and what's best practice.

    Some possible ideas are:

    "detect for a pixel density of 2 or more with CSS and then display a different PNG/JPEG/GIF image for retina"

    "use only Vector/SVG/icon fonts"

    "use something like retinajs.com"

    Am I understanding this and what do you think is the best method?

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For images that can feasibly be vector, I use SVG or icon fonts, depending on the complexity. For bitmaps, make them double the width/height and use width:50%. Obvious problem there is that image sizes could be as much as 4X, so I use a lossless compressor like SmushIt.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    I'm starting to use 2x images everywhere by default now, even for non-retina(they scale down ok).
    Inline images you can just give a width half of the full-size like. background images you can set a background-size to scale down.

    I only use the 1x images for background-images in browsers that don't understand background-size (ie)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •