30 October 2018

Website Edition Three


This is the third version of my personal website. So let me quickly explain how it comes to be that I already had two websites before and why I felt the need to create a new one.

The first one I created in 2013. It was a very small one-page-website showing my CV, contact information and some other personal details. But more importantly it was an experiment in responsive web design. For example scaling the whole website inclusive font size based on the width of the browser window. At the time responsive web design was very new and for many veteran web designers it was probably not easy to switch to this new mindset. As I was just starting to get into web design and development it was probably easier for me as I adopted this mindset from the beginning. The site showed my knowledge of current web best practices and trends and thus helped me land a web developer job at Station.

2013. First version of my website. No one starts with perfect mastery.

The second edition of my site went live 2.5 years later in 2015. It also featured a portrait page with my CV, but in addition I documented past projects on the portfolio page and added a small blog, so I could easily share web related insights with others in the community. When building it my focus was mainly on animations: intro animation, scroll-triggered content animations, and page transitions. As motion design is one of my favorite parts of web design, I wanted to show off my knowledge about it. In hindsight the design is kind of embarrassing, but as I was far more on the development side than design I guess it was fitting. Behind the scenes I built a custom static site generator in PHP which wasn't flexible at all but worked well for that site and gave me new insights into content structure and making something as simple as possible without a preexisting CMS. I was searching for a new job and my showcase of web animation skills and my portfolio helped me get a frontend developer position at Hinderling Volkart. This website was an important milestone for me personally. But I think the experimental nature of its content management prevented me of updating it a lot. Also as I learned a lot about digital experience design at Hinderling Volkart I quickly outgrew the site's looks.

2015. Second version of my website. I just couldn't resist the concrete texture.

So here we are October 2018, the third edition is online. The goals were mostly the same as for the last one: My portrait, portfolio and a place to share stories on the web. Yet I wanted something more professional, something I could use as a tool to acquire independent work. Though I wanted to keep that relaxed vibe that being a web person and being used to sharing your thoughts with the rest of the world brings with it. Through the notes section I have an instrument to talk about work behind the scenes, about other topics, and just share snippets of my personal life. In comparison to the professional aspect of the site this gives me more opportunities to give personality to my brand. And above all else a way to share my thoughts in the exact visual environment I want.

2018. Third and current version of my website. My girlfriend was reminded of a powerpoint presentation. I really hope that's not the case.

Generally the site should be simpler and more flexible, something that I could build upon in the future. The idea here is that now that I'm releasing it, the website is not finished, I even left out animations which are my speciality. It's a work in progress, a playground, a living place where things change and new things arrive. A framework that evolves rather than being replaced.

I focused heavily on the design concept, first building a styleguide containing colors, layout grid, spacing sizes, typefaces, font sizes, typographic properties. The whole website is based on a component library, a set of components, that can be arranged in whatever way fits the respective page. My main inspirations for the design were typo posters, typeface booklets, magazine layouts, cinematic text (I mean the way typography is used in movies, and the way it is animated). Basically I thought of my site as a website poster that uses its benefit of motion. It was important to me to use large typography, spread the content out, use the whole width of the window, not just a 960 pixel stripe in the center.

As a side note, I explored the concept of an adaptive layout. A layout that lays out content in a traditional vertical fashion for a portrait viewport (height larger than width), but lays out the content in a horizontal direction for a wide viewport (width larger than height). This way the page scrolls, thus moves, in the direction where there's more space for multiple elements to be visible at the same time on screen. I haven't finished implementing this idea, due to its drawback of you needing to create two layouts for the same content. But I thought it to be a really interesting and fundamental consideration.

In the last five years I learned a lot about how content needs to be organized and that it sometimes isn't the same as how you want to display it, but I also learned about the need of a flexible way to orchestrate the content elements on a page without it being complicated. It's really hard to achieve both goals with the content management systems I know and still enjoy a simple authoring experience.

My idea was simple, I wanted to have a page's content all in one view without complicated references to other entries. I wanted total freedom of which components I use on each page, how many, and in which order. My solution was heavily influenced by the CMS Kirby. Basically I manage my website in the Finder. In my websites directory, there's a folder called "content". For every page I want, I create a folder with its url name. For example a folder "about". Of course subpages are also supported. Inside you can store all the page's media files, create subfolder in the same way for the subpages, and create a file called "content.yml". This file contains all the page's information, like the title, and lists all components and their content. The format of the file is YAML, a human-readable data serialization language. What it means is, that it's easy to read and write this text format but that a program can also understand it. So I wrote an application that looks at the content folder, reads the "content.yml" file for each folder and transforms this into the markup. With this markup it creates an HTML file in the directory for the static website. The application is written in Node.js because by now I'm most comfortable in JavaScript. Every text entry in the content file can also be written in Markdown. This enables you to format parts of the text the way you want, like in a traditional rich text editor of a CMS. Also I added template helper functions, that give you access to the page's parent pages, its sub pages, and more inside the templates.

I love managing my site's structure right inside Finder on my Mac.

In my text editor I open the content.yml file and list all the components with their content that I want on the page.

Et voilà! This webpage comes out of the programming magic's doing.

I'm really happy with my setup, it gives me so much flexibility. Though the workflow could be improved. Right now I start Gulp (which among other things starts my site generator application), I navigate to the content folder in Finder, open a content file with my text editor Atom, save my changes, push to my git repository and pull from the git repository on the server. This could all be simplified if I added a UI to my CMS and let it run directly on the server. But I'm really not that much of a programmer, because it would be a lot of work and many more things would need consideration. For example support for multiple languages, preventing template developers access to the systems internals, and probably many more CMS basics. I think in the future I will use my system just for frontend prototypes and switch my website to an established CMS like Kirby or Craft.

I hope you could make sense of it all and enjoyed reading.