Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Making Your Site Retina-Ready

via LinkedIn Learning

Go to class Write review
Boot.dev Ad

The Most Addictive Python and SQL Courses

Learn More → Coursera Ad

Get Coursera Plus for 40% off

Learn More →

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
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.

Syllabus

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

Taught by

Brian Wood

Reviews

4.6 rating at LinkedIn Learning based on 5 ratings

Start your review of Making Your Site Retina-Ready

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.