Understanding the different ways to build a website is important when you're planning your online business. But as I'm sure you know, there are a lot of different methods and approaches to building websites these days. It can be confusing to know which option is best. So in this post, you'll get a break down of the six different ways to build a website. And, you'll discover which of these is the best suited for you and your business website. By the end, you'll have a set of the best web design methods to help build your online business. Let's get started!
As I'm sure you might guess, things have come a long, long way since the early days of web design -- especially in the past few years. These days there are plenty of different ways to build a website for yourself, even if you're not technical and aren't interested in website code like HTML and CSS.
Now, if you'd like to get an overview of these different ways to build a website, check out this video that I put together that outlines each approach...
With so many tools, platforms, and methods for building websites, how can you know which tools will best suit your online business needs? There are too many choices, which makes it hard to determine which might be right for you.
Worse, there's a lot of overlap between web design tools. Some tools do several things very well, while others specialize in just one specific task. Others still are like Swiss army knives -- while they may do a lot of different things, they aren't particularly good at any one thing.
Making matters even more confusing, there's no consensus on terminology. What some people might call a "web site builder," for example, others might call "web design software." Other times, terms like "web editor," "code editor," and "HTML editor," all get used interchangeably.
With so many web design tools available, with all sorts of overlap, and with no clear definitions, it's a confusing mess. How can you know which approach to web design and setting up your business online will be best for you? How can you know which ones will fit your needs? And how can you sort through all this confusing terminology?
Sorting all this and clearing things up is the goal of this post. What I want to do for you is clean up this mess of tools — these different ways to build a website — and the confusing terminology that gets thrown around. I want to organize and sort all of this out for you so that you'll have a clear understanding of what options are available, and what you can safely ignore.
So in an effort to bring order to all this chaos, I've boiled all the various web design tools, methods, and platforms -- all the different ways to build a website -- down to just six simple, understandable options. I've made everything clear and straightforward to help you choose the right tools for your online business. And, I've organized everything into easy to navigate sections.
This was no small feat. But it's important for you to know your options, because once you start building your online business website, it's very difficult to switch from one tool or platform to another. Starting down the path with one web design tool, and then realizing the tool you chose won't do what you need is very frustrating and disheartening. Worse, trying to move what you've built over to another web design platform can be a time consuming technical nightmare.
I've made this mistake myself. I had to rebuild this very website, tentononline.com, no less than three times (yes, three times!) because I was unclear on exactly what I wanted to build. I could have saved myself weeks and weeks of effort and late nights if I had taken a bit of time up front to properly research my options. Figuring out ahead of time exactly what kind of online business you want to build is crucial.
And that's really the idea behind this very in-depth post -- helping you to sort out all the various options and choosing the right tools and platforms for your business website ahead of time, before you get going to far. This'll save you a ton of time and frustration.
As a matter of fact, this post comes from decades of experience and trial and error on my part. Over the years, I've tested, experimented with, and built websites using all kinds of different tools. Over the years, I've been able to identify which of the different ways to build a website is best, that has the features and tools needed to run an online business website successfully. That's exactly what you're going to get out of this post. So let my struggles and mistakes save you huge amounts of time and hassle!
And consider this post to be a reference guide that you can come back to again and again, any time you need a little bit of clarity and guidance on the different web design tools you can use.
Alright, let's get into it...
So as mentioned, what I've been able to do is narrow all the different ways to build a website down to just six possible options. They are...
Out of all of these, the last method, combining the best options, is what we'll be driving towards. It's a very modern, easy method. And while you may be tempted to skip ahead to that section, you'll be missing out on a lot of context and understanding. It's important to know which options we'll be combining together, and most importantly why this makes for the best option for your business website.
To ensure you have a full understanding of all the different ways to build a website, be sure to take a look at each web design method.
Alright, let's get started and dig deeper into each of these different web design methods. You’ll get a clear understanding of each web design option, how they work, their pros and cons, and more. Again, this will help you narrow down and choose the exact set of tools, services, and platforms to use to build your online business.
Ready? Then let's get started with the first method for building websites, building websites with code by hand. Even if you aren't interested in code, there's some useful information that'll definitely help you out.
Let's take a look...
Alright, the first, oldest, and most technical method for building websites is to code everything by hand. In the early days of the internet, this is how websites were built. Sites were literally coded manually, line by line, using HTML.
Needless to say, this was a slow, painstaking process. It required a lot of coffee, a lot of Tylenol, and a lot of patience!
Back then, typically websites would have been coded in simple, plain text editors like Notepad. But very quickly, much better tools came along to make building websites faster, easier, and less prone to human error. Tools like BBEdit and Notepad++ were much easier to use and came with additional features geared towards web design.
But as I'm sure you'll agree, coding an entire website by hand, and trying to keep it maintained and updated, is a huge task. Even impractical. Despite more advanced text editors coming along, hand-coding an entire site is completely unwieldy and way too time consuming. So very quickly, much better methods for building websites were developed -- including the different ways to build a website discussed in other sections, below.
With these better, more efficient tools now available, practically no one these days builds websites by hand anymore -- not commercial websites, anyway. You might build a website by hand as part of a school project or for the learning experience, but that's about it. There's simply no reason to build a modern website, especially a commercial one, from scratch.
But I know you're wondering, even though there are much faster, more modern ways to build websites, should you learn the basics of web code like HTML and CSS?
I'd say yes, you should. Let me explain...
Even though no one's coding entire websites from scratch anymore, even though you have many different ways to build a website, including powerful and easy to use web design tools which we'll dig into shortly, it's still valuable to learn HTML and CSS.
As squeamish as that might make you feel, here are two strong reasons for learning HTML and CSS...
Let me explain...
It's important to know that HTML and CSS are the foundation of all web design. Regardless of the tool, service, or software you use to build your website, it's being built using HTML and CSS. Other web languages might also be used, but HTML and CSS are always used. You might not see the code, it may be hidden in the background, but HTML and CSS are there.
So just as concrete is the foundation for construction projects, HTML and CSS are the foundation for all websites.
Continuing the construction analogy, think of knowing a bit about HTML and CSS as being able to handle small tasks around your house. If you're like me, you're not interested in knowing how to build a house by hand from scratch, brick by brick. But being able to handle small, common issues by yourself means you can save yourself a lot of time, money, and frustration. Knowing even the basics of these and other web design languages comes in very handy when troubleshooting website problems, making customizations, and handling minor issues that may come up.
The more you can handle yourself, the more independent you are and the less you have to rely on expensive, often flakey, freelance web designers for help.
And best of all, learning how to hand-code is easy. You and I could sit down and go through everything you'd need to know in just a few hours. You'll get a deeper understanding of web design, and gain the skills to handle quite a bit on your own.
Learning the basics of HTML and CSS is very useful when running your own online projects. And, you'll be able to get the most out of more powerful web design options, like Bootstrap, WordPress, visual website builders, and the other different ways to build websites which we'll be talking about shortly.
Or if you'd like to dive even deeper, check out my full-length course on HTML and CSS.
Now in order to work efficiently with HTML and CSS, you'll need a code editor. Let's take a look at some modern code editor recommendations...
Before we move on and explore other, different ways to build a website, let's take a look at some code editors. A code editor is a simple piece of software that helps you write and manage code. A code editor is just a plain text application with extra features that make handling code and working with websites easier.
While it's possible to use a plain text editor like NotePad (on Windows) or TextEdit (on Mac), these basic editors are just too simple for productive web design work. Instead, you'll need to go with a full-fledged code editor. Modern code editors have come a long way from the basic code editors used in the early days of the internet.
Today, there are plenty of code editors available for both Mac and Windows computers. Truthfully though, they're all basically the same. It really comes down to your personal preference. Currently, I'm using Github's Atom, a simple, easy to use code editor. There's also Adobe Brackets, and the industry-standardSublime Text. These are all great choices, and best of all, they're all free!
And there are many other options available, too. If you'd like to learn more about code editors, and get a comparison of some really great options, I have a detailed post, Finding The Best Front-End Code Editors For Windows And Mac. Give it a look, and then grab the code editor or two and give them a try.
The above recommendations are for desktop code editors that you'd install on your computer. Alternatively, I suppose you could make use of an online code editor like Collabedit, Oddity, or Fiddle. I'm not a fan of online code editors, but they're definitely worth a mention. I should also throw in online coding playgrounds, as they're often referred to, as well. CodePen and PlayCode are two such playgrounds. Again, not really my cup of tea, but I'm including them here for completeness.
Finally, what about mobile apps for coding? Again, this isn't really my thing, but I want to include a bit of info here once again for completeness -- who knows, maybe this kinda stuff appeals to you! So for both Android and iOS you can check out CodeAnywhere, which is one of the more popular mobile coding apps. And another Android editor worth mentioning is DroidEdit. There are many other options available for Android and iOS, so if mobile code editing sounds interesting, you have plenty of options.
We've covered a lot of ground here with web design code and code editors. And there's one more topic we should discuss since we're on the subject of code...
Admittedly, this section does get a bit more advanced, but I want to include it here so that you get a full understanding of all the different ways to build a website.
To start, maybe you've heard of front-end frameworks before, but just what the heck are they? There are so many complex answers to the question, what is a framework? The one I heard recently was, “A framework is a basic conceptual structure used to solve or address complex issues, usually as a set of tools, materials or components.”
Who writes this stuff?! Like, what does that even mean?!
Let me simplify what frameworks are...
Once upon a time, web designers realized that they were constantly re-creating the same sorts of layout components over and over again for their different online projects. For example, they were constantly building headers, layout columns, image blocks, sidebars, and so on, again and again, for the different websites they'd be hired to create.
As you can imagine, it's tedious to constantly rebuild similar layout components from scratch for each new web project. There had to be better, more efficient, and different ways to build a website. So, designers started creating libraries of commonly used layout elements that they could then rapidly assemble together and customize to create modern-looking web layouts.
Hence the birth of front-end frameworks!
So a front-end framework is just a collection of pieces -- HTML pieces, CSS, pieces, and so on -- that you can assemble together into different web layouts. Think of framework components as modular Ikea furniture. Snap 'em together into whatever configuration you want. So, there's column components, image components, text components, and more.
And best of all, these frameworks create responsive web layouts too, meaning your framework-based website will look great on mobile devices.
And these days, there's no shortage of front-end frameworks to choose from. My favourite, and one of the most widely-used front-end frameworks, is called Bootstrap. If you know the basics of HTML and CSS, Bootstrap's very intuitive. Another very popular front-end framework is Foundation. It doesn't quite have the same large user-base or online community as Bootstrap does, but it's similarly powerful and easy to use.
Both of these frameworks, and many others, are freely available for anyone to download and begin using.
So, front-end frameworks make building modern, responsive web layouts a breeze. Which framework you should use -- or if you should even use a framework -- is entirely up to you. Frameworks could be right up your alley, or they could be pushing into areas of web design that are beyond your interest level -- you'll have to decide that for yourself. I’m just giving you the lay of the land here!
Anyway, that's the gist on front-end frameworks.
Alright, I think we've covered all the important points on coding websites by hand. Know that while many professionals, myself included, know how to read code and write it by hand, we aren't coding entire websites from scratch, line by line. Those days are (thankfully) long gone. Different ways to build a website -- better, more efficient tools and methods -- have thankfully come along.
Instead, coding skills are used for specific tasks. As mentioned earlier, this might mean fixing a small problem or maybe customizing a layout component so that it's just right. And as I mentioned about above, I really want to encourage you to learn the basics of HTML and CSS. You don't have to be a web coding wizard -- just the basics will do.
Once you have HTML and CSS under your belt, consider pairing your new-found coding skills with one of the aforementioned code editors, like Atom or Sublime. Or going even further, combine your HTML and CSS skills and a modern code editor with a front-end framework or even a powerful website building platform, like a visual site builder or WordPress, which we'll get into below.
This is where your web design skills really start coming together. So in short, consider learning the basics of code, keep a code editor on hand for those times when you need to dig into your site, and consider using a powerful, modern front-end framework like Bootstrap.
Okay, with hand coding and code editors out of the way, let's now dig into the second way to build a website, using a WYSIWYG editor...
We've talked about coding websites by hand, code editors, front-end frameworks, and why it's a good idea to learn HTML and CSS. But of course, there are still different ways to build a website. In this section, we'll talk about what are called WYSIWYG editors.
Let's start at the beginning.
WYSIWYG stands for What You See Is What You Get. Now as you learned previously, in the early days of the internet websites had to be entirely coded by hand. That is until software called WYSIWYG editors came along in the mid to late 90s. Dreamweaver is one such WYSIWYG editor.
Prior to WYSIWYG editors, there weren't other, different ways to build a website. Hand-coding was it. So when these types of web editors came along, they were a pretty big deal. They were really the first kind of official web design software available. They allowed people to build websites faster and more efficiently, and not have to deal directly with code.
The idea behind WYSIWYG editors is that they behave more like a word processor or desktop publishing application, where you work in a visual environment while the software writes all the necessary code in the background for you. Rather than being forced to work directly with code, users could now build websites using menu commands and dialog boxes while remaining blissfully unaware of the background code. This made it easy for non-technical users to build websites quickly.
For more experienced users, WYSIWYG editors also have the option to view the background code and edit it directly. So, these kinds of web editors have the best of both worlds -- a simple, intuitive interface similar to a word processor paired with an advanced code editing interface for advanced web designers.
While WYSIWYG editors made the task of building websites much easier, it's important to understand that they're just that -- editors. Typically, you'd create a brand new, blank document inside the application, and then begin adding text, images, and other content onto your page. Or, you'd open an existing document, make some changes, and then save and close your work.
In this way, WYSIWYG editors like Dreamweaver function very similarly to Microsoft Word or other traditional word processors. Your work is done on a page, and you're inserting objects and setting formatting via menu commands and dialog boxes.
This is an important distinction to make, especially when you compare some of these different ways to build a website — for example, comparing Dreamweaver to WordPress. Being an Adobe product, many people think that Dreamweaver will behave like Photoshop or Illustrator -- working in a very visual, graphical manner. Unfortunately, Dreamweaver doesn't work this way. Not even close! Instead, like I say, Dreamweaver works more like Microsoft Word.
If you'd like to know more about how Dreamweaver stacks up against WordPress, check out this detailed video...
Alternatively, if you want to work in a more visual, drag 'n drop, graphical environment that feels more like Photoshop, then you'll be interested in the section below on visual website builders. We'll get to that shortly.
While Dreamweaver and other WYSIWYG editors changed the way websites were built in the mid to late 90s, and opened the door for non-technical users to build websites on their own, their time has long since passed.
By today's standards, WYSIWYG editors are antiquated.
While Dreamweaver is great at what it does -- opening documents, editing layouts and text, and so on -- using it to build modern, responsive websites that function well on mobile devices can be frustrating. And using it for ecommerce and online business is a huge pain. It isn't impossible, but there are much better options available.
This is why I recommend you steer clear of WYSIWYG editors like Dreamweaver. Of all the different ways to build a website, go with a much more modern approach. Compared to contemporary web design tools, Dreamweaver and other WYSIWYG editors are slow and cumbersome. They're the donkeys of web design tools!
So if you were thinking about using Dreamweaver, seriously consider much more powerful, easy to use, and flexible options, which we'll be discussing below. I used Dreamweaver for the first half of my career -- for well over ten years. I built countless websites with it, taught classes and online courses on it, and even wrote a book about Dreamweaver. I ate, slept, and breathed Dreamweaver.
But when different ways to build a website came along -- better, more efficient tools -- it's critical to be objective and go with the better web design method. Remember from earlier, you don't want to get halfway down the web design path and suddenly realize you made a bad choice!
Alright, so this wraps up our look at WYSIWYG editors. Next, we'll take a slight detour into personal blogging platforms. Let's check 'em out...
Let's now take a look at what I call personal blogging platforms. It's important to note that as business owners, we won't be interested in any of these. These sorts of web platforms are just too simple and low-powered for our needs. But I'm including this section more for completeness, so that you know what these tools are and how you can categorize them for yourself.
So let's keep this section short!
The idea behind these kinds of web tools is to provide non-technical users with a simple online publishing platform. So, personal blogging platforms are for users who aren't interested in web design, but who are interested in publishing their content online. These platforms are essentially simple web publishing tools that anyone can use to share their ideas, usually taking the form of online journals or essays.
And while that might sound great, they really don't offer much in terms of power. They're just too limited. Let me explain...
The concept of a personal blogging platform sounds great, but anything beyond simple content and online essays is going to be almost impossible with these kinds of web tools.
Signing up for a personal blogging tool is usually free, but to unlock any additional features, say like a custom domain name or other additions, you'll have to pay a monthly fee. And if you stop paying, your website gets taken down. Yikes!
Because of their simple nature and severe limitations, these sorts of personal blogging platforms are very much unsuitable for online business or any kind of online project beyond a basic online journal. Hence why I say that for our purposes, they simply won't do.
So to summarize, the benefit to having a simple blogging platform is that anyone of any skill level can publish their content online. The downside is the technology's simplicity, limitations, and inflexibility.
With these simple web tools out of the way, let's now move on to much more powerful and modern ways to build and run our online business websites, starting with visual website builders...
We've learned a lot so far about the different ways to build a website, from hand coding, code editors, and front-end frameworks to Dreamweaver and other WYSIWYG editors, and simple blogging platforms. And as mentioned earlier, Dreamweaver and other WYSIWYG editors really were the de facto methods for building websites for a long, long time. That is, until more powerful and easy to use visual website builders and CMS platforms came along. Let's take a look at visual website builders first.
I would define website builders as web design software that lets you build page layouts, including mobile, responsive designs, via a visual, drag 'n drop interface.
So, constructing pages with a website builder is simply a matter of arranging objects like images, paragraphs, and other components into a layout. This is very much like you'd move objects around in a graphics program like Photoshop or Illustrator. This means you can build web layouts quickly, without any manual coding at all.
In this way, visual website builders are similar to WYSIWYG editors. No prior knowledge of HTML and CSS or additional technical skills are required. In fact, I'd say that the only real difference between website builders and WYSIWYG editors is this ability to visually drag and drop page elements around. Remember, WYSIWYG editors are like word processors -- they rely on menu commands and dialog boxes.
So, if you come from a tradition graphic design background as I do, or if you simply want to build great looking layouts quickly, then visual website builders are a great choice for you.
Even though there are many different ways to build a website, visual website builders make the entire process simple and easy.
Because website builders allow you to build and construct page layouts visually, they're often very easy and intuitive to use, and allow you to build and test layouts rapidly. This makes building websites efficient and easy for practically anyone. Many website builders even come with pre-created templates to use as a starting point for your layout, so that you aren't starting with a blank canvas.
Sounds almost too good to be true, huh? Well, as great as all this is, unfortunately, some website builders come with some pretty severe limitations. For instance, some builders don't allow you to access your layout's background code. Others might only allow you to build a single-page website. Even worse, some website builders may be tied to a specific web-based service, meaning if you stop paying for the service, your website gets taken away.
It's these sorts of limits that I want to address and show you how to overcome if you'd like to use a website builder to design your website. To get you off on the right foot, it's important to know that website builders come in two flavours, hosted and self-hosted.
There are some big differences between hosted and self-hosted website builders, so let's take a look at each and see what we can do about some of those aforementioned limitations...
First, let's look at hosted website builders. What defines this flavour of visual website builder is that it's tied to some kind of an online service. If you've heard of Wix or Squarespace, those are great examples of online website builders. Other online or cloud-based website builders include Webflow and Weebly.
These sorts of web site builders have become incredibly popular in the past few years, and the competition between them is fierce. They make it very easy for literally anyone to build a website, from Gramma June and her competitive needlepoint club to Uncle Fred and his upcoming bass fishing symposium.
Practically anyone can build a website with these kinds of tools!
But it's important to know that when using a hosted website builder, your website and the website builder software are bundled together, running as a part of the same web service. As the user, you'd log into the service, and then begin building your layouts directly inside your web browser. So, the web builder software, your website, and the hosting service are all inseparable. This is unique to hosted web builders as compared to the other different ways to build a website.
In fact, this is precisely what defines these kinds of website builders as hosted -- the service hosts your website for you.
In this way, hosted website builders are similar to the personal blogging platforms you learned about earlier. These kinds of tools are meant for non-technical users who simply want to begin publishing online.
And really, this is the big advantage that hosted website builders offer -- they're very easy to use, you can have a website up and running very quickly, and all the web hosting, security, and technical issues are handled for you.
As great as this sounds, this actually presents some huge, insurmountable downsides.
One of the huge downsides to using a hosted website builder is their business model. Most work on a "freemium" model, meaning that there's no cost to initially sign-up for their service. So far, so good. But basic web builder plans are usually severely limited, only allowing a certain number of pages in your website, or restricting monthly traffic, for example. Other restrictions might include being unable to use a unique domain name, not being able to run a business website of any kind, and other severe limitations.
In order to remove these restrictions (if it's even possible), you'll have to pay extra. Typically, the the removal of these restrictions (or the addition of extra features) comes with a recurring monthly payment. This ongoing monthly cost means it's more like you're renting the website building software, your site's hosting, and even your website itself. If you stop paying for the service, your website is taken down. Yowch!
This is the problem I have with hosted website builders -- and the huge downside to using them. Of all the different ways to build a website, this method is one of the most restrictive.
Many of these services don't provide a way to get your hands on your website. You don't own it. So once you finish going to all the effort of building your website and paying for upgrades, at best you're renting your website from a third-party service. At worst, it's like your site's now held hostage by the hosted website builder. In order to keep your website online, you have to continue paying.
What's worse, often you can never move your website to another hosting service -- you're stuck with the hosted website builder service! If they change their terms, remove features, or make some other kind of major change, you have no choice but to go along with it.
There's another danger in using this sort of website builder for your business. Maybe this is something you haven't thought of yet: Online services have been known to shut down and go out of business, leaving their users stranded, or worse, taking their users down with them.
How many times has a favourite store or restaurant closed on you? Or how many times has a product you love been discontinued? It happens. And as far as my business is concerned, putting all my trust in a single service for something as important as my online venture is an absolute non-option.
This is why I always recommend separating your crucial web services across multiple, reliable vendors, no matter which of the different ways to build a website you'll use.
Despite hosted website builder services being the easiest, least technical option, they're also the most inflexible and frankly the most dangerous. You're restricted to the service you've selected, and to the features and options they're providing. You don't own your website, you're renting it. You're reliant on these services to stay in business so that you can stay in business. You're tying your business to the solvency of a another business.
That's very risky. And it breaks my rule of autonomy.
Making matters worse, hosted services can often be unreliable and can flake out at the worst possible times. For instance, I remember reading a case where, because a person's site wasn't getting enough traffic, his hosted service shut down his account and took down his website. The only way he could get everything back was if he upgraded his service to one of their paid plans. Nice, huh?
Further to this point, I came across this blog comment in my travels, which encapsulates my exact sentiment: "I wouldn't use these hosted stores. God forbid if they went out of business or they went down you would be screwed. You cannot take your store or in a lot of cases your domain name if you want to leave to go to another hosting company. They own it all."
Maybe that's not articulated in the best way, but you get the point!
Even worse than what we've been discussing already, these sorts of online web services often charge higher fees than it would cost to go with the alternative, self-hosting. A self-hosted website is owned and controlled by you, and so long as it isn't illegal, you can pretty much do whatever you want with your website. It's a much more powerful and flexible option. But we'll get to self-hosted website builders in just a moment.
Now, all of this isn't to say that all hosted website builders are non-options. You'll have to do some investigating if you want to go this route. When considering tools and different ways to build a website, the kinds of questions I'm asking myself are, Do I own my website? Can I get access to the background code? Can I move my site to another hosting service at any time? If I can't do these things, then I know that I don't really own my website. And if the service won't let me own my website, then it's a non-option.
This is why all the services and web design methods I recommend here on Ten Ton (and use myself) give you complete and total ownership and control of your online businesses. All services and tools I recommend allow you to back up or download your website to your computer, to have full ownership of your domain name, and so on. This allows you to move your website whenever you want, wherever you want, and maintain full control and ownership of your online assets.
I can't emphasize this enough, you have to own your website.
If you'd like more information on this, check out this article I wrote on the subject.
I should quickly mention too that some web hosting companies offer website builders as a part of their hosting plans. You may have noticed this yourself. Web builders that are offered by hosting companies are simply meant to sweeten their offer. That's it. In all my years building websites, I've never bothered using a web host's proprietary website builder. Again, there are much better tools available.
To summarize hosted website builders, what's nice about them is that they don't require any prior experience or technical know-how. They're quick, simple, and easy to use. They're intended for hobbyists or those who don't really want to learn much about web design. But on the downside, they can be extremely restrictive and limiting. Like the personal blogging platforms we discussed earlier, restrictive hosted website builders aren't suitable for the sorts of projects and businesses we want to build.
Of all the different ways to build a website, you have much better options available.
Truthfully, I can't imagine a scenario where I'd want to use a hosted website builder or their related services. As I keep saying, I want full control and autonomy with my website. If a service stinks, I want the option to pack up camp and head to greener pastures...and take my business with me. With a hosted website builder, you can't do that.
But, here's what's great: You can get all the benefits of hosted website builders -- the same easy to use, drag 'n drop visual interface, the the non-technical approach, and so on -- from the other flavour of website builders, self-hosted website builders. And, you can maintain 100% ownership and control over your website and online business, too.
They're coming up next, so let's take a look...
So you have an understanding of hosted website builders -- what they are, how they work, and their limitations. You can think of this second flavour of visual website builders, self-hosted web builders, as being exactly the same as their hosted counterparts, but with one important distinction: You own the tool. And, you own whatever you create with the tool.
So, self-hosted website builders aren't bundled or tied to an online service, to web hosting, or to other services. They function independently of web hosting or other web-related services. This means there's usually no ongoing or recurring monthly fees to use them. You pay for the software, and it's yours to use as much as you'd like.
And as you're discovering, of all the different ways to build a website, self-hosted website builders are a great choice. They allow you to build modern, responsive websites quickly and efficiently, regardless of your skill level.
Now, because self-hosted website builders aren't tied to an online service, you'll be responsible for registering your own website domain name, setting up web hosting, and looking after your website yourself -- hence why they're called self-hosted.
These additional technical requirements are self-hosted website builder's only downside. And truth be told, it really isn't that technically involved. If you need a hand with this stuff, I have helpful tutorials for you. Take a look at How To Register Your Business Domain Name, and Top Web Hosting Companies For Small Business to get the ball rolling.
So while self-hosted website builders are a tad more involved, the trade-off is complete, full ownership and control of your website and your software.
This second flavour of website builders, self-hosted builders, are very much intended for those who are much more serious about their online projects and businesses. Self-hosted builders are much more flexible and powerful than their hosted website builder counterparts.
But exactly how do self-hosted builders work? Well often times, but not always, self-hosted website builders function more like traditional software applications that you install and run on your computer. Sometimes though, they run online, directly inside your web browser. It all depends on the specific builder you choose.
When using a visual website builder installed on your computer, you'll be able to work on your website whether you're connected online or not. This is important for someone like me because I don't like my productivity to be tethered to a reliable internet connection. Instead, I can take my work anywhere I go and work anytime I want. No asking the barista what the wifi password is. No, "I can't get a signal!" I just open my laptop and start working. I like that.
Once you've finished visually constructing your website layouts, you'd then need to upload your work to your live website, using your web hosting service of choice. This essentially publishes your work live to the web. Alternatively, if you're using a self-hosted website builder that runs in your browser, usually it's just a matter of clicking Publish or Update to see your changes take effect on your live website.
Now how about some self-hosted web builder recommendations? Thankfully, there are many different ways to build a website visually. This means you have some great options to choose from. There's Adobe Muse, Pingendo, Bootstrap Studio, Mobirise, Blocs (Mac only), Macaw, and one of my personal favourites, Pinegrow. There are of course, others too.
I'll tell you more about Pinegrow specifically in just little bit.
But before we close out this section, the other thing I should mention about self-hosted web builders is that they'll allow you to create multiple websites. This is important to know if you want to run multiple online projects or businesses, or even if you'd like to do some freelance work for clients. If you wound up going with a hosted website builder, you'd be restricted to just a single website. Good to know.
So as you can see, having a self-hosted website builder on hand gives you a powerful tool in your web design workflow. Seriously consider using a self-hosted website builder.
I hope you've enjoyed and gotten a lot out of this section on visual website builders. Because there are so many different ways to build a website it can be confusing, but the concept of a visual website builder is no doubt a great option. Even for those who are comfortable with code, building websites visually is very fast and efficient. However, the limitations of hosted website builders are very difficult, if not impossible, to overcome.
If you'd like to go with a visual website builder, I encourage you to ask the kinds of questions I posed earlier, After I build my website with this website builder, do I own my website? Do I own it and control my site, or am I reliant on another service to keep my website live on the web? These sorts of questions help you narrow down your choices.
Further -- and you'll hopefully realize why this is important after the next few sections in this article -- if the website builder can't export clean code that you can develop into a WordPress-driven website, then for me anyway, it's a no-go.
So, before choosing a visual website builder, make sure the tool offers the features you'll need, which are as follows...
If a website builder can't do any of these three things, then you can't consider it.
Now, as amazing as visual website builders are, they aren't a web design platform. By platform, I mean an engine, a system, to give your website power, flexibility, and help make it easy to run. Visual website builders make it easy to make your site look nice, but there's no oomph underneath it. Lamborghini Diablo's are totally awesome, for example, but without an engine underneath that amazing looking car, it's really just something that's kinda nice to look at. Without an engine, it doesn't do a whole lot!
And that's exactly what CMS platforms are all about -- putting an engine under the hood of your website and giving it some horsepower. They're coming up next. And, wouldn't it be amazing if you could combine an easy to use, visual website builder and the power of a CMS together? That's the name of the game here, so let's keep going!
Alright, we're really moving now on the different ways to build a website. And I feel like this one's the elephant in the room -- at some point we had to talk about WordPress! Of all the different ways to build a website, WordPress had to come up. You've no doubt heard about WordPress, but do you know why it's such a big deal? As always, let's start at the beginning...
At it's core, WordPress is a Content Management System, or CMS for short. A CMS is a piece of software that runs on a live web server, that allows individuals or teams of people to publish content in a consistent format — all with little or no technical skill required. In fact, CMS platforms often use simple, point-and-click interfaces. This means they're great for beginners and non-technical users.
Where the real horsepower comes in is the flexibility and customizability of a CMS. More advanced and technically skilled users can metaphorically flip the hood and get their hands on the background code that runs a CMS-driven website. In other words, you can get your hands on the engine that I mentioned a moment ago. This means that the look, design, and layout of your website, and even it's behaviour, are completely customizable.
This is why WordPress and other CMS platforms are so popular.
Here's an analogy to help you get the idea...
Imagine that a CMS-driven website is like a Lego set. With a newly purchased Lego set, you can follow the instructions that came along with it, and build the set that you bought. Or (as every kid does), you can break the set apart and build all kinds of other neat things with those parts, right? This is of course because all the individual Lego pieces are interchangeable -- they use the same construction system. Meccano sets and Tinkertoys aren't compatible with Lego, because they're from their own construction systems. It's the same idea here with WordPress.
So with WordPress and enough technical know-how, you can literally break it apart and put it back together however you want. Or instead, you can just stick to the instructions and wind up with something just as great. Does that make sense?
Again, this is why WordPress (and other CMS systems) are so widely used.
Now, there are many CMS platforms available, including Drupal and Joomla. Each has it's purpose, and each gives you different ways to build a website. But WordPress is easily the most popular. But this wasn't always the case. Many, many moons ago, WordPress began as a small blogging tool, kind of like the aforementioned personal blogging platforms like Moveable Type and TypePad.
But WordPress very quickly grew out of it's humble beginnings and has since become an incredibly powerful and very flexible platform for building all kinds of different websites, including small personal sites, gallery sites for photographers and artists, online forum and news sites, and even full-blown ecommerce sites complete with shopping carts and thousands of products. If you can dream it up, WordPress can handle it -- it's that powerful!
Going back to our Lego analogy, with the same set you could build a sports car, an off-road truck, or a dune buggy. Or, with some additional pieces, you could build a plane, a helicopter, or a speedboat. Adding in even more pieces, you could really start building something impressive -- a city block, a moon base, or a pirate ship. Lego's a great analogy for WordPress, because this is exactly what you can do with it. It's all based on the same construction system, and whatever you can dream up, you can add onto it and build.
This is the power of WordPress and why it's so popular. This is why when you compare, say Dreamweaver to WordPress, it's no contest. It's like comparing a tub of Lego bricks to a single He-Man action figure — an action figure can only be one thing. A tub of Lego bricks can be anything!
In fact, WordPress powers a third of all websites online, if you can believe it. It has a massive, supportive online community with thousands of active developers, and a huge number of sites and services offering all kinds of upgrades, add-ons, and customizations. This is all because of WordPress's power and flexibility.
No wonder WordPress is one of the most popular web design tools!
It's important to note too that unlike a WYSIWYG editor like Dreamweaver (which remember, simply opens, edits, and saves files like a word processor) WordPress is a platform -- it is your website. You aren't using WordPress to open and edit documents as you would with a traditional piece of software.
Instead, WordPress is running live on your web hosting account at all times. This is very unique way to work as compared to some of the other different ways to build a website that we've discussed.
Here's how it works: Websites built with WordPress have two faces, or sides. One's a publicly-facing front-end, and the other's a private back-end admin console. To post new content, make edits, or adjust your website's behaviour, you'd log into your site's back-end and use the easy to navigate, point-and-click WordPress Dashboard. Visitors to your site only see and interact with the publicly-facing front-end of your WordPress website.
This is an important distinction to make, as it's a very different way of building and working on websites.
It's important to note too that a WordPress-based website's design and layout is controlled by what's called a theme. Think of themes like templates that you can apply to your website to control it's look and feel. WordPress has tens of thousands of readily available themes to control the design of your website. Some themes are free, some are paid. Or, you can even have a custom theme built for your site, or you can build a custom theme yourself. The options here are nearly limitless.
And there's another aspect of WordPress that we should discuss, plugins. Plugins are website add-ons that extend the capabilities of WordPress. Things like contact forms, site security, social media sharing, and ecommerce can all be added on to your website via plugins. This is what I meant earlier when I talked about extending your Lego set into something much larger. Currently there are over 50,000 plugins available for WordPress. As with themes, many are free, while some are paid.
So that's the gist with CMS platforms and specifically WordPress. They're incredibly powerful web design tools. WordPress is so powerful and so easy to use, in fact, that I don't build websites without it these days. I absolutely love it, and can't recommend it more. It's my main, go-to web design platform. And, WordPress gives you a few different ways to build a website, which we'll get into shortly.
So there's our look at WordPress. As you can tell, it's a solid choice to build your website with. However, there can be one confusing aspect about it: There are actually two different versions of WordPress. There's WordPress.com, which is a hosted service similar to TypePad, Blogger, and those other personal blogging platforms we discussed. And there's WordPress.org, which is a self-hosted version of WordPress. Everything we've discussed here about WordPress related to this self-hosted version.
If you'd like to know more about these two different versions, check out my video Understanding WordPress.com Versus WordPress.org: An In-Depth Comparison. It'll clear up any misconceptions.
One other thing I should mention about WordPress (the WordPress.org version, that is) is that it will grow with you -- meaning, as you learn more and more about web design, HTML, CSS, web servers, code editors, and so on, you'll be able to dig deeper and deeper into WordPress. Or, if you'd rather keep things simple and not get into the technical side of web design, you can use WordPress's simple point-and-click interface to easily manage your website.
Best of all, WordPress is free...as in no-cost...as in you can go get it right now! But before we get too far ahead of ourselves, let's jump back to something we discussed earlier. What about those visual website builders -- in particular, those self-hosted website builders that you learned were so incredible?
Well wouldn't it be amazing if you could combine the raw power, flexibility, and customizability of WordPress's horsepower with the easy to use visual site design features that a self-hosted website builder would give us?
That's exactly what you can do...and it's what I recommend! Let's discuss...
So you're getting an idea of how awesome WordPress is. But we also talked about how easy it is to build websites visually using some kind of a self-hosted drag 'n drop website builder. Well, what if you had a way to combine the visual layout capabilities of a drag 'n drop editor with the power and flexibility of WordPress?
In other words, what if you had an intuitive, graphical visual interface to construct your website, with a Lamborghini engine and all that horsepower running underneath it. That's exactly what we're after!
Of all the different ways to build a website, you're discovering that combining these two different web design options can give you powerful results.
So let's connect a few dots...
In the previous section, you learned that a WordPress theme controls your website's visual design, look, and feel, right? And I mentioned too that in addition to thousands of available themes, you can also build a custom theme for your WordPress-driven website yourself. Sounds great.
Recall too that way back in our discussion on self-hosted website builders, I mentioned one of my favourite builders was Pinegrow. But I never told you why it's one of my favourites...
Before we get into that, I have one more reminder for you: Way, way back when we talked about HTML and CSS, I mentioned front-end frameworks like Bootstrap, and how easy they were to use.
You remember all this, right?
What I'm doing is laying out all the dots for you. We're about to tie them all together with a nice bow on top...
As I was investigating visual website builders to use for my own projects, and all the different ways to build a website, one of the things I really liked about Pinegrow was that it's a piece of standalone software that's installed on your computer. It's not an online service that you're reliant upon. So with my laptop in hand, I can take Pinegrow wherever I go. I like that.
But even more interesting is this: Pinegrow lets you build layouts visually using the Bootstrap framework. This means that Pinegrow includes a library of pre-created Bootstrap layout elements that you can visually drag around to construct your web layouts. In a way, it's kinda like using Photoshop to build a visual layout. How awesome is that?!
And of course, these layout components are fully customizable and responsive, so your layouts will look great on mobile devices. Very awesome.
But what blew me away about Pinegrow -- and what put it in a totally different league, way beyond any other website builder or tool I'd been comparing -- was it's ability to convert and export these Bootstrap-based layouts directly into WordPress themes.
That feature alone is nothing short of amazing!
This means that you can build your website visually in Pinegrow, dragging and dropping elements wherever you want, formatting them, and getting things looking just right. And then when you're happy, you can click a button (literally, just a single button), and convert your entire layout into a WordPress theme, ready to be used. You then take that exported theme and lay it on top of that Lamborghini engine that is WordPress, and you have yourself an incredibly powerful, fully customized website that you've build exactly to your liking!
I really don't want to oversell this, but this is truly incredible!
When I saw Pinegrow convert a Bootstrap-based layout into a WordPress theme for the first time, I was floored. When I actually did it for myself, I beamed from ear to ear for three days afterwards! For years and years, I'd wrestled and built themes and layouts for WordPress meticulously by hand. Now I had a piece of software that was gonna do it all for me, visually, with one button!
Game changer, my friend!
In fact, this very layout, this very website, tentononline.com, was built using this exact workflow -- I built the layout visually in Pinegrow, exported it to a theme, and then dropped it on top of the WordPress platform.
Now here's what's even better: Pinegrow isn't the only way to visually construct layouts for WordPress. In fact, there are several very good plugins available that can do this as well (remember, a WordPress plugin is just an add-on that extends WordPress's capabilities, like extra Lego bricks).
Recently I've been working with one such plugin called Elementor, which is equally as amazing as Pinegrow in it's own way. What's nice about a plugin like Elementor is that it runs directly on your WordPress website, rather than as a separate piece of software on your computer like Pinegrow. This means all your work is in one place.
With a tool like Pinegrow, your workflow will start on your computer. There, you'll visually build your web layout. Once finished, you'll convert your work to a WordPress theme and export it. Next, you'll need to upload it to your live web server, and finally install and activate the theme inside your WordPress website.
That's a bunch of steps that wouldn't be necessary with a tool like Elementor. But one approach isn't necessarily better than the other, they're just different ways to build a website for your online project or business. Each has their pros and cons. Maybe it's really important for you to have software on your computer and don't mind the extra steps (I don't...it isn't really a big deal). Or maybe you'd much rather keep everything online, running on your website.
More importantly, both Pinegrow and Elementor give us the ability to combine the sheer horsepower of a CMS like WordPress with the ease of use of a simple, visual website builder.
So...keep your eyes peeled for future tutorials I'll be putting together on working with both Pinegrow and Elementor. It's amazing stuff, and really what modern web design is all about.
Wow, this article was huge! I hope you enjoyed everything we discussed. I wanted to put together something that was incredibly detailed and thorough. And as I said way back at the beginning, the idea was to publish a post that you could use as a reference to refer back to every once in a while.
But more than that, my goal was two-fold: Not only did I want to lay out all the different ways to build a website, but I also wanted to plant the ideas of some of the best web design tools currently available as we went along, and then connect all those dots together for you at the end. So while outlining all these different ways to build websites, I was trying to lead you towards some of the best modern tools available. I hope I was able to achieve that goal with you.
So to summarize, of all the different ways to build a website, we had...
Let's recap these different website building methods.
First, hand-coding. You learned that even though you won't be coding entire websites from scratch, that it's a very good idea to at least know the basics of HTML and CSS. And, to have a good code editor like Atom or Sublime on hand to make your work easier. This way you can, for instance, get into the code that's behind your WordPress site to tweak and customize things just right.
You saw too that a WYSIWYG editor like Dreamweaver and simple, personal blogging platforms like TypePad and Blogger just don't make the grade for your needs. They're just not suitable for online business websites or for handling anything online other than a simple website.
Then, you discovered visual website builders and how they make building beautiful web layouts a breeze. But you also learned that hosted visual website builders like Wix and Squarespace are too limited. Remember, unless you can get our hands on your website and move it anywhere you want, then you're merely renting your site, not owning it. No good!
You then learned about the power and flexibility and adaptability of a CMS platform like WordPress -- how it's fantastic for beginners, but also incredibly customizable for advanced users.
But then, towards the end, you learned about the best, most modern way to build beautiful, modern websites easily and efficiently -- by combining a great, modern code editor like Atom or Sublime (which makes handling code easy), the Bootstrap framework (which gives us a library of pre-created, responsive layout components), Pinegrow or Elementor (for visual, drag 'n drop website construction), and finally WordPress (as a powerful, flexible platform for your website). This collection of technologies really is the core set of tools you'll use to build your online business website.
And all the way along, I tried to include lots of recommendations and options to explore for each of these different ways to build a website.
I'll tell you, reaching these conclusions, uncovering, testing, and putting these tools through their paces, has taken me years and years. My entire career, in fact. I've used tons and tons of ecommerce platforms, web design software, and online services. Many of them were great, but simply lacked a key feature. Others were needlessly complicated and too bulky to work with. Some were downright terrible!
So I hope by me outlining the different ways to build a website, you've been able to gain a huge amount of clarity and understanding about these different web design methods, and how it all works.
You now know the exact set of tools you'll use to build your business website with. And in future tutorials, I'll be showing you how they all work!
See you next time!