2015
Lynda
Morten Rand-Hendriksen
1:22
English

Responsive images are the next evolution in web design. Learn how to implement them today, with these real-life best practice scenarios for implementing responsive images in production sites. Morten Rand-Hendriksen explains what responsive images are and how they work, and how to use the Picturefill JavaScript polyfill to get responsive images to work in browsers that do not yet support them. Then explore the two main types of responsive images (using the tag with srcset and w and the new tag), and work with the production-ready code examples in the practice window to get hands-on implementation experience.

Introduction
Welcome
Who is this course for?
1. Responsive Images: An Introduction
How images on the web work
How responsive images work
New attributes and terminology for responsive images
2. Making Responsive Images Work with Picturefill
What is Picturefill?
Adding Picturefill to your site
Testing to make sure Picturefill works
3. Making Regular Images Responsive
When to use responsive images with the tag
Preparing images for responsive display
Introducing srcset and w
Using srcset and w
Introducing sizes
Using sizes
Advanced layouts with srcset and sizes
Targeting resolution density with x
4. Responsive Images for Art Direction
Introducing the element
Identifying breakpoints and layout changes for your images
Preparing images for element
Using the element
Challenges with responsive images in art direction
5. Beyond Traditional Image Formats
Using the element for image type fallbacks
Going Further
Responsive images are part of the new world of RWD

Download File Size:435.89 MB

---