In bed with HTML5, CSS3 and Jekyll

I've redesigned my portfolio site to take advantage of HTML5, CSS3 and Jekyll, a static site generator.

November 5, 2009
Updated October 2, 2023

Oh no - not again! ¶

One of the main drivers of wanting to redesign was a desire to move to HTML5. The specs are coming along nicely and browser support is surprisingly good. Internet Explorer is the least HTML5 friendly (i.e. no support) but thankfully clever people have already solved this. By adding the following into your <head> element Internet Explorer will interpret HTML5 correctly. If you can sleep at night with the understanding that it won’t work for IE users with no JavaScript then there is nothing stopping you.

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

If you can see this… ¶

HTML5 is alive from George Ornbo on Vimeo.

..you are in the future.

HTML5 brings the ability for browsers to play video natively. No need for any third party players - it just plays. Granted some browsers aren’t quite up to speed but there are ways around this and I’ll blog about this shortly. Most readers of this blog use a browser that is compatible with HTML5 video. For those that don’t use a compatible browser they can always download the video and watch it offline.

To convert videos from the .flv format I was using I wrote a shell script. This converts the files to HTML5 compatible .mp4 and .ogv formats. If you want to use it you’ll need ffmpeg and ffmpeg2theora. All videos on this site now use HTML5.

Moved to Jekyll ¶

I’ve moved the site to Jekyll, a static site generator written in Ruby. I’d already created one site using Jekyll and had felt liberated by it. With the help of Ruby Zen Master Jason Cale I’ve been learning more Ruby. I’m used to the command line so working with text files feels right to me. I’ve also moved the comments on this site to Disqus. It has always felt slightly wrong that I own other peoples comments and that they cannot edit or remove them. Disqus addresses this by giving comment authors ownership of what they write (if they choose to login of course). I moved comments over from ExpressionEngine using this script.

I’m still a big fan of ExpressionEngine and Rails for client sites but the fact I can easily publish a medium sized blog as a static site makes Jekyll extremely attractive to me. There no performance better than a static site and there is nothing more secure than a site with just HTML.

If you’d like to learn more about Jekyll check out the GitHub repository and/or read Tom Preston-Werner’s post Blogging Like a Hacker.

Progressive enhancement and browser support ¶

Using CSS3 means that users with more capable browsers will have a better experience. But I’ve taken measures to tweak the design for Internet Explorer users in particular and the site is compatible with IE6 upwards. Even so I’ve added the IE6 Notice that I created to the site to encourage IE6 users to upgrade.

I’ve never had a problem with less capable browsers being served a slightly different site. I happily used -moz-border-radius and -webkit-border-radius on the previous incarnation of this site.

Desktop and web design ¶

I’ll admit here that I have an itch about making a compelling desktop experience on the web. Web technologies are evolving and the browser is progressively absorbing more of the tasks that were traditionally the domain of the desktop. The new design is unashamedly inspired by OSX and the desktop applications therein. Basically I wanted to see how close I could get to a desktop interface on the web, and I feel I’ve got pretty close.

Realigning the business ¶

Previously I’ve pimped myself as a full-service agency. In reality I’m a one man shop and my most rewarding work has come when I have been hired as a specialist as part of a larger team. I’ve also been creating more web applications as opposed to traditional content sites and I’m keen to to move deeper into programming and interface design rather than just support content sites for small to medium sized businesses. I’d really like to start talking more too and I think removing the facade of being an ‘agency’ will help that. I’m going to have to learn to come out of the shadows though..

My first ever talk is next week at the London ExpressionEngine Meetup. Come along!