Making Your Site Retina-Ready

Learn how to make your site "retina"-ready by optimizing graphics and other content so that it looks great on retina (HiDPI) and non-retina displays alike.

Introduction

• Welcome
• Using the exercise files

1. Introducing HiDPI or Retina

• What is HiDPI (retina)?
• Options for making your site content look better on HiDPI
• Tools you may use along the way

2. Icon Fonts

• Understanding icon fonts (good and bad)
• Add your first icon font to your design
• Use icon fonts in different situations
• Add a hover state to icon fonts
• Add animation to an icon font

3. SVG

• Understanding SVG
• Making an SVG file using Illustrator
• Optimizing SVG
• Adding an SVG file (.svg) to your page
• Fixes for responsive Internet Explorer
• Adding SVG inline
• Fixes for inline-responsive Internet Explorer
• Adding SVG as inline URI (and why)
• Adding an SVG fallback for older browsers

4. Favicons

• Understanding favicons today
• Creating favicons
• Adding favicons to your pages

5. HiDPI Images

• Understanding the different methods available
• Just use the HiDPI image (scaled)
• Simple CSS background image swap
• Simple JavaScript method (retina.js)
• What is PictureFill?
• Working with PictureFill

Conclusion

• Resources
• Goodbye