By now you’ve probably found plenty of guides recommending platforms like Wix, WordPress, or maybe even Joomla.
The problem with all of these recommendations is that none of them are perfect for every website. Yes, WordPress might be the most popular Content Management System in the world, but that doesn’t necessarily mean it’s the best choice for you.
The truth is that the perfect website development technology doesn’t exist.
They all have their strengths and weaknesses, and the key is to find the technology that has the strengths you are looking for.
This guide will help you find the website development technology that is perfect for you.
If this guide is a bit too long and detailed, check out the infographic instead.
Identifying your website requirements
I know this probably isn’t the most fun part, but it’s something I strongly recommend doing.
This isn’t about creating a 100-page long detailed specification, it’s about getting an idea of what you are about to create.
What type of website are you planning to make?
An informational website containing static text and images, where the main purpose is to convey information to the visitor? Examples could typically be a blog, portfolio website, company website or a news site.
An e-commerce website, where the main purpose is to sell products or services online?
A website application? A website application typically resembles an app that you would have installed on your phone, or on your pc, only that it’s available through the web browser. Examples could be calculators, your online bank, games etc.
A community website, allowing for interaction among visitors? Examples could typically be forums, or social media platforms like Facebook (which is also a website application).
Or maybe it’s a combination of some of the above?
Either way, in order to make the right choice, you should ideally have a high-level idea of what kind of website you are aiming for.
Will there be a lot of user interaction on the website?
What do I mean by that?
User created content – Will your website contain a lot of user created content? Let’s take Twitter as an example, basically all of the content on Twitter is created by the users. Other examples could be the comment section on a blog, the comments are created by users.
User profiles – Will users have the possibility to create user accounts, save information to their account, or see information that is tailormade for their specific account?
User input – Will there be a lot of functionality requiring user input? That could be anything from search functionality to a contact form.
This kind of functionality often leads to additional requirements to your website architecture, such as the need for a database to store and retrieve information from.
How often do you plan on updating the content of your website?
If you’re making a news site, you might be posting news regularly throughout the day. If you’re making a blog, you might be posting every day, every week, or maybe just once a month. Or if you’ve made a calculator or a game, you might just be doing the occasional bug fix.
How easy it is to update content can vary quite a bit depending on technology selection, keep that in mind.
Now that you have an idea of what you’re about to create, I also recommend that you think through your own personal requirements. Try to combine that with a realistic view of your starting point.
I guess you’ve already thought about these points, but here they are one more time.
I guess a lot of people, myself included, feels that there’s not enough time to do everything you would have liked to do. There’s work, kids, friends, hobbies, and so on, all eating up that precious time.
In the end, it all comes down to how you prioritize the time you have available.
So, before you embark on this website project, you should make up your mind on how much time you want to use, and realistically can use.
Some options require a smaller time investment than others.
What is your yearly budget?
Given that you intend to do the development yourself, there’s a big difference between a budget of $0 and $10-$40 per year.
For $0 you will not be able to get yourself a personal domain name, and will also limit you to free hosting options.
$10 will get you a domain name, but you will probably still be limited to free hosting options.
For $40 and up, there’s not really anything restricting your technology selection.
New to website development? Have you coded before? Have you developed websites before? Are you already familiar with some existing development platforms, frameworks, and languages?
If you’re completely new to website development, you will have to learn a lot of new things regardless of which choice you make. The learning curve you have to go through might, however, be quite different depending on which option you choose.
For those that are already familiar with existing website development technologies, it will be a question about whether the benefits of using a new unfamiliar technology outweigh the effort it takes to learn it.
Now let’s have a look at the different development options you have.
When working with website builders you will be editing your website directly in the browser. You don’t have to install anything.
All you have to do is to sign up and start building your website with drag-and-drop functionality.
There’s no coding required, which makes it a popular choice among beginners.
In this post, I’ll use Wix as an example for illustration purposes.
Using a website builder is without a doubt the easiest and fastest way to get a site up and running.
All you have to do is to sign up on their website.
There’s no installation required, and no need to find hosting providers. In some cases, you don’t even need your own domain name to get your website online.
So, if getting a website up and running fast is the only thing that matters, this is the option for you.
Creating and modifying the site
Once you’ve signed in, you normally get to choose between different predefined good-looking templates.
With the template in place, you can start using the drag-and-drop functionality to make the site look exactly like you want it.
Once you’re happy with how the site looks, it’s about time you make it public.
Website builders like Wix will often give you the choice between publishing the site under their domain name or use a domain name that you’ve already bought.
If you decide to publish under their domain name, you’ll get a domain name that looks like username.wixsite.com/WebsiteName. The domain name might not look great, and you might get some small ads added to your site, but in return, you get to publish your site for free.
If you were to add your own domain name to the website, that would normally cost around $5-$10 per month.
That’s all you need to do.
So, you could actually have a website up and running in less than 5min.
Are there any downsides?
Yes, there are downsides, none of these options are perfect.
Cost – The ease of setup and use usually comes at a higher price than what you could have managed with the more advanced options discussed further down. This goes for both the monthly subscription fees and the domain renewal price (If you buy a domain from them as well).
Flexibility – In most cases, you will be dependent on which functionality and features the company decides to develop and cater for. So, you might find yourself in a position where you have great design and functionality ideas you want to add to your site, but the website builder doesn’t have the required capabilities.
Transfer – You commit yourself to one company, so if the uptime, support, and available functionality is not as expected, it can be a bit difficult to switch.
Who should consider website builders?
If you are looking for a way to create a completely free website, then this is one of your best options.
It’s also great if your planning on creating a basic blog or portfolio, you want to have the site up and running right away, and you don’t mind paying a bit extra for the ease of use.
Check out the website builder article for more in-depth information and which providers to consider.
Content Management Systems
This category refers to free open source Content Management Systems (CMS) that does not enforce any particular domain registrar or hosting provider.
A Content Management System is a computer application that allows users to easily create, modify and publish content on the web without knowing how to code (HTML, CSS, JS, etc.).
Since they make it so easy to create an update content, a CMS is a really good option for websites that frequently update their content. That could typically be websites such as blogs, news sites, portfolios, and online-stores.
In this post, I’ll use WordPress, the most popular CMS in the world, as an example.
Compared to website builders, a CMS requires a bit more work to set up. However, with a decent guide you could be up and running in less than 30min.
You have to find yourself a good hosting company that will host your website on their servers.
Note that these hosting companies often sell domain names as part of the package.
So, although I usually recommend buying domain name and hosting from separate companies, buying them together will require less work.
Once you’ve signed up and paid for the hosting, you will have to install the CMS on their server.
Most hosting companies will have auto installers for popular Content Management Systems, which makes the installation process go really smooth.
If you follow my advice to separate domain and hosting, you will also have to ensure that the domain name and the hosting server is connected.
Creating and modifying the site
Once the CMS is installed, and you’ve logged into your site, you will notice that you have a lot more options here than in a website builder. This could be a bit overwhelming at first, but you’ll get used to it fairly fast.
Same as for website builders, you have the option to start out with predefined templates providing you with a predefined content structure.
You will usually be given a simple user interface to add and populate new posts and pages.
Some Content Management Systems will also offer similar drag-and-drop functionality as website builders, either default out of the box, or as a plugin.
Just as with website builders, you will probably end up in a situation where the layout of the chosen template or the existing CMS functionality is not able to match your requirements.
The difference from website builders is that you can actually do something about it.
The first thing you can check is the vast amounts of plugins and extensions made to solve specific problems.
Since these Content Management Systems are open source, companies and developers all around the world are able to contribute with their own solutions, resulting in a vast amount of options for you (to be fair, some website builders have some plugins to choose from as well).
If you’re of the tech-savvy type, you can even develop a plugin yourself.
It’s also possible to make changes directly in the source files, but then you should know what you’re doing (backup your files at least).
Once you’re happy with how the post or page looks, all you have to do is to click the “Publish” button.
If you then navigate to YourWebsite.com you and everyone else should be able to see the post you just published.
Pretty simple, right?
That’s why Content Management Systems are so popular among websites that update content on a regular basis.
Flexibility – There are still limitations to what a CMS could (or should) do with regards to flexibility and customizability. E.g. you would not want to use a CMS if you intended to create a website/application like Twitter, because it would require a lot of new custom functionality.
Security – Security can sometimes be an issue, but it’s mostly because people forget to keep their CMS and plugins up to date.
Who should consider Content Management Systems?
Anyone making a website that requires frequent updates of website content (text, pictures, products) like blogs, portfolios, and online-stores should have CMS on their shortlist of possible options.
Anyone that values the ability to easily switch to the best hosting/domain/email providers at any time, but still requires a tool that doesn’t require coding or hiring a developer.
Check out the Content Management System article for more in-depth information and which systems to consider.
Now it’s getting a bit more advanced because here you will actually have to write a lot of code by yourself.
If you have never coded before, it can feel a bit overwhelming.
Web frameworks can make the journey to a self-coded website a bit more manageable. But be warned, it will still require quite a bit of effort if you’re a beginner.
A Web framework intends to ease website development by providing code libraries, structure, and tools that simplify common development tasks.
Examples of such common development tasks could be user authorization, creating a responsive page layout or interacting with a database.
The idea is to save time and avoid frustration by not “reinventing the wheel” every time you’re making a new website.
The benefit compared to website builders and CMS is that you’re the one writing the code. That means, a lot more flexibility with regards to what kind of functionality you can add or create.
Web frameworks can be divided into two categories, either frontend or backend.
I’ll use the CSS (frontend) framework Bootstrap as an example.
The first thing to understand is that you’ll now be working on your local computer, instead of in the browser like you typically would have done with website builders and Content Management Systems.
You will be using a code editor to edit the code, and the result will be available as a local website in your browser.
The actual setup procedure for a web framework can vary depending on whether you plan on using a frontend framework or a backend framework (or both).
For frontend frameworks, the easiest option is often to check if the required files are hosted by on a Content Delivery Network (CDN) and then link to that resource.
As seen below, that’s exactly how I’ve included the required Bootstrap CSS files.
Creating and modifying the site
With the framework included, it’s time to start coding.
Since Bootstrap is a CSS framework, its sole purpose is to aid me with the styling and layout of my page. By adding Bootstrap to my HTML-file, I’m now free to utilize all the predefined CSS code that comes with it.
Let’s imagine I wanted to add buttons to my site.
That would turn out something like this
Doesn’t look so good, does it?
The good thing is that Bootstrap comes with predefined button styling.
So, if I add some of the predefined button classes that Bootstrap provides
My website will suddenly look like this
Looks a lot better, right?
I didn’t have to add any CSS myself, all I did was to reuse the predefined classes provided by the framework.
The amount of predefined code will vary from framework to framework, so it’s recommended to review your options before you make your choice.
Remember to check out the framework documentation for additional guidance.
In order to go from a local to public website, you need a server that can host your website files.
There are both free and paid options available, paid being the more common.
Once you’ve found a good host, upload your website files (should include index.html) to your www or public_html folder on the server, and then your website should be live.
Time/Cost – Whether you write the code yourself or hire a developer, getting a functional website up and running will most likely cost more and take more time than using a website builder or a CMS.
Code bloat – In order for a framework to provide you with its benefits, it usually contains quite a bit of predefined code. If you don’t actually need all that code, it will still be there adding to the total size of your website, which again could cause increased loading time for your visitors.
Should you use a Web framework?
If you’re considering making a website that has a lot of interactive or unique features, web frameworks should at least be on your list.
Facebook, Instagram, Twitter, and Netflix are just a few websites that have chosen this path, simply because they were making something unique with a lot of custom features.
Are you considering a job as a website developer? Learning one of the more popular frameworks can definitely increase your chances on the job market.
A beginner? Creating your own website with a framework can be a great learning experience, and some of the frameworks have a lot of really good tutorials to get you started.
Check out the web frameworks article for more in-depth information.
The truth is that not many developers create websites entirely from scratch anymore. Most of them use one or more of the options above, or they have made a framework/coding library of their own through many years of developing websites from scratch.
But it’s, of course, possible to start entirely from scratch. Sometimes it might even be necessary, to ensure that every single bit of code is as optimized as it can be for that specific site or application.
The benefits are typically:
- You know every line of code, which makes it easier to debug if something goes wrong.
- You avoid code that isn’t relevant to your website.
- For a beginner, it would be a great opportunity to really understand the different languages and what they do.
- Faster website loading time
And of course, there’s nothing stopping you from reusing code that you’ve found on trusted online sources, or even from web frameworks. After all, the goal is to be in control of all the code, not spending the most amount of time.
From setup to live
Same as for frameworks, you’ll be working on your local computer, instead of in the browser like you typically would have done with website builders and Content Management Systems.
You will be using a code editor to edit the code, and the result will be available as a local website in your browser.
This time you have no predefined code to rely on, and thus, no dependencies to link in.
So, the only difference compared to the framework approach is that you now have to write every single line of code yourself.
Once you have something you want to publish, just upload your website files to the public_html folder on your host server.
The most obvious drawback is that you will most likely spend more time developing your site than you would have with the other options.
It will also require a lot more research to ensure that you’re doing things correctly, such as:
- Creating a responsive site
- Taking all necessary security considerations
- Covering all browser incompatibilities
Should you create a website from scratch?
Are you a beginner that is serious about getting into web development? Creating a website from scratch can be a good way to learn how it all works. But be prepared for a few frustrating moments when your website doesn’t act like you want on a mobile phone, or in a certain browser.
Are you creating a website that needs to be extremely light-weight? Creating a website from scratch will allow you to stay in control of all the code, and make it easier to avoid adding unnecessary code.
If you’re curious, have a read about why MeetSpace decided to not use a framework.
Ready for the challenge?
Check out the website from scratch article for more in-depth information.
Static site generators
To best describe static site generators, I think I first will have to briefly explain how a website using a Content Management System works.
A website built with a CMS will have page content stored in a database and predefined template files will define how the content should be structured. Every time a visitor requests to see a given page, the relevant content is fetched from the database, added to the relevant template and presented to the visitor.
Since content and templates are fetched and combined dynamically when visitors’ requests to view the page, a CMS allows for dynamic features such as displaying different content to different users depending on access rights.
Since all the content and structure is predefined in the static HTML-file, there’s no need for database queries or template processing. All that needs to be done by the server is to send the static files to the user, and then the web browser will do the rest.
Since there is no longer any database queries or template processing going on, the load time will usually get a significant decrease.
The lack of databases and dynamic content will also have a positive impact on the overall security of the website.
I’ll use Jekyll to better illustrate what a site generator can do.
Same as for the Framework and scratch approach, you will be working on your local computer.
The prerequisites for the different site generators will vary, but the installation process of these prerequisites is usually well documented.
For Jekyll, I had to install Ruby on my machine.
When that was done, all I had to do was to type in gem install jekyll bundler in my command line window.
For most Static Site Generators, this is just the first of quite a few commands you will have to run from the command line window.
Creating and modifying the site
With the installation out of the way, we proceed just as we would have done if we created the site from scratch.
Create a folder for your new site and open up your favorite code editor and create your first file, index.html.
Now imagine that you were planning on creating several pages that all should have the same HTML structure.
You could, of course, duplicate the code by copying the same structure to all the pages. But then you will have to manually add any future structure changes to all of these pages manually as well.
That’s a waste of time!
Luckily this is where one of the advantages of Static Site Generators come into play, templating.
Here’s an example of a simple default layout that uses the variables page.title and content.
I can then change my index.html accordingly, defining default as my layout, and assigning values to the title and content variable accordingly.
This setup can then be used for any other page you might want to make. You’re also free to make alternative layouts etc. for other types of pages.
Once you’re done with the editing, you will have to execute the build process. Usually, it’s just a simple command in the command line window, like Jekyll build. The result is then that all the static HTML pages are generated and put in a specific build folder on your computer.
My static files ended up in the _site folder.
Now, just like you would have done with the framework or scratch approach, just upload the files to your hosting server and you’re live.
Real-time data – Static sites are static, meaning they will be the same for everyone. So, if your website requires dynamically changing data such as “trending stories the last hour”, a static site might not be the perfect choice for you.
User input – Adding user-generated content can also be a bit challenging, for the same reasons as above. This could be features like commenting and contact forms, which are common features on a blog for instance. There are however several third-party services that will help you get around these problems if needed.
User interface – You will typically be working with a text editor and the command line window, no admin user interface like you would have had with a Content Management System like WordPress.
Should you use a static site generator?
There’s no doubt that static sites have a lot of appealing advantages.
They’re reliable and secure since there’s no databases and moving parts. They’re fast and require very little server resources since there are only static files being loaded.
But it’s not for everyone…
Here are three characteristics of sites that would typically be a good fit:
- Focus on delivering informational content, such as blogs posts and articles.
- Low degree of user interactivity. Note that it is possible to work around common interactive elements such as contact forms and commenting sections.
- Updated infrequently. Since the whole website needs to be built and published every time you do an update, it could prove a bit troublesome for a blog posting several times a day.
If we consider traditional Content Management Systems like WordPress, we could say that they consist of two parts, the frontend, and the backend. The backend is where you as an administrator or content editor, edits and publishes content from. The frontend is the part that fetches the content from the backend and presents it to the user in the browser.
A headless CMS is then basically a CMS without a frontend part.
That means that you will have an intuitive admin interface for managing your content, but since you are missing the presentation layer, the content will only be made available through API’s.
In other words, you will get access to the content in its raw format through an API.
How you decide to structure and present that content is entirely up to you, and is not affected by the headless CMS at all.
Possible setups could be:
Headless CMS + Static Site Generator: As you know, a static site generator usually lacks the intuitive content editing interface. Combining a headless CMS with a Static Site Generator will allow you to benefit from the content management capabilities of a CMS, and the lightweight and robustness of a static site.
Headless CMS + Frontend Framework: Occasionally some might feel that they lack content presentation flexibility when they’re working with a standard CMS. By developing the frontend yourself, using one of the many frontend frameworks available, you get a much greater functionality and content structure flexibility in the presentation layer, while at the same time keeping it simple to edit content in the admin interface.
There are plenty of possibilities.
I’ll use the CMS Strapi and the static site generator Jekyll as an example for illustration purposes.
The setup effort and installation requirements will obviously vary depending on which CMS you choose and which combination you go for.
That being said, this is probably the option that requires the most setup effort.
In most cases, the setup will be about installing the required prerequisites and then using the command line tool to get things up and running.
Creating and modifying the site
Once everything is set up correctly, the actual site modification consists of two parts.
The first part is about adding and editing content through the user interface of the headless CMS you’ve chosen.
However, since that content is only made available through an API, there’s also a need for creating a presentation layer that can make that information understandable to visitors.
One option is to use a static site generator like Jekyll in order to transform this to static HTML-files that later can be published to the public.
The first step is then to tell the application where to find the data by pointing it to the API endpoint.
With access to the data, the final step is to define how the data should be structured when it’s presented to the user.
The process of going live with your website will vary depending on the headless CMS architecture you’ve chosen.
The combination with a static site generator is the easiest one, as this just requires you to upload the static files to your web server.
Other options might require you to host the CMS on a server to make the API available to an online application for live access to the data.
Although there are a lot of advantages of a headless CMS architecture, it’s also considered to be one of the more technical options, requiring more of you as a developer.
The fact that your content is now completely separated from the presentation layer will also make it more challenging to preview how things will actually look once you’ve published the content.
And since the frontend and backend is no longer one integrated solution, like a traditional CMS, it will also require you do adopt additional technologies to do the frontend development.
Should you choose a headless CMS architecture?
This is definitely one of the more technical options and is probably not the solution I would recommend if you’re making your very first website.
There are three use cases that stand out:
- Websites that require more frontend flexibility than what is typically provided by a traditional CMS, but still want to spend as little time as possible on content management.
- Website developers looking for an intuitive content management interface to add to their preferred static site generator.
- Website developers working with an ecosystem where the same content is published and presented on several platforms.
This turned out to be a way longer article than I would have expected, but I really hope it gave you some insight into what options you have. Remember to check out the more detailed articles for each section if you didn’t quite grasp what it was actually about.
This topic is something I definitely recommend spending some time on. Choosing the right technology from the very beginning can save you a lot of time and frustration in the long run.
The are two things I want you to remember when choosing a technology:
- Try to get a proper understanding of your website requirements, so you don’t choose a technology that doesn’t offer the required flexibility.
- Be realistic about the time and effort you’re prepared to invest in your website. Some of these options require a lot less effort than others.
If you liked this guide, or have any questions, please let me know in the comments below.