A website is more than meets the eye. It’s a content management system, front-end build system, backend platform and cloud hosting strategy. Considering these tools and techniques are constantly changing, it’s clear why a carefully crafted toolbox and meticulous strategy are so important for a successful project and on-time launch.

This year, we worked with Coats Speciality, the world’s leading industrial thread and yarn manufacturer, to develop a digital campaign designed to build awareness and generate sampling requests, ultimately driving sales of Coats automotive threads. The challenge: heighten awareness of a brand in a new way that has a rich, luxurious feel, and gain market share in an industry that can be difficult to penetrate.

We always love a good challenge.

Every new development project is a healthy balance, combining the latest website trends with proven reliability and maintainability. When choosing our tools or stack, we also review performance impacts or performance budget and address platform constraints as needed. No matter the project, we aim for a great user experience, fast load times, scalability to meet future demands, and an end result that exceeds the customer’s key performance indicator (KPI) goals.

This particular project gave us a lot to juggle, but we knew that careful planning and thoughtful execution could lead to a phenomenal experience for visitors to the new Coats Speciality microsite.

Creative solution

To strike a delicate balance between optimizing site performance and providing a visually rich experience for the visitor, we considered and vetted any dependency; used aggressive optimization techniques and tools that allowed us to meet our performance goals while staying under budget; and ensured the site was fully optimized for mobile, tablet and desktop experiences.

Our stack or tools included:

• MVC (Model, View, Controller) backend - CodeIgniter provided a full-featured, modern codebase for database integration, multiple language support and lead generation form processing. CodeIgniter met our demands for scalability and extensibility, is well-tested, is deployed on thousands of websites worldwide and has a rich community of open-source developers extending and improving it on a daily basis. It helped us build the Coats site more quickly and efficiently while meeting all of our goals.
• CSS - Our desire to develop maintainable, modularized CSS (cascading style sheets) heavily influenced this project’s style sheets. When coding CSS, we use a build system called SASS, which allows us to write CSS with speed and accuracy, while a compiling engine renders the final CSS that is read by the browser. We also employed modern concepts like a BEM (Block, Element, Module) class naming structure, DRY (Don’t Repeat Yourself) practices and modularized code blocks. As a result, QA time was reduced, development moved more quickly, and potential bugs were eliminated along the way.
• JavaScript - For site enhancements, we chose the smallest possible jQuery plug-ins that provided the functionality we needed, resulting in less downloaded code and a faster site.
• Navigation and usability - To provide visitors with unobtrusive and in-page navigation at any scroll point, we developed a navigation solution that remains accessible while toggling between main and in-page options depending on the visitor’s position on the page and scroll direction. Prominent calls-to-action on every section lead visitors to a logical next step, removing dead ends and pointing them back to the brand.
• Responsive images - Our creative team provided us with rich imagery, and only the optimal size of each image would ensure their speedy delivery on any connection speed and device. We used the responsive images technique, where multiple versions of a single image are created at optimal ratios and file sizes and then dynamically inserted into the site pages depending on the visitor’s connection speed, device and screen size.
• Image preloading - We aimed to provide the fastest possible page loading times, yet the sheer number of images and videos required a careful approach to initial visitor experiences, when the assets and side code have not been downloaded to the visitor’s device. Once a visitor visits the site, many of these assets are “cached” (downloaded) to their device, and subsequent pages and visits will render much more quickly. Meanwhile, all needed assets are downloaded to the visitor’s device. The preloader captures first-time visitors’ attention while managing the short download period. Rather than viewing the preloader as an interruption or delay, we approached it in an intentional way; by using it as an opportunity to introduce the brand, we turned a potential challenge into a value-add.
• HTML5 video - HTML5 video is now the industry standard. Luckily, modern browsers support this standard, further reducing our JavaScript dependency by removing the need for a separate player. We enhanced the player’s custom UI elements using minimal custom JavaScript. HTML5 video API provided preloading capabilities, which helped minimize the impact of this standout feature on the site’s performance budget.
• Tooling - Even the best concepts and development approaches can fall flat if your team hasn’t chosen the appropriate tools to execute them. Tried and true tools help ensure the quality of the final product, and our development stack for the Coats site includes some of the industry’s most robust, modern and tightly integrated tooling such as:
  • Gulp for speedy compiles and concatenation of CSS and JavaScript files
  • Bower and npm package managers for dependency management
  • Git for version control and rapid, automatic deployments
• Server-side enhancements - To ensure a fast site load while maintaining the desired visually rich impact, we engaged several server-side enhancements. These included Gzipping CSS and JavaScript, a technique that uses an algorithm to minify these assets to a small size for download and expand them to actual size once downloaded to the user’s device. This results in considerable file size savings:
  • Our main style sheet download size dropped from 108kb to 16.8kb.
  • Our main JavaScript dropped from 205kb, with 86kb additional for jQuery served from the Google CDN, to 61.3kb with 29.7kb for jQuery.

What we delivered

The Coats Speciality microsite is an outstanding success, both in terms of KPI and overall brand awareness. The site is bursting with personality and meets project goals including aggressive load times and progressive, optimized images.

• The site garnered more than 28,000 page views in seven weeks, an average of 4,000 page views per week.
• The contact form is generating leads.
• Visits have resulted in more than 6,000 video plays, 212 PDF downloads and 25 social shares.
• Average time on page is an impressive 3:05.

Regardless of the problem we’re trying to solve or story we’re aiming to tell, our development goals remain unchanged: create websites that provide an amazing user experience, achieve fast load times and meet or exceed business goals. The Coats Speciality microsite is a project we’re proud to showcase.

If you have questions or comments, or if Wray Ward can help tell your story online, drop me a note.