Website 101 (Part 2: Building Your Website)

Welcome back to Website 101 for Authors (or anyone else who’s technically challenged). In Part 1 we talked about the basics of what you need to get your site out onto the internet.

Now we get to talk about the fun stuff: how to actually build your website.

How Websites Work

Bear with me for a second as we harken back to our Part 1 basics and review a little bit of website terminology.

There are three main components that get your website online: the website (the files and code that make up your website), the domain (the web address, or what you type into your browser to find a site), and the hosting (what gets your website out onto the internet). Three separate components that can be sourced together or separately.

The two most basic coding languages that make up websites are HTML and CSS.

HTML, which stands for Hyper-text Markup Language, is responsible for the structure of your site, and your HTML files is where your content goes.

CSS, which stands for Cascading Style Sheets, is responsible for styling that content: colors, typography, layouts, you name it.

Okay, got all that? Now we can finally talk about how to build your website.

Building a Website

When discussing options with potential clients, I like to simplify things into three main categories:

  1. Building a Custom HTML site,
  2. Using a Content Management System, or
  3. Using a Website Builder.

Graphic showing three categories

Sometimes I visualize these options as a spectrum, where custom HTML sites are the most coding-intensive and website builders are the least, but again, this is a pretty simplified view. There are lots of options that don’t fit nicely into a category.

When considering which option works best for you, remember to consider a few things:

  • How much do you want to spend to get your site up and running?
  • How much do you want to spend on your site per month? Per year?
  • How often do you plan to update your website?
  • How comfortable are you learning new platforms?
  • Do you have a blog? Do you want to have a blog?

With that in mind, let’s begin!

Custom HTML Sites

Like we talked about in Part 1, a website is just a folder with files of code. With HTML and CSS, you can easily code a simple website by hand.

This is the most customizable option, but also the most code-intensive: the possibilities are endless, limited only by your budget and skillset. DIY means only paying for the domain and the price of hosting. However, hiring someone to create a custom site for you can be expensive.

Still, there are cheaper (and easier) ways to build a site without starting from scratch. There are many HTML templates you can purchase or download for free. With a little bit of HTML knowledge, you can download the files you just open them up in a code-editor, swap out their content for yours, and upload the site to your hosting company.

If you’re not a coder, you can always hire someone to set one up for you; however, you’d also have to hire someone every time you want to update it.

Content Management Systems

Somewhere in the middle between hand-coding and website builders you have framework content management systems like WordPress, Drupal, and Joomla.

With a content management system (CMS) you’ll pay for your own domain and hosting, which is cheaper than using a fully-hosted website builder. WordPress, Drupal, and Joomla are also open source, which means anyone can download and customize them for free. If you take the DIY route, this option is just as cheap as hand-coding, (unless you buy a theme, and then it’s only a one-time cost).

For now, I’m going to focus on WordPress because it’s one of the most popular and (in my opinion) easiest to use.

WordPress.com vs. WordPress.org

When people say they use WordPress, it’s often difficult to know if they mean WordPress.com, the website builder (more on that later), or WordPress, the Content Management System (CMS), which I’ll refer to from here on out as WordPress.org for clarity (although it’s a product, not a specific website). It’s important to remember that while there are similarities, these are two very different products.

Overview

Screenshot of a WordPress Dashboard
My WordPress Dashboard, a.k.a. what I see when I first log in.

There are lots of pros and cons to using WordPress. Once you learn the interface, it’s simple to add and update content. WordPress is great for blogging, and if you have an existing blog you want to migrate, never fear, WordPress makes it relatively easy.

It does, however, take a little more time to set up than a website builder does. Since it’s not a drag and drop builder, it may take you a bit of time to get everything where you want it, and while the customizer can help you change the appearance of your theme, it can still be helpful to know some CSS if you want to site to look just so.

How it works

WordPress is, like any other website, a folder full of files. While a seasoned developer might download it to their computer and edit those files directly, there’s a simpler way for everyone else.

When you sign up for hosting you’ll want to install WordPress on your server. Many big hosting companies like GoDaddy and Bluehost now specialize in WordPress hosting and have tools to make it as simple as possible. (If your hosting company does not have these tools you can still download WordPress from WordPress.org and upload the files to your server manually.)

Once WordPress is installed, you can go into your browser and build your site online, similar to how you would if it was a fully-hosted builder (more on that later). Add your posts, pages, menus, and other media, and WordPress will turn that content into a website.

Themes

What your site looks like depends on your theme. Themes can be added within WordPress or installed manually. You can find them through WordPress’ store or through third party websites like Creative Market. (Just google “Best WordPress Themes and you’ll find hundreds of options.)

Now, design-wise, here’s the mistake most people make with WordPress. If your site isn’t working for you, try another theme.

Most people choose themes based on things like fonts and colors, but that’s not as important since cosmetic changes are fairly easy to make. Instead, pay more attention to the overall structure of the site.

Consider this:

  • Does your theme layout rely heavily on photos, but your blog is mostly plain text?
  • Does your theme look great on your desktop but awful on mobile?
  • Does your theme have an annoying column on the right that you hate but can’t seem to get rid of?
  • Does your theme look great for your blog, but not on your static pages?

If so, try another theme. Be selective. With hundreds, probably thousands, of options there’s no reason to settle for a theme that isn’t working.

Some themes even have drag-and-drop editors built into them, so you can structure your site exactly how you want it.

This is also why it’s important to know what content you want to include before you design a website. If your theme’s main feature is a photo gallery and your website doesn’t have one, don’t try and come up with something to fit there. Just find a theme that works better for you.

Once you have a theme you like, it’s easy to do some minor cosmetic tweaks either through WordPress’s customizer or with a little CSS, and there are plenty or resources out there to help you do it.

Website Builders

On the far end of our to-code-or-not-to-code spectrum, we have website builders. There are lots of different website builders, but I’m going to focus on a few popular options.

These options are all fully-hosted, meaning that the website and hosting are all rolled into one, and they almost always give you the option to purchase your domain name through them as well (although you do have the option to connect domains you already own).  Having a fully-hosted site also means that the companies provide SSL certificates and handle security concerns for you.

Weebly, Wix, & Squarespace

By now, you’ve probably seen dozens of commercials for Weebly, Wix and Squarespace, promising a pain-free web experience. These sites are the successors of WYSIWYG (What-You-See-Is-What-You-Get) builders, and are known for their drag-and-drop editors that let you see exactly what your finished website will look like.

Here are a few pros and cons of these sites:

PRO: Fully-hosted means that everything is in one, easy-to-access place

If you choose to purchase your domain through one of these sites, you can easily manage your website, domain, and hosting all in one place.

CON: You end up paying more for the convenience

This option is the most expensive. Wix, Weebly, and Squarespace each have different pricing plans, currently starting at $11, $8, and $12/month respectively.

Like many hosting companies, when you sign up for an annual plan these sites will usually offer a free year of a domain. Be careful, however. The price to renew your domain is usually higher than purchasing one through sites like GoDaddy, Bluehost, or HostGator, so you’ll often end up paying more in the long run.

PRO: Weebly and Wix allow you to create and host a website for free

If funds are low and you want to put something up online without paying a dime, Wix and Weebly are great options.

CON: Free sites have limitations

Your published site will have Weebly/Wix advertising on it and have a Weebly/Wix domain (yourdomain.weebly.com or yourdomain.wixsite.com/site), which can look unprofessional. To remove branding and/or add a custom domain, you must upgrade to a paid plan.

An example of a Weebly footer.

There are also limitations to what you can build for free. For example, with Weebly you can’t customize your CSS or HTML without a paid plan, nor can you change your footer. You also can’t include more advanced elements like e-shops or membership logins.

PRO: You can see what your site will look like as you build it 

Unlike with WordPress, there’s no guessing what your content will look like when it’s published. However, if your internet connection is slow, drag-and-drop builders can be frustrating to use.

CON: If you’re not careful, you may end up with a site that looks just like someone else’s

At least, this has been my experience with Weebly.

Like WordPress, Weebly uses themes. However, unlike WordPress, these themes (Wix and Squarespace call them templates) mostly define what the header looks like and what the colors scheme is. Most themes give you at least a few color options, and there are plenty of fonts to choose from (you can also customize CSS with a paid plan), but if you stick with the defaults your header may look identical to someone else’s.

PRO: Wix, Weebly, and Squarespace are great for static pages

CON: They’re not fantastic for blogs

Again, most of my experience with this is with Weebly. While drag n’ drop may work great for static pages, it’s not my favorite for blogging, especially when compared to WordPress. Wix, however, has updated their blogging interface to make managing posts easier.

Screenshot of Weebly's blogging interface
Weebly’s blogging interface
Screenshot of Wix's blogging interface
Wix’s blogging interface

WordPress.com

WordPress.com often gets thrown in the same category as Wix, Weebly, & Squarespace, but I feel like it’s different enough to warrant its own section.

The biggest difference is that WordPress.com is not a drag and drop editor. Instead, it operates more like a CMS, where you add your content and the site formats it for you.

A couple of quick points:

  • WordPress.com does have a free version. Like Wix and Weebly, your site will have advertisements on it, and your free domain will be yourdomain.WordPress.com.
  • Like the other WordPress.org, WordPress.com is great for blogging: however, it isn’t fantastic for static pages.
Screenshots of a static page
Depending on the theme you’re using, it can be difficult to create advanced layouts on static pages with WordPress.com.
  • Of the options in this article, WordPress.com is the most difficult to customize. Like with WordPress.org, how your site looks is almost entirely determined by the theme you choose. Within themes you usually have limited control over colors and fonts (customizability depends on the theme, and CSS editing requires a Premium plan).

  • Themes can be chosen from a store within WordPress.com (there are both free and for-purchase options). Purchasing a theme is a one-time payment, and as of this posting range in price from $19 to $175.

  • Unlike WordPress.org, you cannot upload a custom theme (or purchase a theme from a third party) unless you pay for the Business Plan.
  • WordPress.com is a little cheaper than the Wix/Weebly/Squarespace crowd, starting at $4/month (although if you’re hoping to monetize your site you’ll have to upgrade to the premium plan for $8/month).

GoDaddy

I thought it was worth mentioning that GoDaddy also has an online site builder. Their site promises a better website (better than what, I don’t know) in under an hour. I had my doubts, so I decided to try it.

The site seems fairly simple to use. It’s a WYSIWYG builder, but it’s not really a drag-and-drop. You build your site a section at a time, choosing from a list of layouts. Once you’ve selected one you can swap out their sample content for your own, but you’re kind of locked into those layouts (no changing the sizes or swapping things around), which can get frustrating. If you’ve already added your content and change your mind, you have to delete the section and start over. However, if you want a fast and simple site, this might be for you.

It may not be the most user friendly, but it is one of the cheapest, starting at $5.99/month.

Summary

So, which one is the best? It’s hard to say. Just Google “Best Website Builders” and you’ll find hundreds of articles comparing and contrasting these sites. One site, for example, ranked Wix the overall best, Weebly the easier to use, and Squarespace the most design-oriented. Add to that price comparisons and see which works best for you.

To hire or not to hire

Okay, are you still with me? That was a lot of information to take in.

You may have made it through with a clear idea of what option will work best for you. If not, that’s okay. Take your time, think it over, do more research if you need to.

The great thing about website builders is that if you have the time and the patience, you can definitely get your site up and running by yourself. Know your limitations, but don’t be afraid to try something new. It doesn’t hurt to try Weebly or Wix or WordPress.com for free and see how you like it.

Also, remember that when it comes creating a site by yourself, it doesn’t have to be all or nothing. You can hire someone to design your site top to bottom and then hand it off to you to build, or you could have them set it up and maintain it yourself. Or, you can design it yourself and hire someone that’s not a designer but who’s good with code (there are lots of excellent front-end developers that don’t have a design-bone in their body) to make little changes that are beyond your current technical capabilities.

Whatever you choose, you’ve got this!

 

Have any questions? Feel free to contact me!

Leave a Reply

Your email address will not be published. Required fields are marked *