Retina Display

[Sega]

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!

[Sega]

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.

[ralph.m]

Here are some examples of how you can serve up a higher resolution image for retina displays:

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}

@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.

[Sega]

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,

[ralph.m]

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.)

[Sega]

(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.

[logic_earth]

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.

[ralph.m]

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

[kohoutek]

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/

[Sega]

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/

[ralph.m]

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.

[Sega]

@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.

[ralph.m]

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.