R T Harrison LTD

This site’s for a sister company to a previous website I built at the start of the year. It was an interesting company that supply stitching machines to the printing trade. I love design and I currently work in digital signage, so seeing the old type-setting kits for traditional signage was very knowledgeable and rewarding.

R T Harrison LTD new Site

Visit Site

R T Harrison LTD

If your a large printing company be sure to visit R T Harrison LTD for stitching machines and supplies.

New Site – Digital Media Projects

I’ve worked at Digital Media Projects for almost two years now, and we have finally gone live with the third revision of the website. The site was designed and built by your truly and features some really cool CSS and JavaScript.

DMP new Site

Visit Site

New Mentality

For a company who specializes in new media and modern technologies are website was dry, static and boring. It didn’t reflect the exciting environment we all work in and wasn’t growing at the same speed as the company.

Accessibility doesn’t have to be boring

We wanted the new website to be accessible by anyone anywhere without losing anything in design. This includes video, animations and image heavy content.

DMP pure css

Take the image above: It uses only CSS and no images, it works in every browser we tested! We also included video that will play on iPhone, iPad and any device that can handle flash. But one of my favorites is our 3D box render which also works on the iPhone and iPad.

Check for updates

I included a news page on the site so check us out for updates on IPTV, Digital Signage and other broadcasting technologies.

New Site – PH Engineering Limited

A new website design for PH Engineering Limited. The site is a simple clean design incorporating some clever JavaScript and stylish CSS. This was the companies first website and I was pleased to get offered Creative Control on this project.

Space carousel

View Site

Design

The only thing I was given before this project was a logo: its rare to get such freedom when designing a website but in this case I had a blank canvas. After only one design proof the client was happy enough to let me get stuck in with the code.

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?