11/06/08The brand new youlove.us site launches!

We’ve been working ourselves into the ground recently (on top of huge amounts of client work) in order to get this site live, so I haven’t much time left today to write the full write-up I was hoping with regard to this design. I will however elaborate on it tomorrow.

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.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.