Responsive Media

with Christopher Schmitt
please wait ...
Responsive Media
Video duration: 0s 58m 10s Beginner


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.

Topics include:
  • Using percentage-based values for scaling
  • Resizing typography
  • Using icon fonts
  • Embedding HTML5 video content
  • Resizing and compressing raster images
  • Compressing vector images
Illustrator Photoshop


- [Voiceover] Hi, I'm Christopher Schmitt, and welcome to Responsive Media. In this course, we'll look at the basics of responsible design. Followed by how to influence type, video, vector and raster images to better take advantage of this new multi-device web. We'll start by showing you the basics of responsible design. First, we'll convert a fixed width layout into a fluid grid layout, so it can adapt to different devices and their screens. To complement that approach, we'll talk about how mini-queries can be used to pinpoint custom design experiences, for the different sizes of the user screen. After that, we'll work on how to adjust native html5 video and third-party players for better presentation and a responsive design.

Then, we'll focus on familiar web image formats like ping and jpeg, along with newer vector image format, svg. In the context of responsive web design, and how to prepare and serve them. Because the web does not stop at our desktop computers, we'll be covering all these features, plus tools and techniques, to get the most out of our videos, fonts and images for our web pages for this new multi-device web. Now, let's get started with Responsive Media.

please wait ...