Website

I've been without a maintained / working website for a few years now which is kind of irritating for a guy who does websites for a living part time. So I decided to put some thoughts into how to replace my old food based blog with some different content.

Inspiration

These websites made me think about the overloaded websites we call "Internet" these days.

Goals

The main goal is to create simple, minimalistic and easy to maintain content (as in "words"). Focussing on content rather than looks also helps a lot with accessibility.

The same principles should be applied to the layout / design of the page. Avoid monstrous layout frameworks with a gazillion lines of code you never use anyway - plus extra required plugins to do basic site elements. This has the side effect of the website not looking like all the other "modern designs" using the same grid and design elements everywhere.

While I don't necessarily agree with the "mobile first" mantra that Google is pushing these days, I absolutely agree that it should be easy to surf the web on smaller devices too - without having to remove content or site elements. Following the minimalistic design approach makes this really easy.

To be able to manage the site easily, I will not use complex, riddled with bugs CMS that store all their data in a database and need to be updated twice a week. A text file based system allows me to easily manage, backup, versionize and move things to a different system if necessary. It's also a lot more flexible in what it can do.

Overall I will need to think "global" (which means: English). While my first language is German, I have many friends all over the world. And if I don't want to limit the content to a small audience, I need to do something about it - even though it might be a bumpy translation now and then...

Compromises

I'm still using a CMS to generate HTML pages from Markdown files. Grav feels nice and lean. It is Open Source, extensible and based on flat-file data which allows me to add custom fields and have modular content.

Most Grav plugins add extra CSS / formatting and even Javascript, but I guess I have to live with that.

While Markdown is a great and lightweight markup language to structure and format content using plain text files, it is a problem that there is no real defined "standard". Over the years people created a lot of different variants that are incompatible to each other. I am aware that I might not be able to format everything like I intended and inline HTML code can be used as fallback, but I want to avoid that as much as possible.

Update: Grav uses the parsedown library that tries to follow CommonMark rules which is the closest I could find to a "standard". It also has an option to enable Markdown extra. This for example enables formatting for acronyms like "HTML" or "CSS" which is great for accessibility.

Layout

Since I wanted a nice and clean look, I went for the "standard" structure: Header, content, sidebar for additional information and a basic footer.

The header has my "logo" and the navigation.

The main content area is designed to have around 70-80 characters per line while the sidebar is close to half that width to achieve a 2 to 1 ratio.

The footer just has some links to required legal information.

To support mobile and desktop devices, I decided on having three variants for the above sections:

  1. The default (mobile first) is to show header, content, sidebar and footer below each other.
  2. On bigger screens the maximum width of the page is limited to 70-80 characters per line for readability.
  3. If the device gets big enough to show the sidebar beside the main content, do so.

You may have noticed that I don't mess with fonts either. I just switch to the browsers sans-serif font-family, since I don't like Times New Roman. In addition the the font-size and line-height are slightly increased for better readability. All other formatting can be seen on the typography page.

TODO

Pre-formatted blocks might get longer than the ~75 character line length. Since some operating systems / browsers decided to not show scrollbars anymore unless you use them, there's no visual cue that lines have been "cut off".

Example:

Pre-formatted blocks might get longer than the ~75 character line length. Since some operating systems / browsers decided to not show scrollbars anymore unless you use them, there's no visual cue that lines have been "cut off".

Updates