Creating responsive designs with size ranges

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.

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.

Keynotes:

• What are responsive designs
• How to create responsive designs
• Working with min/max prefixes

properties:

media queries, HTML4, CSS2.1, width, height, minprefix, max prefix