Website Redesign 2019

Written by: Kevin Grahl | Published: Tue, February 19th 2019 » 8min - 1.922 words

I'm lazy when it comes to my own website. I rarely change design or function of something that works and we all know never to touch a system that's doing it's job. But I long felt like my website needed a redesign. After some server migration I didn't migrate my complete website and linked my domain to a construction notice for some months. Read the first sentence again if you want to know the reason behind that. But I finally found some motivation to sit down and write some HTML and CSS, the result of which you're looking at right now. Granted, it's not all done yet as I still have to start working on the /img part but at least the home site, imprint, and most importantly the /txt part is mostly completed.

I wanted to take the time to showcase and explain a few of my design choices.

Colors

The first thing you probably noticed was the switch to a dark theme with a black background color and white text on top of that. I'm a sucker for night themes and use extensions and custom CSS on many websites I frequently visit. I, like approximately 50% of the population find it harder to read white text on black than black text on white. Also with the rise of AMOLED displays, which don't need to turn on pixels if they only use a pure black (#000) value, black interfaces actually save energy! I played around with my text color, initially I wanted something else instead of pure white (#fff) as I have it now. The problem I had with other colors were when you factored in that many users have adjusted the temperature of their displays, either through apps like f.lux or with integrated options like iOS's Night Shift. I was looking for some vanilla/creamy/eggshell color but all those looked way to intrusive/brightly colored once Night Shift was turned on. So I stuck with white. At least that has a 20:1 contrast ratio so nothing to worry about on that end. I use certain shades of grey to separate content from the background, most importantly #111, #222 and #bbb. I threw in a nice colorful green (#39B14B) as a highlighting color which I use mainly for links (and if you highlight text) and a dulled blueish-green (#869A88) for other stuff like the footnotes for example. I realize that green might not be the best color choice because many color blind can't easily differentiate between green and greyish colors and plan to add some accessibility features soon to mitigate that issue amongst some others.

Here's a color palette:

Typography

I choose three fonts for use on this website. The one you're reading right now is Source Sans Pro a sans serif typeface created by Paul D. Hunt for Adobe Systems in 2012. It is the first open-source font family from Adobe, distributed under the SIL Open Font License. The typeface is inspired by the forms of the American Type Founders' gothics by Morris Fuller Benton, such as News Gothic, Lightline Gothic and Franklin Gothic, modified with both a larger x-height and character width and more humanist-influenced italic forms. For headings and sometimes bold text I use one of my favorites; Gotham Bold a font that might feel familiar to some of you. It's well known for it's usage in the '08 Obama presidential campaign and has been referred to as the typeface of the decade. It was commissioned in 2000 by the magazine GQ from New York based Hoefler & Frere-Jones. Provided with a brief to create something “masculine, new, and fresh,” type designer Tobias Frere-Jones drew influences from post-war building signage and hand-painted letters seen around New York City. Using the seemingly plain, geometric lettering from New York’s Port Authority Bus Terminal as the project’s touchstone, an American “working class” typeface was born.

My mono space font of choice is the same I use on my main OS so safe to say it's my all time favorite: Panic Sans I'm not 100% sure but I think this font is shipped with Panic Inc's Coda application or something like that. It's based on the font Vera but crispier and some char hinting is improved.
Since I load all resources, including fonts from this domain I took the liberty to edit every font file, removing unused characters to improve the file size of those fonts and thus the PageSpeed of this website. All three font files combined are only 42.3KB in size if you're using the .woff2 format.

» Source Sans Pro
The quick brown fox jumps over the lazy dog
abcdefghijklmnopqrstuvwxyz 1234567890

» Gotham Bold
The quick brown fox jumps over the lazy dog
abcdefghijklmnopqrstuvwxyz 1234567890

» Panic Sans
The quick brown fox jumps over the lazy dog
abcdefghijklmnopqrstuvwxyz 1234567890

Size & PageSpeed

I took great care while creating this website to make it as small as possible. There aren't any frameworks and everything was created by hand. Images are compressed, font files were manually edited, CSS is minified etc. I optimized this website for user flow so if you've come here visiting my home page first your browser would've already cached all three font files then and there. If you then navigated to /txt it would load the CSS file used for all articles. After that every article you load only needs to load the small html file and images - if there are any. The CSS, UI-images and font files are already cached by your browser. In an age where we all use smartphones that only have so much included data volume before you're either cut off completely or have to surf the web with speeds as low as 24kbits I think it's important not to waste bandwidth for unnecessary stuff. All sites are small enough to load the basic content and styling in under 3 seconds (Connected from Germany, geographic distance could increase load time.). If you're not limited by mobile connections this site should load in less than 200 milliseconds. (I got as low as 50ms depending on how many images are loaded) This article contains one image which alone contributes to 55.6% of the size of this site.

Responsive

Like every website I've ever build, this one is fully responsive and should work on all devices that are somewhat modern. Due to security reasons this website won't load at all on devices running Windows XP or for users who are using Internet Explorer 8 and below. The rest should (in theory) work although I've only really tested it in Chrome, Firefox and iOS Safari so let me know if something looks off for you. (Refer to the very first sentence of this article if you're still wondering why I didn't just test everything.)

Privacy

I value my digital privacy, the least I can do is honor the privacy of my websites users. There are no requests to third parties anywhere on this domain. Everything is served from this single domain/server. There's no Facebook, no Twitter and no Google Analytics tracking you. In fact I don't track users at all. I can't even tell how many visitors my website gets because I don't write server logs. I try not to use JavaScript but there may be one or two instances where I might need it, so no promises there. Refer to the Privacy Policy if you'd like to learn more.

Features

There are some things you might miss while browsing my site. You shouldn't have to see my Error 404 site if all goes according to plan but it's there waiting to catch every lost visitor. I also included an Error 451 site, just in case.. Then there's the humans.txt text file where I keep track of who contributed to this website. I also thought I'd would be a nice idea to include a Hall of Fame textfile where I name a few people I admire. The Hall of Fame list is in no way complete! I started with a few names which doesn't mean that other people are any less important just that those happen to be the people I remembered while writing that file. I'll add more people over time whenever I either stumble upon their work again or someone reminds me. Feel free to make suggestions!

I always try to do my best when it comes to accessibility and plan to further improve on that front with this version of my website. I plan to add options where the user can adjust text-size, change the main font to some that is easier to read for dyslexic, shift the color theme to one with black font on a white background, adjustments of colors for color blind folks and I want to implement a simple audio player so that blind people don't have to use their screen readers but can listen to the article being read by a human person if they want to. If you happen to have some kind of disability that limits your usage of this website please get in touch so that I can work on improving that for you and others like you. I'm also actively looking for someone who's blind, with experience with screen readers who would like to help me figure out how best to implement that audio player/file I spoke about.

Shift in content

Before this iteration my website was more about promoting my services as a developer/designer in order to find new clients. It wasn't a portfolio strictly speaking, as I only named some companies I worked with and didn't actually showcase any work, but it fulfilled no other purpose. At some times there was a blog of sorts. Over time I tried out WordPress, Ghost and blogging without a CMS. I liked it best to just manually do the work without any CMS. That way I have full control over what is published and I don't have to trust or verify other peoples code. It also removes a lot of code that's not needed and thus improves the PageSpeed of my sites. With this redesign of my website I want to shift it's focus away from promoting my services and turn it towards a more personal site. The change came when I started deleting myself from nearly every website I was once registered to. Facebook, which I hadn't used actively for years, went first and many others followed. I was motivated by wanting to improve my privacy and not to give away my data to third parties anymore. But I didn't want to stop publishing media to the web. That's where this new website comes into place. On /txt, where you are right now, you can find my "blog". I find that term limiting that's why I named it just txt - short for text if you didn't get that. On /img, which is short for image, I plan to post pictures like one would on Instagram. As of writing this article I have not yet started working on /img but it's high on my to-do list.

Ads

I don't really plan on serving much ads on this site. If I show some ad it's always hand selected, visually clearly separated from the main content and all resources like images are always loaded from this domain only. If you are using an ad-blocker and would like to block all ads regardless just create a rule to block all elements with the class advertisement. I might use affiliate links when linking to third parties. Such affiliate links will always be clearly marked as such.

Here's an example:

Advertisement: