Design and Development of a Web 2.0 classic

When we set about building the new Wiliam website, we asked ourselves what we were trying to communicate to people about our web design and development skills.

But, in this day and age, what do you have to do to make your site standout from the rest? Do you go with some sort of Adobe Flash example showcasing your creative and technological skills, but potentially sacrificing the search engine optimisation of your site?

Perhaps a really image heavy html site, that’ll be slow on some machines but, with a bit of creativity, can be rigged to contain a plethora of keywords. How about an AJAX head rush application style site that really pushes the newest and coolest user interface and web design ideas on the internet, following in the footsteps of cool Web 2.0 sites such as Digg, flickr and bloglines.

Well, we decide to try and create something new. Something better. Something that took all 3 ideas, and turned them into something else. It would be big headed of me to say that it’s web 3.0 or web 2.5. Perhaps more Web 2.0.1.

Why do I say that? Well, internally we were being pulled in several directions. The design team wanted to have a site built solely of Flash that could really demonstrate the huge creative talent that Wiliam has to offer. The development team are always looking for new toys to play with, and wanted to try out a few things they’d never done using AJAX and asp.NET. Our Marketing and client services teams wanted the site to communicate our message to as broad an audience as possible, with lots of content and examples of our work. Our Search Engine Optimisation experts wanted top ranking and the site to be as search engine friendly as possible. And then you get onto the directors who wanted it to do everything imaginable.

So, on looking at what we wanted to achieve as a whole, and looking at some of the latest SEO methods and cross-browser CSS trickery we’d developed, I came up with a way that would please everyone!

The creative team were allowed to really push their creativity as far as they could with the use of interactive flash backgrounds on the pages. Navigation, although simple, is built using flash - although there is a non-flash version if you turn off Javascript. Then, to ensure that their creative work is enjoyed as fully as possible, we made the content transparent using CSS - but very subtly so the content is still readable, and the background able to cover the entire page. Overall, the new site layout is clean, simple, flexible, and really allows us to communicate the Wiliam experience in both words and imagery.

Development got their wish. Large amounts of the site are run using various AJAX methods. The whole framework is built using .NET and Anthem.NET, allowing us to refresh only the elements of the page that change. This gives website viewers more feedback as the menu and content update, showing loading imagery on the areas that are changing. The background changes, and the JavaScript talks to the flash and vice versa. In itself, these are not new ideas, but using this combination of technologies to provide a more engaging experience, and really helped to not only impress our users, but back-up our creative talents at a technology level.

Next up came sales and client services. How could we keep them happy? Thankfully, the design ideas we’d created allowed them to not only communicate our  company message, and give amazing examples of our client work in the backgrounds and case study pages. In fact, we feel that the backgrounds almost showcase our client’s better than the content. All of our technologies, including Siterank Search Engine optimisation and Sitecast Email Marketing Software, are all nicely showcased by the clients

For anyone that knows the web, you’ll know that everything I’ve just described will have Search Engine Optimisation Professionals screaming. How can we do all that, and make it search engine friendly? Make a second site, and risk having the two go out of sync? Well, no. That’d be lazy, problematic, and there’s nothing Google and Yahoo hate more than site’s that duplicate or even hide content. And to be honest, I think that’d be cheating the system. After all, our new site is meant to be pushing the boundaries of what we can do with the Internet.

Actually, the way we did it is a secret. People can pull apart our code and see some of it, but it is how the whole thing works together that is the key; and that’s what I can’t tell you.

So, we now have what we feel to be one of the best Web 2.0 design showcase sites on the internet. And it’s these cutting-edge ideas developed for the new Wiliam site that allow us to create truly amazing sites for our clients; both old and new.

Useful Links