I thought I’d mix it up a bit and instead of writing a tutorial, I decided to make a video screencast. In this video tutorial I’ll show you some modern practices on how to make your website look great on retina devices, such as an iPhone 5 or a retina MacBook Pro.
##What you’ll learn From this tutorial you’ll learn how to make your logos and icons infinitely scalable by exporting them as SVG (Scalable Vector Graphics) format. Next, we’ll link the SVG image to the HTML file and talk performance, and how to encode the image into data URL to save an HTTP request. Lastly, you will learn how to export @2x images and how to embed them in CSS with media queries. Finally, we’ll learn about some cool JavaScript plugins that help you with that. Check out the video:
##Clarifications from the video (Spoiler Alert)
- You can also copy the vector shape directly from Photoshop, paste it into Illustrator, and then export is as SVG. No need to save as PSD if you don’t want to.
- The scripts that I mention may replace standard quality images with retina @2x images automatically, but only for the HTML side (
imgtag). For CSS images (background-image), the best way to target them is usign a media query. Unless you use LESS or SASS mixins for your CSS. - In the video I say that I want to target other devices with the CSS3 media query, yet use only a
-webkita vendor prefix. That’s because I didn’t finish the entire script. Grab it here: gist.github.com/alexcican/4726254.
##Links from the video
DataURL creator
Slicy app
RetinaJS
Picturefill
Retina images