With the previous version garnering so much interest and appreciation we were keen to retain as much of the creativity and quirkiness as possible but for plain and simple business reasons we needed to find a way to incorporate many, many more pages and a much more web-friendly way of navigating the web site.

Just in case you miss it – keep your eye on the headings on the homepage ;) Tutorial for how we built this site is in the pipeline.

For anyone that misses the old version, we’ve put it up at http://youlove.us/one just for you!

Let us know your thoughts in the comments, and do let us know if you notice any bugs (unless they’re IE6-related, as we have decided not to support that 8 year old browser for obvious PNG-related reasons).

As the medium has grown in stature in recent times, the bar has been consistently raised for the graphical presentation of information online by some seriously talented people, and we were looking to become a part of that happy band of individuals (and of course, agencies!).

We figured that if we could hit on that elusive “X-factor” with the front-end, then the rest would follow as regards inbound traffic and the potential clients that might bring.

So we set to it, working around some of the initial ideas we had, in anticipation that the mythical lightbulb would (hopefully) burst into life, and inspiration would take hold and lead us on our merry way.

At the time, we considered methods of getting some movement into the design, though weren’t 100% convinced about going down the Flash route, and thought it might be nice to really have some fun with JavaScript libraries instead. We had seen some great examples of horizontal parallax effects using CSS; Brighton-based ClearLeft’s silverbackapp.com springs to mind here immediately – but thought it might be good to experiment with a vertical approach as a counterpoint.

Simultaneously, we had had been playing about with concepts for our business’ identity, and once we had fleshed out the logo design, we started to cogitate on how it could best be deployed. Spencer had a fantastic cityscape image (of Seattle, WA – we’ve had a fair few enquiries about this since!), acquired from a stock library, that he thought might fit the bill in some way.

Shortly thereafter, we had a meeting with our accountants, to discuss some of the finer points arising from the company formation, and it was here that Spencer announced to us that he’d had a truly Pythagorean “Eureka” moment – couldn’t we use the cityscape in conjunction with a transition between day and night, with a side order of parallax thrown in for good measure? We were pretty excited by this revelation; the lightbulb was now burning bright, and we were ready for the challenges ahead.

As Spencer has already mentioned on this blog, the skies were entirely generated from scratch in our weapon-of-choice, Photoshop, with no third-party source material involved other than the Moon, which was the result of some fiddling with the excellent Lunarcell from those original doyens of the plug-in, Flaming Pear.

The other major decision we made, was to employ JQuery as the architecture that would sit behind the design and make the magic happen.

A by-product of the whole process was the realisation that things weren’t going to pan out in IE6 to our satisfaction, so we made a conscious decision to reduce the site’s level of support for that browser. This is something that has subsequently gained us a fair bit of exposure in the realms of the Blogosphere, and ultimately, there’s no such thing as bad publicity, right?

To cut a long story short, the site went live on the 11th June, 2008 – and almost immediately was picked up by some of the bigger design/CSS showcases, and we started to receive some very favourable feedback from other designers, which of course pleased us no end – thanks guys and gals, we really do appreciate it!

To date, we have had over 30 features, and these have helped start the ball rolling on the traffic front. For the statistics lovers amongst you, we have pushed over 40GB of bandwidth since going live, and served over 75000 page views (not bad for what is essentially a one-page site!).

Perhaps one of the achievements we are most proud of is the fact that we went Google PageRank 6 within 6 weeks of the initial live date – this has knocked our socks off, and should hopefully serve as a salutary example that a considered approach to design can really pay SEO dividends in the long run.

So, where do we go from here? The answer is simple – we will try our hardest to adhere to our Mission Statement; “We will make the Web awesome!” – We’re excited by what we do and by the direction online design is taking, and wouldn’t do this if we weren’t! We hope you’ll tag along for ride …watch this space.

As we’re a new company we wanted a site that will garner attention by itself, so the high-res, full-screen brochures site typical to Flash were the sort of look we were going for, but keen to keep it standards-based we decided not to go the Flash route and do everything we could with CSS and JavaScript.

I’m happy to say that we weren’t particularly limited by either of those technologies. The most limiting factor has been the browsers themselves. IE6 was a conscious write-off. If we ever find a way to get transparent PNGs working properly, completely properly, we’ll revisit it. But for now, choosing not to support a 7 year old, poor excuse for a browser, regardless of its usage, is something of stand for us, and for standards.

There are a few key elements to the design that I will break down further soon, with a full tutorial for each technique:

• The background; entirely original, painted in Photoshop. Not one photo used.
• The vertical parallax; inspired by ClearLeft’s horizontal parallax, we wanted to take it one step further, and although not CSS-only (which was absolutely impossible) it uses a minimal amount of JS. Check it out when scrolling – the clouds move at a different rate to the sky.
• The one-page website; aside from the blog the whole site fits on one page. Not ideal for SEO, but for now, SEO isn’t a deal-breaker for us on this web site.
• Completely valid code; advanced CSS3 techniques, clean JS and conditional comments have been used to create an entirely HTML and CSS valid web site.

As I said, I will write up full breakdowns and tutorials soon, but for now, please have a good look around and let us know if you like what you see.