Contract Front-End/Client-Side UI Web Developer in Manchester, UK - John Kavanagh

Richard G. Mitchell is a renowned television and film composer, I have been responsible for his websites and online presence for the past several years.

His most recent website is something a little special for me - built up on a custom PHP CMS, which I developed myself (!). The intention was to not only to roll out a completely new look for his website, including new media-types in embedded videos, but to also allow Richard to maintain the website and the content himself.

Virtually everything about the site is customisable through the admin panel. In particular, all of the videos and music tracks you see on the site have been uploaded by him and encoded automatically from the server-side before being presented back to users. The front-end is a mixture of HTML4, CSS, jQuery, and Flash for different multimedia types.

The Space Place was the natural continuation of the original Transporters project and followed a similar recipe: a series of 3D animated short films intended to aid children with autism in learning about emotions and facial expressions.

In addition to the animated episodes, The Space place also included an an entire NAS-accredited learning pack of DVD-based games (controlled through the remote control), cards, and exercises.

I worked on all aspects of this product from 3D design and development through to final post-production editing, as well as development of the user-friendly .NET-based website which includes a number of Flash-based games and video clips.

Holiday Inns Meetings is a portal website which makes it quick and easy for business users to book meeting rooms in any of the Holiday Inn hotels, worldwide.

Built on .NET, I worked on a total front-end rebuild of this project in order to provide a quicker, sleeker, and more accessible experience for users - particularly with the emergant trend of mobile devices at the time.

This included a significant amount of code refactoring and cleaning up, as well as optimisation of graphical elements either by combining into sprites or using more modern techniques of CSS3 to achieve the effect images had been required to achieve previously.

The I Made A Star website allowed users to create their own 3D music videos staring their favourite pop stars and to their own choreography.

My involvement with this project was in developing the original HTML4 and CSS templates which were later integrated with their backend system. Aside from HTML, CSS, and jQuery, this also included a significant amount of interaction between the DOM and Flash elements within each page. The options for environment, characters, clothing, expressions, dance maneuvers and props made this a particularly complex and interesting project.

Originally intended as a quick-and-simple holding page whilst a more substantial site was built, the Lawrence Keogh Shire Kidney Care website proved so successful in current form that it was been live for more than two years!

Built in xHTML, CSS, and jQuery, the site makes heavy use of the Fancybox modal window extension which underwent significant modification for this particular use.

The site includes one static page and several overlaid sections for recipes from Lawrence Keogh (suitable for suffers of kidney disease), as well as .NET forms to submit your own recipes for inclusion on the site or join the mailing lists.

Guy Meachin is a freelance British photographer. This website showcases his work and chronicles his 12,000-mile journey by land and sea using a Leica rangefinder.

A very quick and simple build from Guy's own designs, it is built in HTML5 and uses custom @font-face and jQuery for additional interface enhancements. The slideshow use a custom installation of SlideShowPro which uses their RSS feeds, allowing Guy to maintain the slideshows as well as remove and add new ones whenever he gets chance.

The site is also carefully optimised for cross-device integration, particularly with mobile handsets and tablets, where the same feeds are used to display a JavaScript and CSS alternative slideshow for those without Flash.

2degrees is a social networking site which - amongst other things - enables businesses and individuals to collaborate in tackling issues in sustainability and the environment.

I joined the 2degrees development team as their only client-side (front-end/UI) developer at a key point in their software development: the in-house team was very new and it was my responsibility to implement and carry out a roadmap of redesign, redevelopment, and rejuvenation of their platform, whilst working alongside their service-layer developers in the implementation of new features.

Working to PSD design from the talented guys at effect digital, and with a diverse set of requirements (including internationalisation and key browser support), I rebuilt the front-end from scratch in xHTML and CSS using jQuery, and made a significant improvement on both the platform's performance in search engine rankings and on-page optimisation/load speeds.

InsFocus is an Israeli software company who offer a web-based Business Intelligence software suite: InsFocus BI. This provides insurance companies and underwriters with analysis data and repors for each domain, using their built-in, comprehensive insurance data model.

I built the front-end of their BI web application from their designs in HTML5, CSS, and jQuery. The software is web-based but intended to behave and react exactly as a native desktop application would so this was an ideal application for jQuery UI. More advanced features include drag and drop, resizeable/collapsible areas and columns, various charts and reporting mertics (including sortwable tables), and context menus.

In-all the project required a lot of advanced features to get the best possible interface experience for the end user, as well as carefully planned garceful degredation for those on older and lesser-capable browsers (supporting down to IE7).

The Group Lotus website was relaunched during the first half of 2008 and I spent the majority of the following year in the studio of a small marketing agency as part of the development team responsible for the website's maintenance and continued evolution.

Built on CodeIgniter (PHP & XSLT) with a Flash/Prototype.js-enhanced front-end, the website reaches thousands of people every day and is a true blend of progressive enhancement, different front-end media platforms, and delivery methods. My involvement remained purely in the front-end: tweaking and optimising the website whilst aiding in the implementation of translations and additional features.

The Nice Pictures website was built with the intention of providing a slick and Flash-like experience without the sacrifices to SEO and the reliance on third-party plug-ins that Flash development usually entails.

Ths website is a combination of XHTML, CSS, jQuery and PHP to produce a slick, professional and activating website for this young film company to show off their movies and attract investors.

Designed by the very talented A-NT, I was responsible for all development, and the website has proved to be a great hit with fans and investors alike. There is intention to expand the website next year to coincide with their next big cinematic release.

Built on top of an off-the-shelf premium WordPress theme in xHTML/CSS/jQuery, the final site includes a lot of customisation to customer requirements including an AJAX-powered contact form (with on-the-fly validation), homepage slideshow (fully customisable from the WordPress control panel) and Google Maps integration.

The domain name, although not my own personal first-choice, has proved extremely powerful in channelling visitors and new customers to the site via search engine indexing.

Piwik (now known as phpMyVisites) is an open-source, community-developed, and self-hosted analytics tool built on PHP and MySQL, and intended as a viable self-hosted alternative to the like of Google's Analytics.

During my final year at university I acted as part of the volunteer development team as a tester and front-end developer. My role in the platform's development essentially boiled down to improving and refactoring the code base for cross-browser compatibility and usability using HTML, CSS, jQuery, and a number of Flash-based graphing tools (these were later re-implemented using HTML Canvas).

During 2006 and 2007 I worked on a wide variety of educational ActionScript and HTML games for the BBC Jam project - offering digital and multimedia-based online learning resources to schools across the UK as part of the government's Digital Curriculum initiative.

I was working in a small animation and hypermedia studio at the time, so my involvement in the projects spanned a wide variety of production tasks; ranging from live-action shoots and set dressing, to voice-over sessions, 3D animation, video editing, and the requisite digital HTML markup and Flash development.

Our team developed interactive games covering a wide range of eductional topics, primarily focusing on humanities subjects such as History and Geography, particularly: an interactive Victoria-era town in a similar style to original Dorling Kindersley Multimedia software with live-action characters and a highly-detailed rendered 3D environment.

Sadly the BBC Jam service was shut down in early-2007 and the majority of our projects were either only published for a short time, or never saw completion. The screenshots to the left are from just one of the projects I worked on, innumerable others have been lost in time.

A customised WordPress build for a Guildford-based professional photographer.

Loosely based around - and heavily modified from - a premium off-the-shelf template, the site includes full back-end control over all on-page content: from the jQuery (and Flash alternative) slide shows to the footer contact details and the creation of custom flat pages.

The London 2012 Games Maker was a campaign to find volunteers and workers for the Olympics which included advertisement on public transport, television, and radio.

The campaign came together and cumulated around a central interactive online game on the London 2012 website which lead potential Games Makers through the different requirements and perks of being involved in the programme. After successfully navigating the question and answer phase, visitors were invited to submit their details to apply to get involved.

Primarily built in ActionScript and Flash, this was released at a time where iPads and iPhones were becoming much more popular and the issues related to using the Flash platform - where a significant percentage of users would be presented with little more than a blue Lego brick icon - were becoming very apparent.

I was charged with developing the HTML5-fall back version of the Games Maker for iPhones, iPads, and other non-Flash devices. Each page consisted of a question with two answers and a number of AJAX modal-style hot spots providing additional information for each question.

Although the Games Maker has now been taken back offline, expect to see it resurface (and the bus advertisements to return) as we get closer towards the opening ceremony later this year.

Looop is an auction-style marketplace which allows printers to sell high-quality and one-off options in the off-cuts and waste of their daily jobs: areas of print which would otherwise go to waste.

This reduces landfill and at the same time increases the printer's profits, as well as helping individuals who need short-run, and high-quality prints at discounted rates.

I worked with the very talented Jamie Scott and Breeze Design on the design and development of this platform. Using Breeze's designs, I put together the static xHTML/CSS views for the site whilst Jamie developed the CakePHP backend system which makes everything work.

A bold, captivating, and engaging website for SafeStart UK who develop educational packs for primary and secondary schools, educating children across the UK about online safety.

Apart from the site needing to be attractive and interesting to both young and adult visitors, it also includes a number of social/interactive areas to allow children to share their posters and in-class creations, and to enter competitions. In addition, the website also includes a Flash-based demo version of the games found in the DVD pack.

Be In Shape is a weight-loss programme which has proved extremely successful in Continental Europe, so when they came to the UK, they looked to release a new website specifically for the UK, and a rebrand to attract customers in this new market, going alongside television and radio advertising campaigns.

Working alongside the chaps at Breeze Design, we provided design services and then static xHTML, CSS and jQuery templates for the client to then integrate with their custom web application. Given the national coverage the product was forecasted to receive, and the range of media advertising campaigns used during the launch of the product here in the UK, cross-browser compatibility and load-times were of paramount importance.

Screenshots to the left are of the template developments as provided to the client - these were then partially implemented by the client before they later reverted to simply using my static developed pages for the majority of the site. I haven't had anything to do with the actual integration of my templates in their site.