Building Your Website
Building a website might feel overwhelming at first but, with some planning, you can relieve much of the anxiety. This section walks you through what you need to know before you build your website, and covers the different ways to build it.
Before you begin the planning stages, there are a few things you need to understand. Every website is made up of three basic elements. They are:
- The back-end code — This is the HTML (Hyper Text Markup Language) that controls how your website looks. For more information, check out What is HTML?
- The layout — This is the consistent color scheme, navigation, and look of your website across all pages.
- The content — These are the words and images you see on your website.
Start with a Plan
The first thing to do when building your website is to develop a plan. Before you move forward, think about what you want your website to do, and decide what success looks like for your website. When you look back at your results a few months after your website is complete, how will you know it was worth it? Make sure you are planning your site to match your goals.
There are terms often thrown around for websites, and you might not understand what they all mean right now. That's OK. What you really want to have is a good understanding of what you want your website to do.
These are three common types of websites. Do any match what you want to do?
- Business websites — These websites sell products or services. Sometimes they're more informational (e.g. lawyers, contractors) and sometimes they sell products on the website itself (e.g. clothing retailers).
- Personal websites — These websites tell the world about you. They might feature a blog to share your thoughts and ideas daily, or a gallery of your photographs. These websites are much simpler and only require your hosting account and possibly a basic Content Management System (CMS) like WordPress®.
- Announcement page — These basic websites announce an event like a party, wedding or baby shower. They include event information and a contact form or RSVP area. When visitors fill out the form, the website sends you an email with all of the information.
These are just a few ideas to get you started. Your website is as unique as you are, so use these suggestions as a guide. Your goal might be a mixture of these kinds of websites. Write down what you want your website to do, and whether you need to add other components to make it happen.
Now that you know what type of website you are building, let's talk about how to build it.
Tools of the Trade
There are plenty of tools available to help you make your website a reality. Each one offers its own set of pros and cons. These tools range in difficulty, starting with template-based site builders all the way to website editors that help you write your HTML (HyperText Markup Language) code.
If looking at HTML code is intimidating, there are great solutions available to you. You will hear terms that sound scary like HTML and CSS (Cascading Style Sheets). Site builders hide these elements and let you build your website visually.
Site builders are online programs you use from your Web browser to create your website. Site builders typically include website hosting, so you don't need to worry about that. You usually start by choosing a professionally designed template and then replacing the text and images to meet your needs.
These programs limit the control you have over your website, but are great if you want to have a beautifully designed website in a very short amount of time. Because your site is based on a pre-designed template, difficult decisions about placement of text and graphics are already made for you.
WordPress and Joomla
If you like the idea of building and updating your website without learning HTML, but want more flexibility than a site builder, then consider using WordPress® or Joomla™.
These programs use a dashboard to control the look of your website through themes, as well as to update content and add pages. These are popular because, without knowing much HTML code, you can create professional-looking sites with a lot of functionality. For example, you can add your Twitter® feed or a calendar to your website with a few clicks of your mouse.
WordPress is popular for novice builders and has a reputation for being easy to use. There are thousands of free templates and plugins available at WordPress.org to make a good-looking site and extend the features of your website. After deciding on a template, update the images and text through the WordPress dashboard to customize your site.
Joomla is great for building large-scale websites with lots of pages and multiple administrators. Joomla allows for multiple authors and additional modules to customize its functions, as well. You can add and update website elements using a dashboard area, just like WordPress.
They both have their own strengths and weaknesses. We'd suggest looking into each site builder to decide which platform would be the best for your website.
Many hosting providers make it easy to install these applications (and others) with just a few clicks. If your hosting company doesn't offer automated installs, you can download either WordPress or Joomla and install it yourself on your hosting account.
Know Your Code: You're Building It
If coding your website is the path you decide to take, you have a few options. They range from learning HTML, and hand-typing the HTML tags that control the layout of your pages, to using an HTML-writing WYSIWYG program like Dreamweaver®. A WYSIWYG editor works much like a word processor. You enter the text of your website and insert images from a menu in the program. The editor produces the HTML and CSS to make what you see on screen match what a visitor sees when visiting your website.
If you're interested in learning HTML, W3Schools has great fundamentals available here.
You can also use Cascading Style Sheets (CSS) to control your website's appearance. The style sheet controls placement and style elements for a Web browser to display your page. You control fonts and paragraph width with your CSS. Again, W3Schools has great CSS content available here.
If you want to have complete control of your website layout, then manually creating HTML and CSS is your best choice. However, learning HTML and CSS just to create one website is a large investment of your time.
Hire Someone to Build Your Site
If you have an idea of what you want but don't want to build the site yourself, consider having a professional build it for you. When you consider the time and effort you'll need to commit to building your website, this option can be a really great investment.
Professional Web designers translate your vision into a fully functional website. They'll build your website using your text and images, and some even hire professional writers and photographers to make your website look as good as possible.
Developing Your Content
Once you decide how to build your website, you're ready to prepare your site's content. Text and images are the heart and soul of your site. Your website's content engages visitors and compels them to action.
Spend some time thinking about what you want to say on your website. There are a few factors to consider before you begin typing:
- Be as short and concise as possible. People visiting your website are looking for information and can get easily distracted.
- Who is your audience, and what information are they looking for on your website?
- Put the most important information at the top of your pages.
If you are comfortable using a word processing program to write your content, be sure to copy everything and paste it into a text file when you are done. Word processors can add extra formatting to your text that make it display incorrectly if you paste it directly into site building programs or HTML editors. Remembering this easy step can save you hours of frustration during the layout of your website.
The photos and images you use comprise the other half of your website content. Images inspire us. Find a balance between hooking your visitors visually and overwhelming them with photos.
You can take photos on your own or find stock photography websites that sell professional photos at a reasonable price. Some websites charge a fee for their images, and other provide them for free. If you decide to use images found online, make sure they are from royalty-free sources. Many images have copyrights and you need permission to use them on your website.
A Web browser can display three types of images on your website: GIF, JPG, and PNG. GIF images are great for logos or images with limited color in them. They make your image file size smaller, which means they load much faster for visitors. JPGs are great for photos, while PNGs are ideal for full-color website images like button and menu backgrounds.
If you want to make your images look as great as possible, you can set their dots per inch (DPI) to .72. That matches modern Web browsers' settings and ensures that your images display correctly. You can set resolution for your images using free online photo editing software like Pixlr, or a program like Photoshop®.
Thinking About the Design
Now that we have talked about the elements of the website, consider the overall look and feel of your site — especially the colors and use of space. A website designed to hold the attention of young adults would look different than a patent lawyer's site.
Spend some time looking at websites you visit often. Do they put too much information on the screen? Do they make you click too many times to find information? Write down what you like and don't like about them.
If this step sounds difficult or you can't quite figure it out, consider using one of the template-builder options we discussed previously. Having a professionally designed template ensure your site looks good.
Outlining Your Website
Now it's time to decide how much content your website needs. Some people have websites that are several pages, while others run successful websites that are just a single page.
These are popular elements of most websites:
- Home page — This is the first page a visitor sees after typing your domain name. Think of it as your first impression.
- About page — This page includes basic information about yourself or your company. This is a good place to tell your story.
- Contact page — This page makes it possible for your visitors to connect with you. This can include something as simple as your address and phone number. Some businesses like to add a form so customers can give feedback.
Publishing Your Site
After you're done designing, the next step is to publish your website.
How you do this depends on how you built your site:
- Site builders have a built-in publishing feature to make your website live.
- Web hosting requires you to upload your website's files via File Transfer Protocol (FTP). You can use an FTP client to do this (we recommend FileZilla™, but you can use a lot of different programs). Some WYSIWYG editors even include FTP tools.
- CMS applications like WordPress and Joomla! have built-in tools to make your site live.
Building your website is easier than you might think. With the many options available today, you can have your dream website built and available for the world to see in no time.