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