How to Build a Website



This page was last updated on October 17, 2014.

Contents

Preface

This document is intended as an overview, as a starting point for readers interested in basic web design. We will go into some detail, but expect that quite a bit of learning will be done in your own readings and on your own time. You learn best by doing; there is no substitute. It takes time.

You learn best by doing; there is no substitute.

As is typical for any big subject, we have our own angle on this one, and you may agree with it or not. We are proud of the work we’ve done, and we claim to be authorities within our niche, but there are other people who are better qualified for other programming- or web-related projects.

Note the date of revision at the very top. First of all, it’s there to “ensure freshness,” since any details here will eventually be out of date (past a year or two, I would advise reading for general principles only). But also, being somewhat comprehensive, this document will be under development for some time… check back to see what gets added!

Introduction

More and more, small businesses and independent professionals are finding themselves stuck. It’s never been more important to have a website, but hiring a web developer is prohibitively expensive for the average person. Most people can’t ascend the steep learning curve of programming to build or change sites themselves. Many people don’t want to use the so-called website builders because “they’ll look cheap and gimmicky,” and “couldn’t possibly be used for real work.” Besides, they think, I don’t have time to try anyway!

Not enough people realize that “website builders” and other user-friendly development tools have come a very long way, even in the last couple of years. As an example: WordPress, our platform of choice, has matured from a basic blogging system to an open-source web development tool with millions of users and thousands of developers, all in a few short years. Tools like WordPress are now capable of doing serious work, and they offer a solution for the average person’s website woes. Better still, those tools are only getting better in time!

The Web division of Williamson Media Group was founded on a simple idea: that we can build stylish, professional websites for local people running local businesses. Those sites will be good-looking, easy to update, and ready for changes or modifications. Best of all, we can make them available at an extremely reasonable price, thus removing the most common barrier of entry. 

Tools like WordPress are now capable of doing serious work, and they offer a solution for the average person’s website woes.

Still, there are a lot of people who are just getting started and want to do everything themselves. Having once been there, we respect that. As a gesture of good faith to those self-starters (and the stubborn DIY-ers) of the business community, we wanted to share enough information to get you started. None of this stuff is secret (and, indeed, there’s no better place to learn about building a website than, ahem, the Internet), so we may as well put in our two cents.

Our sales pitch comes at the end; you may take it or leave it. We ask only that you take a look at our Services (web design and otherwise) and let us know if you have any questions. And lastly: if you do use this information to help yourself, we’re happy for you, and we hope you’ll find a way to pay it forward in the future.

Best of luck!





Part I: Getting Started

Common Misconceptions

Let’s start by clearing up some of the things most people get wrong about building a website.

For most of the Internet’s history, that would have been the case. Recently, however, as the Internet has become more and more ubiquitous, people have developed tools to make it possible for non-programmers to get online. (There was a big demand for it!)

One of the most popular of those tools is WordPress. (Separately, we go into a little detail of why we’re big fans of WordPress.) The job of WordPress is to take your stuff and convert it into the code that makes web pages work properly. But you don’t have to code anything! If you were able to learn Microsoft Office, you’ll be able to learn WordPress.

Now, we should clarify a couple of things. First of all, you still have to learn how to use WordPress, like you would any other program. It can’t read your mind. Secondly, the “old-fashioned” way of building websites is still very much alive, and for a reason. That reason is that, for any web applications, or for corporate-grade websites built from scratch, or for a website that expects millions of hits a day, there are no shortcuts. That’s where you’d need some blend of HTML, CSS, PHP, Ruby, JavaScript, and possibly other markup and coding languages.

No, not really. Someone who wants to build and maintain an “average” website can do it with less than $10 per month. Here’s how the costs break down for that “average” website:

  • Domain: usually $12 per year. Your “domain” is the unique name of your website, like “www.yourwebsite.com.” You purchase a domain to claim it as yours and build a website that’s attached to it.
  • Hosting: about $6 per month. This is the service that provides the actual equipment needed to broadcast your website. More on that below.
  • Extras: your choice! Once you’ve covered the above two bases, it’s all optional. I recommend you use a few paid tools, but those are one-time costs and usually under $100 in total.
That isn’t necessarily true anymore. One of the reasons we love WordPress for the average website owner is that it’s plug-and-play, and therefore easy to update and repair. Appearance, functionality, you name it; the most you’ll ever have to do is upload a file or toggle a few options. Even WordPress itself is easy to update; if your hosting provider doesn’t update it automatically, it’s about thirty seconds of work to do yourself.

If your website were built from scratch, any changes would require a designer or programmer to revise the code, sometimes drastically, making those changes costly and time-consuming. With WordPress, you’re never stuck in that way.

Well, yes, the simpler stuff will always be easier to do (thanks, Captain Obvious!), and anything really advanced (like custom web-based programs) would be beyond our present reach. But relative to several years ago, the “native” functionality of WordPress and what can be done with a reasonable day’s work has widened quite a bit. Given the proliferation of developers working on plugins or tools for WordPress, more and more functions are accessible through plug-and-play functionality. Some specific tools cost a modest amount (less than $100); many are free.

Whether you want to recreate small features or visual gimmicks (like these accordion items that open and close), or do bigger things like open an online store, what we need is all within reach. It’s just a matter of knowing how to search for the right plugin (more on that later), then following the directions they give and smoothing it out so that it works properly with everything else on your site.

Overview

Before we get into the weeds, let’s get an idea of how an entire website project looks, from start to finish. Now and throughout, we’ll use the comparison of a website to a car, just so that you can picture how the pieces fit.

  1. The first thing you’ll need is web hosting, which is the server where your site lives and broadcasts from. A car needs a garage, right?
  2. You’ll need to install WordPress on that server, since that’s the system we’ll be using. This is like giving the car the engine that will enable it to run.
  3. Once WordPress is installed, you should get it ready for use by adjusting the basic settings and doing some setup. This is like running quick diagnostics on the car’s engine to make sure that it’s properly tuned.
  4. Next, you’ll want to install a premium theme, which governs your website’s appearance. This is like giving the car a body and a custom paint job — just about whatever you want.
  5. Depending upon what you need the site to do, you may need to install some plugins which add functionality to your site and give it some cool abilities. This is like installing a nice sound system, heated seats, and GPS, what you might call “features” in the case of a car.
  6. This is the big one: you’ll have to actually build your site’s web pages and fill them with the content you have in mind. This will be an ongoing process, especially if you know you’ll have new or updated stuff in the future. This is like actually driving the car; it’s how you’ll spend the majority of the time in the long run, it’s the part that the public sees, and it warrants your careful attention!
  7. If you’ve had success so far and you want to take your site above and beyond, it might be time for some custom tuning. Knowing even just some HTML and CSS can make your web pages look exactly the way you have in mind; likewise, knowing how FTP works, how to make custom graphics, and even how to code in PHP (if you want to get really serious) will give you fuller control over your site’s appearance and function. This is like doing custom tuning on a car’s engine, and like with engines, you can do as much or little as you want; maybe you just want to install an improved exhaust, but maybe you want to completely rebuild the engine and double the horsepower. (And, as with cars, you might want to learn how to do it yourself, or you might be willing to pay someone else to do it.)

Hosting

The Short Version: Web hosting is the service that makes your website available to the public 24/7/365. When you build a website, it’s stored on the hosting company’s memory space. They maintain all of the hardware and keep your site available to the public for a monthly fee, which (for our needs) is usually $5-10 per month. This is the first thing you’ll need to get your website online.

There are lots of companies that provide web hosting, and most of them offer very similar things. You should do your homework before choosing a company (since it would be a pain to move your website from one company to another), but it’s not as though there’s only one company that would work for you.

Some of the factors to weigh:

  • Do they allow easy installation of WordPress? (Most do.)
  • How much storage space do they allow? (1GB or more should be fine for most users.)
  • Do they allow custom email addresses, and if so, how many?
  • How many domains do they allow you to have? (If you might want a second or third site later.)
  • What level of service and support is included? (Some of the more complex server-side issues require a call to their technical support.)

Have a look at this survey of different hosting providers. It’s original, well-reasoned research and provides a pretty even-handed look at a handful of popular companies. It also cuts right through the (pardon my French) advertising circle-jerk that some companies seem to have with the WordPress.org administration (and it’s not just the one company mentioned that deserves a second glance).

If you already have hosting and it can accommodate these needs, great! But here’s what you should double-check:

  • How much are you paying for hosting? If you’ve been paying for hosting for 2+ years, it’s possible that you’re grandfathered into a plan that costs more, not less. (We’ve saved clients up to to $150 a year just by getting them on an up-to-date plan with current prices–even if they stayed with the same company!)
  • On what timetable are you paying for hosting? This is a related question to the above, but if you’re paying month-to-month, your sunk costs in switching providers, if appropriate, would be minimal.
  • Is your current hosting provider WordPress-friendly? Most of them are, but some companies (especially more local companies that cater to a more old-fashioned clientele) don’t bother to keep themselves up to date, and in some cases won’t even be able to run a manual installation of WordPress. (Yikes.)

If your current provider can continue to serve your needs well, it’s probably best to stick with them. But if for whatever reason you decide to switch, and you want to bring your old site(s) and domain(s)…

  • Know that the process for that varies by provider, and you’ll need to speak with your own provider’s technical and account support. This should be standard-issue stuff and shouldn’t be difficult for them to help you with.
  • Ask yourself if it’s worth the trouble. Most often, it’s worth the trouble for the domain, but not for the old site (else, why would you be reading this?). Consider backing up your old site to your computer’s hard drive, just so you have the data, and then letting their tech support nuke it.
(Some of these options may be included in your package already.)

DO get domain privacy protection, or whatever a given provider calls it. This anonymizes your domain WHOIS information (basically, your personal info that’s filed when you register a domain) so that solicitors can’t find you directly. Usually it’s inexpensive ($10 per year) and worth any trouble it might save.

DO get some form of automatic backup. Usually it also is reasonable ($20 per year) and, again, worth it if only for the peace of mind.

OPTIONAL is what we’d call domain security. You probably don’t need it unless your website will be very high-traffic or used to store sensitive data. It’s unlikely to do much good otherwise, especially for a typical business website which is mostly just information.

DON’T get any sort of SEO (search engine optimization) booster. To put our opinion bluntly, SEO is a waste of time for most people. Unless it factors into your business model somehow, save yourself the headache.

DON’T get Google Apps for work unless you want it for your whole office. If we build your website, we’ll set up custom email and send you instructions to set it up in Gmail, which does 99% of the same thing. Save yourself sixty bucks a year.

You will want to have a couple pieces of info handy at all times as you develop your web site.

The first one goes by a couple of names: cPanel login, administrative loginor account login will probably fit the bill. This is the username and password that will allow you to access your account information, and it will be used to perform certain web-related tasks not visible from the outside (like setting up email or modifying program files).

The second may or may not be set up at the same time, depending on the hosting provider, and that’s your WordPress login. If your hosting provider offers to go ahead and install WordPress on the first domain you get, you may go ahead and do that. Either it will automatically create a gibberish username and password for you (you can change it later), or it will allow you to make up your own on the spot. Either way, write them down!

One final thing, and this is something to bookmark in your internet browser: the WordPress login portal for your website. 95% of the time, it will be http://www.YourWebsite.com/wp-login.php. That’s the “front door” to your website, so make sure you remember where it is!





Part II: Designing Your Website

Once you install WordPress on your server space, you’re ready to build a website! This section discusses some of the tools and techniques you’ll need to use to get your site from an empty shell to a finished, polished website that you’ll be happy to have people visit.

 

Introduction to Themes and Plugins

The Short Version: Themes and plugins are types of tools that enhance your WordPress installation and, in the end, make your website prettier and more functional. If you think of WordPress as a car — and, like any car, it comes “stock” when you install it — themes would be cosmetic improvements, like paint jobs and body work, and plugins would be engine enhancements.

There are literally thousands of themes available for purchase and/or download, but there are a few sources that are biggest or most reputable. It just depends on your aesthetic taste and how much you’re willing to spend — though, as in other places in life, you tend to get what you pay for.

One place to start is StudioPress. Their themes are built on the Genesis framework, which is their fancy term for their up-to-date, sturdy framework they use to make their themes. It’s a little bit pricey ($100 for rights to the framework and a theme), but well-made stuff, and trustworthy.

Another place worth your time is Theme Foundry. Likewise, these tend to be well-built and well-supported, so you’re unlikely to run into very many issues, and any that you do will be easy to find solutions for. This is one of the few places where all of the themes don’t all look the same, so if you’re wanting a specific type of look, this is a good bet for finding something with character.

One of the biggest theme vendors is ThemeForest. ThemeForest is kind of like Wal-Mart for WordPress theme sellers; there’s a ton of variety, you’ll find something you like eventually, and whatever it is probably won’t be expensive. Whatever you find, though, I would only buy if it’s got a decent number of purchases (which is a decent barometer of its quality and support), and I’d run a Google search on it to see what people are saying.

You can check places like MightyDeals, but only if you’re on a shoestring budget. Again, you get what you pay for. Do five minutes of research before you buy anything.

You can look into Elegant Themes if you want. It looks like an interesting deal, though I haven’t had time to research it yet.

If you’re wondering, this website (as of October 2014) uses a theme called X. It’s pretty versatile, it comes with a number of cool features, and the support and forums have been really helpful for some of the weird, break-the-code kind of things I’ve played with in the past.

 

Themes can be inexpensive, reliable, and aesthetically pleasing. Most of the time, you’ll have to pick two of those three.

Given the huge difference it can make for your site’s appearance and function, I wouldn’t skimp if I were you. Still, it can be difficult to tell the difference between utter crap and really well-made stuff when you’re starting out. A few tips:

  • Look on multiple different sites. Some of the markets overlap, some of them don’t — just because you’ve found the “best-looking” or “most popular” theme from that particular style, or that one website, doesn’t mean you’ve found the right thing for you.
  • Try to find criticisms before you buy. Don’t trust one website’s opinion (not even ours!) on something, especially if its review of a product is glowingly positive. (Nepotism exists on the Internet, too.) Now, there will always be someone who’s bashing what you’re looking at, but it’s a red flag if they can give specific reasons why they’re bashing the product, and it’s another red flag if multiple sources are giving reasons to avoid it. Conversely, it’s a good sign if the reviews are positive overall and you see a good spread of 3/4/5 star reviews.
  • Make your decision slowly and carefully. I say so not just because you’re about to drop $50-100 on something, but also because you’re going to spend a lot of time working with this theme, and you don’t want to waste that time. You should be asking not just how it looks, but how it works. You won’t know 100% until you’ve bought and installed it, but see if you can’t get a sense for whether people like working with it.
As I mentioned before: if your website is a car and WordPress is the engine, plugins are like enhancements for the engine that add power or allow it to do other things. There will be a few that come pre-installed on WordPress, and there are thousands and thousands more out there should you be compelled to download any of them.

In a manner of speaking, plugins are also like apps on a smartphone; there’s one for just about every purpose you could imagine. Some are small and will just display basic information; others are large and will, for instance, be the part of your website that holds up an online store! As with apps on a smartphone, the plugins you’ll get will be entirely dependent on you, your site, and your needs.

Here’s the deal with plugins, in a nutshell: they can do great things, but you should only get one when you’re sure you need it. One of the common mistakes WordPress users make is to download every plugin they think they might need, and never remove any of the ones they don’t need. It bloats your site and makes it more and more difficult to work with, both for you and for the end user (the person visiting your website). As a general rule, you should try and keep your website running with as few add-ons as possible, just so that everything runs fast and stays tidy.

Our advice is to build your site’s pages, polish the style and layout of everything, and get familiar with how everything works before you start worrying about what the site can “do.” Just worry about getting it up and running first, and then you can add bells and whistles.

You should only get a plugin if (a) you know you can’t do a particular something with the “stock” site, (b) you know that a plugin is the answer rather than something borrowed or embedded, and (c) you can believe that the plugin will do what you want reliably.

In the first case: WordPress sites, for the most part, are just meant to display stuff. If all you want is for things to sit still on the page, the stock installation will probably do you just fine. If you want there to be gadgets, widgets, and other advanced features that give your site some power, you’ll probably need to consider certain plugins.

In the second case: some function is not native to WordPress (“native” is the programmers’ term for “built-in” or “assumed”), and so you might think, I might need a plugin for that. Maybe you do–but think about what precisely you need. If all you need is for something from elsewhere on the Internet to be shown to your viewers (as opposed to being able to have your users interact with it), you might be able to embed it instead. (Which is like being able to borrow it permanently rather than having to install it, maintain it, and otherwise deal with it.)

An example: Google Maps, a pretty typical thing for people to embed on their websites. Being able to toss a Google Map into your website is not (usually) something that’s built right into WordPress or your theme, so you have to go elsewhere to make that possible. But you don’t need a plugin; you just need to embed the Google Map since, technically, all you want is for your viewers to be able to look at something that already exists elsewhere on the Internet. (Likewise with YouTube videos, no plugin needed. Just embed it.) It’s a little piece of pre-written code that you copy and paste into the right spot on your page, and then you’re done! (You can Google “how to embed a Google Map/YouTube video on a WordPress page” and the instructions will be easy to find.)

But what if you’ve got something more complicated, where people should be able to interact with it in some way? Then a plugin is probably in order. To recycle an example, let’s suppose that you want to install an online store on your website. That’s obviously a complex affair (it involves inventory, a shopping cart, payment processing, et cetera), so it’s going to need a plugin.

But that brings us to the third matter, which is reliability. There’s more than just one e-commerce solution, but you want to use something trustworthy and reliable, like WooCommerce. You do NOT want to use “Jimmy’s e-commerce plugin” which has been downloaded only 14 times. Again, this is where you’ll have to do some research of your own, but as long as you do that research, read the reviews, heed the cautions, and follow the steps, you’ll be fine.

If you’ve decided it’s likely that you’ll need a plugin for whatever you have in mind, there are a couple of ways you might get it. Fortunately, plugins tend to be simpler than themes, in terms of finding and checking them for quality. Here’s why:

  • Themes affect every aspect of the website, have certain native functionality of their own, and range a huge spectrum of styles, whereas plugins tend to be built for a single, specific purpose.
  • Themes can cost anything from nothing to $100, and there’s a pretty good spread in between those extremes. With a few exceptions, plugins tend to be one or the other. Usually they’re free. That means that they’re available more easily and have more people using them, which in turn means that there is usually more consistent support on some plugins.
  • In turn: the reason many plugins are free is that many plugins are part of a larger product or service. For instance, Facebook has developed a plugin for WordPress so that users can stream content from Facebook onto their websites, and Facebook releases it for free because it’s an extension for them. And so it goes for a LOT of different online brands or services (and if they don’t do it themselves, or do it for free, someone else will!).

For a lot of your needs, you can find the right plugin from within WordPress, so you never have to leave your site’s dashboard! Just go to Plugins and then click “Add New” at the top, and you’ll be able to browse most of what’s out there.

Once again, be sure to look at the reviews and pick the option that seems most reliable. If indeed with a grain of salt, you should take the lead of the hivemind and look first at what’s most prolific.

Creating with WordPress

This section will give you the basics of the WordPress interface: what certain settings mean, how you set up your pages to work in tandem, and how you can create the pages you imagine within the WordPress system.

More information coming soon!
More information coming soon!
More information coming soon!
More information coming soon!




Part III: Advanced Tools and Techniques

You’ve built your WordPress website, put a fresh coat of paint on it, added the functionality you need, and filled it with all of the right content. If you’ve gotten this far, you’re in good shape! This section will give you a quick primer in the more advanced stuff that isn’t plug-and-play and can take your site above and beyond others in its class. None of this stuff is necessary, but it can make a big difference!

More information coming soon!
More information coming soon!
More information coming soon!




Our Sales Pitch

Conventional business wisdom would have discouraged us from writing this, since this “gives away” a lot for free. But, if you’ve read along for even pieces of the above text, you might have some idea of how it doesn’t hurt us to share the knowledge. Again, we’d love your business, and here’s the pithy case for your investment in our work.

Time

Chances are, you don’t have much of it, and certainly not enough to go to some of the lengths we’ve described above. We’ve had multiple clients say to us, verbatim: “Usually I’d have done all of this myself, but I just don’t have the time.” Being ourselves a startup, we respect that attitude — but if you’re successful doing whatever you do, it makes most sense to spend your time doing that while we do this for you.

More to the point: we’ve got the experience that only time, troubleshooting, and practice can bring, and we have many, many, many hours of it. If you were to invest as many hours as we have, you’d be doing this for a living!

Versatility

Though it may not seem so at first glance, the different services our company offers work nicely in tandem here. Sure, we’d know how to get a website up and running regardless, but our other skills manifest in the details. We know how to design and manipulate graphics, which appear in different places throughout our portfolio; we do ghostwriting and editing, which show up in the copy and content of the pages; we have some experience in actual programming, which allows us to tweak page markup and even edit the files that make your installation of WordPress run a certain way.

Plus, the fact that we’ve built different websites with different feature sets means that, whatever your needs, we’ll know the best combination of tools to make it function smoothly for you.

Service

We want to help people do their best work and be happy doing it. At the end of the day, it’s that simple. Because we’re a small company, we have full freedom to choose our work style, and we would prefer fewer close and trusting relationships over many shallow relationships. If this sounds like something you’re on board with, we want to get on board and feel like you never want to leave. If we succeed at that, we’ll be happy ourselves.

So, let it never be said that our service was anything less than great.