24 ways

Each December, Drew McLellan and his small team of elves publish 24 ways, a daily dose of design and development goodness that delivers a little Christmas cheer to the web community during the period of advent.

The previous website, designed by Tim Van Damme in 2007, pushed the limits of the medium but six years later, and with an accumulated archive of hundreds of articles, it was beginning to fray at the edges. Aesthetically a bit tired, the site also failed to reflect the best practice its authors were now advocating such as advanced web typography, accessible design and the latest CSS techniques. The layout was responsive (thanks to some retrospective hacking) but a fresh approach was needed to effectively deliver content to the broadening range of devices accessing the site.

With content that tended to be forward-looking, the design could afford to be also. With an audience using bleeding-edge browsers and not afraid to view source, I could use future-facing techniques that might ordinarily be avoided on most projects. In my article The Web Aesthetic, I urged designers to move beyond traditional print-inspired layouts and instead look more to other examples of digital software — all while being true to the universal nature of the medium. Could this be an opportunity to make those ideas real?

Setting the tone

24 ways is not a commercial venture, and with little budget to spend on web fonts, I sought out open source typefaces. I settled on Adobe’s Source super-family; using Source Sans Pro for headings and reference copy would give the site a clean, modern feel; the Source Serif Pro to give articles a scholarly tone and provide typographic contrast, with Source Code Pro available for displaying any code samples.

Keen to exploit the very idea of 24 ways – different articles, written by different authors, published over twenty-four days for almost nearly a decade – I created a palette based on the publication’s signature red, that subtly changes over time based on both day and year variables.

Where the previous design used a rigid template across all sections of the site, which often dominated the content, I created a series of responsive templates each suited the task in hand. These were supported by application-like navigation conventions, with subtle animation to add delight to the interface.

Beyond the visual aesthetic, I was keen to employ best practice with regards to the front-end implementation. This included the use of BEM-like class names, modular components and conditional loading of non-essential page assets, such as comment threads. This improved the performance on the site, especially on mobile devices where bandwidth is more constrained.

Keen to exploit the very idea of 24 ways – different articles, written by different authors, published over twenty-four days for almost nearly a decade – I created a palette based on the publication’s signature red, that subtly changes over time based on both day and year variables.

Continual refinement

The redesign was warmly received by the readership, leading to the project winning Best Collaborative Project at the 2014 net Awards. In the years since, I have taken the opportunity to revisit aspects of the site to ensure the code and design remains relevant. In 2016, I abstracted the components used to build the site into a publicly available component library, and in 2017 reviewed the code to ensure the site was accessible to all, a process I documented on CSS-Tricks.