Responsive Web Layouts

Responsive layouts

In this lesson, we’ll see what we can do to adjust our websites to various devices.

In a well-known metaphor, we can imagine our content like water. Bruce Lee famously said, “You pour water into a cup; it becomes the cup.” Similarly, our content can be thought of as the “water.” And the device we view this content on is like a “cup.” So if our “cup” is a mobile device, our “water” (i.e., content) will fit into this “cup.” If our “cup” is a monitor on a desktop computer, the content will fit the available container.

A popular way to achieve this is by using media queries. Before we get started with media queries, let’s first consider some content and how it should fit the available space.

Here’s an example. On a mobile device’s browser, this non-responsive layout will look like this: