Hi there!

If you wish to contact me, you will find an email address at the end of the page.

If you are curious about the website itself, read on!

Horizontal separator

The drawing process

I drew the frame on a tablet, with Sketchbook, in black on white. No SVG was used, it is entirely hand drawn. I started with a quick sketch of the overall structure:

Screenshot of the rough line sketch of the website's frame

Then the actual drawing began, adding details on top of the sketch:

Screenshot of the first shapes being drawn on top of the sketch

The whole drawing took approximately two days to ensure that all the edges look clean - zooming in and straightening edges. Drawing freehand, you realize how sloppy you are when you get a bit closer :D

Close-up of the hand-drawn edges being anything but straight.

After straightening it all out, it looks a lot better:

This is what the finished frame looked like before post-processing in Photoshop:

Screenshot of the website frame drawn in Sketchbook

The cool thing with Sketchbook is that you can export your drawing including all layers to a .psd file. Once I opened this in Photoshop, I created the color scheme and added small color accents here and there.

Horizontal separator

Converting it to HTML

To build the HTML, I created slices in Photoshop to export individual images. This is what the slice layout looks like:

Screenshot of the slices setup in Photoshop to save the individual images

There are two main images for the top and bottom, with a 1 pixel high image in the middle used to fill the space when the page stretches higher. I did not want to use a scrollbar inside the frame, to keep the navigation natural.

Horizontal separator

Downscaling images

One complication was the size of the images: The source image of the frame is over 3000 pixels wide. I kept the original size when exporting, to ensure that the quality of the edges is preserved by downscaling the images.

To get all the sizes right in the HTML, I am converting the image pixel sizes to rem, using a base pixel size of 1px = 0.06rem (which corresponds roughly to a base font size of 16px).

This works, because in modern browsers, there are no pixel/integer values anymore in their internal calculations. If you inspect the "Articles" navigation button for example, you will see width and height values like 15.52rem. This is all calculated on the fly server side, with a global downscaling factor.

Incidentally, this makes the website work very well with the browser's zoom feature, as the downscaling is already a kind of inverted zoom. The quality of the images is great, even though they are not in SVG format.

You can play around with the downscaling factor by adding the parameter to any URL in the website (you can also use the downscaling UI in the top right of the frame):

&downscaling=1

This value accepts a float, and basically defines how much smaller the images should be rendered compared to their original size (higher values = smaller images).

The only issue with this is that hairline fractures will sometimes appear between images - these are rendering quirks in the browser, and can sadly not be prevented. The same can also happen in any website when using the browser's zoom feature.

Horizontal separator

Color themes

This is something I wanted to do since the start: Be able to switch between color schemes. The frame lends itself pretty well to different colors, so I wanted to explore this.

The theme can be switched using the three little icons in the top right of the frame. There are three themes:

  • "Ghostly" (blue)
  • "Gaia" (green)
  • "Blaze" (red)
Horizontal separator

No cookies

This was very important - I did not want any cookies on the site whatsoever. Not even a session cookie. Instead, all user-specific settings like the theme are repeated in all site-internal links to persist them between pages.

Personally I find this quite liberating. Also, I don't mind the long ugly URLs. I am not trying to win any URL design contests :D

Horizontal separator