AlexSeifert.com’s new design
This week marks the first update to AlexSeifert.com in almost three years. With the last design, I experimented really for the first time with JavaScript animation. With the new design, I’ve taken what I’ve learned in the intervening years about JavaScript and put it to good use. One of the main features of the site is its animated scrolling as well as the many smaller, subtle animations I’ve used throughout to give the site a bit more life and character.
I designed the site differently than any site I’ve designed in the past. Not only is it in both English and German, but the entire site is a single page — even when you switch languages. To do this, I’ve employed a technique using jQuery whereby the script goes out and reads a set of plain HTML files in order to retrieve its content. I simply have a set of English HTML files and a different set of German HTML files which it reads from. When you switch languages, it loads all the content from these files and places it in the relevant <div> tags.
This happens when the animated spinning loading icon appears. What also happens during that time is image pre-loading. I pre-load almost all of the site’s images during that time. I do that because I wanted the nice effect of the black background fading out to a fully loaded page. That was only possible by pre-loading the images. To achieve this, I used a script I found called HTML5Preloader. I can just pass it the paths to the images and it loads them, informing me when it is finished.
The other reason I chose to pre-load the images are because they are relatively large for a website. They’re so big because I didn’t want to compromise on their quality since I had designed most of them. The main image, the Victorian British fireplace at the top of the site, I created over the course of many hours by hand in Photoshop. There was no way I was going to reduce the quality after that amount of labor, so I decided the best solution was to pre-load them.
These new features are great and all, but they do have their problems. My number one enemy while designing this website was browser caching. All browsers tend to cache the HTML files I use jQuery to read which means making updates is a bit of a challenge. I’ve done some research online and found a few meta tags that supposed prevent the browser from caching the website, but none of them have worked so far. They are:
<meta https-equiv="cache-control" content="no-cache">
<meta https-equiv="expires" content="-1">
<meta https-equiv="pragma" content="no-cache">
As I said, this doesn’t prevent any browser from caching these files. The workaround I found for getting my content to update is to put version numbers on the end of the HTML files’ names. That’s not a very agreeable solution to me because it means I have to update my script as well each time I make even the slightest textual change to the page, but at least it works.
Overall though, I am extremely pleased with the way it turned out. I have a few ideas for yet another new design in my head, but we’ll see if I get around to actually doing them. In the meantime, I have a few ideas as to how I can spruce up the new design even more and will probably be implementing those before long. Until then though, you can visit the new design at www.alexseifert.com or www.alexseifert.de.
