how to get retina-ready? [closed]

Answer 1

for image:

<script>if(window.devicePixelRatio>1)document.getElementsByTagName("img")[0].src="retina.png"</script>

for backgrounds:

<style>
  @media screen and (-moz-min-device-pixel-ratio: 2),
    screen and (-o-min-device-pixel-ratio: 2/1), 
    screen and (-webkit-min-device-pixel-ratio: 2), 
    screen and (min-device-pixel-ratio: 2){

      h1{background-image:url(retina.png)}

  }
</style>

Answer 2

Smashing Magazine: Towards A Retina Web (mostly about graphics)

Answer 3

If you're on Rails 3.1+, you can use my clear_eyes gem to automatically handle retina images.

Colors and fonts won't need any adjustments. For example, a CSS button will not require any adjustment, only images and perhaps video.

Here's a very good flowchart of the steps required to completely retina-fy your site, although I recommend using the gem for images, if you're on Rails.