Responsive design is a term coined by Ethan Marcote in a 2010 article that described how a website's layout (but not necessarily its content) should adapt to the size and format of the client device. A website on a phone for example doesn't have to look the same as on 27" display.

At the heart of this approach is the media query, a well supported piece of CSS code that allows you to set different CSS declarations depending on the size of the screen (or other parameters):

p {
  color: red;
}
@media ( min-width: 1280px ) {
  p {
    color: blue;
  }
}

The above code will tell the browser to render all paragraphs as red, except if the browser window is wider than 1,280 pixels, in which case paragraphs would be blue.

Adherents to responsive design's multi-device intention, later championed the "mobile first" approach. Meaning that one should first design for the smallest screen and then move on to larger ones. In practice not everyone sticks to that process, but most will follow the min-width pattern:

@media (min-width: 35.5em) {  } /* sm 568px */
@media (min-width: 48em) {  }  /* md 768px */
@media (min-width: 64em) {  }  /* lg 1024px */
@media (min-width: 80em) {  }  /* xl 1280px */

Grids

For better or for worse, grids are almost everywhere in design. They help structure information in a way that is orderly. In web design this often translates to fluid grids. There are many different approaches to simulating the cartesian plane in CSS.


float: left

Using the float property is probably the oldest technique.


.row {
  letter-spacing: -.31em;
}
.column {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
}
.half {
  width: 50%;
}
.third {
  width: 33.3333332%
}

Using inline-block is similar to what is found in many frameworks. Your HTML would then look like so:

<div class="row">
  <div class="column half"></div>
  <div class="column half"></div>
</div>
<div class="row">
  <div class="column third"></div>
  <div class="column third"></div>
  <div class="column third"></div>
</div>

display: flex

And finally there is the flex method. Which also requires a parent and a child element.

CSS Frameworks

Bootstrap, developed by Twitter, is the front end framework par excellence. It has it's place ironically in back-end development.

Pure.css is my favorite because of how un-invasive it is. Unfortunately, it’s not as popular as the others, and so, risks losing favor among developers. Not to mention being a Yahoo project gives it a rather precarious aura. Still, it remains highly useful insofar as calculating the nitty gritty of column widths is concerned.

Foundation is popular among some developers. I’ve never used it though, preferring SquareSpace for projects that had to be online yesterday.

Have a look at Font Awesome.

Homework

"On the Internet, nobody knows you're a dog.” (Steiner). Create a website that borrows the design tropes of a successful enterprise (government, corporation, funded startup, etc). Then sell me something absurd. Create something subversive or ironic. Or not; subvert this assignment. Check out Bite Labs and McMass for inspiration and the non-web but classic Yes Men.

Recommended

Take a look at Raster Systeme by Josef Mülller-Brockmann.