taotsu.net

now: interdisciplinary portfoliomore

Annette Hildebrandt

2018 – 2019

Introduction

Annette Hildebrandt was my 2nd commercial customer. When she opened up her cultural project management office in 2008, she approached me to create a site for her, showcasing projects and work areas she offered services for.

Over its life span, we added books and novels she was written, while I was maintaining the contents.

In late 2018 Annette approached me to remodel her page into a purely biographical site, focused on her writing. This was in preparation of her retirement by the end of 2018, giving me a window of roughly 2 months to complete the project.

Facts & Stats

  • fully responsive, mobile first designed
  • framework free, rather traditional single column code
  • Average page size: 320kb (most of this is the font @ 266kb)
  • of that CSS: 4.18kb (minified)
  • Average loading time: 5 sec. on 3G (simulated in Firefox)
  • uses 1 font file, Inter a variable font (this may be switched over to the hosted version, but currently is hosted locally, if I cannot find a reliable way to subset the font)
  • images are hand optimised with Image Optim

Tasks

  • start to finish design & coding
  • content
  • maintenance

Timeline

  • 2008 to 2013: fully static site with fluid templates, but issues with readability and contrast
  • 2013 – 2018: updated the site to php, for better maintenance and made it more accessible, focusing on screenreader support and better contrast
  • 2018 – 2019: complete relaunch as a static site, with fully responsive templates, strongly improved accessibility and usability

Process Documentation

In November 2018, in preparation of her retirement, Annette approached me to create a new, personal site for her, with stripped version of the content of her original site.

She gave me card blanche in terms of the design, only requesting to have it launched by January 2nd 2019. This gave me roughly 2 months to design, code and launch the new site.

The site design was inspired by an experiment with CSS writing modes, Jen Simmons had created. Since Jens experiment was about Octavia Butler, it just felt right to create a design based off the same approach. The layout you see right now, is the exact one used on the live site.

The 6 sections of the office site were reduced to 3 (home, Biography, Bibliography + Imprint) and the design was build with a strong focus on readability and high contrast between text and background. My original design from 2008 had failed on that front and badly, so I really wanted to get it right this time.

Annette really enjoys sans-serif fonts (the precious one used Verdana; a ghost from the days where we only had web-safe fonts…), so I chose Inter as a variable, open source option to create a similar, but more modern look and feel.

If we had enough of a budget, I would have chosen a typekit subscription and used Neue Haas Grotesk, but that was not possible at the time and I believe there is no variable front available.

The head line for each section uses the writing mode and falls back nicely, if the used wiring mode is not supported.

comparative image

With the very short turn around time, I opted for a single column layout with the section headers as breakout items and strongly contrasting colours. This achieves a visually interesting look and feel, while using easy to maintain CSS and HTML.

As a result, Annette wes very happy with the look and feel as well as the short turn around time.

In the future we might add some out-of-print books and I will need to add a proper print stylesheet. While they have come out of fashion for normal websites, I still think it is good to have them around.

Additionally I will have to find a way to reliably subset the variable font. I hope this is possible, because currently it is comparatively too heavy.

Current as of .