New Site Launched


Finally, my web site has launched. Redesigning your own web site is a long arduous process. In total it has taken me over two years designing, programing and writing to make this web site a reality. Truth be told if this project had a deadline and a budget it would have been finished in months instead of years, but this is what can happen when you are your own client and your budget is endless.

The Design

I wanted the design to be clean and lean, with very few gradients but with some bright bold solid colours sprinkled throughtout. Two reasons for these design choices:

  1. I wanted this site to be performant and a flat design with few images fits the bill in this regard.
  2. My design abilities are limited and a clean minimalist design fits with my design abilities

I went through a few design iterations before landing on this design. I was debating whether or not show my early mockups, but why not. See below.

Mockups

The CMS

This web site is built with the Kirby content management system. Kirby is a hybrid flat-file like CMS. Flat file content management systems do not use a database to store their content, instead they use the file system. This has a lot pros, namely you can easily version control your entire web site, which is difficult to do for database driven content management systems.

Why Kirby

I went with Kirby because it is a small light CMS that gives you total control of the outputted HTML (which I love). Plus the file system makes sense to me, so building a web site that uses the file system works for me. Kirby still uses PHP to dynamically build web pages which makes it a sort of hybrid between a true flat file CMS such as Jekyll and a standard database driven CMS such as WordPress.

Another plus for Kirby is it does not use a templating language, you just use regular PHP. I prefer it that way, as their is no need to learn yet another syntax for outputting your content, you just use HTML, and regular PHP, simple.

Finally, it uses Markdown (with some Kirby specific extras) for entering content. If you haven't used Markdown, you should check it out. It is a great way to write basic HTML based content.

Fonts

I use Typekit to serve two of the three fonts used on this web site. League Gothic for all the headings, navigation links, plus the footer navigation button text. I love League Gothic, it is the font used in my logotype as well. I use Myriad Pro for all the main content text. Consolas is used for the blog post date text and the read more links on the blog. page.

I use Disqus for the blog comments so I guess it uses some fonts, I am just no sure which ones it uses.

Sliders

On the photography portfolio page and on the individual web site portfolio pages I use the Royal Slider. The Royal Slider costs $14.00 for the regular non-WordPress version and it is worth every penny. It took a bit of tweaking to get the fullscreen mode to work but other than that it works great. I highly recomend it.

On the web portfolio page I use an older version of the Type & Grids™ template. This is probably my least favourite part of this web site.

Responsive Images

This web site is fully responsive and is designed to work on large desktop screens down to the 320px wide iPhone's. With the imagery I wanted to make sure in most situations that large desktop screens got nice sharp images, but at the same time smaller mobile screens did not get hit with huge downloads of large images. I could not use the new responsive image elements that just came out as they are not compatible with way I use the Royal Slider (I use lazy loading).

I found a great server side solution that uses a dash of JavaScript on the front end to set a cookie and some PHP on the server side. It is Adaptive Images. Adaptive Images will automatically create and serve smaller versions of an image when it is requested by a device with a smaller screen. It works great and is very easy to setup.

JavaScript

Not much to say here. This web site uses jQuery and good dose of JavaScript mainly to handle the responsive menu system, some layout tweaking depending on certain device widths and for the sliders. Modernizr is also used for some feature detection.

CSS

This is the one area were lots of improvement is needed. I started this web site before I learned SASS, so this web site uses straight CSS. I am also using @import to link together various partial CSS files. I realize that is not a best practice. The good thing about Kirby is it makes it nice and easy to load different stylesheets depending on which page it is.

Since this web site was built over two years the CSS is a mish mash of various styles. Some elements use Ems, others Rems and others pixels. A real disaster, so will definitely have to go through the CSS and fix that up in the future.

Final Comments

The web site is far from perfect, but if I held out until it was perfect this web site would never see the light of day. So I am putting it out to the great interweb worts and all for all to see. It isn't perfect, but I feel it is pretty good, and I am proud of how it turned out. What more can you ask for.

Thanks for reading...