Skip to content

Instantly share code, notes, and snippets.

@nijikokun

nijikokun/Retinafy.md

Created July 24, 2012 01:42
Show Gist options
  • Save nijikokun/3167408 to your computer and use it in GitHub Desktop.
Save nijikokun/3167408 to your computer and use it in GitHub Desktop.
Download ZIP
Retinafy your site, a free book
Raw
Retinafy.md

Retinafy Your Site / Device

By Nijiko Yonskai

=====

I made a book, its one page.

Table Of Contents

Why Use Larger Images?

Just go here and click on @2x and you'll see why.

Higher resolution, twice the size, more detail, better experience on a device that provides it. There is also that thing where people make the desktop version and go to mobile more often than they do the reverse, why? Because, people like making complicated stuff first.

Do it because it's your nature. Go either way, going up you can add in detail, going down you have to subtract. It's your option. But having larger images just gives a better experience on those devices otherwise it will be blurry and just imagine someone viewing your site without glasses even if they don't need glasses and or have them.

On Devices

If you name your files with the @2x suffix, retina devices will automagically choose the high resolution image on those devices. Nifty? Hell yeah it is.

Media Queries

Literally it's this easy, this applies to devices with a minimum pixel ratio of 1:1.5

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
    .logo {
        background-image: url('images/[email protected]');
    }
}

You aren't limited to just this, there are a whole slew of vendor-prefixes and min/max queries you can use; 1.5 as a value is generally good enough.

Notes:

  • Full vendor-prefix to future proof rules.
  • Optionally you can use prefix-free javascript solution for these rules.
  • Use the @2x naming convention for high-res files.

Targeting Specific Densities for High Res

This targets only devices that have a minimum 1:2 ratio.

/* Targeting those high resolution screens */
@media (min-resolution: 192dpi), 
       (-webkit-min-device-pixel-ratio: 2), 
       (min--moz-device-pixel-ratio: 2), 
       (-o-min-device-pixel-ratio: 2/1), 
       (min-device-pixel-ratio: 2), 
       (min-resolution: 2dppx) {
  /* your styles here */ 
}

Or this query that targets devices with a minimum of 1:1.5 pixel density like before but for all of them:

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 1.5dppx) {
  /* your styles here */
}

Targeting using Stylesheets

You can also put media queries on the stylesheet link tag so that way the images are only loaded for that specific resolution and not for all devices, this can optimize and save some bandwidth for you:

<link rel="stylesheet" type="text/css" href="/static/css/2xDpi.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
<link rel="stylesheet" type="text/css" href="/static/css/1xDpi.css" media="only screen and (-webkit-max-device-pixel-ratio: 1)" />

Thanks to jrf0110 for pointing out this section was missing!

Resizing Images

On standard sizes:

.logo {
    background-image: url('images/logo.png');
}

and for retina devices:

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
    .logo {
        background-image: url('images/[email protected]');
        background-size: 200px 200px;
    }
}

Now the media query above is just an example query, target your devices accordingly!

Jagged Edges

Transforming something or just resizing in general and getting jagged edges? Use opacity: 0.999 in your css to fix these and blur those lines for resizing and transforms.

Responsive / Inline Images

Since your images on your devices are responsive, there is going to be a problem! Your images may not scale correctly or look all that great, lucky for you there are a few solutions out in the wild to cure this situation, I'll let you choose on your own:

Generally a mix of CSS & Javascript is great to be as universal as possible.

Icon Fonts

On mobile devices these may not work, use images for the most universal experience but for iOS use icon-fonts.

Why? Everything looks right; Don't believe me? Try it, prove me wrong, that's what is great about this.

Never done it before? Essentially it's just @font-face and utilizing a font that uses unicode namespace for icons. They show up sharp and crisp and you don't even have images you're using either the alphabet or some css classes and a span!

Some Nice Fonts

Hype

Yep, its a hype. But, a good one, enjoy the hype, be a part of it. You'll probably get featured for doing it, and then you too will be a part of the hype. See how this circle goes around an around?

Anyway, I hope you enjoyed this book. That'll be 20$ kthxbai. (This book is constantly being updated)

 

By, Nijiko Yonskai

Sources

Legally I was forced to put this here, lol kidding I just always wanted to say that:

Extras for giving 20$

Oh man, thanks for giving me 20 monopoly dollars, here are some extra resources for you:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment