Responsive and Interactive Design

Lesson One: Media Queries

Media queries are the most important feature a web developer will use when making a responsive layout, they are esstentially CSS' version of if statements that allow you to specify a condition and change an element or classes style depending on its current condition.

Media queries are commonly used for making your webpage appear differently depending on the users screensize or screen orintation.

Below is the code to change a div containers background color depending on if the browser window is bigger than 1000px

Lesson Two: Breakpoints

Media queries are very powerful but to bring out their full power we can use multiple queries or breakpoints on a page to add support for multiple different screen sizes/devices.

You can add as many breakpoints as you want but a good minimum is one for mobile (less than 600px), tablets (more than 600px) and desktop (768px or more).

Lesson Three: Mobile First Design

Nowadays more people access the internet from their phones than using a desktop so as a designer it is good to approach web and ui design from a mobile first design (Developing the website to use mobile styles by default and changing to desktop with media queries).

The website will load faster and it is easier to blow up elements to a bigger screen than trying to shrink them down and reposition later.