Database be gone ! Around this time Kirby 2 came out with a much better panel to create pages and upload files.
For the front end I decided to go with Foundation because they offered most of what I needed (grid, typography, interchange for responsive images) and I could choose which elements I needed to keep the CSS file reasonable.
Improving performance first had to go through the images, those are by far the heaviest elements on the site. This meant hacking the Kirby thumbs.php library to change the quality of resized files and then hacking Foundation's interchange to make it lazy load images on top of its regular behaviour. I’m pretty happy about this solution and I’ll probably dedicate a post for it
in the future here
And last, I implemented some .htaccess rules, namely cache expiry rules and gzip compression.
There wasn't a lot of reorganization in the content. My most visited pages were still going to be there and the URL structure provided by Kirby was unchanged. For the blog I decided to go with a simple date format that resembled Wordpress, it's short, readable, unique and makes sense as it relates to the time it was posted. So as far as information architecture there wasn't much change, except the menu.
In terms of hierarchy it's pretty simple, I don't have a lot of text content so I had titles, subtitles and text. I love big type so I kept the large type for the sections. I used a scale of fifth for the typography to maintain contrast between elements at those sizes.
I went for a single family sans serif on the whole site, sans serifs look modern and don't distract from the images, I'm a fan of the work done at FontFont, their typefaces perfectly suit what I'm looking for and have a certain unique character. I chose a condensed font for the titles and subtitles, they look elegant, and work well on smaller screen sizes.
I wanted more white space around the images, I'm not really a fan of huge images found on the web today. Pages often become so heavy when presented as a set and since my photographs are usually of soft and subtle expression it didn't make much design sense to post them so big in your face. Instead I wanted the experience to feel like going to a photography gallery, where prints are rarely that big. There wasn't much text content on my website, so the white space would further focus the attention on the images. I wanted the design to feel modern and break the traditional layout found on most photography websites (title above, list menu on left, carousel for images) but wasn't aiming for anything too trendy.
I thought about changing the colour to something other than red because red with black and white is a little overused. I need something that highlights the black and white images and isn't too overpowering, something not too suggestive of calm and stability but rather of the tension, contrast and pace of the actual pictures. I thought of green, less aggressive than the original red, less dominant and in a brighter form, takes some energy from yellow. Darker red takes the elegance and power of black and reaffirms the deep blacks found in my pictures, and I liked the reference to my analog photographic process and the darkroom light. In the end I kept the red but lightened it and used it only as an accent.
There's a lot I haven't talked about like the many (many) refactors to the thumbs library, the lazy loading testing, staging server issues, integrating twitter cards dynamically, starting development with pure SCSS then scrapping everything and going with Foundation and all the time I wasted because of a silly MAMP problem but it did take me around a month and a half of nights and weekends to put it together. What takes the most time is testing, testing small performance tweaks, testing the cache, testing the migration script, device testing, browser testing etc
Right now I’m pretty satisfied with the result even though there still needs work to be done, I never intended to do everything from the first go, the idea is to keep iterating.