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.
Snapper
Website: snapper.co.nz
Client: Snapper
My professional status: independent web designer/developer
Snapper is New Zealand's leading contactless payment system and can be used for a wide range of transactions including shopping, taxis and public transport. Registered Snapper users have online access to their Snapper transaction history and current balance. The Snapper team wanted to upgrade the functionality of the transaction history page, and asked me to design and build a new version with enhanced functionality and ease of use. I was responsible for client liaison, project management, reviewing and refining the information architecture, design, XHTML and CSS, jQuery, testing, QA and ongoing support.
Ann Jasper
Website: annjasper.co.nz
Client: Ann Jasper
My professional status: independent web designer/developer
Ann Jasper is a friend of mine, and an artist who produces beautiful paintings for sale. Her husband Shelley is a graphic/website designer with whom I collaborate on WebWeaver Projects from time to time. Shelley had designed a simple and stylish website for Annie, and it was my job to build the site, content-load it, and find an appealing way to display Annie's paintings in interactive galleries within the site. I was responsible for client liaison, project management, scoping, extending the information architecture, design development, HTML and CSS, jQuery, building the completed website, content-loading, testing, proof-reading, QA and ongoing support.
Bloomsbury Associates
Website: bloomsbury.co.nz
Client: Bloomsbury Associates
My professional status: independent web designer/developer
Bloomsbury Associates is an independent financial advisory practice established to provide investment services to clients in New Zealand. They wanted a website that would provide general information about their services and their philosophy, together with case studies and testimonials from existing clients. I was responsible for the initial quote, client liaison, project management, scoping, information architecture, web design, HTML and CSS, jQuery, building the completed website, content-loading, testing, proof-reading, QA and ongoing support.
Museums Wellington
Website: museumswellington.org.nz
Client: Museums Wellington
My professional status: independent web designer/developer
Museums Wellington are responsible for three Wellington museums - the Museum of Wellington City & Sea, the Cable Car Museum and the Colonial Cottage Museum. Each museum had its own website, none of which matched each other or the new Museums Wellington branding. Their aim was to bring all three museums plus Plimmers Ark under the same umbrella website, and to use their new branding as the basis for the overall site design. I was responsible for the initial quote, client liaison, project management, scoping, information architecture, design development, HTML and CSS, jQuery, accessibility and e-govt compliance, testing, putting together the skeleton site in Silverstripe, training, QA and ongoing support.
Salters Cartage
Website: salters.co.nz
Client: Salters Cartage
My professional status: contractor at Plan A
I was asked by Plan A in Auckland to develop their homepage design into a set of design templates for the new Salters Cartage website, to build these templates and then to put together the finished website, using all-new content which Plan A had written. I was responsible for the original project proposal and quote, client liaison, project management, scoping, information architecture, design development, HTML and CSS, jQuery, accessibility compliance, building the completed website, content-loading, testing, proof-reading, QA and ongoing support.
Climate Change
Website: climatechange.govt.nz
Client: Ministry for the Environment
My professional status: independent web designer/developer
The Ministry for the Environment's Climate Change website, originally designed as a portal site, was becoming difficult to navigate, and was lacking styles for pages with more detailed content at multiple levels. With the introduction of the Emissions Trading Scheme (ETS) in June 2010, the Ministry needed to expand the capabilities of the website, while still retaining the existing header and footer and some of the original HTML structure. I was responsible for the timeline, ongoing project management and client liaison, HTML and CSS, jQuery, e-government and accessibility compliance, testing, site delivery and ongoing support.
WellingtonNZ
Website: wellingtonnz.com
Client: Positively Wellington Tourism
My professional status: contractor at Chrometoaster
A month after I created the Australia landing page I was invited to re-join the Chrometoaster team to help them with the complete re-skin/rebuild of the entire website. This was a massive job with over 60 templates, and a team of three front-end developers all working together on the new site. I was responsible for developing the website's main page structure, including all the chrome, background layers, header, footers and navigation elements and then building a range of templates and modular elements in XHTML/CSS, incorporating existing jQuery effects and preparing these for integration into the existing CMS, as well as ensuring a very high level of e-government and accessibility compliance.
Bamford Medical
Website: bamfordmedical.co.nz
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.com/australia
Client: Positively Wellington Tourism
My professional status: contractor at Chrometoaster
Chrometoaster were asked to create a single new template for the Australia landing page of WellingtonNZ (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: holmesgroup.com
Client: Holmes Consulting Group
My professional status: independent web designer/developer
The international structural engineering 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.
CreditSights Marketing
Website: creditsights.com
Client: CreditSights
My professional status: contractor at Optimation
Optimation were updating the main CreditSights website, and were asked to build a new Marketing site that provides an overview of the company's services for potential subscribers. A design was provided by the same US design company that did the main website, with the XHTML/CSS being built from scratch and integrated into asp.net. I was responsible for developing the design across all templates, building the XHTML/CSS, bug-fixing and template tweaking. Once I had built the XHTML/CSS templates in Dreamweaver, these were integrated into the .net environment, and any subsequent tweaking was done from within VisualStudio.
The Beck's List
Website: no longer online
Client: Lion Nathan
My professional status: contractor at Shift
The Beck's List was 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 included 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.
CreditSights
Website: member-only access
Client: CreditSights
My professional status: contractor at Optimation
CreditSights is an award-winning provider of independent investment research. Their website provides subscribers with coverage of over 750 of the most widely-traded names in the US and European markets. They produce over 300 research reports a month and their archives contain over 100,000 articles. Optimation was asked to extend the site's functionality at the same time as re-skinning the site - and I was responsible for developing and extending the new design, rebuilding some of the XHTML/CSS, bug-fixing and template tweaking, streamlining some of the backend CMS elements, and re-designing & re-styling various widgets and other elements. The site is built in asp.net, so all of my work was done in VisualStudio within the .net environment, working on already-integrated templates.
Office of Film & Literature Classification - information for students
Website: censor.org.nz
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: epa.govt.nz
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.co.nz
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: masterplumbers.org.nz
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: mfe.govt.nz
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: telecomroaming.co.nz
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.
MedSys
Website: system application, not available online
Client: Medical Council of New Zealand
My professional status: contractor at Optimation
MedSys is MCNZ's core system for handling doctor registration and on-going certification, which Optimation spent three years designing, developing and implementing. I was responsible for a number of tasks, including a rebuild of the application's chrome, a review and streamlining of the template design to save space and fit in more content, and an overview and rebuild of the HTML/CSS in many of the templates in order to improve cross-browser compatibility and increase consistency throughout the application. The site is built in asp.net, so virtually all of my work was within the .net environment, working on already-integrated templates using VisualStudio.
Cavalier Bremworth
Website: cavbrem.co.nz
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: bamford.co.nz
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.
NIWA
Website: niwa.co.nz
Client: NIWA
My professional status: employee at Shift
I was responsible for building 28 templates for the new NIWA website in XHTML and pure CSS. The jQuery effects include automatic slide-down timed panels, tabbed navigation, content replacement panels and show/hide accordions.
Salvation Army
Website: salvationarmy.org.nz
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 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.co.nz
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.
