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