Fun with Triangles

A Responsibly Responsive Build

I was the lead front-end designer on the build of a high end heli-skiing website.

Caring about performance

Elemental Adventure needed a complete overhaul of their image-heavy, content-rich site. It wasn’t enough to simply make a well designed responsive website that worked on multiple screen sizes. We went the extra mile to make sure the site performed well using responsive images while also implementing Schema.org so that all image metadata was properly indexed for search engines.

Using the right tools for the job

Thumbnails
Beautiful high quality thumbnails need a little extra thought.

When viewing on a desktop even the thumbnails for this website are rather large images, so it wouldn’t be suitable to send a user on a mobile phone half a dozen massive files when they don’t need them that big. The EA site uses srcset and sizes to take into account the size of the screen, along with the screen’s pixel density.

It feels like somewhat of a thankless process going to extra lengths to make improvements that are not all that apparent, but taking performance into consideration is a huge part of interactive design on the web.

Schema.org

Another rather invisible implementation we made was using Schema.org to ensure that the image metadata (captions and credits) was properly indexed. For this client, SEO was an important part of their business model, so having images that have a better chance of appearing in search results was a nice bonus.

It looks pretty good, too

Screenshot of the EA website
A lot of time went into the design. Check out the live version.

As well as all of the “invisible” techniques employed throughout this site, I’m also proud of the overall look and feel of this site. A lot of time was spent making sure the typography, graphics, imagery, colours and iconography looked fantastic.

I love to blend form and functionality

I’ve always considered myself a designer as well as a developer. If you’re looking to create a web project that works great while looking beautiful too, get in touch.

Read More see all projects →

Getting Trippy with Canvas and MIDI

How I teamed up with a techno producer to build a fully audio reactive visual system that runs on web technologies.

Making it Swooshy for Santa Monica

I created an animated microsite to promote health and wellbeing in Santa Monica.