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
more link interaction.
Each menu item gets a class of
js-menu-item and ACC admins can also add a class of
js-hidden-medium or add both classes to hide menu items at small and medium resolutions.
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.