Transcription
Done. I just finished building the same website 20 times. Like, I literally paid for 20 different website builders with my own credit card and tried building the exact same website with each one. All in effort to find the best website builder.
I've been wanting to do this for a while, but I needed the right website for this project. Then, out of the blue, I got a message. This bummed me out. Bamboo is the rock band I've played in for 12 years. Things have been slower in the last few years, but that's because a few of us had kids and then even more kids. But the band isn't broken up. We're just kind of paused. So, when our website died, it felt wrong that it took me a few months to even realize it was gone.
But here, I had the perfect website for my project. A band website is actually not super complicated. So, I think I can build it 20 times. In fact, strip away the rock and roll and it's actually kind of a generic small business website or personal website. Here's a very crude sketch of the website. We have navigation, a splashy photo with a slogan, a basic footer, and then there's a few other pages.
To prepare for this marathon of website building, I wrote our bio and gathered videos and photos to use on the website. I settled on this image for the homepage. Next, I started researching and made a list of 20 website builders. And with all that, it was time to build. So, I spent a couple weeks building the website with each website builder. And as I did, I noticed they fell into different categories. And we're going to go through each category, starting with the definitely not category and working our way up to my final choice.
So, what lands you in the definitely not category? Well, there are four website builders in this category. Let's first take a look at GoDaddy. Here we are in GoDaddy, and I'm going to try upgrading to a paid plan, but see if you notice anything weird. Did you spot it? There are two items in my shopping cart. Weird. Thought I was just buying a website.
When we look at the items, there is my website, but also this Microsoft 365 email product. Wondered if I just accidentally added this to my cart. So, I removed it and went back through checkout again. And again, it was in my shopping cart. Saying this email product costs $0 makes this even sketchier because the total cost doesn't increase. So you might not notice an extra product has been added to your shopping cart. But a year from now, GoDaddy will start charging me 130 bucks for a Microsoft email product I didn't even realize I signed up for. So I'm definitely not going to use them.
Let's look at another one. Mailchimp. Now the first red flag with Mailchimp was when I was signing up. Look closely at this checkbox. By not checking the box, I agree to be opted into their marketing emails. That's so lame. Obviously, most people will look at this check box and think, "Oh, I'll check it if I want their marketing emails." But they're saying, "By not checking the box, you'll get their marketing emails." So, my first interaction with your company and you're going to try to trick me? It's a terrible first impression. And then, while checking out, they said I'd be charged on June 4th, but that didn't happen. They charged me 2 weeks earlier on May 20. Like what? I still built websites with Mailchip and GoDaddy, but when companies treat me like this, it feels like a red flag.
Now, not every website builder in the definitely not category is shady. Like Google Sites. Google Sites wasn't shady at all. In fact, it was free. But it's not very customizable. Like there's no way to move this text to the bottom like I wanted. And it automatically darkened this image. and I couldn't change that. And if we preview the site, we can see they add a search icon to the navigation and there's no way to turn that off or even to replace it with a button like I wanted to do originally. Even on mobile, the search icon remains and then there's this extra icon that you also just can't remove. So, while Google sites may work for the right project, and in fact, I think it's pretty popular in academia, for example, you kind of get what you pay for. It's free but not customizable. And that gives you an overview of the definitely not category.
I should say I might not go over every website builder in every category. I think that could get boring. For example, I'm not going to talk about Zoho sites here. Instead, you can find a link in the video description to my notes on every website builder, including Zoho sites. There was also links to all 20 websites I made. So, if you're dying to know my thoughts on Zoho sites, you can find it there.
Our next category is blank canvas editors. And it has just one website builder, Canva. Here's my website in Canva. And here's what I mean by blank canvas. You can grab any element and move it anywhere on the page. You can even drag it right off the page. We are used to documents on computers being a blank canvas like this. Like we think I should be able to drag anything anywhere. Like come on. But a website should not be a blank canvas. Websites need structure.
Here's the biggest reason we need structure on a website. People visit websites from a range of devices today. Mobile, tablet, laptop, desktop. And a critical part of a website looking good is that it has to look good on every device. Has to respond to the device size. This is called responsive design. On mobile, our website needs a menu like this. On desktop, the image needs to stretch out. A good way to test if a website is responsive is to just drag your browser window. Your website should look good at any size.
So, let's go back to our Canva website and try resizing the browser window. And uh it literally just shrunk the website. Look how small the navigation is. You see, blank canvas editors like Canva have no structure. So, while Canva tries to guess at how to make the website responsive, since there is no structure, the results are disappointing. And that's why Canva is not going to work for me.
Next up are the section editors. All the website builders in this category have what I call a section editor. Let me show you an example, Square. Here we are in Square. And you build your page by adding pre-esigned sections to your website. Let's add a section. And here are some example sections we could add. [Music] We'll add this one. Sections are made up of individual elements. Like this one has three elements, title, text, and link. You can then toggle off elements, but there's a major limitation. You can't add new elements or move these elements around in any way. Just here is your section and you get what you get.
Every website builder in this category works this way to varying degrees. Here's the thing. Being able to select a pre-built section is actually super handy. But if it's the only way to build your website, it quickly feels limited and cookie cutter. The best website builders, which are still to come, let you select from pre-esigned sections, but also let you customize these sections by adding or moving elements around. Like remember, here's how I wanted my footer section to look. And in square, there were only two footer options, and neither looked quite right. If I could just move elements, this would be much easier. To me, section editors are just too limited.
The best website builders, which are still to come, let you select from pre-esigned sections, but also let you customize these sections by adding or moving elements. We can put this on a graph with two continuums. Easy to use versus learning curve and limited versus customizable. I would place section editors here. They are easy to use but quite limited. I'm looking for a Goldilock zone, something easy to use, but also customizable when I need it to be.
Okay, from this point on, the website builders will start getting better. These next ones I'm calling just okay. I was able to build my website more or less how I wanted, but each one had something that held me back. Let's start with Wix. I did get my site looking how I wanted with Wix, but the process felt clunky. Even simple things like setting up navigation required trial and error.
In Wix, you use something called strips, which are supposed to help with responsive design. Strips can then be divided into columns. elements inside those columns need to stay within dashed grid lines. If they don't, they may not appear on all screen sizes. It's a bit confusing and honestly, it took a while to wrap my head around, which would be fine if it led to a great result. But even after figuring it out, my website still wasn't fully responsive. For example, here's our final Wix website. And let's try resizing it. Okay. Yeah, the width is adjusting. But wait, what happened to the bottom text? Let's try this again. Notice my bottom text is disappearing. That's not what I want.
Now compare that to this example. See how the text stays pinned to the bottom? That's what true responsive design looks like. Responds to the width and the height of the device. It's even more clear when we put them side by side. The fully responsive website just looks a lot better than Wix on smaller screens. Responsive design is a huge part of making a good website. Your website shouldn't just look good on your screen. It should look good on every visitor's screen, too. That's the hard part of web design.
As for the other website builders in the okay category, well, Duda just felt overwhelming with lots of hunting around the editor for tiny menus. And it was kind of the same problem with oneinone, WordPress.com, and web.com. I was able to build my website pretty close to how I wanted with these website builders, but it took a lot of trial and error, and I often found them confusing rather than intuitive.
All right, we're almost there. From here on out, the website builders get very interesting. But all this talking, my my mouth is getting parched. Let's go get some water. Now, I should say this video is not sponsored. You can however find links to all of the website builders in the video description and most of them are affiliate links which means I may earn a commission if you click and sign up. In full disclosure, some website builders pay me more than other website builders. This all begs the question, do I just give the highest rating to the website builder that pays me the most? No, I don't. In fact, guess which website builder pays me the most? It's Wix. And I put them in the just okay category. Just saying. But these videos do take a long time to make and this is how I earn my money. Feel free to ask questions in the comments. I'm happy to explain my recommendation. And remember, you can find my complete notes on every website builder in the video description below.
Now, there's a word I haven't said yet. AI. That's right. AI is everywhere these days, and website builders are no exception. And there are even new website builders like Durable that are built entirely around AI. They promise AI that builds a website for you. And I think the idea of AI generating an entire website is super appealing. But let's separate the hype from reality and look at some of the actual websites AI generated for me.
Like here's what Durable generated for me. I'm not even sure it even understood that Bamboo is a rock band. Squarespace's AI generated a pretty vague generic web design. Wix's AI kind of does the same, but also includes a generated AI photo of a lead singer. Framer's AI probably did the best job, though it feels a bit unfinished. Maybe these generated websites could work as starting points, but I think you're actually better off choosing a template as a starting point. Like to me, I think Squarespace's templates are just a better starting point than this.
In the end, where I think AI is being most helpful is not in website generation. It's the text generation. Basically, where you give a prompt and the AI generates text. And almost every website builder includes some version of this now. So, it's kind of just a standard feature at this point. AI is of course also good at generating images. But look at the images AI generated for my website. They feel like stock photos, completely depersonalized. it looks kind of actively bad. So just use AI generated images where it makes sense.
Okay, next up, budget friendly. We're going to look at both here. So let's start with Hostinger. Hostinger is a simple no frills website builder. Like these are all the elements you can add to your website. That's not very many. Sometimes it's too simple, like I wanted to reduce the padding inside this button, but I couldn't. And I probably wouldn't use Hostinger if my website needed more sophisticated features like an online store or a blog. But the price, it's kind of wild. If you pay for 4 years upfront, it's only $2.99 per month. That's crazy cheap.
Now, this is called introductory pricing, and it can feel a bit sneaky cuz what does your website cost after the four years are up? Hostinger does say it will renew at $10.99 per month after that, which is a fair price. Just make sure to send them this screenshot after four years so they don't switch it up and charge you more than $10.99. No funny business.
Next is Card. Now, Card does have a catch. It's made for onepage websites. So, I've tweaked Bamboo's website design to fit everything onto one page, which admittedly is not what I wanted to do, but I wanted to at least explore a card because it is really cheap. Like I built and published Bamboo's website for $19 a year. Most website builders charge that in a month. And unlike Hostinger, that's not an introductory price. That's just the price. But yeah, it's only for onepage websites. And to be honest, Card isn't super intuitive. Still, if you can fit your site into one single page, nothing will beat this price.
We are getting close to the top. Next up, design tools. Let's start with one of the most popular, Web Flow. So, what is a design tool? Well, design tools like Web Flow give you developer level control. Sounds fancy. What does that even mean? Well, let me show you. Here I have this text selected. And front-end developers will notice all these rules are CSS rules that I can apply to text. Web Flow is giving you the same power you would have if you were a front-end web developer. So, you're getting the same CSS controls a web developer would have access to. I've even seen people recreate Apple's website in Web Flow. That's wild. So, you get total design freedom. Amazing, right?
Well, all that power comes at a cost. Design tools like Web Flow do have a steep learning curve. Nothing is handed to you. Even setting up basic things like setting up navigation or setting up a photo gallery took me longer than expected. And you need to understand core web design principles like flexbox and positioning just to get started. If you're brand new to web flow, expect to spend weeks, maybe even months learning it. But if you do, you've unlocked a massively powerful tool.
Framer is actually a bit easier than Web Flow, but it follows the same pattern. Lots of flexibility, but expect a learning curve. So remember this graph, I'd put design tools here. They are super customizable, but they have a learning curve. And I think the trick is to know when to use a design tool. For the Bamboo website, a design tool felt like overkill. I don't really need a tool that's capable of building Apple's website. That's just too much.
So when's a good time to use a design tool? Well, I've started using design tools for more complex or sophisticated websites. For example, I'm the co-founder of a software company called Atlas, and I built our marketing site in Web Flow. Why? Well, we needed a lot of customization. We wanted custom animations. We wanted a custom slider. We needed a custom pricing calculator. We needed a powerful content management system for things like our help center. We could do this all with Web Flow. And that's where design tools like Web Flow and Framer are great. And it's why today you'll find lots of professional web designers using them. But for most small business or personal websites, design tools are probably overkill. Unless you're a professional web designer, learning them might not be worth it.
But again, for Bamboo, which is a pretty typical website, I was still on the hunt for something in that Goldilock zone. Customizable but easy to use. So, weeks of testing, 20 total websites built. What did I choose? What was my top pick? Squarespace. Yeah, let's take a look at it.
With Squarespace, I was able to build our website exactly how I wanted. And there were lots of little details I liked, like I could choose from these highlight effects. Just made the homepage quote pop a bit more. It's really easy to build cool looking sections. And I appreciated how my mobile navigation stayed clean and usable even after I customized it. But honestly, while those small details are great, what impressed me most is how Squarespace balances ease of use and customization.
Like remember those section tools we tried? Well, Squarespace has pre-esigned sections you can choose from. But when that inevitable moment hits where you want to change the section, you can do it. You can dive deeper and customize the section how you want. Squarespace is not the only website builder that lets you customize sections, but I've just found this pattern consistently throughout Squarespace. Like, it's easy to use, but if you want to go further, you have the option to do that. Like, I could change the colors on the entire website with just a few clicks. That's nice. It's easy. But if I wanted to fine-tune something super specific, like dialing in the exact padding on this button that I want to, I could do that, too. 99% of people won't need to do this. It's just nice to know that this option is always there when inevitably you find that one small thing you wish you could tweak. Plus, Squarespace's website was completely responsive. Not sort of responsive or sometimes responsive. Completely responsive.
Now, I'm not saying Squarespace is perfect. It's not flexible enough to design the Apple website like Web Flow could. And if you've never used it before, you'll probably spend a few minutes thinking about how to do specific things. But for small websites like portfolios, blogs, personal sites, and of course, band websites, I find Squarespace really hits that Goldilock zone. It's fast and easy to use, but customizable when you need it to be. So, that's where Bamboo's website lives today. It's live. It's built on Squarespace. And I think it's a good fit.
Building the same website 20 times with 20 different tools taught me one big lesson. You can learn a lot by just trying a tool. Once I spent a bit of time actually using a website builder, I could usually tell pretty quickly if the tool felt right. Again, you can find a lot of things in the video description, links to all the website builders, my notes on every website builder, and links to all 20 websites I've built. I feel good. 12 years in and Bamboo is still there. Sure, we're not making music as much as we used to, but we're not broken up. And now our website reflects that. And actually, while I was finishing up this video, we started talking about a show for later this year. So, if you're in Toronto and you like indie rock, played by a bunch of dads, you'll soon be able to find details for the show on our website.