Wellington Batucada

Wellington Batucada

Website: batucada.org.nz

Size: WordPress website, approx 225 pages of content so far (and growing!)

My professional status: independent web designer/developer

Website client: Wellington Batucada

Dates: July - December 2011 (site build) and ongoing work as the site's webmaster and writer

Categories: Client liaison, Project manager, IA & UX, Content designer, Website designer, Front-end developer, Writing for the web, Content-loader, Webmaster, Responsive web design/dev, CSS-based layout, CSS3, jQuery/JavaScript, WordPress, Large sites

Brief: to build a new website in WordPress for Wellington Batucada, Wellington's community-based street samba band - of which I am a very proud member.

I had been nagging Batucada's Director Tim Cooke, who's a web designer in real life, to let me build a new website for Batucada ever since I joined the band in late 2008. It was a long time coming (Tim's a busy guy!) but we finally got it together - just in time to start blogging about our part in the Rugby World Cup.

Tim provided me with a completely new design for the website, and it was my job to translate that into a standalone WordPress website - and to populate all the pages, editing existing stuff and writing new stuff as necessary. I also transferred the website to a new webhost and updated the A record.

I am the website's webmaster, writing all the blog posts and gig reviews and sorting out our huge and ever-growing collection of photos and videos. Phase Two, a year after our original launch, was to add a members' only section to the website, which contains all our musical material, reference videos and drum notation as well as members-only announcements and information.

Hi Ali, it's all looking great! I had a quick look last night and it's looking fantastic! Nice work on the gallery. Nice work with the content written so far as well...

Tim Cooke - Musical Director and website designer, Wellington Batucada

Achievements:

  • Completely rebuilt and restyled the default WordPress theme twentyeleven to match the new design, and took Batucada's web presence from a very sad and years-out-of-date website to a new, vibrant and constantly updated site
  • Volunteered to be the webmaster for the site on an ongoing basis, and to write reviews of our gigs for the blog section of the site
  • Volunteered to develop the members section of the site in terms of content, including providing performance details, drum notation, videos and sound files for all our pieces.

My responsibilities included:

  • Hacking and re-styling the standard WordPress theme, Twenty Eleven, in order to pixel-perfectly match Tim's design templates, and then building the initial site skeleton in WordPress
  • Extending Tim's original 3-template design to cover all the pages on the site, including the search results, no search results, 404, and guest book pages
  • Writing the content for the first 60-odd pages on the site before launch, including all the blog posts and new pages that didn't exist in the old website, and editing existing pages for re-use on the new site
  • Liaising with Batucada's board members and directors to ensure that the pages and content I was creating were appropriate for the website
  • Extensive testing of the WordPress site at all stages of the development process, ensuring consistency across the following browsers and platforms:
    • PC: Internet Explorer IE6, IE7, IE8, IE9; Firefox, Chrome
    • Mac: Firefox, Safari
  • Incorporating, for the first time, a number of CSS3 techniques including @fontface, box-shadow, linear-gradient, transition, border-radius, and text-shadow
  • Integration and restyling of the NextGen photo gallery plugin which is used in various places across the site
  • Integration and restyling of a large number of other WordPress plugins including AddToAny, Contact Form 7, Custom Sidebars, GigPress, Google Analytics for WordPress, Promotion Slider, Shadowbox JS, Widget Entries, WordPress Custom Sidebar, WordPress Importer, and WP Google Fonts
  • Putting together an ever-expanding collection of Batucada photos and videos, and adding these to the website as galleries both on the main site and within specific blog posts
  • Grabbing all the posts from Batucada member Mike Kmiec's old Tumblr Batucada blog and re-writing them within the new website's blog section, in order to give our brand-new website a bit of history on launch day
  • Continuing to develop the site as its webmaster, constantly updating it with gig reviews, blog posts, photo galleries and members-only musical reference material.

Batucada website - responsive screens

I think all web designers and developers should do a freebie now and then - and for me, Wellington Batucada's website is it. I can use my skills to benefit the band in a way they couldn't afford to pay for - and it's a way to say thank you for the joy that being part of this awesome band brings me.

About a year after the site first went live I carried out Phase Two, which was to add a member's-only section to the website where band members can access drum notation patterns and share training videos and audio clips. In 2015 I successfully migrated the website to a new webhost. In 2018 I completely re-did the CSS to convert the hitherto static website into a responsive one.