Peter Sofocleous | Web Developer

www.golfliveevent.com

Watch Learn and Indulge your Passion

Brand Events, one of Deep’s existing client which host events such as Top Gear Live (live.topgear.com) and Taste Festival (www.taste-festivals.com) have created a new and unique event.

GOLF LIVE is a new event to be held at Stoke Park on May 14 – 16, 2010. This truly engaging event is designed to give amateur golfers of all ages and abilities the chance to indulge in their passion by watching and learning from the best in the game. Leading professionals and coaches will host instructional theatres based around specific golfing skill sets such as long-game, short-game, bunker-play, chipping and putting.

The website is an integration of XHTML, FLash and Ajax to deliver a stylish and slick website. I used jQuery (www.jquery.com) as opposed to Yahoo’s YUI (developer.yahoo.com/yui) and I have to admit I found it lightweight and performed very well. Have a look for yourself.

Golf Live :: Home

Golf Live :: Talent

Deep was commision by WebsEdge to redevelop the Local Government Channel website. Our brief was to add to the existing functionality while giving the website a completely new look and feel.

www.localgovernmentchannel.com

With 500+ large videos (640×270 pixles) across the website, bandwidth is a definite concern. We decided to use AJAX to break up the website into sections. Each section is only called when its required thus saving on unnecessary data transfer. With a website so heavy, efficiency is a must. We spent some time optimising and improving the speed not only of the data processing but the delivery of that data. The videos are on a seperate server so that streaming has no bearing on the server load. We are caching PHP functions, MySQL queries, and HTML output. We are even caching friendly URLs.

The redeveloped website had to be ready for May 4th to coincide with the start of the annual “Council Worker of the Year” awards hosted by the Local Government Channel website.

Local Government Channel - Home

Local Government Channel - Awards

www.brand-events.com

We bring brands to life and inspire
consumer passions through live events and experiences.

During January 2009 Deep launched the new Brand Events website. This website incorporates several different technologies to bring together a website which reflects the personality of the team – fun loving, yet hard working and promotes their top global brands such as Taste Festivals and Top Gear LIVE.

Firstly we had to construct a Event Manager which allows Brand Events to add all their events they hold across the world. This data is provided in XML format for use on the homepage (www.brand-events.com/) and in a PHP array for the calendar page (www.brand-events.com/events_calendar/).

Several pages across the website are flash based. For these a text only version is running in the background. On the homepage we had to construct a 3D model and animation of the world and plane. These for put together and incorporated with data from the events manager to give the user a more interactive experience. On the event calendar we had to find a way to display all the events for a country, event and date. We did this with a table of data with events marked against the year’s months. We used Yahoo YUI to make the JavaScript animation requires to show this data on a mouse over action. All this data for the events is also written in the mark-up to enable Search Engines (like Google) to index.

One of the biggest challanges with this website was the fact that it is designed to a four colomn grid with rounded corners added to some areas of text and to all images. This might not sound as a big deal but when you need the entire website to be content managable by the client without them having any HTML knowledge. We decided the best approach was to modify our WYSIWYG editor in our CMS (DeepAccess) to automatically position images and to allow the use of code snippets to handel all the rounded corner text blocks. By the end this enabled us to content manage a conplex design with relative ease.

Brand Events - Homepage

Brand Events - Who We Are

In the last few years through trial and error I have found certain things that make a difference for Search Engine Optimasion (SEO).

1. “Update your Homepage”
   Your homepage is the most important page. If its identical every time a search engine comes back then a search engine will come back less often thus dropping your ranking. Adding a latest news feed on your homepage can do wonders for your ranking. Although your homepage is the most important the rest of the website should also be updated as often as possible.
2. “Content”
   If you want to have a good ranking you need to give a search engine what it likes… That’s plenty of content to munch through. Again make sure your homepage has at least 200-300 words on it. For a search engine, information is king. The more relevant information your website has to offer the better your change of getting a good ranking.
3. “Relevancy”
   Its important that you browser title, meta keywords, meta description, page heading, and page content all are relevant with each other.
4. “Linking”
   A search engine needs to be able to get to every page on your website. A menu with the submenu hidden which expands means a spider needs to go several levels deep to get all the pages. Having all the links on the page and potentially using JavaScript to hide the sub menus is one way to get all your links on the top level.
5. “Webmaster Tools”
   Google and Microsoft both provide free tools for managing your listings. One of the best things you can do is create an XML sitemap for your site and then use the tools to tell the search engine where to find it. (Google Webmaster tools, Microsoft Webmaster Centre)
6. “Structure”
   Think about how your page is layed out. A page should be coded in a logical manor. Starting with Logo, menu, H1, content, H2, content, H2, content, H3, content etc.
7. “Accessible Pages”
   Making your page accessible not only means it can pass WCAG (Web Content Accessibility Guidelines) tests but it also gives a search engine a lot more information about your page. For example an image without an ALT tag is useless to a search engine. Links should have titles on them. Tables should have summaries on them. Basically every none text element should have a text description. Get a report on your website.
8. “Validate your Website”
   Goto W3C to analyse HTML and CSS. Here are the links to the W3C’s HTML Validation Tool and CSS Validation Tool.
9. “Optimise”
   Every page should be unique. That means, the browser title, the heading, the meta keywords, the meta description, and even the content should be unique. Optimise each and every page.
10. “Friendly URLs”
    Assuming your server supports this, its a must. It can turn an ID based URL into something readable. This also increases the pages relevancy for a search engine. For example a page called /index.php?id=123 gives you nothing for search engines however with Apache’s Mod_Rewrite that page can look like /contact_us/ which gives search engines something extra to rank the page on.

http://www.maris-interiors.co.uk

Maris Interiors LLP is the UK’s leading specialist in office design, project management, fit-out, refurbishment and furniture supply. We create world class working environments for occupiers throughout the UK and Europe.

Last week Deep launched the new website for Maris Interiors. This is a slick flash website with large scaled images. The biggest challenge with this was was its shear size. With over 150 pages, and a large image for each page (1400x937px averaging between 300KB-500KB), it was important not to compromise performance. Since the images are so big we decided not to stop the page text from loading until the image was download. So if someone has a slow internet connection they still get he page content. Also the entire website’s content is contained in one XML file to speed up navigation within the website.

This website was also constructed in Flash 9 to take advantage scaling images. The usual box of tricks is included on this website. We have friendly URLs, text only version and changing browser titles from within Flash.

Maris Interiors - Homepage

Maris Interiors - About Overview

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