2015
Lynda
Morten Rand-Hendriksen
1h 22m
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.

1. Responsive Images: An Introduction
8m 28s
How images on the web work
3m 41s
How responsive images work
1m 52s
New attributes and terminology for responsive images
2m 55s
2. Making Responsive Images Work with Picturefill
13m 9s
What is Picturefill?
3m 50s
Adding Picturefill to your site
5m 20s
Testing to make sure Picturefill works
3m 59s
3. Making Regular Images Responsive
33m 31s
When to use responsive images with the tag
1m 37s
Preparing images for responsive display
7m 39s
Introducing srcset and w
2m 56s
Using srcset and w
4m 37s
Introducing sizes
3m 53s
Using sizes
3m 48s
Advanced layouts with srcset and sizes
5m 36s
Targeting resolution density with x
3m 25s
4. Responsive Images for Art Direction
17m 53s
Introducing the element
3m 35s
Identifying breakpoints and layout changes for your images
1m 47s
Preparing images for element
1m 59s
Using the element
6m 53s
Challenges with responsive images in art direction
3m 39s
5. Beyond Traditional Image Formats
5m 7s
Using the element for image type fallbacks
5m 7s
Going Further
2m 8s
Responsive images are part of the new world of RWD

www.lynda.com/CSS-tutorials/Responsive-Images/372539-2.html

Download File Size:139.41 MB

---