Since January 2016, the Untold team has been making an impact on our clients and the local Portland community. Our website at the time didn't do the best job of representing the fabric of our ethic, opinions, and style. Lighthearted as we are, we take our work very seriously. So seriously, in fact, that our vision of a representative website faced a number of delays in its journey to becoming realized.
We threw together our website in the midst of a heavy client workload. We built it as a simple and straightforward brochure-ware site that had succinct, to-the-point content and few links in/out. The entire team was far more focused on working alongside our clients and partners to really dedicate the time necessary to tell our real story online.
This summer, the team dove headfirst to build the website of our dreams. Thanks to Jordan Smith's incredible designs we had a branded template in which to build our web presence.
Here’s the story about how we made it happen.
The Frontend
As you might imagine, we're very particular about how Drupal sites should be built. We want to maximize Drupal's ethos of Configuration Over Code, so we wanted our front-end to allow for maximal creativity and power in the hands of the content administrator. Our CSS is written and maintained using SASS, so that we can @extend just about everything, and use standardized brand variables. This allows us to set up our styles as top-level components, using just CSS, while letting Drupal's wide-ranging options for content configuration, layout, and display do pretty much whatever it wants to.
Additionally, we chose to use pieces from Bootstrap 4, particularly its Flexbox-based grid system. We are super familiar with Bootstrap from myriad web projects over the years, but also because it was our first experience with Bootstrap 4, in particular. Flexbox is great, and very easy to work with. Our layout had a number of unique challenges associated with breaking out of the grid, and fixing and unfixing element positions that required a good deal of tactical grid-hacking. For future projects with highly-custom layout needs, we'll likely look to use CSS Grid over Flexbox.
The Backend
The backend is built on Drupal 8 “the Drupal 8 way.” A custom theme with tons of twig. Many custom block plugins, content types, entity references, image styles, oh my! And Paragraphs, of course. I mean who doesn’t use Paragraphs these days; it’s so great.
When we wanted to borrow Bootstrap libraries we did so in a minimal fashion and only load them where necessary. As you click through our site, you’ll notice an atypical usage of regions and palettes. We really love our design and getting that to work “the Drupal way” took a fair amount of preprocessing, programmatic usage of context, and some fun custom caching now available in Drupal 8.
Retooling
This was the first project where we decided to move away from Laravel Valet and use Lando for all our local development, including some slick Composer install script to get everyone at Untold on the same page.
We’re still a fan of Laravel products, and use Laravel Forge as a handy way to access some of our AWS resources, which integrates with Slack whenever commits and pushed up to various environments.
That Sand Animation
When our designer showed us a static image of the sand animation (seen at the top of this page) we knew we were in for a challenge. We explored a ton of different methodologies to achieve the desired effect, but ultimately landed on p5.js. For the unfamiliar, p5.js is a javascript library from the folks at the Processing Foundation frequently used in the creative coding space.
We've put the code behind the animation in this gist. Some other interesting bits about the sand animation are as follows:
- In order to add the depth effect, we'd need each of our waves to be textured with a gradient, which means we need to construct our shape with
TRIANGLE_STRIPas its render mode. this also means that we need to build our shape out of triangle strips, rather than a simple polygon. - Generating noise every frame proved to be far too inefficient, but we were able to approximate the effect by generating two large rectangles full of noise, and animating them in tandem with the pace of the waves.
- All of this only works with
WEBGLrendering mode for the canvas, otherwise we can't render the gradients in the first place.
The Content
We needed content that served a few basic, but highly critical functions as in:
- Telling our authentic story,
- Intelligibly communicating what we do to clients and partners,
- All while showcasing our prowess in building best-of-breed software.
Our Homepage content focused on brevity and simple language. No need to clog up our first impression with jargon and the like. We prioritized linking out to kick off the customer journey and, though we think we did a pretty good job, we’d love to hear your thoughts on it too. And yes… we’re using this blog post to do user testing. Sue us.
Our About page is where we took the liberty of getting a little more detailed. We dug into our expertise, our tech stack, and our team. We wanted our technically-inclined web visitors to have a single page to understand the depths of who we are and what we do from a high level. Tricky in theory, but we think we nailed it.
Our Handbook is our biggest point of pride. In order to facilitate transparency to potential hires, prospects, and creative partners, the Untold team spent dozens of hours outlining our core business processes and capabilities, organizing them linearly, and scripting even the most minute details of our day-to-day operations. At over 4,000 words, we believe we’ve given this handbook our all.
Our Contact page needed to be simple so, in very non-php fashion, we chose for it be a simple pop-out instead of a standalone page. It’s simple and unassuming. We knew that we’d eventually drive demand to individual landing pages but, for the moment, the contact pop out serves us well.
Lastly but certainly not least, we developed our “talking heads” feature. The goal here was to express our individual personalities on our website through simple, scripted conversations between pop-up talking heads on nearly all our webpages. We had a ton of fun with these, and we hope they make you smile. Hopefully you’ll have a way better idea of how we are and how we act before you ever make contact with us.
The Finished Product
The new untoldhq.com is a real point of pride for our team. We experimented outside of our normal Agile approach and went full swarm inside a short window. Now done, we have a web and mobile presence that we can be proud of, and we hope you enjoy cruising through the website as much as we enjoyed building it.
