YourCharge

Working on a wide range of projects is what keeps building websites interesting. From large complex web applications to small single page websites, at Bronco we’re happy to help clients whatever their needs.

When new start-up YourCharge approached us, it was clear from the amount of content they had that a single page website was the ideal solution for them. Rather than build multiple thin pages which lack content, and are less than engaging for users, we could develop a single page website that presented the content in the best form possible without requiring users to click through multiple pages to find content relevant to them.

Finding the design

Before starting any design work we’ll request a client send over any assets we might need for the design, including content and imagery. Sometimes, the imagery we receive doesn’t provide a spark on which to build the design around, and in such cases, we’ll look for alternatives.

YourCharge is one example of this, as the imagery provided was a mix between low resolution in-situ shots and high definition product shots. Neither were ideal to build an eye-catching landing page around.

With alternative photography also unlikely to provide the stimulus we were looking for we instead investigated a more illustrative route for the design. The result; the following illustration based on a small town alongside a home with car charge point outside. We feel, though a little more subtle than what might be possible, that this along with associated text sufficiently establishes the purpose of the website in an eye-catching form. The illustrations would then be used in various forms throughout the rest of the page.

Even though we took this illustrative approach to the design of the website, we wouldn’t totally discard the imagery provided by the client. It was important to still include this imagery so users could see the real-world implementations of the technology.

Content editing

Authoring website content can be tricky, many clients would love to see the website prior to writing the content as this helps them frame how much they need to write and under what subjects. Our approach is always that content comes first. We require the content to create the design as the website’s job is to present the content, and not for content to fill up a generic design.

However, this means the content we receive can be a little essay like. One of the benefits of a website is the ability to present content in a variety of forms, contrasting individual pieces with surrounding sections as well as intermixing long and short form content to keep the user engaged as they scroll.

As is the case with many clients, and again with YourCharge, we were able to take the content provided and pull it apart to better communicate key points within the content.

Take for example the “How much does an electric vehicle cost to charge?” section. Originally this content was further down the page, but we felt as an emerging technology that establishing the benefits of electric vehicles was still important, and that the cost is a huge contributing factor. So, promoting this content higher up the page and emphasising the specific costs of charging a vehicle would ensure we’re communicating to users of the benefits of electric vehicles prior to giving more details about the company and the process of installation.

Always pushing forward

As a single page website, the functionality of YourCharge is fairly limited. The contact form and a lightbox effect for photographic imagery is about as complex as things get in regards to what the user sees, but under the hood things are a little different.

Of course, the website is built upon the standard framework we utilise for most of our websites. As a small website it sticks to vanilla JavaScript rather than using jQuery, while the CSS is written in SCSS and complied using Gulp. Gulp is also ensuring our files and minified and compressed, as well as generating WebP variants of images. HTTPS is now used as standard and as a new client YourCharge benefits from HTTP/2 and HTTP/2 Push to ensure the website loads a range of assets quickly.

In terms of CSS we’ve long adopted Flexbox and more recently Grid layout where appropriate. This helps build more complex responsive layouts, but one area that’s always been a little bit more a struggle has been scaling elements like typography and margin/padding across all screen sizes.

The issue is this. With more space on desktop we’re happy for text to display much larger, or for different sections to become more spaced out, while on smaller screens we want to keep things much tighter. Viewport (vw) and em units sometimes combined with calc() are helpful for this, but also often require media queries to set upper and lower limits so that any values don’t become uncomfortably large or small.

In the past we’ve used Sass mixins to help implement fluid elements like this, however with most browsers now adopting the min(), max() and clamp() functions in CSS there’s a native way to achieve this fluidity with far less code. Yet with backwards compatibility a concern we still have to implement fallbacks, leading to the creation of a sass mixin to extend and simplify instances where we’re using the clamp() function.

The result is a website where values are fixed on older browsers, like Internet Explorer 11, that don’t support clamp(). But with the fallbacks in place we’re ensuring we deliver an appropriate experience for IE11, that while not perfect, ensures all content is available and any functionality it present.

Working with Lighthouse 6

As always site speed is a big concern for us at Bronco. Recently Google launched Core Web Vitals which have since been adopted in Google’s Lighthouse 6 and Search Console as well as in online performance tester WebPageTest. We had to see how our new website was looking when measured against these metrics.

With Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) the only metrics we could measure in the above tools we focused on these. Unfortunately, with a new website we don’t have the data necessary to get real-world results for these figures, which is what I believe Google is suggesting when giving figures such as an LCP of below 2.5 seconds being good.

With variable connections speeds and geographic influences our understanding is that Google is basing these figures on the 75^th percentile and so an individual test on a throttled connection may not be indicative of the overall figure Google would provide when based on bulk data.

When testing using Lighthouse 6 in Google Canary we’re able to see far more favourable results than WebPageTest returns due to different connection speeds and geographical distance to the server. However, after a few tweaks we were able to deliver excellent results in Lighthouse (100’s across the board) and also receive positive results in WebPageTest when assessing different test locations & speeds.

Given YourCharge are focusing on the UK only, we can be confident that the results we’ve seen result in a fast loading website for our target audience.