New F2 Website Launched

Created Monday, 18 January 2010 by Aaron Francis in General News & Events

New Foote Francis WebsiteAaron here, resident web cutup guru and developer of the Foote Francis website. Today after over 3 years we have finally launched our new website - a collaborative design from all the staff in the office, its been a long time in the making and is packed full of new cutup methods and optimisation ideas.

A great deal of the Joomla frontend has been replaced with our own customised code based around the wonderful YOOTheme template overrides, to strip out as many tables as possible to and get the content as semantically correct as possible and to improve SEO. Scalable Inman Flash Replacement (or sIFR) was also used on headings to defeat the age old web safe fonts requirement, while safely falling back on the default heading styles if JavaScript of Flash is not detected. JavaScript usage in general has been kept at a minimum and the site is still usable without it.

Brand new for this site is the F2 Flash Framework Lite, a dynamic Flash based XML banner featured on our homepage with content controlled by our own F2 CMS. It takes plain HTML and overlays it over a chosen image. This will be developed into a full fledged module for Joomla and is to be included along side our F2 CMS software.

The menu is based on the deceptively simple Extended Menu module, which I have modified to output in such a way that I could create a custom dropdown menu using only CSS (with a JavaScript fallback in IE6). Dropdown menus created using only CSS allows people to navigate the site menus before the site has finished loading, one of the main drawbacks of a JavaScript based menu solution. Having done a completely custom menu also allowed me do add a nice drop shadow effect.

Optimising the site to the point where I was happy with it was no easy task. By default Joomla loads all Javascript into the Head tag, which was undesirable so one of the first things I did was defeat that by making Joomla not load any Javascript at all and manually added links into the bottom of the HTML. This lets the site load further before halting for Javascript, so although loading times might be similar to having script at the top, perceived loading time is lower as the user can see more of the site as it is loading. Going even further I implemented Smart Optimiser, combining all but 1 of the loaded JavaScript files into a single file on the fly, while also compressing and minifying, significantly reducing filesizes and speeding up loading. One file was left out of this optimisation due to incompatibility with the script, hopefully the next version will allow me to compress it! The same process was also applied to the site style sheets.

The launch of this site also marks the reduction in our support for the very outdated Internet Explorer 6. Viewed in IE6 you will notice this site has reduced support for transparency and is generally slower, although still functions properly. We will be winding down our support for IE6 over this next year until eventually we will not support it at all. We highly suggest updating to the latest Internet Explorer 8, or an alternative browser such as Firefox or Google Chrome.

Overall the site is faster, easier to access, has a fresh new design, theoretically will improve our SEO and despite all these customisations, will still be easy to update.