Retinafy Your Site / Device

By Nijiko Yonskai

=====

I made a book, its one page.

Why Use Larger Images?

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]');
    }
}

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

/* 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 */ 
}

@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 */
}

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

Jagged Edges

Use opacity: 0.999 in your css to fix these and blur those lines for resizing and transforms.

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

Inline Images

There are a few solutions, I'll let you choose yours:

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.

By, Nijiko Yonskai

Sources

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

Google Search

Extras for giving 20$

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

Layer Cake Tutorial
Using CSS Sprites for Retina
Retina iOS APP Icon Template favicon anyone? 114x114 your welcome.
Favicon Code
Keeping filesize in check for Retina

jrf0110/Retinafy.md