Peter Sofocleous | Web Developer

www.deep.co.uk

On the 1st of September 2008 Deep launched it’s new website. This website is probably one of the smartest websites I have ever worked on. There is so much behind the scenes that the ordinary user never has any idea about.

First of all we had to construct a system to manage the enormous Deep portfolio. We made a system that allows the admin user to assign different elements (images, thumbnails, text etc) to clients and disciplines. With a few clicks a project can be featured on the homepage, or placed in a client gallery or discipline gallery. Everything is stored in the database for easy access, and cached in XML files for fast flash downloading.

Friendly URLs was a bit of a challenge. The website runs off Deep’s own Content Management System (CMS) which has build it in friendly URL support. However with the portfolio system we had to constructed an add-on module which would seamlessly integrate into the existing module.

The website has a Flash image scroller to allow to user to select a project and click through to the project gallery. Behind all the flash elements sites a fully functional and visually almost identical HTML version.

We didnt want to create a Flash version of the website and then lose ordinary HTML functionality that users rely on. These are the address bar, the browser navigation buttons (back and forward) and the browser title. So once inside the Flash gallery we insert a hash character (#) in the URL ( eg. from: /portfolio/client1/image1/ to: /portfolio/#/client1/image1/). This means we can get Flash to update the URL without leaving the physical page. We also update the browser title at the same time.  This is all done with Flash to JavaScript communication. Also as an added bonus the use of the hash character (#) in the URL triggers the browser to register a page change so the back and forward buttons now work. So all that is left is getting Flash to read after hash character and load the correct data into the gallery.

Once the new website was ready we optimised it for Google. We saw our Google links increase by approx 1500%. This has meant our traffic has also increased by approx 400%.

Deep Homepage

Deep Gallery

http://www.hunters.co.uk

In their own words, Hunters is….

“A leading architectural practice and professional building consultancy to the private and public sectors, both in the UK and around the world.”

This website is really 1 main site and 5 micro-sites all rolled into 1 website. Size this is a Flash website, the biggest challenge was its shear size. Loading 1 XML file for a Flash website is ok, but loading XML for 6 websites and still asking the website to load in a reasonable amount of time is stretching it a little. In the end Adam (one of the other developers at Deep) broke the website into 2 SWF files. 1 was the preloader which loaded the basic frame, XML for the website and search facility as well as the XWF for the main site. Once everything is loaded the main site SWF is ran.

All in all the website is about 1MB to run the homepage however the preloader is only 4KB so the user doesnt have to wait long to see something happening.

As this is a Flash website we needed to treat it like the Deep gallery pages. We needed changing browser titles, friendly URLs and the use of the browser back and forward buttons. This is all done through JavaScript as it is on the Deep website.

The whole website also has a text only version should Flash or JavaScript fail to load. This also enables Google to index the content of the website.

Homepage

Architects Homepage