/>HayoBethlehem.nl V13
Three year after the previous effort, it was time for a re-style of this website.
The catalyst for another redesign was a comment someone made, congratulating me on the design, and immediately following up with the question whether I was really into video games. As I considered this, the design (The last update to the design was published in August 2010) did (unintentionally) borrow quite a lot from game design. Not wanting that association, it was time to fire up Photoshop.
Style update
The first step was to give my logo style an update. I contacted Anton Peck and asked him if he would like to help me create a style guide and refresh of my style. And he did. He created a marvellous document for me, detailing how to use different colour combinations and fonts. He also did a makeover of the shield logo itself, creating it as a 3d shape, with more realistic details. I think he did great work.
Redesign
The next step was to apply Anton's work to my website. A good start makes for easy work. My main goal was to commercialize the look and feel of the website. The previous design was very personal, and as such had very personal appeal. The new design needed to appeal to a wider audience. The key was to simplify and to focus on the content. Readability (Text scans notified me that the reading level of my articles is a bit too high for good readability, and rates them on academic level. I guess I just like syllables) and usability became priorities. from there everything came together quite naturally. The colour set proposed by Anton helped a lot with sifting through the possibilities.
Responsive
The trend of responsive websites is here to stay (for now). Thus I finally buckled under the pressure and adapted my website to be properly usable on touch devices and specifically small-screen phones like the Apple iPhones. This was not a huge thing to build, it meant changing maybe 20 lines of CSS.
Under the hood
I'm always tinkering on the front and the back. Something I needed for the new design was a mechanism of generating multiple images from each image I upload with an article. It took me a while in PHP, but after lots and lots of cursing and sweating (I'm not a programmer. Did I mention I'm not a programmer? I'm not a programmer). I managed to hack something together that spits out the original image and four different other formats. I even managed to make it easy to change or add the formats.
Content shuffle
The final action on any new design for me is to go through the content. Usually this means deleting a lot of old irrelevant posts. Another thing to check is dead links. Over the years I've learned linking to outside content is a tricky business: usually the page disappears within 12 months. This time I deleted all the photo albums as well; moving all the content to Flickr. I got a bit tired of updating 800 pictures every time I decided to change the resolution of the images. On Flickr I now have all images in original resolution, so if I decide to integrate them in my website once more, I can do it based on the flexible API's Flickr makes available.
After working on a corporate website for a while at my current employer, with little useful feedback or focus on quality, it's getting harder and harder to keep up my enthusiasm for web design. Redoing my website gave me a little bit of that energy back. And makes sure that my website stays ready for the future.