portfolio
It's not an exhaustive list, and I'm adding more work as I go along, but...
click a link on the right to see some of the work I've done over the past few years.
It's not an exhaustive list, and I'm adding more work as I go along, but...
click a link on the right to see some of the work I've done over the past few years.
aussie intranet
developed sept 2009
site: construction of theme and web parts for SharePoint intranet
Aussie is Australia's leading non-bank financial services group. Following on from a successful site rebrand from Amnesia, Aussie wanted to relaunch their intranet on a SharePoint platform.
Phase one of the brief was simply to skin what was otherwise an out-of-the-box implementation of a SharePoint WCM site, so I created SharePoint page layouts, masterpages, and CSS. Most of the page content would initially use my template HTML in content editor web parts, but additionally, a few custom content query web parts were required, which I built using XSLT.
» intranet - no link available
amnesia razorfish
developed 2008 - 2009
site: Friend Magnet - a Flash game that plugged into Windows Live Messenger, allowing players to play with their MSN contacts to win prizes, and chat with them at the same time. The site used Microsoft's JavaScript MSN interface, but had to work across different browsers. The game was backed up by online and TV advertising and proved immensely popular.
site: Lipton BrainTrain - working on the premise that theanine (in Lipton tea) promotes alertness and mental agility, this (mostly flat) site hosted a variety of Flash games and puzzles, backed up by a lighter WAP site.
prototyping: NSW Dept of Education built a CMS to allow all schools in the state to build standard, good quality, professional looking websites with the same features but different skins and colour schemes. I worked with our designers and another front-end developer to produce the HTML templates for these different skins.
v8 supercars
redeveloped summer 2007
site: annual redesign of the existing site.
BigPond's V8 Supercars site builds on a large legacy database packed full of team and driver profiles and news articles, as well as the current and previous seasons' competition results and upcoming calendar information stored in the newer Massive CMS. On top of that is an excellent multimedia offering with photos, videos, the ever-popular Grid Girls competition, and Massive's award-winning broadband experience. This allows registered users to open a dashboard and watch the race in real time in a Flash console, switching between different drivers' cars for their current race stats and video.
The redesign of such a large site is an immense undertaking, with a big effort to move more of the legacy content into Massive's .Net/XSLT CMS; I constructed new XSLT templates for the new page layouts and worked with another developer to add new features, such as a more usable photo gallery and album navigator (ASP/AJAX/XSLT). I also undertook an audit of the site's page weight - we aimed to make it a great experience for broadband users, but the bandwidth-guzzling features were disabled by default for narrowband users.
Centre for Legislative Studies
redeveloped feb 2006
site: redesign of the existing HTML site.
The Centre for Legislative Studies website is an academic site on the University of Hull domain. The brief was simply to redesign the site, restructure to make the site compliant with the Disability Discrimination Act, and produce pages with minimal and semantic mark-up for the site webmaster to maintain.
The end product was the result of working closely with the webmaster, and is a clean, easy-to-navigate site (in House of Lords red!) that will require very little in the way of maintenance.
BBC Two
developed dec 2005 - feb 2006
site: a redevelopment of the existing BBC Two website for a broadband audience, providing users with current programmes for viewing as streaming video.
The BBC has a large number of websites, and there is a strict template that pages must comply with. The new BBC Two site does this, but uses an ambitious page layout comprising several "layers" of HTML and Flash, as well as having embedded Flash video in between, and occasionally a bit of unobtrusive AJAX. Initially, each page made use of dynamic Flash animations to effect transitions from page to page that degraded gracefully depending on user system, browser/platform combination, and download speed - but this has since been phased out.
The site offers users the opportunity to view streaming videos of programmes shown on BBC Two through either Real Player or Windows Media Player; the site uses a bespoke CMS that allows editorial staff to group videos and content and publish to the site. While there is currently no CMS for non-video content, all editorial content is kept separate from page templates using Server-Side Includes; upgrading to a database-driven site will be a short step from here. In the meantime, I built a mini web-based CMS that allows the editorial staff to refresh the homepage quickly without having to use HTML.
Various pages on the site use existing BBC website applications, such as the rating tool that allows users to give each programme or episode a rating out of 5; on the new BBC Two site, the interface is a Flash movie that connects to the Perl back-end, and users without Flash get a normal HTML form in its place.
As with many other BBC sites, BBC Two has a newsletter for users to subscribe to for updates about the site. I integrated the design with the existing BBC Majordomo mail delivery system, coding the mail to have a consistent display in popular mail clients such as Outlook, GMail, Hotmail, Yahoo!, etc.
Cathy Hutton
developed jan - feb 2006
site: a portfolio of Cathy Hutton's creative work built using Flash.
Cathy had a clear idea of what her portfolio should look and function like, and I delivered her design using Flash as requested. Each section of the site showcases Cathy's work and allows the user to open larger, higher quality pictures. The video and radio sections each open in a pop-up window with embedded QuickTime.
Cathy is able to make most editorial changes herself - adding extra material (video, text, or graphic) and navigational elements since as much of the site as possible is configured using a single text file, and all images are imported into the movie as requested by the user.
“Graham is a Godsend. He took my giant folder of work, understood what I wanted, added a few fancy bits and bobs that blew my socks off and has left me with a website I'm really chuffed with.”
framfab uk
developed june - nov 2005
site extension: additional features for the intranet built for ABN AMRO in 2004, including localised content.
The additions continue to work on the same JSP/XHTML framework as before (details here), although the site modules had been reorganised into groups/functions that made more sense within the enlarged site. Apart from the JSP/XHTML development, I reorganised the tiles-pages and tiles-modules XML files to reflect these changes.
prototype sites: various prototype websites for BT, Orange Netherlands, Vodafone UK, Deutsche Bank
All sites were built using an XSLT/Java rendering engine that allows modular development of the site without actually using Struts/Tiles. All HTML modules are built as XML snippets and pulled in dynamically according to a page/module mapping document not unlike a typical tiles-pages.xml doc. Two of the sites, for Deutsche Bank and Vodafone, had to be developed bearing in mind the additional problems of internationalisation, especially with the typically longer words and sentences of German.
All pages had to meet WCAG A standards, so JavaScript had to be non-essential.
» www.framfab.com | » intranet - no link available
» more about my time at framfab
fresh media group
developed aug 2005
site: development of XHTML templates for a redesign of the existing FMG website.
wunderman interactive
developed apr - june 2005
site: microsites for Microsoft UK.
The site has been redeveloped using the XML-based MNP (Microsoft Network Project) framework:
"MNP provides a development framework for content providers within Microsoft to create Microsoft.com Web sites easily, while maintaining a division between content and design. MNP enables the MNP group to make updates to the design and functionality of MNP-compatible Web sites without requiring the intervention of the content providers. Additionally, MNP ensures that sites created with MNP are compliant with Microsoft.com policies."
I worked on several new microsites within the Microsoft UK site, such as Windows Mobile, Mobile & Embedded DecCon (MEDC) 2005, Local & Regional Government, Education, as well as regular updates to existing sections, all using the MNP framework. In addition to this, I coded HTML emails for MSN members in North America, Europe, and Australasia.
paper memories
redesigned and developed mar 2005
site: a simple information site, built using XHTML, PHP, and CSS.
The Paper Memories site originally launched in 2003 and won industry awards shortly afterwards. The site has become the main client-winner for its proprietor, who decided a fresh look and feel was needed to showcase her new collections.
The brief was to give the site a more modern feel while retaining its feminine atmosphere. The site also now uses simple text files for the webmaster to update with minimal knowledge of HTML.
teachers' tv
developed sept 2004 - feb 2005
site: a world first, Teachers' TV is a government-funded tv channel providing support and interest programmes for the education sector. It's backed up by www.teachers.tv, built on a Java platform: JSP, XHTML, JavaScript, Flash.
Recruited to be the sole interface developer for this site, I was responsible for ensuring all front-end development met project deadlines and for managing any contractors. As a government-funded site, teachers.tv had to meet WCAG AA standards across several different platform/browser combinations, catering for what teachers could reasonably be expected to have access to at school and at home. All Flash and JavaScript elements on the site had to have alternative content. Development consisted of building JSP/XHTML templates and working with the tiles-pages/tiles-modules XML files which the Java backend used to serve the pages.
The site's pages use a system of layouts and sub-layouts which pull in individual modules; each page also pulls in a number of different stylesheets depending on the layouts and sub-layouts used, so the layouts and stylesheets cascade in concert.
The Teachers' TV website is a true multimedia offering - it provides all of the programmes (for which it has licensing permissions) as streaming and downloadable video, and its programme guide is an interactive Flash movie that allows users to browse by day, week, or term; links from individual programme pages take you straight into the guide. Registered users can also set up email reminders for programmes they don't want to miss.
For each programme the site has an individual summary page with links to the streaming video, as well as a page with resources for the user which can be downloadable files, book/cd/dvd references, or links to other sites. As a result, the site has a lot of data which is entered via a bespoke content management system; I was responsible again for all front-end development on the CMS, as well as the site's extranet and preview website (which was live until the tv channel launched in February 2005).
» www.victoriareal.com | » teachers' tv
» victoria real's teachers' tv case study
» more about my time at victoria real
oyster partners
developed apr - sept 2004
site: a division intranet for Netherlands-based international bank, ABN AMRO, built on Java platform: JSP, XHTML, JavaScript.
Lead interface developer on this site, I was responsible for ensuring all front-end development met project deadlines and in-house coding standards as well as W3C accessibility standards. Cross-browser functionality was limited to Internet Explorer. Development consisted of building JSP/XHTML templates and working with the tiles-pages/tiles-modules XML files which the Java backend used to serve the pages.
All pages had to meet WCAG A standards, so JavaScript had to be non-essential, but one of the more interesting JavaScript features was a calendar that allowed the users to select different date parameters which were passed to the events search engine - it required some complicated logic!
One of the trickiest aspects of coding this site was the novel design of the pages: each section of the page appeared to be a square of paper pinned or stapled to a board, so putting together the graphics of shadows and corners and re-using them required some precision cross-browser CSS. The clickable walkthrough tutorial used this to great effect too (screenshot below).
» www.oyster.com | » intranet - no link available
» more about my time at oyster
floriade
developed feb - mar 2004
site: an ecommerce site for Floriade, an award-winning floral studio in Mosman, Sydney.
Floriade's website, while chic and functional, poorly integrated the main informative section of the site with its off-the-shelf online shop functionality. Once a user entered the shop, for instance, the only way back out was to use the browser back button, and the navigation was inconsistent.
Floriade's owners were also disappointed with the lack of imagery on the site. I redeveloped the informative section of the site, adding photographs I took on the premises - now each page boasts a large, colourful image, with three other thumbnails, which can all be viewed larger. There is also a gallery where visitors can get a feel of the shop and the products it offers.
The shop section which had previously only used a standard iNetStore template now used a bespoke one, including navigation consistent with the rest of the site.
Finally, Floriade's owners required some more thorough tranining in how to get the best out of their online shop.
backpackers travel centre
developed oct - dec 2003
site: a travel portal for the BTC chain (a Delta One client), built with HTML, PHP, and JavaScript.
BTC were acquired by Backpackers World in 2004, so the BTC website no longer exists.
Sole designer and developer of this site, the bulk of my work was integrating a booking engine being built by an external partner, customising it using CSS, and giving feedback on the development. Other work included producing marketing emails and print advertisements, and designing and building a web-based HTML marketing email builder for non-technical personnel.
biltmore on bondi
developed oct 2003
site: a simple PHP site to advertise and take bookings for this Sydney backpackers' hostel, a Delta One client.
This site was developed from one of a number of designs proposed to the client, and constructed using HTML, JavaScript and PHP. Bondibackpackers.com.au's new look is vibrant and summery, completely in keeping with its Bondi home.
» www.deltaone.com.au - site offline
» www.bondibackpackers.com.au
» more about my time at delta one
delta one
developed oct 2003
site: a simple HTML site to promote Delta One Services.
A simple HTML site using some JavaScript, this was picked from a number of my designs and built quickly. It is bright, minimal, and quick to download.
Delta One closed its offices in 2005.
» www.deltaone.com.au - site offline
» more about my time at delta one
paper memories
developed sept 2002 - march 2003
site: a flat HTML development for sale and promotion of Paper Memories merchandise.
This site was developed from one of a number of designs proposed to the client, and constructed using HTML and JavaScript, but in such a way as to make conversion to a PHP content management system quick and simple.
Only three months after launch, papermemories.co.uk won an industry award for website design. I redesigned and redeveloped the site in March 2005. The site has since been redeveloped again.
» new site: www.papermemories.co.uk
a gift from the gods
developed sept 2001 - oct 2002
site: an e-commerce development for sale and promotion of A Gift From The Gods merchandise.
Working freelance for echo4.co.uk with a designer, I built all of the pages in HTML, using JavaScript includes for navigation etc. The bulk of the site's work was customising and integrating an off-the-shelf JavaScript e-commerce engine with the rest of the site. The site has since been redeveloped.
» new site: www.agiftfromthegods.com
freeserve freeyourself recruitment site
developed march 2003
site: an applications and information microsite aimed at potential employment candidates
The freeyourself makeover involved building the interface from scratch in a short time, and working closely with a designer to make a site that was both usable and in keeping with the current advertising concepts. The other key issue was providing a new interface to the applications back end system, provided by a partner company.
» www.freeyourself.freeserve.com
» more about my time at Freeserve
freeserve member centre flash christmas card
developed nov - dev 2002
feature: an interactive "build-your-own" Flash christmas card available to Freeserve members.
Working in a team with a designer and ColdFusion developer, I helped build a Flash card which was customised by the user, then submitted to a ColdFusion web application; an email notification would go to the recipient, directing them to another Flash movie which delivered the card.
My contribution was the ActionScript in the "build" movie, to build an XML structure and transfer the Flash values into it to feed into the ColdFusion application, and then the corresponding ActionScript to reverse the process in the "receive" movie.
» temporary feature, no link available.
» more about my time at Freeserve
freeserve mobilezone rebuild
developed feb - mar 2002
site: rebuild of Freeserve's cms based mobile channel.
On this channel, I was the sole client-side developer, building HTML pages and JavaScripts for the inclusion of CFML code to produce Spectra CMS pages. Where possible, the pages use JavaScript to write out repetitive HTML, especially in the case of headers and titles. The channel also includes some interactive FAQs, a WAP emulator, an XML feed from Freeserve's ringtones partner, and various other utilities.
» www.freeserve.com/mobilezone
» more about my time at Freeserve
freeserve newsletters
developed july 2001- mar 2003
site: HTML emails for Freeserve members
Freeserve's direct marketing campaigns frequently utilise HTML emails; the key task in creating these emails was to keep the document weight as small as possible, by using minimal HTML, judicious CSS, optimised graphics, and an awareness of the issues relating to mail clients used by Freeserve's member base. To allow colleagues to keep track of past campaigns, I built a JavaScript based archive.
» HTML emails, no link available.
» more about my time at Freeserve
the tamar tapestry
developed june 2001
feature: a year in review presentation in the form of the Bayeux Tapestry
The Tapestry is a year in the life of Tamar, a digital solutions agency. It is simply a more creative way of presenting a year in review than using PowerPoint! The Head of Production gave me a timeline with some facts and figures, and the Bayeux Tapestry theme to work from. The end result: a humorous (yet factual!) cartoon of some of the key events, characters, ups and downs that the agency experienced over twelve months that amused my colleagues nearly as much as I enjoyed creating it.
» www.tamar.com | view the Tapestry in miniature
» more about my time at Tamar
tamar :: ipf
developed 2000
site: Investment Property Forum for Tamar
One of Tamar's client websites, ipf.org.uk had just entered the build stage when I joined Tamar; I built the bulk of the pages, amending templates, and was the regular HTML coder for this site, integrating later database content into the site, and giving frequent feedback as to the best way to present the site's information, expanding on the client's expectations and ideas as much as possible.
» www.tamar.com | www.ipf.org.uk
» more about my time at Tamar
tamar :: designs
designed sept 2000 - june 2001
designs: alternative site designs for dechert, endsleigh, and logo for token-ring
Sometimes a client wants a fresh look for their site, and on some of these occasions, I prepared designs for consideration. Among them were a flash interface for dechert, a DHTML version of a different flash interface for dechert, an HTML interface for endsleigh insurance, a logo for token-ring (which was selected), and other designs for cambridge business park and olswang.
swansea lgb
developed 1998 - 2000
site: a university society website, completely in HTML, offering news and member information. More of a portal/web resource than community site.
University of Wales Institute of Classics & Ancient History
developed 2000 - 2001
site: this is another university site, this time for the Classics & Ancient History Insititute of the federal University of Wales; a simple HTML site for easy maintenance, with some more complicated (but again, simple to maintain) JavaScript in the nav bar. The site has been taken offline until a .ac.uk domain can be acquired.
» site offline, no link available.
ss mary and james churches
development in progress
site: a simple site containing history, photographs, and service information for the two churches, St Mary's and St James' in West Hampstead / Kilburn. Built using simple HTML for easy maintenance, and a little JavaScript for navigation elements.
» site under development, no link available.
ISI: Financial Planning & Profitability System
developed 1999
site: an intranet site for a department at ISI; built in HTML using minimal JavaScript - this site is an internal communication site with information for the global team, a promotional tool for internal marketing of the product application (FPPS), and a training resource for FPPS users globally.
» intranet site, no link available.
» more about my time at ISI
