Making Your Site Retina-Ready

Course details

With stunning new screens like the Apple Retina display coming onto the market, many designers want to learn how to make their sites retina-ready. This course provides several options for optimizing graphics and other content so that it looks great on retina (or HiDPI) and non-retina displays alike. Author Brian Wood covers incorporating icon fonts and favicons, optimizing SVG and inline images, and displaying responsive images using CSS, JavaScript, and the PictureFill polyfill solution.

Learning objectives
What is HiDPI?
Adding your first icon font
Adding hover states and animation
Working with SVG files
Creating favicons
Displaying HiDPI images

Concepts

0. Introduction

01 - Welcome
02 - Using the exercise files

1. Introducing HiDPI or Retina

03 - What is HiDPI (retina)
04 - Options for making your site content look better on HiDPI
05 - Tools you may use along the way

2. Icon Fonts

06 - Understanding icon fonts (good and bad)
07 - Add your first icon font to your design
08 - Use icon fonts in different situations
09 - Add a hover state to icon fonts
10 - Add animation to an icon font

3. SVG

11 - Understanding SVG
12 - Making an SVG file using Illustrator
13 - Optimizing SVG
14 - Adding an SVG file (.svg) to your page
15 - Fixes for responsive Internet Explorer
16 - Adding SVG inline
17 - Fixes for inline-responsive Internet Explorer
18 - Adding SVG as inline URI (and why)
19 - Adding an SVG fallback for older browsers

4. Favicons

20 - Understanding favicons today
21 - Creating favicons
22 - Adding favicons to your pages

5. HiDPI Images

23 - Understanding the different methods available
24 - Just use the HiDPI image (scaled)
25 - Simple CSS background image swap
26 - Simple JavaScript method (retina.js)
27 - What is PictureFill
28 - Working with PictureFill

Conclusion

29 - Resources
30 - Goodbye