Understanding the Basics of "Responsive Design" & the @media CSS At-rule

"Adaptive" or "Responsive" design: What is it?

In 2010, many people were having smart thoughts about how to deal with a growing variety of screen sizes and how to best display content on them. During that time, Aaron Gustafson coined the term "Adaptive design." Ethan Marcotte was starting to talk about what he called "Responsive design." Conceptually these are the same, but Ethan talked more about fluid widths where Aaron's examples had harder breaks between design changes. These guys are great and contribute all sorts of ideas to the community. That being said — it doesn't matter what you call it. If I had my way, I'd call it "Responsive layout." Design is design, and responsive layouts are practical, although visually interesting, ways of displaying your underlaying design to a user.

What was it like before "Responsive design"

There used to be a pretty safe range of screen-size. It changed over the years — but I'd say there was a big span of time where everyone created websites, with HTML and Flash, at around 860px - 960px width. Sites were often made with tables and built with element background images. We still code email HTML in a similar way. Things weren't always ideal, but you could count on your website "fitting" on almost all screens.

What changed?

Screens got weird. They made small screens and large screens and touch screens and tablets and phones with the internet. You can surf the web on your television and with your game console. You never know how your website will be displayed. One static design wasn't cutting it. Half the internet is still not responsive so you just have to go to a bank or government website to see how things were in the 90s. Look at the DMV on your phone — and you'll see that it's basically useless.

Enter the @media rule

Håkon Wium Lie, who is known as the first person to propose the concept of CSS ("Cascading Style Sheets"), had mentioned the @media concept first in 1994, but it didn't get implemented by browsers until closer to 2012. The @media rule has a few different types. "print", "projector", or "screen" are some examples. It also takes some optional arguments — and that's where things get fun. This is what allowed us to query for browser or screen size, and apply different rules based on the outcome.

If I can now determine that my webpage is being printed, I can have some special styles. Wouldn't it be cool if you didn't print all the ads on a page when printing out a dinner recipe. Fat chance. Well, "print" can be useful, but we're talking about "Screens", right? Check out this example:

A CSS rule declares some styles for some type of DOM node that is identified by a HTML tag, class, id, data-attr, etc. (I'm assuming you know this already).

.selector { /* general rule */
  background: red;
}

@media screen and (min-width: 600px) {
  .selector { /* if the screen is at least 600px wide, apply this rule */
    background: orange;
  }
}

This ensures that when the screen is wider than 600px, a new set of properties and values are added to the .selector

Now you can create CSS rules to target the size of the browser window. Colors are great and you'll definitely use those, but widths are where layouts become fluid and respond to their parent window's size.

<!-- HTML -->
<div class='block one'>Block 1</div>
<div class='block two'>Block 2</div>
<div class='block three'>Block 3</div>

/* CSS */
.block {
  width: 100%;
  float: left;
  background: gray;
}

.one {
  background: black;
}

.three {
  background: lightblue;
}

@media screen and (min-width: 600px) {
  .one {
    width: 60%;
  }
  .two {
    width: 40%;
  }
}

@media screen and (min-width: 900px) {
  .one {
    width: 20%;
  }
  .two {
    width: 60%;
  }
  .three {
    width: 20%;
  }
}

Here is a live example of this code on CodePen.
Don't forget to resize your browser and see how it "Adapts" and "Responds" 😉

Responsive "Frameworks"

Before you reach for an all-inclusive magic* framework that promises to make your life easy and your website beautiful, take some time to practice the basics yourself. When you use libraries of rules such as "Bootstrap" there are side effects that will seem very mysterious because you did not write those rules and you don't understand the caveats when combining these rules. With modern layout techniques such as Flex-box, frameworks can be more of a pain then just writing your rules yourself.

Unexpected side-effect + Content strategy is revived + content-first / mobile-first

When you "build from a small-screen first" standpoint, you start to think about what fits. You start to develop different strategies for showing your content. You start to leave out the filler that people thought they needed to cover the 960px grid they were used to.

Final thoughts

I've been working with responsive layouts since 2010. I learned to write CSS as these changes emerged and I feel lucky not to have any bad habits from the past or fears of these new techniques. If you take the time to understand how simple an @media rule is—and how much that small thing changed everything—you'll be a lot better off than using one of the frameworks blindly. CSS doesn't have to be a mystery. Most people who complain about CSS never took the time to understand the basics of the box model or positioning. I don't use any CSS frameworks, and I think I'm much faster without them.

@sheriffderek

Set up a session and I'll teach you the ways!

......

I'm working full-time now - with Perpetual Education on their new learning platform. Check it out! It's by far the best way to learn design and development for the least money and the fastest results - and it's really fun. Seriously.

→ https://perpetual.education

Free advice sessions: no strings attached - just a real human who wants to help you become a great designer.