Learning Responsive Media
58mBeginner2014-06-26
Authors
Christopher Schmitt
Designer, Author, Chair of CSS Dev Conf
Course details
Why restrict yourself to inline images and static text, especially in our multidevice, multiplatform era? Responsive media allows you to share more content with more people. Learn what you need to know to build image- and typography-rich pages (with HTML5 video!) that display correctly on a wide variety of devices. Christopher Schmitt will also show you how to convert fixed-width layouts into fluid grid layouts that adapt to different screen sizes, use media queries to deliver custom design experiences, and prepare and retrieve PNG, JPEG, and SVG images so that they look their best.
Learning objectives
Using percentage-based values for scaling
Resizing typography
Using icon fonts
Embedding HTML5 video content
Resizing and compressing raster images
Compressing vector images
Learning objectives
Using percentage-based values for scaling
Resizing typography
Using icon fonts
Embedding HTML5 video content
Resizing and compressing raster images
Compressing vector images
Skills covered
Responsive Web DesignWeb DesignLearningWeb Development
Concepts
Introduction
- Welcome
- Using the exercise files
- The software
Responsive Basics
- Setting viewport initial scale
- Using percentage-based values
- Setting breakpoints
Responsive Type and Icons
- Resizing typography
- Using icon fonts
- Customizing icon sets
Responsive Video Techniques
- Setting up an HTML5 video player
- Flexible video embedding
Responsive Raster Images
- Raster images vs. other file types
- Resizing raster images
- Compressing large images
- Swapping responsive images
- Combining techniques
Responsive Vector Images
- Making SVG elements
- Compressing vector images
Conclusion
- Next steps