Responsive Web Design — Part 3

This is a followup to my previous blogpost, found here.

Media queries!

Media queries allow us execute certain CSS statements when a specific condition is met. This is incredibly powerful for us because it allows us to change the way our page will look depending on what query we set!

Some media query parameters are:

min-width
max-width
min-height
max-height
orientation=portrait
orientation=landscape

And here is an example of one in use:

@media (max-width: 360px) {
.subtitle {
display:none;
}
}

Lets break it down

@media (max-width: 360px) {

This line begins with @media, telling the css that the following code will be a query based on the device. The parameter ‘max-width: 360px’ is our query, which states that if the devices screen has a width less than the max-width value it will execute any enclosed CSS.

.subtitle {
display:none;
}

In our case we are setting elements with the “subtitle” class to be hidden. Here is that media query in action:

Mess around on this page for some fun media query stuff yourself!

Designing Around Media Queries

In order to design around media queries we need to think about breakpoints. Breakpoints are screen sizes where our content’s layout should change. If you read part 1 of this blog series you may remember this picture.

This image outlines good sections where we should break up our design. The major breakpoints (480/768/1024) are where large content changes should occur. The minor breakpoints (320/720/900) is where small cleanups should happen within our design.

When designing our pages, its very important to start small. It’s much easier to add content and sections as we go than it is to remove them later. So when designing your pages, start with a layout that works on small screen sizes, then expand your content and add a breakpoint once things start looking weird.

I recommend looking at the weather example found here for a proper example of adding breakpoints: https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints?hl=en

Lastly I will leave you with some webpages that properly use different patterns in responsive design. I hope these posts have been helpful and you will take into account these guidelines when creating your website!

Pattern Diagrams found from Google Developers

Mostly Fluid

Column Drop

Layout Shifter

Tiny Tweaks

Not much of a pattern design here, just small changes as the screen size changes.

Off-Screen

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.