Next Steps Design

We’re on the road this month, with conferences in Canada and in Europe. We’re expecially excited to present Aldus@SFU in Mainz, Germany at By the Book, a gathering of Publishing Studies scholars from around the world. In preparation for that, we’ve unveiled a new look and feel for the website. This gives me an opportunity to talk about web design process on Aldus@SFU.

Alessandra, reportedly inspired by no less than Fra Angelico(!), drew up a new colour palette for the site that I think is definitely giving Renaissance vibes. And then building on that, she developed a wireframe and mockup to give both colour and new structure to the site. While retaining the straightforward simplicity of the site as it has developed so far, Alessandra’s new design adds richness, context, and some new features.

I took Alessandra’s design docs and did what is commonly done in web design: translating boxes into divs. Which is to say: rendering the visible structures into structural components in HTML: the page header and its components, footer and components, and then the pieces that make up the main body of each page (or each kind of page) on our website. Once the HTML div elements are defined, we can start painting them with the appropriate colours and layout treatments.

Our website is built using the Eleventy static-site generator, which takes content and metadata files and merges them with page templates defining layout, design, and navigational structures in HTML. We have developed a set of such templates: one that defines how a ‘book page’ looks and works; templates for contextual information (such as the new ‘Learn’ section), and templates that set up how site navigation works: the lists of books by date, by language, and by format, for instance. So those template files are constructed in large part using the div elements that are derived from Alessandra’s design master.

That part is structural, and pretty simple – simple by design, as a big goal of this project is to ensure that this online resource is easy to maintain and straightforward to preserve for the long term. So the templates are kept as simple as possible. A good deal more complexity ends up in the CSS stylesheets for the site, where the details of design, layout, and colour are defined, and fine-tuned for each of the sections of the site.

We made strategic use of CSS variables in the stylesheet. For example: Alessandra’s colour palette (two blues, two reds, two shades of gold, and a couple of off-white variants) are defined at the top of our stylesheet as named variables. That means we can refer to them again and again in the details of the sheet, in multiple places, and if anything needs to change, we can change a colour globally simply by tweaking the colour definition in that named variable.

We employed a similar strategy with typograpy (the font-families used, as well as type size) and with margins and widths: by setting up some standard values for left margins, we can apply them as needed to various page components so that we have coherent margins all through the site. If we want to tweak a margin, we can just tweak the variable defition, and the whole site changes globally.

That strategy also helps us make the site readable on a phone: a second definition of those values collapses all the margins to make sense on a phone. Again, a change in that one value applies throughout.

 @media only screen and (max-width: 600px) {
  :root {
    --basemargins: 1rem; 
    --mainlm: 1rem; 
    --articlelm: 1rem; 
    --textcolor: #222;
    --textsize: 14pt;
    --navtextsize: 13pt;
  }
}

The design is, as with everything, a work in progress. This won’t be the end of the story, for as we spend more and more time with the project – and as we ourselves have started to use the site as a quick and handy resource to the Aldine collection – we keep tweaking the site and its design. We’re not simply building this resource for people out there; we’re also building it for ourselves, and for people like us, doing related research – or building similar projects.