How to get a retina?

Question

what do i need to do to make my web apps / sites mesh (on iPhone4 and iPad3) when it comes to

• video
• Images
• Fonts
• colors?

I am looking for a checklist here.

Answer 1

If you use Rails 3.1+, you can use the clear_eyes gem to automatically process retinal images.

Colors and fonts do not need any adjustments. For example, the CSS button does not require any configuration, only images and, possibly, video.

Here is a very good flowchart of the steps required to fully customize your site, although I recommend using a gem for images if you're on Rails.

Answer 2

Smashing Magazine: Retina Network (mainly about graphics)

Answer 3

for image:

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

for background:

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