Style: from tile to guide to browser

American Craft Council (ACC) went through a brand overhaul in 2015. As our partner, we worked to extend their new brand on the modern web. After gathering critical stakeholder feedback in the form of a design questionnaire survey, we got to work consolidating feedback into a style tile full of design components.

Design Component: Teasers

Promoting visually engaging content was one of ACC’s primary goals in the visual overhaul of their new website. We focused on getting images to render in a flexible way that is both user-friendly from an administrative point of view and visually engaging on the frontend. Part of the presentation of imagery lies in content summary views or “teasers.”

A teaser typically consists of a lead image, headline text, and truncated summary text (~150 characters). Articles and blog posts received a square image treatment, while ACC Show content was highlighted from the rest of the Events Calendar with a yellow background.

Design Component: Colorbar

Adding a splash of color to content headers both adds interest and creates a sense of visual hierarchy.

Frontend Technology Specifics

Flexbox and Priority+ menu pattern

American Craft Council set their browser requirements high: targeting only modern browsers like Internet Explorer 11, Edge, and all modern versions of Safari, Chrome, and Firefox. Our ability to target only modern browsers allowed us to take advantage of more modern web technologies, like Flexbox.

We’ve written about Flexbox in the past, and we’re always thrilled to use it on a project. For ACC, we started light by executing a Priority+ menu pattern in the header. This way we avoid the hamburger menu pattern and give users more at-a-glance information up front. Better yet, ACC administrators can control which menu item links appear at which screen resolution breakpoint.

Class-driven and progressively enhanced

The Priority+ pattern only works if JavaScript is enabled in your browser. Without JavaScript, the site design degrades gracefully and the Priority+ pattern doesn’t become a piece of functionality that will break if JavaScript is not enabled. The menu items will display in full at all resolutions rather than collapsing selected menu items into a more link interaction.

Each menu item gets a class of js-menu-item and ACC admins can also add a class of js-hidden-small or js-hidden-medium or add both classes to hide menu items at small and medium resolutions.

See the Pen Priority+ navigation by Joe Tower (@joetower) on CodePen.

Flexbox grids: keeping content aligned

The ACC “Stories” page is a great example of leveraging the power of Flexbox for truly awesome alignment of objects with varying heights. Each row of story teaser items has different text heights. By using flexbox’s align-content: stretch and align-items: stretch properties on the container that wraps each item (ul), along with some creative background-color placement, we achieve the appearance of equal-height columns of content.