Building on a good foundation

Our journey to this blog post.

By Paul Kirby

You wouldn’t build a house without at least pouring foundation.

You probably wouldn’t set up a tent if it didn’t have a tarp under it.

And you wouldn't put a ship in the water without double, and triple checking its hull first.

So why then, I ask you and myself, would you ever begin building a website without really considering everything you need and fully understanding all the technologies you’re building on top of? As of this blogpost, this is the third iteration of Underground Web Lab’s website, and I felt it might be a good idea to share our experiences and decisions that got us here. 

Yes, project requirements change, but if you put the effort in upfront you can mitigate a lot of headaches down the road, and we make sure you have all the tools you need at your fingertips.

I think I’ll start out by showing you everything this site is built with, and then work up to that point. We ended up using Craft CMS, a super flexible, extremely developer/designer friendly CMS that we just recently fell in love with. No, we are not affiliated with Pixel & Tonic, we just like what they make. ;) Besides the CMS, this site was crafted (see what I did there?) with a few other frameworks and tools:

  • Foundation for sites 6 - A style agnostic css framework

  • Typer.js - For that fun little animation on the front page

  • jQuery - For the occasional DOM manipulation

  • Node & NPM - An awesome package manager

  • Gulp - A task runner for the development environment

  • SASS - A CSS preprocessor, to make life, well… better.

Choosing these technologies did not come together all at once for us, although I wish it had. Our first iteration of the site was actually built on WordPress. We consider ourselves experts in WordPress, and we needed a space to show off some of our work, so why not build on WordPress? Right? Well, that worked out great for our first build, which we needed to get out quick. 

After time, we received some feedback, and had a few new ideas of our own, including using SVG animations, and some more complex layouts for our content. Now, that’s not to say that wordpress isn’t the right tool for the job, you can use content builders & visual editors like Divi Theme Builder or a favorite of mine that I actually use in client projects, Mesh, a lightweight Foundation based page builder. You can also do quite a lot with custom theme development, but that makes it a bit more difficult to edit content in the backend. 

As a developer, I like my code to be clean, minimal, and elegant. So we decided to build Underground Web Lab v2 statically. 

A statically built site can be an excellent solution if your project meets the following specs:

  • Limited content i.e. an informational website

  • Speed is a must

  • Custom animations / complex design requirements

  • No need for end user edits / content rarely changes

  • Want full control of the code output, low amount of server requests

  • No blog needed

At the time we built v2, these were our requirements. So Antonio whipped up an exciting new design with SVG animations, full page forced scroll, overlay menus, etc. And I started a new project with my favorite framework, Zurb Foundation for sites. Foundation can be used as simply a CSS framework, but it also comes with a ton of features for building static sites, like Panini, its flat file compiler that works in a similar fashion to handlebars.

So now we have a finished v2 of Underground Web Lab’s site. Life is good. Everyone is happy, even Ori, our mascot / head of canine outreach. We go on for a few weeks, and realize… we want a blog. We need to be generating content for our brand’s SER, and creating case studies to highlight work that we’ve done and problems we’ve encountered.

We can surely write blogs on our current set-up using markdown and writing out new pages each time we want to post, creating .yml files to make sense of all the layouts. But I looked at it from the perspective of Antonio, who would have to learn these new languages just to write a simple blog post, and from the perspective of a potential client, who we could never ask to go through all that just to add content to their site. So after much research, trial and error, and testing, we landed on Craft CMS. It seemed like the best option with the largest community that gives all of the end-user friendliness of a CMS without sacrificing any of the light-weight, clean code, and customization options of building a static site. And that is how we got to this first blog post.

What’s the point of telling you all this? When we take on new clients, we spend a considerable amount of time making sure every feature the client needs has been thought out, documented, and double checked so we can pick the right foundation to build the project on. Yes, project requirements change, but if you put the effort in upfront you can mitigate a lot of headaches down the road, and we make sure you have all the tools you need at your fingertips. We experimented with our own website, and paid the price, so you don’t have to. We can help you create the online experience you want, with all the tools and features you need, with a budget we think you’ll like.