State of Play Reports II
The overview and category pages
In diesem Beitrag geht es um die This post is about the overview of the available state of affairs reports. The design should clearly differ from the previous category pages.Übersicht über die verfügbaren Sachstandsberichte. Das Design sollte deutlich von den bisherigen Kategorienseiten abweichen.
I told you about my reasons for the new content format for the state of play reports in State of Play Reports Part I. It was to be a new, independent format with a layout that gives me the opportunity to add photos to the content. It was to be a new, independent format with a layout that would give me the opportunity to add sufficient photos to the content and to comment on my reflections on the content. The idea is that readers accompany me in the development of the text, from the beginning to new research to ever new additions.
I honestly have no idea yet where all this will lead, it is definitely a very elaborate way of developing and writing a text, but more about that later.
Anniversary!
I am also extremely pleased that this is post number 60 on my blog today. 60 posts since the first new post on 1 May 2019, which was naturally also one from the engine room.
Layout
Category pages and overviews
With the re-launch of the blog in 2019, there were no category pages at all. The content management system behind cronhill.de and blog.cronhill.de is MODX. Unlike Wordpress, MODX is not geared towards blogging, its strengths lie more in clean templating and the structured creation of pages with different layouts. There is a comment system (QUIP), but categories per se are not part of the basic equipment. In addition, I write in three languages and that is not so easy in Wordpress either.
Each category has to be created as a separate page. That sounds cumbersome at first, but it disciplines surprisingly well. In my eyes, readers are not helped by an overflowing tag and category system if, after one click, only one or two articles are hidden behind a category term. With a few overarching, more general categories, there is greater depth with less lateral expansion.
Until October 2010, the categories, as here in this post, were only accessible on the left under the meta information. Then in early to mid 2021 I listed the categories on the blog page linked in the header, by which time there were 11 categories. And finally from July 2021 there are six highlighted categories. The highlighting is done manually, which means I can always set new priorities. For example, Star Trek will probably be kicked out shortly after the disappointing second season of Star Trek Picard, instead I may put the category »From the Engine Room« in that place.
The pictures give the previously very reduced blog page a more emotional touch, make the topics seem more lively and interesting.
Technically, this works quite simply. Since each category in the system is a page, connected to its English and French siblings, these pages simply have a different layout, the template for the highlighted categories is called 04.02.Blog.Category.Highlight, for example. All templates in my system have numbers and names. The numbering method must have stuck from my school days, because the first programming language I learned there around 1982 was Basic on a Wang 3000 computer. And in Basic, each line of the programme is numbered, and the main advice from my mathematics high school teacher, Dr. Braun, was to use three-digit line numbers in increments of 10 right from the start.
If the highlight categories have a different template, as described above, I can simply list all the categories with that template on the main blog page in the header. These are the six at the top. All the others are just listed as a simple list below.
For the highlight categories, a small snippet (thanks G.) calculates the word total and adds up the reading time. Whether this is of any help to readers here I can't say, but I find it a nice gimmick. It can be read out, for example, that my garden posts are usually shorter than my posts on Swedish nightingale Jenny Lind.
So as category pages there were already two possible layouts to choose from and I didn't want to deviate that much from them with my state of play reports overview page.
Inspiration
The State of Play Reports Overview Page
State of Play Reports Overview Page is indeed a very unwieldy, perhaps even somewhat bureaucratic term. For the layout, I was inspired by two circumstances.
Gwern Branwen
I was very inspired by Gwern Branwen's website in terms of layout and possible text density. His website is a mixture of blog, knowledge database, protocols of his self-exploration. Every little step is tirelessly documented, and for web developers his website is an interesting source of inspiration.
For a long time, I have been fascinated by his initials, see for example this page. Initials are enlarged, usually decorated initial letters of chapters. In the Middle Ages, the initials were painted into the books by the rubricator.
The Rubrikator
A rubricator was a scribe and painter engaged in rubrication who undertook the insertion of red text elements into the already written manuscript. Among other things, he produced the rubric capitals in red and blue, mostly by hand. To avoid spelling mistakes during the colouring process, the printer printed a placeholder (representative) for the initial. This was then painted over by the rubricator.
The profession of rubricator died out with the increase in print runs due to mechanical letterpress printing. Books were no longer produced in editions of 10 or 20, but in 100 or 1000, and it was simply cheaper to print an initial directly.
Initials
So I wanted an initial in any case. I looked around a bit in old font catalogues and found a few interesting initial fonts, but then came to another solution that has a lot to do with the slightly different logo of blog.cronhill.de.
Here is the word blog, set in blue from Georgia, a modern antiqua of the twentieth century behind the IBM Plex monotype. Georgia was designed for Microsoft in 1993 by the British type designer Matthew Carter. It was intended to be legible even on low-resolution screens and has a very high contrast between normal and bold type, wide letter spacing and a character design that should eliminate confusion between 1, l and I as much as possible. I decided on the Georgia for a number of reasons, but I want to blog about that here another time, the essay has been lying around here 75% finished since 2019. The IBM Plex family was developed for IBM in 2017 by Mike Abbink at IBM in collaboration with Dutch agency Bold Monday.
And just like in the modified logo of blog.cronhill.de, I wanted to design the initials as well. And this is how they look now:
The typesetting of text
An inspiration from the last century
The text set in the left column of the new overview page is also something special. I got the inspiration for this from the Desk Book of Type Specimens - Borders Ornaments Brass Rules and Cuts Catalogue of Printing Machinery and Printers' Supplies 1900 by the American Type Founders Company. Everything for the printer is the title of the catalogue and that is not too much of a mouthful. What this catalogue offers on its 1267 packed pages is probably the wet dream of every vintage printer. What variety was offered here!
And on the digital page 10 of the linked document, we already find the source of inspiration for the text, it is the introductory text to the catalogue, which begins gracefully and at the same time modestly with the words: "To the printer". Of course, the digital typesetting does not come close to the original, but I liked the idea of incorporating this layout quotation into my page as a small reminiscence.
Technical implementation
Javascript as my personal rubricator
There is now a small javascript in the page that replaces the first letter of the paragraph for me. In the style.css, all letters are stored in classes, that's basically it. This way I don't have to worry about the correct initial while writing, the script mimes the rubricator, so to speak.
The line between the lines is created with a repeating gradient background. If you want to know more, you can examine the source code with a web inspector of your choice.
The third part continues with the basic layout of the template for the state of play reports.
tl, dr;
This part is about the overview of the state of affairs reports, a stand-alone page for which I have taken inspiration from other layouts.
Comments (0)