Web Authoring Boot Camp by L.J. Bothell - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

 

Web Projects

First, understand that a website is a collection of web pages that hyperlink to each other, use a consistent theme, strive to serve a basic purpose, and offer cohesive content that communicates to website visitors. It could be YouTube, Amazon, your local used book- store's website, your blog, the local community college, etc. These sites share one thing in common – they are a collection of hyperlinked pages that are mostly related to each other in subject coverage and theming.

Axiom #1: A website is a method to communicate key information to and prompt action from an audience, and all design, content, and navigation options must serve this axiom.

How do you get from here (total noob and/or developing web author) to there? We have a LOT to consider. Check it out!

Website Planning

What do you need to consider in developing a website plan? For typical website construction, the basic aspects you need to consider include:

The usability: The site should be visitor-friendly, with the interface and navigation made simple and reliable.

 

The content: The substance and information on the site should be relevant to the site and should target the audience(s) that the website is focused upon.

 

The appearance: The graphics and text should include a consistent and clean style that flows throughout the website. The style should be professional, appealing and relevant, primarily to the target audience.

 

The visibility: The site must also be easy to find with major search engines and advertising media.

 

Usability

Imagine a website where the visitor knows exactly what page s/he is on (and why), can navigate really easily and fast to other pages, and gets exactly the information / completes exactly the right task with absolutely no fuss. Sound easy? It can be.

Focusing immediately on web usability is an approach that makes websites easy to use for a visitor, without requiring them to have any specialized training. The visitor should

be able to intuitively relate the actions s/he needs to perform on the web page. The broad goal of usability is:

Present the information to the visitor in a clear and concise way.

 

• Give the correct choices to the visitors, in a very obvious way.

 

• Remove any ambiguity regarding the consequences of an action.

 

• Put the most important thing in the right place so the visitor can interact as you want.

 

Usability is often confused with accessibility. However, it comes at a more general approach- ensuring everyone (disability, disadvantages, or totally able) is able to use the website in the most straightforward manner. This includes having things that are easy to find in prominent spots, ensuring common or repeated tasks on a website can be shortcut- ted, and most especially designing the GUI (graphical user interface) so that anyone can easily and intuitively “get it”.

Usability requires planning for layout and design concepts, and also for the actual content organization itself. For instance, the logical flow of information, in terms of important to useful to nice to filler, helps you determine what goes above the fold on a page, how to divide with subheaders, and how much content text to include on a page.

Website Priorities

Knowing the different priorities a website may have, and remembering who the site is centered around, is important to making the site usable and ultimately successful for the client's purpose.

Visitor-centered: Engaging, successful, and marketable web design comes from remembering who really uses the website, and who puts the bread and butter on the client's table – the visitor. The visitor will make the decision to stay or leave, to bookmark or forget the site, to order or move to a competitor, to come once or return again and again.

Client-centered: The client naturally has important communication goals – marketing, promotion, sales, influence. These purposes do drive the nature of the site. At the same time, clients often need to be tamed to help their website achieve their purpose - Axiom #1: A website is a method to communicate key information to and prompt action from an audience. A web author's job often includes keeping the client's desires from getting in the way of the visitor's needs.

Designer-centered: In other words – You. Designers get into this business be- cause they are creative and need, in one way or another, to create attractive order out of chaos. We can also get excited about trying new layouts, techniques, and content, and that's great. It can also be a problem if our design sensitivities and desire to stand out overwhelm Axiom #1. The website urges visitor action, and the visitor comes first.

Website Purpose

It is essential to clearly define the purpose of the web project. You can/should create a purpose statement focused on what the website will accomplish and what the visitors will get from it. A clearly defined purpose will help the rest of your planning process as you identify the audience(s) and put together the design and content of the site.

You also want to work with your client to understand both short and long term goals for the website. The short term includes version 1.0, so to speak, where you plan for the main launch and usage for the present. Longer-term planning is also important since you and the client need to account for the future when expansion, modification, and improvement will need to happen. Could be six months, could be two years, but you need to plan for a website that can progress and expand cleanly for visitors and the client's business plan needs.

Ever seen a sprawling, disjointed website with lost links and different theme interpretations? You want to discourage this by planning for the future of the website as well as the current launch.

You also need to determine what the primary aim of the website will be. What is it sup- posed to do for visitors? Essentially, it should aim, as defined by the client's business plan, to do one or more of the following:

• Communicate by providing information for the visitors to take away and potentially use. This could be news, class listings, a café menu, Wikipedia, etc.

• Influence by providing content that influences the visitor to act in a certain way.

This can include product reviews, repair instructions, tips and tricks, an opinion blog, interior 360 view of a house on the market, etc.

• Prompt by providing content and activities to get the visitor to do something related to the website itself. This includes registration for newsletters, ordering products, paying bills, making travel reservations, going to a free band show, etc.

Website Audience

Defining the website audience(s) is perhaps the most important step in your website planning. The audience is the group of people who are expected to visit your website – the market you are targeting. These people will be viewing the website for a specific reason, and you need to know exactly what they are looking for when they visit. You may also have more than one key audience, such as if the website targets more than one age group, or customers for different product lines.

Like the purpose, you need to clearly define your understanding of what visitors want to do or feel when they come to your site in order to help them fulfill its purpose. While there is a certain amount of guesswork, research and your discussions with your client will help you identify the target audience. Consider:

Audience Characteristics: Age, location, income range, gender, education, language, and other visitor discernments.

Information Preferences: Reading bulleted lists, show-and-tell, video, instructional, newsy, quick & dirty, and so on.

Computer Specifications: The likely computer speed, monitor sizes, various internet connections, accessibility tools, and other things that impact how fast the visitor can get the information download and use the information.

Web Experience: The likely experience level of the audience with items like navigation, forms, logins, and other ways they may interact with a website.

Information Flow

You need to plan on all the types of information you need to include in the website. While the client should provide the content (text, images, etc.), you need to know what this will be so you can plan how to organize the website. This impacts how you:

• Create the information flow for the visitor, such as the layout and types of pages.

• Create the navigation and prioritize what the visitor sees first.

• Organize the information the visitor needs to act upon.

• Place text content, navigation, images, and overall communication items to fulfill the website's purpose.

Key information points you need to consider include:

Inform or educate: Break down by presented information, where to get more information, resources/links, etc.

Product sales: Break down by products, features/benefits, how to buy, testimonials/how to use, and so on.

Marketing and promotion: Break down by services offered, reputation points/ testimonials, how to contact, why the service is different from similar services, etc.

Edutainment: A combination of information and resources, networking/contact information, interacting with information (like media pieces), games, etc.

Website Content

You need to collect a list of the necessary content, then organize it according to the anticipated audience's needs. This requires attention to detail, since you need to also consider any items that do not support the defined purpose or accomplish target audience objectives. Then you need to remove these unuseful items.

Your client may allow you or wish you to interact with potential visitors at this point. This can be done through creating focus groups, doing “potential content” interviews, content and or navigation surveys, and using other marketing and usability tools. For in- stance, it can be very useful to test the content and purpose of a site on a focus group and compare the offerings to what the audience actually needs.

Once you have a clear idea of the content list, you need to organize the basic information structure by categorizing the content and organizing it according to visitor needs. For in- stance, for a product site, you could organize by

• Product information,

• Product support and contact info,

• Testimonials, and

• Purchasing of the product.

You could further organize the product information into product lines, featured products, discounts, and a gallery of product images.

Once you define what the categories will likely be, you should give each one a concise and descriptive title that will become a link on the website.

Website Page Types

Websites offer two types of web pages; static and dynamic. Your website may have primarily static pages, such as for a portfolio website, a brochure site for projects, or busi- ness listing sites that provide information but don't actually sell from the site. You can also design dynamic pages, especially if your client wants to sell from the website, you need an updating blog, are including contact forms, or displaying lists of information you want people to be able to sort and filter. Let's look at both types of pages.

Static pages

These look and act the same whenever a visitor enters them. They are like pages in a brochure, presenting information and prompting but not actually expecting the visitor to do anything but read on or visit a linked page that might be dynamic. While you can add little semi-dynamic touches, like embedded media, a rotating phrase of the day, or a slide- show, the actual web page doesn't change content and layout with every request unless a human (web master/programmer) manually updates the page. A simple HTML page is an example of static content.

Dynamic pages

These adapt their content and/or appearance depending on the visitor's interaction or changes in the computing environment (visitor, time, database modifications, etc.) For instance, ever notice how Amazon.com offers you reading material based on your preferences once you log in? Submitting a form, logging in, answering a poll, sorting a book list, and purchasing a product are dynamic page activities. These kind of pages need client-side scripting like JavaScript, and/or server-side programming, like PHP, Perl, ASP. net, etc. Simple forms can use HTML and a CGI form handler without higher programming languages.

Website Page Categories

Based on your information and category organization above, you can start planning what the actual pages and navigation will look like. This is where you consider how to easily break down information and activities into small chunks for easy reading and action. There are many kinds of pages that websites include, and here are examples.

First, you will always have some basic pages, regardless of the information flow you have decided to follow:

• Home page – also known as the welcome or landing page

• Disclaimer page

• Contact information

• Site map

Then, based on the information flow you have chosen, you can mix and match the pages as they relate to the categories you decided upon:

• About Us

• Products

• Services

• Testimonials

• Instructions/How to do

• Purchasing

• Networking Info

• Gallery

• Privacy Policy

• Contact Us

• Directions

• News and Updates

• FAQs

• And more

A good rule of thumb is to, based on your category needs, choose 5-7 pages for your primary/main navigation, including the Home page. More than that amount of primary navigation will confuse the average visitor, which is why you can consider sub pages for important but not high-priority information.

Website Page Levels

Main Level

Main level pages are the ones we just discussed – the priority categories your website requires to reach the audience. These are the pages which will be your primary navigation links. Your home page is one of them, and you would choose the others based on the website's purpose. For instance, for a products website, you might include the products, testimonials, FAQs, purchasing, and Contact Us.

Second Level

Second level pages also include important information, but are mostly sub categories of your main pages. You would not list them in your main navigation, although if you design drop-down navigation, the first sub level, or this second level, would be listed there. For example, for your products website, your Testimonials section might include an industry reviews page, a customer satisfaction page, and a page of news article links where your product has been covered.

Third Level

You may find, depending on the size and complexity of your website, that you have a third (fourth, fifth, etc.) level of pages, like tree branches with smaller twigs. These you would definitely not place in your main or drop-down second level navigation. These can be accessed from your website's site map, from occasional inline links, and from the first and/or second level pages themselves. These third level pages, and ones at even lower levels, would branch out of the secondary level pages from your main categories.

Utility Pages

Utility pages are, simply put, necessary pages on your website that do not relate to the main categories. These include your Legal/Disclaimer page, your Site map page, and can include your Contact Us page if you want to link that somewhere other than the main navigation.

Navigation Order

The navigation order is also critical. You want to draw the visitor in with clear choices so s/he can move to the needed category/page link, then from there move to the next level and/or action to be taken.

Main navigation (top level) takes visitors to the main categories (pages) of the website where they can learn more about the categories of information and move to the acting or decision-making step. On a book products website, Mystery could be a top level.

Sub navigation (second-level) is for sub categories of the main section. In the case of a Books website with a main level of Mystery, sub navigation might include thrillers, cozies, forensic, etc.

Footer navigation is for utility and client information links - website support links. These include pages like privacy rights, disclaimer, email link, links to a contact form, link to directions, the website site map, etc.