Websites 101

Introduction

Without a doubt, every company should have a website in today's technology driven world. It's an inexpensive and highly effective way of communicating with your customers, and it acts like an around-the-clock salesperson.

Using a website for media is very different from traditional branding methods. This is called "new media".

This book will walk you through the thought process, basic principles and best practices of a website. When you are done, we hope you will feel more comfortable about creating your own.

Website Goal

Before doing anything with your website, take some time to think about the specific goals you want to achieve and write them down. This will help to ensure that your website serves your needs. Writing them down helps you stay focused.

Here are some things to think about:

Objectives

What are your primary online business objectives for your new website? What are your secondary objectives?

Examples:

Personas

Describe a typical user coming to your site; create a so-called "persona" which is a description of your user as a real human being. What does he/she do for a living? Why did he/she come to your website? How familiar is he/she with your products or services?

Primary Actions

What is the primary "action" the user should take when coming to your site?

Examples:

Reasons

What are the key reasons why the customer should choose your company's products and/or services?

Examples:

Example

For example, let's say Lucy owns a cupcake bakery called Lucy's Cupcakes:

Domain Name

A key part of website identity and branding is your domain name. This is an address someone enters in the address bar of a browser to bring up your website.

Since the web has been around for more than 20 years now, most of the "pretty" domain names are already taken. That means that you will need to get creative when coming up with it.

Key points to keep in mind:

Structure & Sitemap

People come to your website to get information, and your Sitemap (the hierarchy of all the pages on your website) plays a critical role in that. Having short and straightforward page names helps visitors scan navigation to get a better idea of how your content is organized.

Each page should help your visitor achieve the goal of why he/she came to your website.

When building the navigation, try to limit the number of pages to 5-7 menu items max. If you have more, try to group them and organize them as subpages. Stick to the "3 clicks" rule of thumb: getting to any page from the home page should take no more than 3 clicks (hence the name). It can take more than that as long as your visitors are confident that they are moving in the right direction.

Studies have shown that people tend to look more at the navigation on the homepage, while they focus mainly on content on the inner pages. Use this to your advantage and provide relevant links to other pages. For example, when describing your company in the About Us section, add a short description of your services that links to your Products & Services section (You could add a "Learn more about our products and services" link instead).

The last thing that you want to do is to confuse your visitor as to where they are. There are several ways to help you avoid this.

Design

The design of your website is just as important as the content you choose to provide. A well thought out design can communicate your company's attention to detail, creativity, professionalism, and reinforce your brand.

Overall Layout

Keep your logo and company colors in mind as well as your other marketing materials look and feel. You want the design to reflect your company's identity and overall character.

Text Size, Color and Type

Use modest text styling. Too much usage of bold, italic and colored text can result in your page looking cluttered. This will make it less attractive to visitors.

Screen Sizes

Unlike newspapers and magazines, your website visitors will be using displays that come in different sizes and resolutions. So what you see on your monitor may not be exactly what everyone else may see when viewing your website. Try to keep the most important information closer to the top of the page as it has the best chance of actually being visible.

Google's Browser Size Tool

Colors

You know how certain colors make you feel a certain emotion or how certain colors look good together? That is the basic principle behind color theory. Use the right colors to help convey your company's identity.

Smashing Magazine's Color Theory

Page Content

People come to your website for actual content. So this is the most crucial part of a successful online presence. If you only have 1 hour to build a website – spend it all on writing quality content.

Easy To Scan with Text Readability

People rarely read all of the text on a web page. Instead, they quickly scan it, and search for information that they need. Use headers and sub headers to clearly label parts of the page. This will also help with search engine optimization (SEO).

Try to limit each paragraph to one idea. By making sure that each topic is in a separate paragraph, you give the reader a better idea of the underlying organization.

Use lists when you can, as they are much easier to scan through.

Links: How to Use Them Properly

Links allow you to direct website visitors to more information by letting them click on text or images on your pages to move to a specific place.

Aside from linking to another page, you can link to a specific area of that page using "Anchors". Let's say you created a page with the address http://example.com/about/ and insert an anchor with the name "history" right at the beginning of a paragraph about the history of your company. You can then link to that paragraph via the following URL: http://example.com/about/#history. #history is your "Anchor".

It's essential that visitors quickly find links in your text while scanning and understand where they are linking to. That's why it's important to avoid using "Click here" and instead use keywords for link text. (Example: "Learn more about the upcoming conference" is better than "Click here to learn more about the upcoming conference".)

To help ensure that visitors on all different devices will be able to download files stored on your website:

Opening links in a new window is generally a bad idea because it breaks the browser's Back button. It's like going to someone's house and opening their cabinet doors all at once. If people want to open a link in a new window, they know how to do it.

There are exceptions to this rule though, like when you are linking to PDF files. In this case warn your visitors that the link will be opened in a new window, so that they won't be surprised.

Image Resizing and Quality

Do not just reduce the width and height of an image by the "width" and "height" attributes, as you are not actually resizing the image width and height or total files size. You are just "squishing" a big image down and making your visitors wait the same amount of time to load the image.

Before inserting images, we suggest resizing your images and keeping them under 100KB in size. This will make your users happier as pages will load much faster.

Different Graphics File Formats (i.e. JPG, PNG, BMP, GIF)

Before we get into the history and pros and cons of these different formats, it is recommended that you use JPG for photos and PNG for everything else.

It's a good idea to convert all other image formats, like BMP and GIF, to one of the above formats.

Search Engine Optimization

If you have ever wondered how a certain website seems to always show up in a keyword search on bing, Google or Yahoo search, then you are thinking about search engine optimization (SEO).

How It Works and What Matters

One of the best ways to increase traffic to your website is through organic traffic from search engines. People do a keyword search related to your products or services and a link to your website shows up in the results.

All SEO techniques can be divided into 2 categories:

We strongly encourage you to obey the rules & guidelines of the search engines. Failure to do so may result in your website being banned from their results.

So what are the DOs and DON'Ts?

Search engines usually find you automatically, but to speed up the crawling process, it's still a good idea to go to each search engine and submit yourself.

To submit your website, go to the homepage of that search engine's website and search for the "Webmasters" link.

Some search engines will ask you for your website's Sitemap file. Basically this is a file that contains a list of all your pages and when they were last updated. It's usually automatically generated by website tools.

SEOmoz's Search Engine Ranking Factors

What You Shouldn't Pay For

If you are approached by a company who guarantees your website will be on the first page of results for a keyword in a search (not an ad), that's usually a sign to stay away from their "services". Unless they own the search website, they cannot guarantee this.

What's Next?

Below are a few simple suggestions on what to do once you get your website up & running.

Updating Your Website

Don't let your website just sit there like an old brochure stuck in someone's junk drawer. Update your website often. Publishing news, articles and blog posts on a regular basis will help you earn a visitor's trust and the loyalty of search engines.

Social Networks (twitter, facebook, etc)

The popularity of social media tools like twitter, facebook, myspace and linkedin have helped website owners make the connection to potential and current customers. Make sure to sign up for these free services to help connect to people who may not know about you and stay connected to those that do.

Statistics

Detailed and specific statistics about your website traffic is one of the greatest benefits over other mediums. You can see how many people have visited your website, where they came from, what pages they've looked at, and how many of them have signed up on your website. Here are some free services: