Website redesign

Recently I redesigned my personal website, frederickyocum.com, this article summarizes some technical choices I made along the way.

Earlier this year, when faced in the rather arduous task of upgrading Symphony CMS, the open source content management system — I had left the task a little too long for it to be easy. I made the choice to rebuild rather than refresh. Symphony uses XML and XSLT (Did I mention my strange fascination with markup languages?) to create the pages, but the content is held in a profusion of different tables in a MySQL database, all labelled “entity this” and “entity that.”

My site isn’t large, edited by hundreds of people or populated by thousands of chunks of data. Was there something open source, customizable, fast, well-supported and, most important, set up so the content could be easily extracted from the delivery system? The next time I wanted to pick up the data and move on, without having to weed through hundreds of database entries.

Grav

Enter Grav, an open source flat file content management system originally developed by Trilby Media. Grav uses Markdown as the primary text formatting method This added simplicity, since most of the writing I do is in Markdown already. It is a flat file CMS, each page on the site is held in a folder or set of folders containing standalone plain text files, written in Markdown, and images, if they are part of the content. You can remove and add blocks of content by dragging it in or out of the folder structure.

What, no JavaScript?

No JavaScript. As an intellectual exercise, I kept things as simple as I could. Ten years ago, if you wanted animation or transitions you needed to reach into your JavaScript toolbag, today it is possible to just use CSS on your HTML. There is some JavaScript built into the form on the contact page, I think, but since that is a plugin, it doesn’t count it in my intellectual exercise score.

No hamburger

At least for now, there is no collapsing hamburger style (☰) navigational widget at the top of each page with a list of all the galleries or posts appearing at the click or hover of a hamburger icon. No list of visual thumbnails on the gallery pages either. You can create these effects in CSS, but I want readers to slow down and discover the content in a staged fashion.

Responding to the screen

I tried to keep the media queries lean, and I have played with flexbox, grid and clamp() to enable things to appear reasonably on large and small screens using the same style definitions. This is a work in progress, more fiddling around will be done, I am sure.

Typefaces

The serif typeface used for headings and some subheadings are in Cyan, a typeface derived from the Roman square capitals on the inscription at the base of Trajan's Column. Robbie de Villiers, who started Wilton Foundry, designed letters with both upper and lower case variations. Lower case letters are not common in the other variations of Trajan that exist. The san-serif headlines and details are set in Noto Sans, part of Noto, a font family commissioned by Google, with over 100 individual fonts, which are, together, designed to cover all the scripts encoded in the Unicode standard. Body copy is set in Palatino or failing that Times New Roman or whatever typeface with serifs you have set as default on your viewing device.

If you have read through this article and ended up here, I hope you have taken some time to navigate over to frederickyocum.com and had a look around. If you have any thoughts, negative or positive, reach out and share them.