Website: Surge Bikes

Surge Bikes sell e-bikes. This was a great looking website built for Winter Design. This is probably one of my favorite builds for Winter Design, I really like the product, it’s a great design with some interesting challenges, and the client had access to fabulous photography.

The homepage:

Here’s some of my highlights from a build point of view:

Calculating Discount:

Due to a complex deal between the suppliers and the owner, they were able to sell the bikes at the recommended retail price, but include a bunch of ‘free’ accessories. This meant that I had to calculate the ‘Surge Boost’ based on a percentage of the price broken into different price breaks. Although this really isn’t that complex, it’s not something I’ve tackled before, and I was happy with this neat little solution.

Dynamic Table of Contents:

There’s a lot of information available for each product. To make it easier to navigate, the designer had come up with a table of contents concept which was very challenging to build.

At the backend, the client was able to fill in a whole variety of sections, such as Geometry, Specifications and Details, as well as the promotional material like YouTube or Vimeo showreels.

My code checks which information exists, then builds the relevant sections and their corresponding tabs. The tabs stick to the main navigation when scrolled, and highlight as appropriate depending on which section of the page is displayed in the viewers window.

Mobile version

As is so often the case, I was left to build the mobile version myself. I enjoy the creative side of this process, and as I have a good understanding of how the design should look I’m able to translate the feel of the design onto a much smaller screen.

Category Slider

On the home page we have some promotional text about each bike category, along with a photograph. All the client had to do in the backend was provide the content for the Product Categories.

My code grabs the content and creates a fun little slider with some nice css animation. This is converted into an ‘accordion’ for mobile devices.