Websites incorporating jQuery
This page lists those sites I've played a part in developing and/or designing that include the use of the jQuery JavaScript library to create dynamic visual effects and interactivity. I've used JavaScript in many websites over the years and tried a range of JavaScript libaries including jQuery, script.aculo.us and MooTools - and have come to the conclusion that jQuery is the one to focus on, due to its ease of use and extremely close integration with CSS.
These sites are listed in reverse chronological order, with the most recent at the top. I have indicated my professional status for each site at the time of its creation.
Click on image to see the live website (only available where my work is still current) or click text for more info on the project.
Bamford Medical
Website: Bamford Medical
Client: WM Bamford & Co Ltd
My professional status: independent web designer/developer
Following the successful launch of the Bamford website, we were asked to create a companion website, Bamford Medical, which would allow the company to sell a selection of their medical products online. The templates and CMS backend of the new site are based on the original Bamford site, with a completely different look and feel so that they are easily distinguishable from one another. I was responsible for the initial quote, information architecture, ongoing project management and client liaison, web design, HTML and CSS, jQuery, testing, training, QA and ongoing support.
WellingtonNZ - Australia landing page
Website: WellingtonNZ Australia
Client: Positively Wellington Tourism
My professional status: contractor at Chrometoaster
A couple of months before undertaking a complete re-skin/rebuild of the site, Chrometoaster were asked to create a single new template for the Australia landing page (the point of arrival for Australian visitors). The template would temporarily sit within the existing chrome of the website, but the content would follow the design that was being finalised for the new version of the site. I was responsible for building the template in XHTML/CSS, incorporating existing jQuery effects and preparing it for integration into the existing CMS, as well as ensuring a very high level of e-government and accessibility compliance.
Holmes Consulting Group
Website: Holmes Consulting Group
Client: Holmes Consulting Group
My professional status: independent web designer/developer
The international architecture firm Holmes Consulting Group asked for a completely new photography-centered design, new HTML/CSS templates, and a new CMS, which would be populated with all-new content. I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, web design, HTML and CSS, jQuery, testing, putting together the skeleton site in Silverstripe, training, QA and ongoing support.
The Beck's List
Website: The Beck's List
Client: Lion Nathan
My professional status: contractor at Shift
The Beck's List is a Facebook app linked to a 60-day viral campaign. Fans can request free gig tickets sent out as POCKETvoucher text messages, browse gig photos, tag their friends and vote for the best photos and gigs. The app also includes a Twitter feed, an iPhone app and a website. I was responsible for some design consultation at the start of the project, building the templates, some creation of new graphics near the end of the project, plus a small amount of jQuery. I worked closely with the programmer, Tom St George, as the app went through a series of iterations during integration which required many changes to the XHTML and the CSS.
Office of Film & Literature Classification - information for students
Website: OFLC - information for students
Client: Office of Film & Literature Classification
My professional status: independent web designer/developer
The OFLC wanted a new website aimed at students doing projects on censorship in New Zealand. The website needed to be accessible, e-govt compliant, and the design had to appeal to young people. I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, web design, HTML and CSS, jQuery, e-govt accessibility compliance, testing, building the skeleton site using Dreamweaver templates, training, QA and ongoing support.
Environmental Protection Authority
Website: Environmental Protection Authority
Client: Ministry for the Environment
My professional status: independent web designer/developer
Following our successful redesign of the Ministry for the Environment website, we were asked to design and build a website for the new Environmental Protection Authority. The HTML would be based on the MfE Dreamweaver templates within a completely different design, and we were also asked to build and content-code the initial 77-page website. The HTML/CSS needed to be best-practice e-government compliant and the site was to be tested for accessibility once it was built. I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, HTML and CSS, jQuery, e-government and accessibility compliance, site build and content-coding, testing, site delivery and ongoing support.
Read more about the Environmental Protection Authority project
Optimation
Website: Optimation
Client: Optimation
My professional status: independent web designer/developer
Optimation's existing website was looking old and tired, and no longer represented the company as well as it could. In contrast to the old website, which was largely passive and not well integrated with Optimation's other marketing activities, the new site needed to work much more actively as well as being an interactive space between the company and its clients - and it had to be designed to enable busy clients to get what they need in the minimum time possible. I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, HTML and CSS, jQuery, accessibility compliance, testing, QA, CMS training and ongoing support.
Master Plumbers, Gasfitters and Drainlayers Inc
Website: Master Plumbers
Client: Master Plumbers, Gasfitters and Drainlayers Inc
My professional status: independent web designer/developer
Master Plumbers had an old website that needed redesigning and integrating within a more user-friendly CMS. We identified three main sections of the site - Public, Trade and Members - which led to a four-colourway design solution. I was responsible for the initial quote, information architecture, site schematics, ongoing project management and client liaison, web design, HTML and CSS, jQuery, accessibility compliance, testing, content-loading, CMS training and ongoing support.
Ministry for the Environment
Website: Ministry for the Environment
Client: Ministry for the Environment
My professional status: independent web designer/developer
The 13,000-page Ministry for the Environment website was looking old and tired, and the Ministry wanted a medium-term website redesign solution that would allow them to keep their old legacy content, while bringing the look & feel up to date. The Ministry web team needed to be able to transfer their entire website into our new design and set of best-practice e-government compliant Dreamweaver templates as painlessly as possible, and the CSS also had to include matching styles for all their old content code. I was responsible for the initial quote, some information architecture, site schematics, ongoing project management and client liaison, HTML and CSS, jQuery and JavaScript, e-government and accessibility compliance, testing, site delivery and ongoing support.
Telecom Global Roaming
Website: Telecom Global Roaming
Client: Telecom
My professional status: contractor at Shift
The Telecom Global Roaming website allows users on the new XT Mobile Network to find out if their phone can roam, which countries are covered, and how much it will cost. The application has to work with a whole lot of different variables - but the user interface was designed to be simple and intuitive to use, while being capable of displaying a wide variety of content types in response to selections made by the user. I was responsible for building the templates in HTML/CSS and jQuery and preparing them for integration into the CMS.
Cavalier Bremworth
Website: Cavalier Bremworth
Client: Cavalier Bremworth
My professional status: contractor at DNA
This website represents the first roll-out of the new Cavalier Bremworth branding by DNA. My responsibility was to build a large set of template pages within a very tight timeframe and budget, and prepare them for integration into a custom-built .net CMS. The new site incorporates a very high level of interactivity for visitors considering purchasing a new carpet from the company, and therefore included a large amount of jQuery and Shadowbox programming, for which I was also responsible. It was the most technical site I had ever built, with an extremely steep learning curve when it came to extending my jQuery skills, which I really enjoyed.
WM Bamford & Co Ltd
Website: WM Bamford & Co Ltd
Clients: WM Bamford & Co Ltd
My professional status: independent web designer/developer
I designed and built a new website for WM Bamford & Co Ltd - one of New Zealand's leading independent medical supply companies. The jQuery effects include a number of different accordions which hide and show blocks of information on the page, automatic child > parent relationships generated in the subnav, and a timed animation for the homepage.
Salvation Army
Website: Salvation Army
Client: Salvation Army
My professional status: employee at Shift
I was responsible for building 39 templates for the new Salvation Army website in HTML and pure CSS. I incorporated jQuery effects including slide-down panels containing country maps sitewide, an accordion effect on the FAQs page and tabbed navigation within many of the section homepages.
Clean Edge
Website: not yet online
Client: Clean Edge
My professional status: employee at Shift
Clean Edge is a new online business which showcases the work of New Zealand artists and allows visitors to purchase their paintings online. My job was to build a set of 23 templates which were then incorporated into the Expression Engine CMS by a colleague at Shift. The site is very graphic-rich and incorporates a number of dynamic visual effects which I created using the script.aculo.us JavaScript library, which I taught myself to use.
WebWeaver Productions
Website: WebWeaver Productions
Client: me
My professional status: independent web designer/developer
Commissioned, designed, architecture-d, developed, built, written, edited and project-managed by me. I've recently begun to add some jQuery functionality to the site - both so that I can continue to develop my skills in this area, and also because it adds value to the site itself. The jQuery effects include the Shadowbox plug-in for displaying screenshots of old sites that are no longer online; and the clueTip plug-in, which allows me to add more detailed information to various pages. I have adapted and restyled both plug-ins, rather than using them in their default modes.
