RickyH new blog design/concept

I was wanting to do something different and new with blog-design. I’ve created word-press templates before but they all follow the same format: the new design concept incorporates some new technologies such as HTML5 and some clever JavaScript written by myself and the wonderful MooTools community. So what did I do:

Standards

I wanted to experiment with whats new with HTML5 and CSS3 so I started at the top with the new doctype:

<!DOCTYPE html>

Simple isn’t it! This little bute tells the browser to render as HTML5. Next was to make my HTML code valid and forget about the CSS (till it caches up).

Optimization

This is the first time I’ve really concentrated on web optimization and it was somewhat frustrating but highly educational. The first plug was a great tool from the developers from Yahoo called Smush.it. Smush.it is a web-based image optimization tool that reduced my images by up-to 60% in size. I’d used pngcrush before but Smush.it’s great interface makes image optimization extremely simple.

Below are the savings gravatar would make if they Smushed there images 11.28% off their server bandwidth:

smush it rules

Next was gzip and where my frustration began. If your like me and have a small version for web hosting, chances are you wont be able to Gzip files through your Apache .htaccess file. The next of my worries was the lack/poor documentation if you have to gzip without htaccess. Through countless hours of searching i found these miracle slices of code. They do your gzip though PHP.

Firstly try saving your style sheets with style.php file extension and insert this at the top:

<.?php 
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?.> 

And for your java-script files use javascript.php and insert this at the top:

<.?php 
   ob_start ("ob_gzhandler");
   header ("content-type: text/javascript; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?.> 

With all this and more I managed my grade A on Yslow and a perfect score for small site/blog. (on the home page anyway)!

Yslow perfect score

Layout

My idea was to show blog posts by the month they where written. Months would be displayed vertically and posts horizontally. I also wanted to integrate a lazy load feature to load moths of posts ass the user scrolls down the blog. This would save on bandwidth for users just viewing my latest posts.

My next idea was to use categories as ajax filters for posts… For instance if someone only was interested in JavaScript they could click the link which would hide none JavaScript posts and do an Ajax call to gather posts not displayed.

Both these features are not implemented at the time of writing but i cant imagine would take longer than a weekend to implement.

Design

The design criteria was based around saving bandwidth. I only get 2GB download a month from my web hosting so minimization was key. No Flash, small images and externally hosted JavaScript frameworks (thanks google).

Enhancements

Please feel free to add suggestions below. I’m already considering switching the dark design to light for readability. What are your thoughts?

3 Responses :)
  1. Post will be done soon i promise :)

  2. I found your blog on google and read some of your other posts. I just added you to my Google News Reader. Keep up the sick work Look forward to reading more from you in the future. With love

  3. Really fantastic work.

Leave a Comment