Client: Home Depot
Position: Lead Front-End Developer / Lead Maintenance Developer
Tech stack: Drupal
Initial Dev Time: 3.5 months
Few businesses have the resources of The Home Depot. They are (#33 on the Fortune 500), and as of writing, this employs 371,000 people across 2,274 storefronts and multiple offices. In a word, The Home Depot is massive.
Emerge Interactive partnered with The Home Depot's corporate team, which involved trips out to their Atlanta corporate office, where Emerge's Creative Team was able to flush out and finalize our designs. Home Depot looked to depart from the minimalist trend, to capture The Home Depot's Built From Scratch look and feel.Pictured: Version 1.0
Under The Home Depot's brand, they have several sub-properties, chiefly its "Team Depot" (outreach) and "Built From Scratch" (media). One of the unique concerns was how to move all the concurrent media channels into one seamless space; aggregating its social media streams (FaceBook, Twitter, Instagram, YouTube, Vimeo), media outreach and charitable causes. This included moving its previous website's content to the new website.
As a personal objective, I set a hard limit of 600k of non-CMS assets as the site is incredibly image-intensive, this included any image/JS/CSS/fonts served as part of the template. It's easier said than done in especially considering the original design and the world of Drupal which packs quite a bit of its own necessary resources. I was able to obtain this through a barrage of front-end patterns, such as minifying js and CSS assets and creating my own "Bootstrap-Lite," cutting out roughly 85% of the bootstrap code to avoid redundancy. Also added to the mix was a larger breakpoint for larger screens. The end compiled CSS ends up weighing at an astonishing 31k when served through GZ compression, and the entirety of the JS from the template (non-CMS) is 17.5k (excluding jQuery, required by Drupal). The most significant gains to be had were on the template imagery side.
Editing the images meant revisiting my digital arts degree, creating repeating texture maps from the design I was given. I was able to shave off precious bytes without sacrificing the visual integrity of the original design. In the end, I was able to shave hundreds of precious kilobytes off individual textures.Pictured (above): 1500px x 300px (2x version) texture was for the header, 2x.
Some of the more inventive solutions came from the mother of all inventions, necessity. The Home Depot wanted to leverage modals. Not just modals for images but modals that contained slideshows, videos, and downloadable images. The content contained in these modals also needed to be CMS managed. A single page could trigger multiple modals. I need to stress: they really liked modals. (Some battles just cannot be won.)
What made this project work was the extremely tight team, consisting of Christa (Project Manager), Dan (Lead Back End Developer), Mike (tech lead), Adam (Designer), and Daemon (Creative Lead), and myself as the lead front-end developer. Due to the timeline, all interaction animation design fell on my shoulders.
With a narrow dev window, we were able to accomplish what at times that seemed the near impossible: creating a site that houses thousands of images, hundreds of articles all across multiple templates. We launched on time to meet the quarterly earnings deadline. We also landed a service agreement retainer contract where I continue to work as lead front end dev for seven years. There were many updates over the years, like moving our development to Docker, ditching Grunt.js for Gulp.js, switching from Google cloud to Pantheon, keeping up with security updates, upgrading from Drupal 7 to 8 to 9, replacing social media functions and integrations.
During my time as the main developer responsible for meeting the client's requests, the site grew from 100,000 page views to 500,000 page views, and kept a 99.9% uptime, thanks to Pantheon.