Co-operative Bank

Co-op Bank - homepage

Website: co-operativebank.co.nz (site has since been redesigned) - view screenshots

Size: 15 new templates

My professional status: contractor at the Co-operative Bank

Website client: Co-operative Bank

Dates: October - December 2012

Categories: Client liaison, Website designer, Front-end developer, Content-loader, Responsive web design/dev, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, ASP or ASP.NET, Medium sites

Brief: the Co-operative Bank was established in 1928 and is the only bank in New Zealand to share its profits with its customers. As a co-operative its main purpose is to create prosperity for its customers, not to create profit for anyone else. The bank has 34 branches throughout the country and around 128,000 customers from all over New Zealand.

The bank's existing website was in need of an update which would tide them over for a few months until they were in a position to carry out a complete overhaul. I was asked to do the HTML, CSS and jQuery and design development for the new design, focusing on the content-driven parts of the website, and partnering with David Harrison from Triptech who was responsible for the online banking pages.

Achievements:

  • Quickly developed a very effective and enjoyable working partnership with both Cameron and David, neither of whom I had worked with before
  • Successfully delivered a full set of templates to the Co-op Bank within the required timeline, identified and designed/built a number of templates that were missing from the original designs, and edited some of these in situ within the .aspx website build itself.

My responsibilities included:

  • Building 15 page templates in LESS (a dynamic stylesheet language that extends CSS with dynamic behavior such as variables, mixins, operations and functions) and XHTML 1.0 Transitional, including sample content and unique layouts for each template - as well as the chrome, background layers, headers, footers and navigation elements for the entire website
  • Using LESS to define global colours and various mixins which were then referenced in the main stylesheet
  • Using @font-face to download and render the non-websafe fonts chosen for the overall site design as well as styling the fallback web-safe alternatives
  • Using the normalize.css stylesheet instead of a reset stylesheet to provide better cross-browser consistency in the default styling of HTML elements
  • Hand-coding in XHTML 1.0 Transitional (using Sublime Text 2 and Dreamweaver) to a reasonable level of accessibility
  • Utilising and re-styling jQuery-driven accessible tabs HTML/CSS for pages where tabbed sections were included, using Modernizr, a JavaScript library that detects HTML5 and CSS3 features in the user's browser - and styling the no-js version of this element to match the rest of the page
  • Coding the XHTML and jQuery for a number of other dynamic graphical effects including a homepage slider, suckerfish slide-out navigation, popup containers, and accordions
  • Creating styles that would allow the jQuery to provide progressive enhancement while still allowing complete accessibility for those users with JavaScript disabled
  • Locating the 34 bank branches using Google maps, and creating a tailor-made map for each of them which would be embedded in a contact page for that branch
  • Providing a very comprehensive stylesheet for the tables that would be used within the site for tabular data
  • Creating a responsive homepage so that in mobile devices, visitors would given a choice of going straight to the banking pages if they wished, or continuing on to the general content part of the website
  • Incorporating various CSS3 effects within my stylesheets including linear-gradient, transition, border-radius and box-shadow, and ensuring that old browsers such as IE6-8 (which do not support these CSS3 effects) still looked nice and worked without them
  • Developing and tweaking the design of various templates and extending this design across a number of new page types (based on existing content) once the Co-op's web team had begun to integrate my new templates into their test version of the existing website
  • Providing the team with a broad range of standard formatting styles that could be used throughout the website, including:
    • Headers h1-h6 (linked and unlinked)
    • Ordered and unordered lists down to 3 levels, in any combination
    • Paragraphs within lists
    • A range of accordion and boxed accordion styles, both open and closed with different headers
    • Tables with horizontal, vertical and both horizontal and vertical headers
    • Lists inside tables
    • Definition lists
    • Superscript and subscript
    • Image treatments (floated left or right or not floated, with and without captions)
  • Extensive testing of the site at all stages of the development process, and ensuring consistency across the following browsers and platforms; using VirtualBox to host the range of test PC operating systems and browsers required:
    • PC (WindowsXP): Internet Explorer IE6, IE7, IE8; Firefox 7
    • PC (Windows7): Internet Explorer IE9, Chrome (latest)
    • Mac (OS X 10.6): Chrome (latest), Firefox (latest), Safari (latest)
  • Ensuring that all my templates were validated using the W3C Markup Validation Service and that they conformed to XHTML requirements
  • Setting up a local version of the site templates on my Mac using MAMP and uploading these periodically to a central repository via GitHub so that I could view the pages properly using my Mac as a server, and so that the Co-op web team could access my work and integrate it into the test version of the CMS
  • Taking part in progress meetings with the Co-op web team, and adding/changing design/HTML elements identified in these meetings
  • In December 2012 I was asked back for a few days to work on various elements that had surfaced since the web team had begun to integrate their existing content into the new templates. I edited the content of these pages in situ, within the .aspx website build itself, using a combination of Visual Studio on the actual pages and Dreamweaver and Sublime Text 2 on static versions of the pages taken from View Source.

Cameron Farquhar, the Co-operative Bank web team's web editor, found me online via my website and felt that I'd be a good fit with both the project team and with David Harrison from Triptech in Auckland who was doing the online banking pages.

The three of us had a grand old time working together on the website, developing the design across a range of templates that we realised we needed once we started integrating the templates with the actual content. As David and I were working on two separate parts of the site, it was important that we kept in close contact with each other, sharing styles and HTML wherever possible. He was also a great help when it came to giving me a bit of a head start on the responsive homepage - my first one, and I wasn't really sure how to approach it initially. Thanks dude!

One little fun element was that the design called for curved corners and various other special styles on data tables, none of which I wanted the web editor to have to style using classes. Using a combination of first-, last- and only-child pseudo-elements in my stylesheet allowed me to create a table that matched the design exactly, with no editor styling required.

The site has since been rebuilt from scratch, with a completely new design, but it was great that our redesign and rebuild was able to act as a placeholder for a few months while the web and comms teams consolidated their approach and worked on their new branding.