SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Retina Display

  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    Retina Display

    I have recently come across Retina Display - http://en.wikipedia.org/wiki/Retina_Display/. According to wiki it's a brandname given for Apple's new pixel density.

    Just wondering if anybody has created a website with this in mind, and if so what difficulties is there. I am hoping to use this within my CSS, from what I understand you use media queries to get it to work. How you I test his if I do not own an Apple kind of wish I had one now!
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    After conducting some research it appears to be linked to Apple a great deal; this video explains things, http://www.youtube.com/watch?v=kcnKi7GxZ2k, but one thing is misses out is how we can use this in development. I don't own an Apple so testing for this would be a little hard to do, but I think zooming in might do the trick.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Here are some examples of how you can serve up a higher resolution image for retina displays:

    Code:
    @media all and (-webkit-min-device-pixel-ratio: 1.5) {
      #logo {
        background-image: url('/images/my_image@2x.png');
        background-size: 200px 100px;
      }
    }
    Code:
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    	header h1 a {
    		background-image: url(images/blogspoon-logo@2x.png);
    		background-size: 164px 148px;
    	}
    }
    In terms of testing, you can slip in to your local Apple retailer and check out your sites on their display devices.

  4. #4
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Would it be okay if you explain the difference between the two. I found this, http://bjango.com/articles/min-device-pixel-ratio/ which helps but at the same time confuses me. Looking at that would I need more than one media query to handle it a single background. I am using a style switcher which comprises of over 100 backgrounds, so this would mean I would need a further 100 media queries x all the states..

    Is there also a ratio of measurement or a calculation which would help me understand what the height and width would need to be in pixels for the background image to appears no skewed for each device.

    Understandably what is covered here is quite new. it's new to me!


    I will go to my Apple store,
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sega View Post
    this would mean I would need a further 100 media queries x all the states..
    No, just one media query with all the different backgrounds listed there.

    As you see on the page you linked to, 1.5 applies to certain devices and 2 to others. I'm not sure if those for 2 would catch the rule set for 1.5 devices, but I would think so, meaning that you wouldn't need a rule for 1.5 and 2 devices if you were happy with the 1.5 background on 2 devices. (I'm new to this as well, so sorry if that's confusing.)

  6. #6
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    (I'm new to this as well, so sorry if that's confusing.)
    Maybe we can help each other. I found this - http://menacingcloud.com/?c=highPixelDensityDisplays

    it appears they have included a CSS include on the top which only targets high density devices. In addition to this there is a CSS rule as you scroll a little down the page which targets three different pixel ratios. Makes for good reading, ideally we need to learn more on this. A little embarrassing since I knew nothing of it until a couple of days ago.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    The best way I can explain a Retina Display, relative to Windows its akin to increasing the DPI in Windows' settings from 96 to something greater. When you do this, the native resolution of the monitor remains the say, but things appear larger. This is because multiple pixels are used to form a single pixel. The Retina Display is just a high pixel density monitor with a high DPI set on it, so multiple pixels are used to form single pixels.

    There is not much you really need to do in terms of web sites unless you want your pictures to take advantage of the higher resolution for deep image zooms.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sega View Post
    Maybe we can help each other. I found this - http://menacingcloud.com/?c=highPixelDensityDisplays
    That's a good one. I had already read the Pixel is not a pixel one at Quirkmode, which is great, as is this videoed talk he did on the subject:

    http://www.youtube.com/watch?v=4wscVOXjIzQ

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I do design with Retina in mind. The very simple rule designers are currently adopting is offering one image in two sizes, the original size and a size that is exactly twice as large. So, in numbers you'd offer an image at say 400x300 and a 800x600 for High-Density displays.

    If you use images (e.g. photos), then that might be cumbersome, but for everything else there are tools that allow you to do just that. I've recently been using Sketch 2 (for Mac only) that will automatically create any icons and graphics you've created in two (or more) sizes, so that you need to create one size and the app will do the rest.

    Slicy by McRabbit is another such "Retina" tool that will downsize or increase your graphic elements for Photoshop but again only available for the Mac.

    Some articles:

    http://miekd.com/articles/using-css-...tina-displays/
    http://css-tricks.com/snippets/css/r...y-media-query/
    http://css-tricks.com/on-responsive-images/
    http://heydesigner.com/easy-retina-r...es-using-scss/
    http://coding.smashingmagazine.com/2...ds-retina-web/
    http://adaptive-images.com/

    There's also a book available which I haven't bought, so can't tell you whether it's good or not: http://retinafy.me/
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's a good one. I had already read the Pixel is not a pixel one at Quirkmode, which is great, as is this videoed talk he did on the subject:

    http://www.youtube.com/watch?v=4wscVOXjIzQ
    That's the best video I watched on the subject, seriously covers some hard pressing issues.

    In theory Apple and other vendors are likely to release retina display x4 or even x8. In such events you will end up with a very big image, giving your mobile of computer a sense of reality, but at the same time giving us really slow internet. In such cases I can really see scalable vector graphics becoming on the scene as they could be scaled endlessly.

    Retina display is very new, but looking at the way the mobile world evolves I would not be surprised if this change happened sooner than later.

    Edit:
    @kohoutek ;

    I would love to see how retina display images work with adaptive images - http://adaptive-images.com/
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sega View Post
    In theory Apple and other vendors are likely to release retina display x4 or even x8.
    Given your first link, I wonder if they will bother, as the retina density already pushes beyond the ability of the eye to perceive pixels.

    Nice links, Maleika.

  12. #12
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @kohoutek ; @ralph.m ;

    This one here is quite interested too, http://retinajs.com/, it locates a x2 image on the server and automatically replaces it for a retina display device. This is pretty cool! Can see myself using this.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Thanks Sega. I have seen that, but haven't used it. TBH, I'm not all that worried about retina-friendly images at this stage, as there are more pressing issues. But it is good to know what the options are.


Tags for this Thread

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
  •