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.
Overview
Syllabus
Introduction
- Welcome
- Using the exercise files
- What is HiDPI (retina)?
- Options for making your site content look better on HiDPI
- Tools you may use along the way
- 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
- 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
- Understanding favicons today
- Creating favicons
- Adding favicons to your pages
- 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
- Resources
- Goodbye
Taught by
Brian Wood
