Work

Selected work, open source code and experiments

Barilla

barilla.com

  • Date:
    Feb 2015 - Ongoing
  • Role:
    Lead front-end developer
  • Style guide:
  • Skills:
    ES2015, Styleguide-driven development
  • Team:
    Front-end: Zander Martineau, Nic Bell, Denzil Brade; UX: Alex Harrold; Design: Simon Kinslow;
  • Agency:
    TMW
  • Client:

Barilla, the world’s leading pasta maker, came to TMW to reimagine their existing web site. They operate in 30+ markets globally and needed a solution that would fit for each of their specific needs.

I collaborated with our UX and design teams to create a consistent, accessible, flexible and performant website that would enable consumers to find what they needed quickly.

I used a styleguide-driven approach to development using modular components where possible. This styleguide is a project in and of itself and serves as documentation and a living reference for all the modules and templates that are used on the site (Kickoff’s Statix made this job much more easy). View styleguide at its temporary home here.

From a technical perspective, all the Javascript was ES2015 compatible using Babel to transpile through the Browserify bundler. Many NPM modules were used to ensure maximum efficiency (so far, no issues with #unpublishgate). The ES2015 was ported to version 7 of Kickoff. Teamcity was used to build/compile all client-side assets at each deployment.

We soft-launched to the US market in March 2016 with more locales being rolled out in the months following. We are actively developing new features and the site is constantly improving.

Kickoff

trykickoff.com

Developed in partnership with Ash Nolan at TMW, Kickoff is a robust, adaptable and unopinionated front-end framework that is great starting point for any web site; we use it on all of our front-end projects at TMW.

The framework includes a Sass-based, CSS framework (with all the usual resets and mixins), a responsive grid system; beautiful typographic styles; javascript plugins, utilities and a great set of boilerplates for most eventualities. This means that our devs can get up and running as quickly as possible and not have to worry about this tedious initial step.

For more information and to read our docs, please visit trykickoff.com or our Github organisation. Alternatively I have written a few articles about Kickoff here and on our Medium channel.

grunt-filesizegzip

github.com/mrmartineau/grunt-filesizegzip

Grunt plugin to output of the original & gzipped size of a string or buffer:

Running "filesizegzip" task
>> ./assets/dist/js/script.js 20.2kb → 6.8kb (gzip)

Running "filesizegzip" task
>> ./assets/dist/css/kickoff.css 57.06kb → 13.27kb (gzip)

depdoc

github.com/mrmartineau/depdoc

depdoc simply scans your package.json’s dependencies property and returns some simple information about each item. It is meant to allow developers an easy way to document their project using the dependencies as a starting point.

depdoc comes with a CLI, it can also be used in your own code and there is a demo on heroku.

interactionCheck.js

github.com/mrmartineau/InteractionCheck.js

Fire a callback method after a given period of inactivity.

// Listen for mousemove event
var mousemoveCheck = new InteractionCheck('mousemove', 4000, function() {
	console.log('no mousemove');
});

Be an Energy Shopper

goenergyshopping.co.uk

  • Date:
    Mar - Apr 2014
  • Role:
    Lead developer
  • Designer:
    Simon Kinslow
  • Agency:
    TMW
  • Client:

Having won the pitch, TMW created a site for Ofgem, the government regulator for gas & electricity markets, to help consumers understand upcoming energy tariff changes.

The site is completely hiDPi ready and makes liberal uses SVG graphics; grunticon was used to convert these to png fallbacks for users without SVG support.

Trak.js

github.com/mrmartineau/trak.js

trak.js is a wrapper for any analytics API. By default it uses Google Universal Analytics but you can override this with the older ga.js or Google Tag Manager if you wish, or you can even add custom event trackers as well, instead of Google Analytics.

<a
 data-trak='{"category":"Rating","action":"Comparison notepad","label":"Up"}'
 href="#">
	link
</a>
el.addEventListener('mouseover', function() {
  trak.event({
    category: 'engagement',
    action: 'signpost',
    label: 'page.href',
    value: 10,
    nonInteraction: true,
    eventName: 'This is a Google Tag Manager event name'
  });
}

Strepsils Star Moments

No longer online :(

  • Date:
    Oct - Nov 2013
  • Skills:
    Front-end development
  • Team:
    Front-end: Zander Martineau; Art direction: Marcus Aitman; Design: Robert Sinderman
  • Agency:
    TMW
  • Brand:
  • Client:
  • Client:
    SYCO

Strepsils sooth your throat and allow you to keep your voice in tip top condition- thats why they make a perfect partner for The X Factor, and all of it’s dubious talents.

We were tasked with digitally dramatising the partnership between Strepsils and The X Factor, giving away hundreds of X Factor Final tickets, whilst creating something fun and engaging.

The outcome was Strepsils Star Moments, a responsive, mobile optimised website that hosts a competition. The competition challenges X Factor fans to find the moment in a classic X Factor performance where the contestants voice sounds at it’s absolute best. The closer they are to Mr T’s (Strepsils oddly named mascot) chosen time, the more likely they are to win tickets.

The Bar

uk.thebar.com

  • Date:
    Feb - Sept 2013
  • Skills:
    Front-end development; asset font creation
  • Team:
    Front-end: Zander Martineau, Nic Bell; Back-end: Martin Georgiev & Matt Basson; Design: Simon Kinslow
  • Agency:
    TMW
  • Client:

theBar.com is a popular US cocktail resource; my team and I created the Western Europe version of this already popular site, specifically the UK version.

From UX to performance, every aspect of the site was improved and carefully considered. I created a special asset font for the site, this creates crisp, hiDpi friendly icons that look great at any resolution.

A German version of the site came later which presented some unique design challenges, not least of which is the fact that German words are approximately 1.5 times the length of English words.The site is now live at de.thebar.com.

Lynx Africa 18th Anniversary

lynxafrica18.tumblr.com

  • Date:
    October 2013
  • Role:
    Lead developer
  • Team:
    Front-end: Zander Martineau; Design: Andrew Turk
  • Agency:
    TMW
  • Client:

The iconic Lynx Africa deoderant turns 18 this year and to celebrate I helped produce a Tumblr blog that publishes a new piece of artwork each day for 18 days.

Wide Homepage
Narrow Homepage

Brother Printers

campaigns.brother.co.uk

  • Date:
    Sept 2012 - Jan 2013
  • Role:
    Lead developer
  • Skills:
    Front-end: Parallax scrolling, web performance & HTML5 Geolocation API
  • Team:
    Developer: Zander Martineau; Design: Dawn Jenner
  • Agency:
    TMW
  • Client:

Brother Printers asked TMW to create a microsite for the various printer ranges. Each page of this site is devoted to one range and uses campaign assets to give a more consistent look and feel across media.

I worked closely with the designer, Dawn Jenner, to create an engaging and appealing experience that promoted each product’s features and enabled customers to make a more informed decision.

Novalux Energy website

novaluxenergy.com

  • Date:
    March 2012
  • Skills:
    Design, front-end & back-end
  • Client:

Novalux Energy Solutions are experts in providing renewable and cost-effective energy solutions to businesses across the world. I was given the task of creating their visual identity and the design and development of their corporate website.

Typography on the site is set in Proxima Nova and Clarendon and it was developed using the ExpressionEngine CMS.

Shift 4

no longer online

  • Date:
    October 2011
  • Skills:
    Design and front-end development
  • Developer:
    Maciej Garycki
  • Agency:
  • Client:

Shift 4 are a broadcast facility company for film and TV in the UK. NEVERBLAND were asked to revamp and extend their existing site. We added a full equipment listing, with wishlist (think shopping list) feature; a blog and various other sections that overall helped customers engage with the company.

I designed & developed the front-end for this project making it fully responsive & adaptable to any device that uses it.

Homepage: desktop
Homepage: mobile

Colette

Pitch

Colette is a department store based in Paris. NEVERBLAND were asked to pitch for a redesign of their existing ecommerce offering.

I produced this design for the home page, you can see three states: normal, navigation hovered and page content hovered. Unfortunately our ideas were not chosen and at time of writing, Colette still have not redesigned their site.

Soho Fixed

sohofixed.com

  • Date:
    January 2011
  • Skills:
    Design, front-end & back-end
  • Client:

Soho Fixed is a site where you can buy custom-made, fixed-gear or single-speed bicycles. I designed the logo and site, and developed site - pay attention to the header with it’s animating background image and the hover effect on the navigation. All non-bike photography was also shot by me.

As well as creating the website, I was given the task of creating the Soho Fixed visual identity.