Goals

Before designing a website it is important to set goals. What purpose is the website serving? Not all sites serve the same purpose. For example, a retail site will have very different goals than a nonprofit site.

Some common website goals are:

• Sales
• Marketing
• Update information
• Generate leads
• Distribute information

Goals, in any setting, are important to business success. By setting goals for one aspect of the business, in this case, the website, it will help in accomplishing other goals of the business, such as:

• Expanding the audience
• Increasing sales
• Connecting other businesses or other parts of the company
• General communication

Design Message

The design message is the image the organization wants to portray to the reader. This can also be called the brand. When creating the look of the website you must consider logos, colors, fonts, and images. These must all support the personality of the organization.

Communicating the brand is something that is becoming more prevalent in the workplace. Consistency is needed everywhere within a business so that the company can portray a unified front–and believe in it. Giving web pages a consistent look will help define it as a cohesive website and will make it easier to navigate. Since companies are building their workplaces around the “theme” or the “brand”, there is no reason that the website should not be done in the same manner. In fact, it is necessary for brand identification, therefore helping the company advance and succeed. A consistent brand and image also build trust and value for a company.

Some important items to consider when communicating the brand are:

• The brand, whether communicated through the website or the customer service, must be consistent
• The brand should be found everywhere–there are no limits to exposure of brands
• Short and simple is always the best route
• You are the brand and the brand is you. If your brand does not reflect the values and beliefs of the company, it most certainly should not be on your website.

Recognizing Your Audience

Knowing your audience will help you to make better decisions when it comes to deciding which browsers to support and which new technologies to endorse. Before designing a new website, it would be helpful to look into the likely browsers, computer user knowledge, and connection speeds of the audience you are addressing. In redesigning a website that already exists, you can review the past site usage information so that you are providing improvements to the site where it is needed most.

There are several different guidelines that should be used when designing websites. Here are common site types:

• academic and scientific sites should have additional focus on how the site functions in graphics-free browsing environments
• consumer audience websites should pay special attention to site performance and presentation
• a controlled environment where a specific browser is being used, as in a corporate environment, is where it is best to use all that the website has to offer. Employees usually attend training to learn how to use these sites and the designer can use the browsers full potential.
• gaming websites is where you can assume that the users will have the latest plug-ins and browsers and are quite technologically savvy

You can also take a balanced approach to web design. This type of design integrates the latest web technologies, but implements them in a way that is still functional to those that have older browsers.

Examining the Site’s Purpose

Figuring out how the site will be used in another important step in website design. Those who use the internet usually fall into two categories:

• those who seek information
• those who search the internet for entertainment

For the informational sites, you may want to consider the technology of the client or use more general approach in design. For the sites of those seeking entertainment, more cutting-edge technology can be used to better the experience of the user when they are accessing your site.

There are options for those who want to use the latest technology for their websites, but want to make it available to everyone. For this situation, you can use a browser detector to serve alternate version depending on the type of browser the user has. This allows you to use the latest technology and still recognize users that have older browsers.

Testing Your Site

Test your website on many different browsers and browser versions. Doing this before going live will help off-set problems you may encounter before it is available to the public. Professional web design firms run their sites through an intense quality assurance phase. If this is not a feasible task, you can make your site available on a private test site. You can then run your own quality assurance test throughout the following browsers:

• Acquaintances’ browser
• Corporate office browser
• Different ISPs

Website pages will appear different depending on the environment it is viewed on. The overall idea of this testing phase is to make sure that the information is being presented clearly and there are not any overt problems.

Content

Content is one of the most important reasons for even creating a website in the first place. If you think about it, a website with no content has no purpose. A website with no purpose is wasted space on the internet.

When considering content for your website, be sure to think of the following items:

• What is the goal of the website?
• Who is the website trying to reach?
• How much time to people have to spend reading information on the website?
• How did individuals reach this website?
• What is the most important information to the reader?
• What questions do the readers have?
• What action is the reader supposed to take after reading the website content?

Another aspect to consider about website content is how it will be searched within different search engines. Key words are needed throughout your website to make sure that the website is found by people who are looking for specific information. It is important to be specific with words, and use them multiple times, so that search engine robots find the word and place it high on the results list.

Content must also be age and audience appropriate. Age appropriate is hard to determine on the internet since it is something that can be accessed by everyone who knows how to use a computer. Content on websites, however, still must be age appropriate so that the right audience is reading the right material. Age appropriateness also falls under appropriateness in general of making sure that private information does not become public on the internet. Audience appropriate means that the content of the website is serving the people with the right information at the correct level of reading to which the intended readers will understand.

With companies becoming more interested in the usability of their websites, positions are being created specifically for content writing. A website content writer is someone who specifically writes information for websites. This is written in a different voice than academic writing so that a web surfer will stay interested in the website, and therefore the information.

Creating a Home Page

Your home page will be the most visited page on your website. Your home page may not always have what your viewers are looking for, so if you have something that will draw them in to make them want look further for their information. You will have ten seconds to draw your customers into your site, or else they will hit the “back” button and will begin to look elsewhere. Your home page should be able to load quickly. The ten seconds you have to draw the customers into your site begins when they click on the link to your site. If it takes five seconds for your site to load, you only have a few seconds left to draw customers further. Here are some tips to help your site download quicker:

• Keep media images small
  • limit images to no more than 5 to 10KB
  • pages should not be more than 30KB total per page
• Avoid using ads from external websites on your home page that may slow down the loading time. You cannot control how fast another server will serve its content.
• Write your HTML in sections so that when the bottom of the page is still loading, your customers can read the top sections of your home page.

Another important point about home pages it to never stop modifying it. Reviewing your log files once your website is up and working can help you make your home page more user friendly. Updating the links or the colors may improve the appeal or ease of use to your site. Remember that everything can be changed, and you don’t have to settle with something if it’s working.

Compatibility

Features do not always display the same way in different Web browsers. It can be useful to check a created page using more than just one browser, to ensure that the page displays correctly for a wider audience. Completed HTML code can be validated by visiting validator.w3.org. Saved HTML code can be uploaded and checked for accuracy. Any issues with the syntax of the HTML will be listed, as well as suggestions for changing the errors. This eliminates the need for a person to search their own code for errors after attempting to display it in a browser.

Design Considerations

Usability

Usability is defined as the ease of using the website. This could be for the intended audience of the website (see Audience), or it could be determined by the industry or business standards needed for websites. Usability of websites has gone through different definition changes with the evolution of the internet. In its early years, many people did not know how to navigate through websites or read the information provided. This made the website unusable. Now, people look for the easiest possible access to whatever information is needed.

Usability means Communication

Websites are a form of visual communication, serving multiple purposes. Websites can be informative, persuasive, long-term, advertising, or entertaining. Usability is determined based on the goals of the website.

If the website accomplishes its goals and communicates the necessary messages, it can therefore be considered usable.

Developing Usability

Starting to test a site before it is built will help avoid some problems before a lot of effort is put into the site. Plan on doing usability testing in focus groups to help you prepare for a better, more user friendly site. If you do not have access to a focus group, you can print out your ideas and share them with family and friends and ask for their insight. Some points to keep in mind when beginning your site are:

• Find out what people expect from your site. Customers may want something different than what you were preparing to build.
• Wording that you use will be important in how effective your site will be. If you begin testing early, you can find out what words relay your message better with your audience.
• Customers will provide you with good ideas. Testing with customers will give you ideas that you may not have thought of.
• Use descriptive headings, bold words, and bullet lists for easy reading
• Incorporate links and resources for more information
• Add pictures, charts, and graphs to enhance communication
• Avoid adding unnecessary information, pictures, sounds, or colors that are more distracting than helpful
• Test the website with audiences to determine usefulness

Testing is key to building a website. You must be willing to listen to the input of others, friends or potential customers, so you’ll have a better site from the start.

Appearance

Appearance should be aesthetically pleasing. One that is easy to look at and maneuver. Tasks (what the user has come to this page looking for, such as an email address or information about an event) that are most important and or most commonly sought should be the main focal points of a web page. Whether it be certain colors driving that importance, or size, or placement on the page, even directional line guiding you to that point, the important tasks must not become secondary. In other words, they should stand out more, not become secondary to an image or a background. Everything on your site should have a purpose, a reason for being where it is and looking the way it does.

Pictures and colors are important and interesting, but far less important than the content. This is true for any web page. The user must not get confused upon entrance to a site. They should know where they need to click (and understand what will come from that click) and not be distracted by images. Unless it’s intended, images should be minimal and only help PUSH the contents importance, not overwhelm the page. As such, it is the web designers job to make sure that doesn’t happen. Be it by Layout (see layout) or by visual distractions, forced eye movement using line or color, or by any other means deemed worthy by the designer, the content should be seen first, images second or third.

Visability

Visibility could be considered the most important aspect of website design. People must first find the website before they can view it. Most often people find websites through search engines.

Here are some tips to increase visibility:

• Add text to pictures
• Check the html code for errors
• Use relevant title tags
• Use navigation that all internet users are able to view
• Get rid of duplicate content
• Do not use hidden text

Layout

The layout of a website should be as simple as possible. Extra fluff will only distract the user and cause confusion. You want your site to be visually pleasing, but first and foremost, understandable. The user is at your site for a reason, if the layout isn’t successful, the user will most likely leave the page and look for their information elsewhere.

Things to keep in mind while creating your layout:

• Start with a wireframe; use simple boxes and lines to organize your page. Pictures should be an afterthought.
• Think of what you want the user to see first and what is the most important. Make those the biggest, the boldest, the most colorful, anything you can think of to draw attention (but be careful not to overwhelm your users)
• Always remember, as accustomed, most cultures read from left to right, up then down
  • Put your logo in the UPPER LEFT-HAND CORNER to draw the user into the rest of your page
  • Put your least important info (contacts, outside links, site map, related info, etc.) in the bottom left hand corner. People wont miss it, but they will have gone through the rest of the page before wandering into that corner. This prevents the viewer from seeing things they may not be looking for
• Try to draw your viewer through your page at a downward diagonal from the upper left hand corner to the bottom right hand corner. If this is the way you design your information, your viewer will see that the things in that diagonal first. Then they will proceed to see any other information you have placed strategically throughout your page
• If you’re new to wed design, I’d advise sticking to a custom layout with title in the upper left, tabs across the top left (leave space under the logo before you insert your tabs, logo’s need room to prosper), scroll bar down the right side, buttons are semi 3D (afford clicking, let the user know “hey, I’m clickable, I have more information about this on another page.” People scan for things that stand out, if something doesn’t look clickable, no one will try to click on it)

These are just some basics. There are far more things to think about before achieving a successful web page, but this is a starting point.

Be Search Engine Friendly

Title Tags

The title tag plays an important role in any web page. The text that is placed inside the title tag becomes the name of the page, which can be seen in the browser toolbar. For example, if you are looking at Google’s website, the title of the page will simple be “Google.” Titles are helpful because they allow the user to easily see what websites they have open by simple looking at the tabs in their web browser. The title tag also provides a title for the page when it is added to favorites and displays a title for the page in search-engine results.

In HTML, the title tag lives inside the head tag. Similar to all other HTML tags, it is opened with <title> and closed with </title>. Between the two tags, the creator of the HTML document can place whatever text they think best identifies the web page they are creating. For example, the Google title would be written as <title>Google</title>.

Body Tags

The body tag defines the body of an HTML document. This is where all of the content of an HTML document is placed. This includes text, links, images, tables, lists, and anything else that the page needs. Everything that can be seen when looking at a web page is inside of the body tag.

While the body tag is written in the same manner as all other HTML tags, it almost always is more than one line. For example:

<body>

Document content

</body>

Each line in the body is usually a single element. For example, one line might be a link and the next line is a picture. Splitting the body in to multiple lines in this way makes writing and editing the HTML much easier because it makes everything easier to see individually. In addition, lines can be indented to make the document even easier to read and edit. For example:

<body>

<h1>Heading</h1>

</body>

This also helps the creator of the HTML document easily see if all the tags are properly opened and closed. While splitting the HTML into different lines and indenting accordingly is recommended, it is not required.

ALT Tags

META Tags

The <meta> tag provides metadata, or information, about the HTML page. Some things commonly found in the <meta> tag are the page description, keywords, author, date created, and any other data that the author wishes to be included with the document. While it is never visible on the web page itself, it can be seen and used by computers and search engines. The <meta> tag is always placed in the <head> element of an HTML document.

Unlike many other tags in HTML, the <meta> tag has no end tag. That is, all of the information included in the tag is placed within the brackets. For example:

<meta name=”keywords” content=”HTML, CSS” />

In this example, the <meta> tag is telling the browser that the keywords for the HTML document are HTML and CSS. The name and content fields can be any information that the author wants to include. If the author wished to include the date the document was created, he or she could write

<meta name=”created” content=”3/28/2012″ />

This makes the <meta> tag very valuable when one is creating and organizing multiple HTML documents.

The <meta> tag can also tell browsers to perform certain tasks, such as reload the page. To do this, one would simply write:

<meta http-equiv=”refresh” content=”30″ />

This tells the browser to reload the page every 30 seconds. In addition to this, the <meta> tag can also tell the browser how to handle cookies and specify the text direction, and many other things.

References

Concepción, Anne – Marie. Professional Website Design From Start to Finish. Cincinnati: How Design Books, 2001.

Heng, Christopher. “How to Create a Search Engine Friendly Website”. http://www.thesitewizard.com/sitepromotion/search-engine-friendly.shtml. April, 11 2010.

Kyrnin, Jennifer. About.com Guide to Web Design. Avon, MA: F+W Publications, Inc., 2007.

Niederst, Jennifer. Web Design in a Nutshell. Sebastopol, CA: O’Reilley and Associates, Inc., 1999.