Spring Reboot

Posted Sunday 4th March, 2012

If you’re looking at the site and not the feed you’ve probably noticed some significant changes. After 5 long years of a heavily doctored Wordpress implementation with custom templates I’ve finally gotten around to rebooting the site, bringing it more in line with my requirements.

It’s more of a realignment rather than a redesign. I’ve trimmed back the cruft, and improved what I believe is important—and I’ve also made some more drastic changes which can be reversed should I want to.

So, without further ado, let me just take some time to explain my reasons…

Technology

The site is now statically generated by Jekyll in Ruby instead of dynamically on request via Wordpress in PHP. This has allowed me to rebuild my server and ditch a bunch of technologies I no longer work with. Key amongst those are MySQL and PHP, but I also no longer need Apache. It’s also made the site faster and less in need of a caching solution.

Statically generating the site has also meant I’ve ditched some more dynamic functionality like the contact form and—more importantly—comments. Considering the ratio of signal to noise in the comments posted to my site, and the sheer weight of spam, I’m reasonably confident I won’t miss them. What’s more, with the constant discussion on Twitter and the fact that I can easily bring comments back later with Disqus, I have the option for resurrection should I desire it.

Jekyll has some pretty cool extensions and plug-ins, and if you take a look at some of my more code filled posts you’ll notice the code samples are now styled up with the help of Pygments, a python library that marks-up the code for styling in CSS. It’s the same system used by GitHub.

I’ve used an HTML5 doctype so I can add modern features as they become more widely supported cross-browser. I’ve also used a fair amount of CSS3 so I hope you’re browsing using an up to date browser rather than something as flawed as Internet Explorer.

The styling now requires nothing but CSS and web fonts. I have significantly reduced the number of images required to make the site look pretty. This means the number of HTTP requests made by the page is significantly smaller and overall the site performs better in YSlow and PageSpeed. I have to say, this wasn’t a primary concern but it’s nice to get it without trying too hard.

My new site is now much easier to deploy and update and I’ve made use of all the good stuff I’ve learnt about server administration over the past few years. You could say it’s all much more DevOps-like in approach and makes use of stuff like Puppet, Rake, and SASS.

Design

I wanted to make sure I was designing for my content and not trying to fill space with extra information that nobody really wanted. Hence, the right hand menu has been replaced by much wider blog posts. Hopefully that’ll do away with a few of the nasty horizontal scrollbars that crept into some of my code examples whilst also giving the main content of the site room to breathe.

The typography of the site should now be significantly more predictable cross-browser. I’ve used @font-face before but it’s nice to use it for one’s own devices. Hopefully this new iteration is much easier to read than the last, and makes better use of the space available.

I’ve improved everything for SEO; flattening the site architecture, making sure to include descriptions, moving navigation below the main content, and defining canonical URIs. I’ve also got plans for the category pages but need some more time to plan out the work and felt it wasn’t really a blocker for launch.

The future

So apart from the SEO stuff I’d still like to work in, I’ve still got some work to do on the responsiveness of the site. Currently it’s not looking great for screens less than 480px in width and I need to rethink some positional stuff to make it work.

For the moment I’m reasonably happy with the site, and with some more work on it over the coming months I’m sure I can turn it into something I’m much more comfortable with. The real target was to make the core content more readable and I think I’ve achieved that. I only hope you, as a reader, agree.

Included in: Design, Development, Idea, Personal, Web, Web Standards

Categories:

  1. Accessibility
  2. Agile
  3. Ajax
  4. Apache
  5. API
  6. Architecture
  7. Books
  8. Browsers
  9. CMS
  10. CouchDB
  11. CSS
  12. Design
  13. Development
  14. Django
  15. Email
  16. Events
  17. Gaming
  18. Grammar
  19. Hardware
  20. HTML
  21. HTTP
  22. Humour
  23. Idea
  24. Information Architecture
  25. JavaScript
  26. jQuery
  27. Lean
  28. Life
  29. Linux
  30. Literature
  31. Mac OS X
  32. Management
  33. Meme
  34. Microformats
  35. Monday
  36. MySQL
  37. Networking
  38. News
  39. Personal
  40. Photoshop
  41. PHP
  42. Process
  43. Python
  44. Reference
  45. REST
  46. Science
  47. SEO
  48. Server
  49. Site
  50. Sitepimp
  51. Social
  52. Spelling
  53. Syndication
  54. Testing
  55. The Future
  56. Thoughts
  57. Tools
  58. Tutorial
  59. Tutorials
  60. Typography
  61. UI
  62. UNIX
  63. Virtualisation
  64. Web
  65. Web Standards
  66. Widgets
  67. Wii
  68. Writing
  69. Xbox
  70. XHTML