Share your story

Working in a team of designers and developers at Catch Digital in SOHO London I helped deliver a visually rich, complex and accessible website. Theming Drupal to this level with AJAX, JQuery animations and multiple colour schemes represented sizeable challenges to our team as we went about developing over 10 different site-specific Drupal modules and worked closely together using SVN and Features.

Roles: 
  • Gallery layout, javascript, animations
  • Drupal site-specific module development to support gallery and site
  • Conceptual / brainstorming with design team
  • Theme development, AJAX
  • Accessibility standards, ARIA widgets, AA web standards, Screen reader testing
Challenges: 
  • AA Accessibility with JavaScript widgets and AJAX (ARIA tags)
  • Gallery animation optimisation and cross browser compatibility (ie7+)
  • Multiple colour schemes for accessibility

Accessibility
(probably the hardest part)

The Home page

Accessibility was a key consideration from the beginning of the project with an aim at reaching AA levels for blind and motion impaired visitors. We wanted to make accessibility sexy! During the design phase, the designer at Catch Digital paid special attention to using AA levels of colour contrast and font sizes with each design being sent over to the Shaw trust (an accessibility consultancy) for testing. The site, relying heavily on AJAX, animation and visual effects to wow audiences, was a huge challenge to make accessible and I focussed my efforts on using ARIA tags when possible and making the site markup as semantic as possible (which is difficult considering that the icons themselves are user generated).

The Gallery

Screenshot of the gallery with an open story

My primary responsibility in this project was in developing the gallery. The Gallery is a mixture of AJAX, Embedded JavaScript templates and JSON (delivered courtesy of views) and needed to have the illusion of depth and movement. Each column of the gallery moves at different rates as the user scrolls down which created significant development challenges when it came to optimisation and infinite scrolling.

There were a few neat touches that evolved during the development process such as using the icon colour as the AJAX throbber and quotation mark colours which added to the overall experience (and development time). Ultimately the result is very cool indeed without being too distracting - clicking on the icons and reading the stories becomes addictive after a short time in the gallery.

The Gallery Filters
(views exposed filters on steroids)

Screenshot of the gallery with filters open.

One of the challenges I faced during the creation of the gallery was using views exposed filters whilst still maintaining the very flashy, 3 step designs that had been provided. Using a set of views hooks and making use of views-exposed-form.tpl.php, some clever CSS and some jQuery I created an accessible but pretty filtering system for the gallery. Thanks to Filament Group I was also able to implement a JAWS accessible slider!

Phase 2:
Sharing and rebrand

Screenshot of sharing options

After finishing and launching Phase 1, Catch Digital recruited me as the lead developer for a Phase 2 launch which would include new features and a rebrand to match. Some of the new features that were implemented included a hearting, sharing and commenting system as well as a celebrity icon system which would give Scope the chance to recruit celebrities to create icons and raise awareness of their cause. Another new feature was a standalone mobile site that loads in icons from the gallery on smartphones.

The Mobile Minisite

Originally the website was built as a desktop experience so creating a mobile experience that was tailored to small screen resolutions and slower processors wasn't simply a matter of tweaking some CSS files. I decided to port the gallery to a dedicated mobile microsite that would allow users to view the icons and email the create process to themselves for later use. One of the big challenges in doing this was overriding the agressive caching that was on the site to allow different pages to be served to mobile devices using the same URL.