new zealand tour guide website running on a laptop

NZ Tour Guide

For a major rebuild of the one page New Zealand Tour Guide site I focused on speed and built a snappy little site with the basics of HTML, CSS, and JS producing a site that loads dramatically faster and consumes far fewer resources than what was there before.

The choice to build without a Content Management Systeme came from hosting NZTG as a WordPress site for the past few years and make very few if any changes so without the burden any dependencies I looked around to the options and chose to compile the code down with WebPack but in a way that’s not particularly tied to it so if the time does come to change the site again there is very little that would have to be swapped out to use any other system and most additions can simply be built atop what we have.

Design

I wanted to keep the page very simple with blocks of text running down the center of the page meaning that no matter what design the information would be very readable and the styling consistent.

Where I did bring in some attitude was with the angles on the top and bottom of images, the boxes containing the services and the testimonials. This allowed me to break up traditional layout and also keep the image heights down, especially on a large screen full width images have the habit of taking up more height than I like and constraining them with a maximum height can produce a sliver of an image looking out of place. Once the images had the angle the boxes needed to match and although the technique is relatively different between the two elements they match nicely.

Development

When scrolling down the page the images slightly parallax and the padding grows as elements scroll in and out of the screen, this was done with the goal of the site to be as fast as possible in mind, to accomplish this I built with a nested Intersection Observer. I purposefully didn’t include a polyfill for browsers that don’t support IO as tho they will be seeing a less dynamic site I made the decision that without a modern browser a frivolous slide to the images could be missed.

Explore NZ Tour Guide
laptop mockup of a website for mons royale

Mons Royale Product Page Pitch

Over a quiet weekend I knocked up a quick pitch piece of a product page for Mons Royale, I’ve always been a big fan of their pieces and have worked with them on media projects over the years but never in as much of a design role.

I took what Mons is already doing with product and graphic design and just pushed it to a web design, using the strong colors and angles, being a quick weekend piece the site works as a mockup but isn’t truly function, there’s no hover states, only enough header tags for the page to load, javascript only powers the webpack build, there are problems with the design at certain sizes or adaptions so it would need significat work to be production ready.

The design is layers on layers of CSS grid and I’m really looking forward to the implementation of sub-grid as it comes down the pipeline, almost all of the color is either background filled grids of SVG shapes, including the promo piece (green background) halfway down which involved layering and building shapes in a way I hadn’t pushed as far before so that’s something I want to continue explore and create some dynamic and responsive designs that are super performant.

https://mons.rileybathurst.com

(more…)
Explore Mons Royale Product Page Pitch
tahoe web shop running on a macbook

Tahoe Web Shop

I enjoy freelancing but sometimes it comes with limitations and one of those I was running into was how to promote myself online, with such a spread out portfolio there are days I struggle to explain what I do to someone on the street so I wanted to put up a front that was simple even if it doesn’t cover half of what I can do.

Tahoe Web Shop

Explore Tahoe Web Shop

Ben Comber Landing Page

A very long time ago I was helping Ben out to build a snowboard site, so between 2010 and 2014 it was a functional site but it’s been left to hang out and languish, so we threw together something a little more exciting for a landing page. It’s really just a fun little usage of the CurtainJS tech but maybe someday we will continue to build on this and do something exciting.

The screenshot really does no justice of what this is so check it out over at BenComber.com

Explore Ben Comber Landing Page
new zealand tour guide website running on a laptop

NZ Tour Guide Propsal​

I have been hosting the NZ Tour Guide website for a number of years, it’s a pretty simple one page site that to save costs we had grabbed a theme from Woo Themes and let it free into the world, except that was built on some code that just isn’t doing too hot on the lighthouse scores, 57 / 100 performance in particular was concerning to me.

So in between a couple of projects, I looked at how I could update the site in a pretty quick and easy way using some new technologies including stripping out the entire WordPress CMS and just writing some HTML, CSS and JS before compressing it through Webpack. Currently, I wouldn’t say this site is perfect but it is ready to send out to see if this is a direction we should go down, as the lighthouse scores are currently showing 100 / 100 for Performance.

There a couple of cool little things, the margins expand with an Intersection Observer and the images also parallax slightly in a way that lets me keep them in the HTML, I don’t like background CSS images, as it means I have a harder time working on responsive image and dropping in the webp images like I have here and without using scroll events to keep the performance up.

Hopefully this becomes something we finish up but for now it’s sitting at https://auksas.nztourguide.co.nz

Explore NZ Tour Guide Propsal​
riley bathurst design priest sheetmetal website update for mid 2019

Priest 2019

I have just finished working on an update to the www.priestsheetmetal.co.nz website. The original site was relatively simple, for a company that has been operating sixty plus years in an industry that isn’t hugely technical as the sheetmetal industry is, the fax number is important on the footer, the analytics show more people using the site on desktop than phones but they needed a presence without a large budget and now we are just slowly moving towards something more exciting.

priest 2016 website
Website before the update

The content has slightly updated and we have moved away from a bunch of the text for the site being tied up in the video where it was moving and less readable. Adding more background colors adds hierarchy to the elements of the page in a logical order.

With a relatively small update the site still has elements from foundation running the backend but most of the new elements have been built on CSS grid giving a flexibility with the scaling of the site between phone and desktops.

Explore Priest 2019
pacrav physiotherapy website on a laptop

Pacrav

I have been working with Matthew at Pacrav as he has been setting up his new physiotherapy business in Reno, Nevada. We have been working on branding and website needs.

The logo for Pacrav is based around the idea of movement, flexibility and strength, we created a unique shape that has an inclusion of the double “A” with a custom word mark and can be used with the tag line as well as in individual parts.

Pacrav has been strongly branded in orange as a bright and lively color which can be used for branding elects or used as a background with white elements over it.

The site with all its branding and ideas can be found at pacrav.com aside from the regular website needs of a business in this day and age but we have taken that further streamlining the consultation forms, since these have been setup Matt has found it has saved time for patients as well as employees.

The site was built on a foundation framework with a wordpress Content Management System, with these together we we’re able to create a site that was affordable but also preforms strongly in many environments, the site is fast and responsive across devices with modern and documented code for easy updates and additions.

Explore Pacrav