Website Part 4: Turning Designs into a Functioning Website

Today we're talking about how we take our designs and turn them into a functioning website.

We have some wonderfully delicious designs (like this, and this!) for Wandering Aimfully, but how the heck do we turn those into a working website? Alas, this where things get a bit technical. Everyone, put on your nerd glasses 🤓 and prepare yourselves.

Caroline and I both have a background in design. Me? I've been designing sites since the days of Geocities and Dreamweaver. Caroline? She got her start with Blogger. Take note that we aren't sharing our early work here - lol. But to say that either of us are developers or can build a website from scratch would be incorrect.

This is a perfect example of something we whole-heartedly believe in which is:

Don't be afraid to outsource your weaknesses.

We will be leaning heavily on two other human beings and a handful of tools/products to help bring the Wandering Aimfully website to life. Before we dive into all of that, let's tackle one very important decision...

Squarespace vs WordPress

This under construction website you're currently viewing was built using Squarespace. It required zero help from a developer and was built from start to finish by Caroline (I'd like to take credit for some of the work, but let's be honest here, she did the heavy lifting). Caroline moves through Squarespace like a hot knife through vegan butter (which is the same as regular butter, if you can believe it.) She's used Squarespace to create at least 10 other sites over the past two years and it's safe to say she's reached Level 300 Squarespace Wizard status.

If Caroline is so proficient with Squarespace, why not use it going forward?

It really boils down to one big decision: Setting ourselves up for long-term success with Google.

Okay, it's kind of two decisions... We can also do a lot more crazy custom stuff using WordPress. Stuff like create a miniature software product that we're calling our Customer Dashboard.

Now, I don't proclaim to be an SEO or Google Search expert, but I have data from my own experience that shows me that Google rewards sites built on WordPress. My belief, and some of what I've read online, is that you can think of Squarespace like a really bloated WordPress theme. Whether you're using all the features of the theme or not, you're still loading all of them in the background (if you want to see this in real-time, feel free to visit MadeVibrant.com and then visit JasonDoesStuff.com in an incognito window... which one loaded faster?).

Loading a Squarespace site tends to be slower, which Google doesn't like. And if Google thinks your site is slow, guess what they're not going to do when people search for phrases related to content you've written? Yep, you guessed it, your site won't get to live in the glorious world of the 1st page of search results.

Part of this whole SEO/Google Search decision is based on a gut feeling. We have data from JasonDoesStuff.com, showing that one article (Do A Social Media Detox) brings in over 175,000 visitors per year from Google. Along with a handful of other articles that rank well on JasonDoesStuff, it's clear that Google enjoys the speed of the site mixed with the thoughtful content. Caroline has written a massive amount of thoughtful content, but unfortunately Google hasn't rewarded her efforts for that on Made Vibrant. (And yes, I'm well aware we aren't comparing apples to apples here, but isn't going with your gut part of being an entrepreneur??)

wordpress runs 1/3 of the internet

What does Ariel say in that one song...? 🎵 "I wanna be where the people are..." 🎵

We are choosing WordPress because of products we're going to use that people have built for it (which I'll talk more about in a moment). But we're also choosing WordPress because nearly everyone and their mother can work on it.

If you can dream it, you can build it (or even find a plugin for it) on WordPress. While we aren't fans of boatloads of plugins, we are fans of knowing people that can build exactly what we want. Can we say the same for Squarespace? Not so much.

That said, it's super important to say that we're still HUGE fans of Squarespace when it's the right fit. There's no question that if you're starting out and can't pay a developer, Squarespace is our recommended resource for getting a simple and beautiful website or blog up and running. You can still run a very successful business using a Squarespace site. It really just comes down to weighing your options and seeing what the best fit is you at your stage of business.

The people and products we'll be using for our Wandering Aimfully WordPress site

First up, meet the awesome humans that are helping us.

Everyone, meet Ben Rabicoff. Ben Rabicoff, meet everyone. Ben and I have been friends since 2009, when, no joke, Ben found my IWearYourShirt project on the site Digg.com and convinced the company he worked for at the time to purchase sponsorship space. Since that day we've been great friends and Ben's been hugely helpful with a handful of other projects (most recently he coded our BuyOurFuture website from scratch, including some pretty funky design interactions).

Ben will be handling the front-end code (HTML, CSS, Javascript, and a handful of other stuff). But the fun doesn't stop there with Ben. He's also a sorcerer when it comes to making websites fast. He'll be ensuring that we're doing everything we can to make sure Google knows how fast our new website is.

Next up, meet Mark Jaquith. Funny enough, Mark and I also crossed paths during my IWearYourShirt days, but instead it was because we sat next to each other at a TEDx event I had the pleasure of being a speaker at.

I remember enjoying Mark's sense of humor back in 2010 and we've stayed connected via Twitter since then. When Ben and I started chatting about the functionality we were dreaming up for Wandering Aimfully, Ben asked if we could get reinforcements. Mark was the first person I thought of, mostly because I remembered his bio:

My name is Mark Jaquith (JAKE-with). I’m a Lead Developer on the WordPress web publishing platform, used by tens of millions of people around the world. I make my living as a web publishing consultant to everyone from individuals to startups to established media companies.

When you find someone who works on the core of a humungous product (WordPress), you know you have the right person! Mark will be assisting Ben with a slew of the more technical side of things.

ps - yes you can reach out to Mark if you have a WP project!

Kudos to Mark for letting me grab cheesy screenshot!

Secondly, let's take a look at the services we'll be using to bring our site to life.

WordPress! Well, this should be clear. But just in case it isn't entirely obvious, WordPress is the service behind the scenes that contains all our content. We'll write our articles in there. We'll manage our customer profiles in there. Yada yada.

Flywheel! We need someone to make sure our website stays up as much as it possibly can, while also helping do a few other things:

Running nightly backups of our site (because, just in case)
Making our site secure (hello included SSL certificate)
Helping our site run faster (CDN [caching] powers, activate!)
Giving us a well-design interface to manage our site (hurray)
Providing fantastic customer service (seriously, this is where Flywheel wins)

If you're running a WordPress site and you aren't happy with your current host, or just read those features and think you want them for your site, definitely check out Flywheel. There's no shame in me saying we're giving your our affiliate link... Flywheel is WORTH IT!

Github! Let's not even pretend I know what I'm talking about here. I mean, I kind of do, but if I were to try and type it out, ugh, I'm losing interest just thinking about this. All everyone (including myself) needs to know is that Mark and Ben will use Github and that's how Wandering Aimfully's code will be managed and deployed.

Restrict Content Pro (RCP)! My Internet BFF Paul Jarvis has been using RCP for a few years now. We've chatted about it a few times before, but I really had no reason to use it. Guess who found a reason for the season?? RCP is going to do a handful of stuff for us:

Allow people to purchase our monthly memberships (via credit card or PayPal)
Manage what pages our members can see
Help recover failed payments, because, this just happens
Send customer data into our Drip account (Drip is our email service provider)
And other things that I'm not even aware of right now

Yoast SEO! It may seem odd to include an SEO plugin in this list, but building a solid foundation of good SEO practices has proven extremely worthwhile for JasonDoesStuff.com. Since Caroline's site (Made Vibrant) hasn't been fully optimized for SEO, the Yoast plugin will be crucial in setting up all her existing Squarespace articles on our fancy new WordPress site. We'll also use Yoast on a consistent basis going forward, with every article and page we create.

Other random stuff... I'm sure I'm forgetting about a ton of smaller products and services we're using. Mark and Ben probably have their own list of things they could include.

Last but not least: What are the steps we're taking to get everything built?

I thought it might be fun to wrap this post up by sharing the very abridged steps for bringing Wandering Aimfully to life (from just an idea in our brains).

One Google Doc rule them all

We have a running Google Doc that Caroline created for Ben and Mark. It outlines every part of the Wandering Aimfully website, including the bulk of the functionality. We're all jumping in and out of this doc, and will continue to until the project is done.

Caroline finishes designs in stages and shares with Ben

There's no reason for Caroline to drop ALL our designs on Ben at once. We've started him off with the main Customer Dashboard page. Caroline exported her Adobe XD file to be more friendly for Ben (and included any background image PNGs, icons saved as SVGs, etc.). Ben will work his frontend coding magic to bring Caroline's design to life.

Mark will lay the technical foundation

Listen, I'm not going to pretend I know all of the things Mark is doing. When you bring someone on board that you trust, you just let them do their thing. Mark has already gone through the high-level features and created "issues" for these in Github. I did help though! See those priority labels (low, medium, high)?? I totally assigned those. I know. I know. Pretty badass.

Screen Shot 2018-04-10 at 3.47.39 PM-min.png

Ben works locally, then pushes updates to our testing site

"Working locally" simply means that Ben has an environment on his computer where he can build stuff and not have to push it to our website (or continue to refresh a website to see changes). We have a testing environment in our Flywheel account that Ben and Mark will be using fairly often. Actually, Caroline and I will be using it too. So, yeah, we have a testing environment we'll all be using to see the progress of the Wandering Aimfully site!

Mark works his magic

Where Ben leaves off after doing the frontend coding, Mark will swoop in to put his delicate touch on all the code to make our feature-dreams come true. I choose that word delicate on purpose, because Mark actually broke his foot earlier this week. No joke. Robot toes, here you come Mark!

Rinse and repeat...

Caroline will deliver more designs to Ben. Ben will do his thang. Mark will do his. I sit back, relax, sip piña coladas and read GQ Magazine. Actually, I don't even like piña coladas and I obviously don't read GQ Magazine.

Here's to taking the big ideas in our head and turning them into (digital) reality!