Skip to main content.

Lothar Tautz

timeline: 2007 to present

positions: Web Designer

<span lang="de">Lothar Tautz</span> logo

Projects for Lothar Tautz anchor

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

I took over in late 2007, making this my 1st commercial project as a freelance web designer. 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 of the sites owner.

Over time articles, essays and speeches were added, as well as a biography and bibliography. In a second iteration, I moved the site over to WordPress, for which I also created a custom theme from the ground up.

Lothar Tautz site redesigns through time anchor

In 2019 Lothar retired and I remade the site as an archive of his 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 it is being expanded.

Timeline anchor

  • 2007 to 2008: political campaign site, build on a custom CMS
    Screenshot of the about page. Headline on top, menu to the side, main content scrolling inside a fixed frame. It is hard to see which parts are links and it has contrast issues.
    Lothars Website in Version 1. This version was created by an agency in Dresden, Germany. (larger view)
  • 2008 to 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 a publication page. The blackground is a light to dark blue gradient. Top is the heading, left the menu and right the main content. It is now fluid and not fixed in its height. Reading contrast is somewhat ok.
    The second iteration. I was still a beginner and had no real idea about contrast. (larger view)
  • 2012 to 2019: Wordpress based custom CMS with vastly improved styling, accessibility and performance
    Screenshot of the same publication page. The main contents are now presented on a white background for improved contrast and readability. Left column with navigation and search. Right column with main content.
    The third iteration: the return of search, better navigation and accessibility. (larger view)
  • 2019: static site again, with some design updates, first time responsive design and strongly improved performance focused front end coding
    Screenshot of the same publication page, again. On the left an optional index, middle column the main content and on the right optional footnotes.
    The forth and current iteration: largely the same design, but better html. Also, the navigation was simplified and moved to the footer, the left nav is now an index. (larger view)

Process Documentation anchor

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

Since Lothar liked the then current 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 an update to 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 always 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 previously used (Delicious for flow text and Museo Sans for accents) 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 a sans serif type family. Now was a good compromise.

Screenshot showing the new font, now. It also shows how the index menu is fixed in place on scrolling.
Switching to Now improved readability. This also shows the sticky sidebar menu (see below) (non-cropped view)

Since many essays are heavy on footnotes I decided to introduce a 3rd column in which footnotes are displayed, usually at the end of each paragraph, but align-self 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 and linked.

Screenshot showing a foot note. They are shown at the bottom of each paragraph in large screens and at the end of the article on small screens.
While only paragraph aligned, the footnotes are easier to find this way. (non-cropped view)

I archived 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.

Screenshot of an archive page. Left column has an index, the middle column lists the main information of each publication, the right column (which is following each main column on small screens) lists auxilary information, like publishers and dates.
CSS Grid works wonders when trying to align content.
(non-cropped view)

The left column menu, 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 future I still want to add good print styles so longer essays can be printed well. Sadly printer styles have gone out of fashion, but they still have many uses, one of which is to print to pdf.

project meta data anchor

tasks & tools

time

2007 to present

position

Web Designer