02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoPrevious Video

Creating responsive designs with size ranges

<p>In the last lesson we created a web page that was fully optimized for a specific device. With 100's of different resolutions and settings it would be impossible for us to create a specific design for every single device on earth. In a real world scenario we would usually use what we learned in the last lesson to tweak and improve our design for specific devices. </p><p> For us to design a design that don't target one specific device or resolution we need to be able to define ranges of acceptable parameters. By defining ranges we open the door to responsive designs and enable our design to look great in the ranges that we wish to manage. In this lesson, we will learn how to create a responsive design that would modify dynamically as the users change the way they interact with it. By the end of this lesson, you will know how to work with the min/max prefixes to create responsive designs. </p><h2>Keynotes:</h2><ul><li> What are responsive designs</li><li> How to create responsive designs </li><li> Working with min/max prefixes</li></ul><h2>properties: </h2><p>media queries, HTML4, CSS2.1, width, height, minprefix, max prefix</p>

What is responsive Design?

By the end of this lecture you will know the differences between them and by the end of this chapter you will have the tools needed to create responsive designs.

04:30

Optimizing for a specific device

In this lecture we will be introduced to the way to work with expressions.

07:52

Creating responsive designs with size ranges

By the end of this lesson, you will know how to work with the min/max prefixes to create responsive designs.

07:42

Mobile responsiveness

By the end of this lesson you will learn about how to optimize mobile responsive design and how to update the orientation of the design based on device orientation.

06:58

Backward compatibility

There is a limit to how far in history we will be able to support our layout but there are some things we can do to extend the support to older browser and that will be our main topic.

03:51