A Swish New Website

Over the past month or so we’ve been teasing that we were working on a new version of our website and today is the day we officially announce its launch; on our birthday no less (you might want to check out our social channels for more birthday related stuff).

While I’d love to go into more detail about the finer points of why a new website and why we’ve made the decisions we have there’s a big ol’ list of things and only so long I can spend writing today. So rather than focus in on one thing and forget the rest, what comes next is a brain dump of the various decisions, changes and highlights that went into creating the 2017 edition of the Bronco website. Enjoy.

Why a new website?

1. A lot of the old website was over 3 years old, with subsequent changes in the intervening years.
2. These changes led to code bloat making the site slower than it should be.
3. The code, especially the CSS, was becoming outdated with better code practices being adopted that allows us to build a better experience with less code.
4. So we knew a rebuild would make the site faster and align it more with our current build process.
5. A number of third party scripts were adding to the overall loading time. Though they should have a minimal effect on user perceived loading times we needed to strip out what we could and be intelligent about what stayed to also help with site speed.
6. The colour scheme had evolved over the past few iterations to become fairly dark and muted. We wanted to put some colour back into the site and make it more inviting.
7. The content on the service pages varied wildly in length, quality and focus. We wanted to equalise these pages and focus on selling ourselves better.

What’s in our new site

1. We re-wrote much of the content as described above.
2. We cut out a number of pages with low interaction/relevance or combined what was relevant into other pages to make the website more streamlined and focused.
3. We made the colour scheme much brighter. There’s little use of our previous dark navy and instead we use the brighter blue, brighter services colours and a greater use of gradients and shapes to give an overall brighter and more dynamic design.
4. With more content in some pages we included a lot of custom SVG illustrations to help break up the content and provide more visually pleasing pages.
5. The subtle use of CSS animation also helped create a more delightful experience.
6. But we were mindful to make sure the animation didn’t go too far and become disruptive, especially to repeat users.
7. Rather than hide our team members at the base of the Who We Are page we’ve created a new Team page so this content can be discovered more easily.
8. This section also utilises AJAX loading to give a faster and better experience when navigating through individual team members.
9. We included more testimonials in out What We Do section as an additional trust signal for prospective clients.
10. Our web portfolio was redesigned to include a preview of the website.
11. All portfolios utilise AJAX loading for pagination and displaying the logo portfolio to keep these pages as lightweight as possible.
12. The blog has been redesigned to aid the team in creating future blog posts by having less variety in the sizes that the featured image can be used in and as a by-product the images shouldn’t need to be upscaled as often.
13. The blog post headers also colour match the relevant service.
14. We removed Discus from the blog comments, reverting to the original WordPress system.
15. On our contact form we adopted a method of using labels as placeholders over the inputs and animating the position of these on focus to make the form more visually appealing but still very usable.
16. The website is now on HTTPS to ready the website for future technologies that are only available to sites on the secure protocol.

Technical Stuff

1. We used CSS Flexbox a ton in building the layout to the website.
2. But this means IE9 and below has been given no additional support. From testing we’re confident all the content is discoverable it’s just not as pretty.
3. Progressive Enhancement is a big deal for us, and using CSS @supports has allowed us to use things such as background-blend-mode on our headers to add extra visual interest without adversely affecting other browsers that don’t use this.
4. Our goal was to rely less on polyfills and feature detection scripts like modernizr to keep page weight down but at the last minute we did relent in using picturefill on the blog.
5. We dropped the Google Maps from the homepage making this far lighter.
6. Also we lazy loaded a number of other elements that we thought might speed up the website.
7. Overall the homepage went from 4MB to ~1.5MB
8. Though we started with a JavaScript solution we ultimately used position:sticky for our sticky sidebars, combining this with media queries to ensure the screen height is greater than the height of the sidebar. Though of course this is reliant on the sidebar remaining a consistent height.
9. JavaScript sharing plugins were removed and we utilised the standard share links these networks offered with a JS popup script to match the interaction most users are accustomed to. With no need or ability to show share counts this method is the most lightweight option.
10. As standard we use FontFaceObserver to load fonts and minimise FOIT and FOUT when using @font-face fonts.
11. We pretty much rebuilt 90% of the code for the site ensuring everything was a lean as possible. Much of the database interaction was improved with a greater reliance on classes that could be shared across multiple uses.

Fingers crossed

We’re hoping after a soft launch that we’ve removed all the bugs and and DNS changes have worked themseleves out so the website is available for everyone to see. We also hope that we now have a website that is built to last the next few years. We’d love to hear what you think so why not drop us a comment below…