Different approaches to responsive images

web

Responsive images will automatically adjust to fit the size of the screen. This is important when we are designing websites or apps that adapt to the device or screen they are displayed on.  These videos walk through some common approaches.

While you are watching these videos, you should have a Codepen open so you can follow along and experiment. The videos require you to add images to the HTML. In CodePen you use the 'assets' panel to generate code for images. 

https://youtu.be/X2NhDmhakJA

https://youtu.be/t7OkPz4yakY

https://youtu.be/jlRMLwpee80

https://youtu.be/EeKZAUQbY2I


Previous
Previous

Wireframe to mockup

Next
Next

The magic of motion tracking in AE