Lothar Tautz

2019 – ongoing

Introduction

This site started its existence as a political campaign site 1 for Lothar Tautz in 2007 and was originally created by an advertisement agency.

I took over in 2008, making this my 1st commercial project as a freelancer. Since the campaign had not have the desired outcome, I was tasked with remaking it into a site, show casing the current political activities and educational offerings by the sites owner.

closeup screenshots of Lothars website
Lothar Website in its first versus its current iteration.
(Frist iteration—Large version; Current iteration 4—Large version)

Over time articles, essays and speeches were added, as well as a biography and bibliography.

In 2019 Lothar retired and I remade the site as an archive of said writing and speaking. Since most of his work is based in his own experience in the East German opposition, it is of historical value and will be used as an archive going forward.

I am currently in the process of updating the design and adding new contents.

This page uses the article template, with an exact copy of the templates HTML and CSS. The CSS is not compressed here, so feel free to dig into code. I strongly recommend using Firefox, so you can highlight grid and flexbox with ease.

1: Sadly his run was unsuccessful.

Facts & Stats

  • fully responsive, mobile first designed
  • framework free, CSS grid based
  • Average page size: 100kb
  • of that CSS: 7.44kb (minified)
  • Average loading time: 1.2 sec. on 3G (simulated in Firefox)
  • uses 2 font files, as the chosen family, Now is not yet available as a variable font
  • both files use a custom subset created via font squirrel
  • the subset was created after consulting open type features I wanted to keep, by checking via wakamai fondue
  • images are hand optimised with Image Optim

Tasks

  • start to finish design & coding
  • content
  • maintenance

Timeline

  • 2007 – 2008: political campaign site, build on a custom CMS
    screenshot of the first version of Lothars website
    Lothars Website in Version 1. This version was created by an agency in Dresden Germany. (Large version)
  • 2008 – 2012: static site with new design, which was really not good as I was still a very young designer and coder at the time
    screenshot of the second version of Lothars website, a very unusuable version with small type and bad colour contrast
    The second iteration. I was still a beginner and had no real idea about contrast. (Large version)
  • 2012 – 2019: Wordpress based custom CMS with vastly improved styling, accessibility and performance
    screenshot of the third version of Lothars website
    The third iteration: the return of search, better navigation and accessibility. (Large version)
  • 2019: static site again, with some design updates, first time responsive design and strongly improved performance focused front end coding
    screenshot of the third version of Lothars website
    The third iteration: the return of search, better navigation and accessibility. (Large version)

Process Documentation

I approached Lothar about a mobile friendly site refresh in 2018, but we decided to hold off in it until after his retirement in early 2019.

Since Lothar liked the last design iteration (originally from 2012), I proposed to focus the update on mobile friendliness (the last iteration was mostly fluid, but certainly not responsive) and updating the typography to improve readability.

The design took place entirely in the browser, aided by frequent feedback rounds with the sites owner.

I focused on creating easily usable, very performant and progressively enhanced templates (though there is still room for improvement), by using CSS grid, removing previously used images for the background and the header and removing gradients and too strong box shadows to make it easier on the eyes. I also increased the contrast between text and body colour to improve accessibility.

Another area of focus was improved typography. The fonts used previously (Delicious for flow text and Museo Sans for accents 2) had become a bit stale and did not look as good in larger sizes. I replaced them with Now, which is a rounded sans-serif. I wanted to employ a serif font, to ease reading, but Lothar wanted something sans based. Now was a good compromise.

Since many essays are heavy on footnotes (like the basis for this page) I decided to introduce a 3rd column in which footnotes are displayed, usually at the end of each paragraph, but align-self 3 can easily change that. On smaller screens and if no grid is available, the footnotes are displayed at the end of each section or article.

I archive this by displaying each section as its own grid (sub-grid could potentially simplify this) and placing each footnote to its paragraph. I currently have not found a reliable way to place the footnotes right where they appear in the text, but I am looking into that. The Footnote placement is defined in a style element in the head on a per page bases.

The 3rd column is also used on archive pages to show where and when a given text was published.

closeup screenshots archive pages
CSS Grid works wonders when trying to align content.
(Non-cropped version)

The left column menu (which is only shown on pages with more then one section; if you view this page on a larger screen, it is right to your left), uses sticky positioning. This progressively enhances navigation on larger screens; on small screens and older browsers, the navigation will simply stick to the top. Using JavaScript for this function would be overkill, so I am happy we can do this in CSS now.

In the near future I will need to update the footer design, update the leading (line-height) in the 3rd column, so footnotes line up with the base-line of the body copy, figure out a better way to style emphasis, since the font lacks a true italic and create a proper print stylesheet, so articles can be printed with ease and without wasting space on things that do not need to be printed.

2: Both were made by exljbris Font Foundry and rather popular in the early 10s. Now, I consider using Calluna in a project.

3: There is never any need for monospace type / code on Lothar's site, so I wont add it here either. Usually this should be inside a <code /> element.