how to get retina-ready?

Question

what do I have to do to make my web apps/sites retina-ready (on iPhone4 & iPad3) when it comes to

videos
images
fonts
colors ?

I'm looking for a checklist here.

1. Buy The New iPad 2. Load App or web page in Safari on The New iPad 3. Analyze... What I'm getting at, is without the device, it's really hard to test. — Michael Rice, Mar 17 '12 at 07:50
one must google about it instead of asking.. there are countless blog posts on the matter... nothing to add here. — vsync, Sep 06 '17 at 14:46

score 1 · Answer 1 · answered Jul 16 '12 at 13:05

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.

score 1 · Answer 2 · answered Jan 11 '13 at 14:19

1

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

answered Jan 11 '13 at 14:19

A. Z.

728
1
11
28

score 0 · Answer 3 · answered Aug 02 '12 at 19:32

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>

how to get retina-ready?

3 Answers3

Linked