The Great Discontent

How do you work with a strict design to build a flexible grid system?

The Problem

The Great Discontent is a print and online publication which highlights the risks and personal journeys of artists, musicians, and entrepreneurs. Alongside the release of Issue 2 for print, The Great Discontent needed help building out parts of the redesign of their site. At this point, the archive had become quite large, so the index needed to be elegantly traversed and filtered. In addition, the home page needed a modular grid system that would display any media thrown at it. Oh, and did we mention responsive images?

Guiding Principle

Responsive designs shouldn't sacrifice styling.

The Process

Build a modular and extremely flexible grid system

TGD’s web site design is unique in that its grid system was quite strict at all resolutions–it needed to never break horizontally or vertically. Also, the width and height ratios were to remain constant and fluid across the board while maintaining a constant margin between elements.

Each "tile" on a page could feature text, image, or a combination of the two.

Tiles were given vertical padding based on the ratio the design called for. These ratios were tied to simple class names that could be used throughout the grid system. For example, .s13 would mean ⅓ wide, .s23 would mean ⅔ wide, and .s100 would be full width. Each "tile" in a group would use a pseudo element to force a vertical padding so its ratio would remain fluid on screen resize.

This was very important on the home page, where large imagery and quotes were displayed. As a bonus, this grid system could be used anywhere else on the site that called for it.

"Andy was the secret ingredient for our more complex development solutions. He was a wizard when wizardry was needed. Oh, and he didn't break things."

Ryan Essmaker

Co-Founder, The Great Discontent

Find a simple way to traverse a large catalog of archives

As with the home page tiles, the archive tiles would need to maintain a certain ratio throughout all screen resolutions. That was the easy part.

With over 150 interviews at the time, and many more to be added, they needed to be filtered by topic and sorted by publish date and name. MixItUp, a filtering tool, ended up being the best solution for TGD as it fit the requirements for extensibility and performance. It also played well with lazy loading techniques.

Make a library of large image responsive and keep the download size small

TGD features a lot of extremely large and high-resolution images to reinforce the interview content. With a combination of responsive image serving from imgix and simple lazy loading techniques, the proper resolution image for the screensize is shown and no extra data is loaded in the background. This provides a super speedy load time with less data usage, and images are rendered beautifully on high-DPI screens.

Result

TGD's website design doesn't just work at all resolutions–it maintains consistent width and height ratios and a constant margin between elements. All while being beautifully fluid.

The Great Discontent

thegreatdiscontent.com

The Great Discontent tells the stories of artists and creatives. Essential to that came in the functionality of the site itself. We worked with them to build the same pleasing experience, no matter the device.

Competencies used
  • Front-end Development