A quick video tutorial showing you modern practices on making your website look great on retina devices. 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 add the SVG to the HTML 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, and learn about some cool JavaScript plugins that help you with that.

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 (img tag). For CSS images (background-image), the best way to target them is with 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 for the CSS3 media query, yet use only a -webkit a 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: dataurl.net/#dataurlmaker
Slicy app: macrabbit.com/slicy/
RetinaJS: github.com/imulus/retinajs
Picturefill: github.com/scottjehl/picturefill
Retina images: blog.netvlies.nl/design-interactie/retina-revolution/


If you found the video useful, share it!
Thanks for watching!

Loading more stuff…

Hmm…it looks like things are taking a while to load. Try again?

Loading videos…