Learning Responsive Media

Make your media as responsive as your site's layout. Learn to prepare video, fonts, and images to display correctly on a wide variety of devices.

Introduction

• Welcome
• Using the exercise files
• The software

1. Responsive Basics

• Setting viewport initial scale
• Using percentage-based values
• Setting breakpoints

2. Responsive Type and Icons

• Resizing typography
• Using icon fonts
• Customizing icon sets

3. Responsive Video Techniques

• Setting up an HTML5 video player
• Flexible video embedding

4. Responsive Raster Images

• Raster images vs. other file types
• Resizing raster images
• Compressing large images
• Swapping responsive images
• Combining techniques

5. Responsive Vector Images

• Making SVG elements
• Compressing vector images

Conclusion

• Next steps