Narrative Science
I built a custom WordPress site for Narrative Science, in partnership with agency Maark. The site was quite complicated – there is a big team of content managers, pages needed tons of flexibility, and there are several different sets of styles to manage. I worked with a frontend developer for some portions of the site, but ultimately handled a majority of the integration.
Industry
- Technology
Date
2020
Services
- Animation
- Web Development
- WordPress
Branded Microsites
One big challenge on this site was the different style requirements for different parts of the site. While many templates, and content blocks, are shared across the brands, there are ultimately 3 different major brands on the site. Each one has unique colors, fonts, button styles, and block presentations. I used Stylus (a CSS pre-processor), to allow for sharing of different styles between the brands, and used Gulp to compile the separate files to load on different parts of the site. While the CSS is quite unique, a lot of the Javascript was able to be shared, though I still compiled a separate file for each part of the site.
There are also a couple bonus styles for different events, like their Virtual Summer Camp.
WordPress Integration
The WordPress integration was a bit complicated by the different brand requirements. There are many blocks across the site that are shared between different templates, but with slightly different requirements. I couldn’t come up with a perfectly smooth solution, but ended up using ACF to build each block as a separate, disabled field group, which I could then add to different template/post type field groups as needed. On a template-level, I mirrored this setup. Blocks are setup as separate PHP files, with the block data passed to them as a variable, and are easily reused between templates.
Animations and Interactions
There were a number of designer-requested animations throughout the site. The homepage features a number of full-page slides with javascript powered smooth-scrolling. In the Lexio section of the site, there are a number of fun animations like animated headline changers, scroll-based loaders, and product demo videos in hardware frames. Quill also has some interesting components, like a different animated headline changer and an interactive feature browser.
Resources are a CPT, which belong to the various brands. The client has a resource block available on the backend where they can select the product, and 1-2 taxonomies for further filtering. On the frontend, users are able to filter by the appropriate taxonomy and dynamically load more resources on the same page.
Performance Improvements
One task I had was to implement performance improvements, primarily based on Google Lighthouse recommendations. The goal was to improve on the previous version of the site, so the project started with testing. I implemented basic best practices theme-side like reducing requests, optimizing load order, and so on. I also used Smush Pro for a variety of image improvements like automated resizing, CDN, compression, and next-gen formats, and W3TC for caching and minification. Ultimately this resulted in a several second improvement, no small feat for a marketing site still quite full of large images, videos, and non-negotiable 3rd party scripts.
