Responsive and Interactive Design

Responsive Web 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

Hi I am a cool paragraph and will change to a green background at a width of 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).

Hey Im an even cooler paragraph than the last guy.

At mobile size I will have a blue background,
At Tablet size it will be green,
At Desktop it will be red.

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.

Oh hey, its me the coolest paragraph on the page and would you believe it, but by default I am taking the mobile styles first and then being changed if you have a bigger screen