Getting Fluid with the Grid

It's the foundation for your responsive designs.

Benefits of Building With The Grid

Build with the grid puts your design at a huge advantage:

Examples of Some Heavy Griding

One Flexible Image to Rule Them All

Flexible images aren't locked in fixed pixels.

What we mean to say, of course, is flexible media, which includes images and videos, that can adapt depending on the screen size. This type of media doesn't depend on static pixels or fixed sizing.

Flexible images are responsive in HTML to the width and height of a screen, as well as every pixel density from low res to retina displays. To make this happen, images are set at their max-width of 100% so that they can can rest in the grid, adjusting accordingly to a variety of screen sizes.

However, this is easy to do partway and hard to do right. Flexible images are simplest with just CSS and scaling with the grid. Harder is loading the right resources for the right device. It's possible to use hidden-classes to swap larger images for smaller ones on mobile. But both images will still load, which can muck up the performance of a page. This is something that we still have to work on to perfect.

Desktops, Tablets and Smartphones, Oh My!

Adjust page elements to your preference with media queries.

By setting specified attributes, you can control whether an element on the page appears larger or smaller. Or you can omit the element altogether for smaller or larger devices. The possibilities are practically endless.

When it comes to responsive design, media queries are the dilithium crystals that ensure we achieve warp speed. They are a crucial element in ensuring that we optimize our pages across multiple devices.

Developing With Media Queries

With media queries you can make your page adapt in big or small ways to a variety of criteria. Media queries are what make it possible to have a great experience, no matter what the physical hardware is like.

Media Queries and the Navigation

One common use for media queries is to make changes to your navigation. Consider a simple horizontal nav like you might find on a marketing site: Products, Team, Experience, Contact, etc. On a larger display that might work fine, but a wide nav on a smartphone will not. With media queries that check against the display width of the device, we can have a horizontal nav become vertical, for example.

This is a very simple example, but the key component is the media query. We’re stating that this applies to screens (this is pretty standard and there are some other options but not widely used) and that we want the following styles to apply if the screen has a max width of 767px, basically anything less than 786px.

Media Queries and the Grid

Perhaps the most common use of media queries in responsive designs is to make changes to a typographic layout grid. Most grids are built to be desktop first — they start by creating rows and columns, sometimes that are a fixed pixel size and sometimes percentages. On small devices those columns become unreasonably slim, so the simplest solution is to abandon them on small devices and have the content simply flow down the page. A simple example might be:

Very simple, but very effective. Many frameworks that support responsive design do something like this by default, though some follow a mobile-first philosophy and use media queries to add the column sizes back in, rather than removing them.

Media Queries and Content Length

A final common use for media queries (and don’t get us wrong, there are a lot of uses for media queries) is to manage the readability of your content. Using media queries to increase or decrease font size, and thus increase or decrease the content length of a line, is a common practice that can really help users have a better experience with your site.

Try using media queries to change your header and paragraph sizes, line heights or even typeface. There are some interesting and handy things that can be done by experimenting in this area that we won’t get into right here.