We're excited to announce the launch of one of our latest client projects: thebettersoftwarecompany.com. This new website for The Better Software Company will be a great tool for our client to take their sales process to the next level.
When we were approached by The Better Software Company to redevelop their existing website, we couldn't help but get excited about the prospect of using our skills to deliver a significant, noticeable improvement on their existing website that will help them to achieve even greater success.
Responsive Photography 2.0
One of our client's struggles was that of page loading speeds. The time it was taking between page renderings was too long and it was seriously impacting the user experience. While not all of our clients have websites that are photo-heavy, we wanted to tackle one of the largest problems with large photos. We used this opportunity to completely redesign our photo asset management on our platform in many ways:
- Adopt a CDN specifically for high performance media
- Use picture elements wherever possible
- Implement lazy initialization
- Move background images in site-level CSS to page-level code
- Implement source image compression
- Implement next-gen image formats
Why do these things matter?
Simply put, a web user's experience of a website is often based on a series of unspoken rules, defined by the user experience associated with the web's most popular and successful websites. UX design is an important part of optimizing a website to ensure that visitors to your website aren't leaving because of something that has absolutely nothing to do with whether they like your products or services. If potential customers are walking out the door before you have the opportunity to attempt to win their business, you're fighting an un-winnable uphill battle. UX Design Optimization is one of the many reasons it is incredibly important for a business to outsource their website development to a professional developer as soon as your business can reasonably afford to do so.
The most important concern when it comes to web design for business is the fact that DIY web developers simply don't know what they do not know.
Adopting a CDN specifically for high performance media
When we peeled back the layers of our platform and analyzed performance of our implementation of Amazon Web Services to serve images for websites on our platform, we quickly discovered that AWS wasn't doing us any direct favours when it came to performance. While our AWS implementation was performing it's original directive of reducing the server load of our platform's origin web server, it wasn't doing much else.
Upon further research, we came across imgIX, which boasted itself as a powerful image processing API. When we tested implementations that incorporated imgIX, we found that we were able to drastically reduce image files sizes while still retaining image quality. One of the most convenient benefits that we found to implementing imgIX was the fact that we were able to use our existing Amazom S3 buckets as sources within imgIX.
While imgIX does have an additional usage-based cost associated with it (as does AWS), we found that the benefits greatly outweighed the cost.
Using picture elements wherever possible
We haven't used picture elements much until this point, but I doubt we will ignore them much in the future. The simple ability to pre-define a series of files for the same image and have the web browser determine which is best for the given viewport dimensions gives us the opportunity to trade a slightly larger HTML file for a much smaller image footprint. When we researched just how many websites were using the picture element to deliver image content, we were surprised that it wasn't widely used in the websites we looked at. Perhaps this issue is one of many examples of how a DIY is at a disadvantage when compared to a competitor's website designed by a professional developer.
Seeing as how all of our client websites are designed to be fully-responsive, it was important for us to take this next step and ensure that as part of that responsive design, we weren't serving heavy desktop-sized images to mobile devices. If Google Chrome's Lighthouse Audit Tool is identifying images that are not being used to their fullest potential, it might very well be an optimization that can be achieved simply by fully implementing the power of HTML5's picture element.
Implementing Lazy Initialization
We testing many, many scripts for lazy initialization until we found one that we liked. Ultimately for us, the winning lazy initialization script would have to be one that fufilled many criteria:
- It had to be slim - the smaller the better.
- It had to support picture elements - not all of them did.
- It had to support background images - we use lots of those.
- It had to have a well-developed documentation - this was new to us after all.
- It had to be fully-supported across all web browsers.
In the end, we went with jquery.lazy which fulfilled all of the above criteria. Such a great example of how the world of open-source development has produced quickly- and easily-implemented solutions to such bespoke problems!
52% of users say that a bad mobile experience made them less likely to engage with a company.1
Moving background images in site-level CSS to page-level code
It can be incredibly tempting to consolidate all background images into your CSS file, but we discovered that for a image-intensive website like the one we were developing for The Better Software Company, it was making our site-level CSS file incredibly bulky, plus it made it incredibly difficult to implement lazy initialization on our most frequently used destination for image content.
Our solution to this problem was created by making all div containers with background images predictable sizes (i.e. not using height:auto and leaving the size of the div to be determined by its contents). We tinkered with the template were were implementing on thebettersoftwarecompany.com to make sure that heights were always specified with a uantifiable height (in this case we used em's - widths of divs were always 100% so they were predictable by default). This distinction was very important because our solution involved layering a container underneath the existing div to contain the background image, by positioning the underlaid container using position:absolute, top:0, and specifying a z-index in our CSS. Using object-fit:cover in CSS, we were able to get our background image to proportionally fill the background space as intended.
By avoiding the easy road of using background-image:url(...) in our CSS files, we were able to drastically improve our code, by allowing lazy initialization to cover background images easily as well. Another benefit specifically to the design of The Better Software Company website was that the template called for linear-gradient overlays on background images. We were able to use this solution while also keeping the gradient overlays in the CSS file, as they applied consistently to all background images.
Implementing source image compression
Most of the world probably hasn't heard of Guetzli Compression. If you haven't it's nothing to be ashamed about. This super-quick summary on Guetzli is that it is an algorithm that removes data from an image that is visually unnecessary to achieve the same result. It is memory-intensive, and takes loads of time to process, but the results are worth it. As of this project, we now implement Guetzli Compression on all photography that touches the client websites on our platform. Guetzli is responsible for an over 40% reduction in the origin file size of our entire image library, and helps the websites on our platform to run faster, and take up less disk space on our web server!
Implementing next-gen image formats
Okay, this is kind of like the picture element topic 2.0. Through the use of source elements within our picture element, we are able to provide the web browser with use-first options for file formats that are not widely-supported, but when used deliver significant improvements in page performance. Formats like jp2, jxr, pjpg, and webp, when served instead of the usual jpg or png, are much more highly-optimized than their default counterparts. The beauty of the picture element is that we can supply the web browser with specific media source sets by file type, and if the file type is supported, it is automatically used. The final img element in our picture element provides the catch-all fallback support to web browsers that otherwise do not support the picture element or the next-gen formats that our platform now supports.
We love the Intercom platform. Mostly. We discovered that the widget embed code degraded page performance by over 40%, which when optimizing a website is major performance issue. We implemented a quick fix to this solution by not embedding the client's Intercom widget on the most critical stages of their sales funnel - contact form pages. On the client's 3 webpages that include contact forms, Intercom is ignored completely, making sure that performance is at it's peak on those pages ensuring the best possible conversion experience.
One Final Takeaway
If your business is largely offline, or your website simply doesn't factor into the success of your business, then you probably won't be hiring a web design agency any time soon. In most cases, however, a web design agency worth their fee will turn your nothing-sales-generating website into a fierce sales tool in it's own right. We're incredibly proud of what we have accomplished for The Better Software Company, and thebettersoftwarecompany.com is a perfect example of how an agency can deliver value that in-house staff often struggle with.
1 Google (2012) What Users Want Most From Mobile Sites Today, a study from Google (conducted by Sterling Research and SmithGeiger). Source