Week 4. CSS Layout & Responsive

Preamble

“Every material has a way it likes to flow”


Every material has a grain.

Take wood for example. Wood grain generally means which orientation the wood fibers go. One of the most fundamental sayings of woodworking is to cut wood “with the grain” which helps improve the strength of whatever you’re creating.

In other words, it’s good to first understand your material so you can work with it, not against it. You can best collaborate with your material if you understand its inherent tendencies.

The idea that the web has a unique grain comes from Frank Chimero, in his piece The Web’s Grain from 2015.

  • I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology. Too often, the internet is cast as a wide-open, infinitely malleable material. — Frank Chimero

So what is the grain of the web?

Using CSS, you can position items across the page—things don’t have to appear one after the other in succession. But historically, CSS layout isn’t the most intuitive. Thankfully there are new methods—like Grid Layout and Flexbox, that make things much easier. But it’s important to understand the others as a basis since you’ll likely use a combination of techniques to attain your desired result.

If you haven’t already, I highly recommend going through all 19 steps of learnlayout.com. 🙂 

Learning layout and positioning requires study, practice, and trial and error. Be patient, open up your web inspector, and have fun!

Part 1. Fluidity



The web was first created as a way to share documents with anyone. Like we mentioned, many of the first people using the web to share documents were academics, or professors. You’ll see many of their sites are mostly text-based, with an image or two here and there.

Because the web was designed to present content in the form of documents, we believe the web’s grain is most easily visible the way text moves when you make the browser window a different size.



Try opening these three webpages and resizing them by making them wide and narrow, and seeing how the content is affected:


Text is inherently responsive. It goes with the flow. That's why so many old websites that are mostly text are surprisingly responsive by default.

But learning from the above examples, besides text, we can format other media so it goes with the flow, too. And maybe in general we should design how we read … left to right, top to bottom...


More broadly, responsive web design is a specific approach that focuses on websites rendering well on a variety of different devices — from mobile to tablet to desktop. A variety of techniques are employed to do this, including media queries which we touch on later on this page.