Viewers: in countries Watching now:
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.
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 compliment that approach we'll talk about how media 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 I'll focus on familiar web image formats, like png 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 webpages for this new multi device web. Now, let's get started with responsive media.
There are currently no FAQs about Responsive Media.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.