Blog

Our brand-spanking new website!

After tweeting yesterday that we didn’t have time to blog this week, it actually turns out that we do! So for those of you who haven’t noticed already, we have a brand new website! And I thought I’d tell you a little bit about it…

The decision to redesign wasn’t taken lightly. In my opinion there have to be strong reasons in order to make it worth while dedicating so much (unpaid) time to redesigning your website, and in our case I think there was. The original site was very simple, and quite popular! A lot of people seemed to like it, but in our opinion it just didn’t say as much about the company as we wanted. There weren’t enough images of our work, and from a clients perspective, there wasn’t enough information on how we approach our work and the way that we build our relationships.

Instead of spending a lot of time working this information into the current design, the decision was made to start from scratch as it wasn’t actually much more work!


So take a look around – The site is much bigger, there are a couple of bits of CSS3 here and there (which I’ll post the code for below) and there are a lot more images of all the work that we’ve been doing, as well as more detailed services and a fancy new News page

CSS3

With CSS3 and HTML5 coming into play all over the Internet we thought we’d have a play around and implement one or two things during the redesign. In case any of you are interested, here’s the code:

Fading Links:

a, a:visited { -webkit-transition: color 0.15s ease-in; /*safari and chrome */ -o-transition: color 0.15s ease-in; /* opera */ }

Rounded Corners:

#div { -webkit-border-radius:4px; -moz-border-radius:4px; }

Blog text formatting:

body#Blog h2 + p + p:first-letter, h2 + h3 + p:first-letter { float: left; font-size: 43px; margin: 2px 5px 0 0; line-height:1; color:#333; }

body#Blog h2 + p + p:first-line, h2 + h3 + p:first-line { font-variant: small-caps; font-size:18px; letter-spacing: 1px; color:#333; }

…and if that doesn’t make much sense, check out this article.

Other New Features

Twitter News Feed

This uses the Twitter API to pull in 3 twitter feeds, style them, and add in any appropriate links. We used an adapted version of the tutorial that you can find here.

Twitter Picture

On both the news feed and blog authors we pull in the users Twitter avatar, which eliminates the need to ever change it manually. You can find a great tutorial on how to do this here.

I think that’s probably about it! If there are any new features that I’ve forgotten about that you’d like to know about just ask… and look out for further developments on the site as we receive feedback and change a few things around (like adding more images to the services pages).

Enjoy!

By Chris Skelton

Comments are closed