Websites Overview

Written communication is a significant and an important aspect of technical writing. It is your responsibility as a technical writer to know the accepted structure and format of various types of methods of written communication in order to provide readers with clear and easy access to information.

This module focuses on designing websites, affording easy access to information and respecting cross-cultural audiences.

Considerations for Website Writing

Daniel Riordan, in Technical Report Writing Today, reports that “[t]he web is one of the primary means of communication today^[1]. Riordan adds that “[m]illions of people use it every day to find information, to purchase items, and to entertain themselve^[2] A single web site can be information that is organized on one page or a single web site can be information that is organized over several pages^[3]. Regardless of the amount information on a web site, the web design needs to give the reader clear and essay access to information just as with any document. As Riordan emphasis, unlike traditional documents in which a reader progresses through following a structured path from the beginning to the end, after reaching a Website’s home page, a reader can navigate the site in may different directions. Therefore, special attention needs to be given to layout since each web mode does not have the traditional sub categories^[4]:

In addition, more than the design of any other document, a web design needs to pay careful attention to addressing a cross-cultural audience since a website is not limited to specific space.  Therefore, make sure to avoid using idioms and pronouns. It is almost impossible for other cultures to translate idioms; referencing pronouns to their intended nouns is especially difficult for non-English speakers. In addition, a major consideration for effective cross-cultural communication is the referencing of time formats, dates, weights and measurements, telephone number formats, address formats, currency, and paper size ^[5].

Website Design

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 a home page is 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.

Visibility

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.

Page Design

You can enhance readability by giving some thought to the design of your documents. By using headers, lists, bullets, and other design elements, you can reveal your organization to the reader and emphasize key points. Below are page design guidelines you should consider when writing print or online documents. Your design can underscore your message. Be sure to consider these guidelines in the context of design principles.

Design Pages to Facilitate Scanning

According to usability research conducted by Sun Microsystems, “Seventy-nine percent of Web users scan pages; they do not read word-by-word.” This finding suggests that you should design documents so they can be scanned by your readers.
You can create more scannable documents by:

1. Following a deductive organization (i.e., putting purpose, significance, and results in your introduction).
2. Using page-design principles to emphasize the message and organization (e.g., using bullets, lists, and illustrations to highlight key points).

Use Design Elements to Highlight Your Message

In the example below, notice how your eye is drawn to the blue header and the boxed elements. In these spaces, you can highlight the important part of your message.

Headings

For some genres of documents, headings would be considered too impersonal or too technical. For example, you certainly don’t want to see headings and bullets used in a suspense novel. Increasingly, however, headings are used to help readers scan documents.

Even vague headings like Introduction, Results, and Discussion can be useful: They give readers a sense of what is covered within the section. Better yet, descriptive titles cue your readers about your stance on the content of sections. For example, rather than Introduction, Results, and Discussion, you could write “Why Are Headings Important.”

As previously discussed, highly skilled readers tend to scan through documents on first reading, noting the content of your headings. This gives them a sense of your overall message. An additional advantage of headings is that they create additional white space.

Word processing programs enable you to highlight text and then define text as a level 1 heading, level 2 heading, and so on. Using style tags you can change the size or color of the heading. The advantage of using style tags is that you can change all level 1 headings with ease rather than going through and changing every level 1 heading. In other words, if you tagged text 15 times as an H1, and then you edited the look of that heading, your changes would ripple through the text, changing all 15 headers. Additionally, Microsoft Word and Corel Word Perfect can use the style tags as hyperlinks.

Results from readability research indicate that readers have difficulties with more than three levels of headings. When you use more than three levels of headings, readers become confused. Also ensure that all of your headings are equal grammatically. For example, headings can all be questions, verb phrases, or noun phrases, yet you cannot mix together questions, verb phrases, and noun phrases.

Level 1 Heading

Level 2 Heading

Level 3 Heading

• Bullets

Many readers and writers love bullets. Some people even claim they think in bullets. Bullets create emphasis. They focus the reader’s eye on the bulleted material and they break up textual space.

Using a word processor, you can easily adjust the look and feel of bullets, making them ornate or simple. Again, it’s best to use the bullet style tag so that you transform the look and feel of your bullets with a single key stroke as opposed to needing to reformat each bullet separately.

Below is a humorous translation from Moby Dick to illustrate the “get to the point” technical style of the Web to literary discourse:

Lists

Lists share all of the positive attributes of bullets: They create the white space readers love, placing emphasis by drawing the reader’s eye to what you want to highlight. Yet lists are appropriate when a series of steps is being presented. Unlike bullets, lists imply you complete item 1 before moving on to item 2.

Using lists and numbering sections of documents is very common in legal and technical genres where more than one person is writing the document or where litigation may follow. Once again, use the style tag for lists in order to have control over your document.

Special Page Design Considerations for the Web

Have you ever wondered why many books and magazines have narrow text columns? Alternatively, why are so many Web pages short, about screen length?

Readability research has found that impatient readers don’t want to turn their heads back and forth to read. They want to scan the document, reading straight down the page without any head nodding! Impatient readers don’t want to use scroll bars, either.
Of course, readers’ interactions with texts are in a state of flux. Some readers may actually prefer long documents because they can be easily printed. However, as a general rule, researchers in the field of usability analysis and interface design suggest that you limit your content to properly fill the screen page of a monitor set to

• Maximum width = 640 pixels
• Maximum height = 480 pixels

Of course, modern monitors, powered by computers with video boards, may be set to display many more pixels on a page. The standard, in fact, is probably moving to

• Maximum width = 1024 pixels
• Maximum height = 768 pixels

Pictures and Photographs

Use pictures and photographs to catch the eye of your audience. The expression “a picture is worth a thousand words” is more than a truism. Images can convey powerful emotion. Images can illustrate a process or capture a moment with precision (such as a tight end catching the football on the goal line).

People who shun principles of design, who argue words alone should be sufficient, are really not in touch with the expectations of today’s readers. Perhaps because today’s readers are bombarded with information, they tend to be especially receptive to pictures and photographs.

Select appropriate images

Images are not inherently good. In fact, images can be detracting. You don’t want to pour images into a document that are unrelated to your subject. Because readers’ focus will be drawn to the images, be sure they are appropriate to your audience and purpose.

Graphics

The following summarizes common graphic formats, distinguishing bitmap images from vector images.

What are bitmap images?

GIFs (Graphics Interchange Format) and JPEGs (Joint Photographic Experts Group) are bitmaps; they use pixels to display colors. In other words, bitmaps use a grid of squares, and each square, each pixel, can represent a color.

Different computer monitors have different numbers of bits they can display for each pixel. A bit is the smallest amount of information stored by a computer. For example, a 2-bit monitor can display two colors for each pixel–either black or white. An 8-bit monitor can dedicate 8 bits of memory to each pixel to represent a color, whereas 24-bit images use 24 bits of memory for each pixel to represent a color. While monitors differ, you can typically count on a monitor having between 72 to 100 pixels per inch. As technology evolves, the quality of monitors will expand, and so, too, will the quality of graphics.

When you plan to represent an image on a page that will be printed, you need it saved in at least 300 dpi (dots per inch).

When users make a bitmap image larger, the computer guesses where to put new pixels between the old pixels, resulting in a blurry image.

GIF (Graphics Interchange Format)

Developed by Compuserve Information Service in the 1980s, GIFs are the most common format of Web graphics on the Internet. GIFs can present 8 bits or 256 colors, using the Internet color palette. Because they do not display millions of colors, GIFs can download fairly quickly. Conventional GIFs download one pixel at a time, while interlaced GIFs display the overall image fairly early in the download, giving the reader a blurry image of the graphic, and then move from blurry to sharp as the image downloads.

JPEG (Joint Photographic Experts Group)

JPEGs provide a superior image to GIFs because they can display 24-bit, true-color images. While GIFs have 8 bits of memory dedicated to displaying a color for each pixel, JPEGs have 24 bits of memory dedicated to displaying a color for each pixel. Thus, photographs and drawings can be rendered more accurately by JPEGs.

JPEG files are larger than GIF files, yet you can typically choose different compression file sizes in graphic applications. For example, you can make JPEG file sizes 100 times smaller than the original file size. Each time you compress an image, you erase information, so you need to be careful that you do not so overly compress an image that it becomes worthless. JPEG compression tends to degrade computer-generated graphics.

PNG (Portable Network Graphic)

According to Web Graphics and Presentations, PNGs were designed for the Internet to have all of the benefits of GIFs, yet to

• Provide superior compression and interlacing. GIFs can display the outlines of an image once it receives 50% of the information from the file. In contrast, a PNG image is recognizable once 25% of the image is available.
• Create smaller files. PNG files are 5 to 25% smaller than equivalent GIF files.
• Allow users more than one color for a transparent background.
• Compensate for differences in gamma–that is, the level of contrast in an image. PNGs can be displayed equivalently on Macintosh and PC platforms.

At this point, however, PNG files cannot display animated images.

What are vector images?

Vector images use geometrically defined shapes such as lines, arcs, or polygons, which are used to represent images as opposed to pixels. When vector images are enlarged, they do not degrade. The computer doesn’t need to guess about where to add additional pixels. Instead, the geometric shapes are simply scaled in larger or smaller formats, without blurriness.

Vector images are useful to display graphs, charts, and diagrams. They allow users to focus in on a part of the diagram, to magnify some part of the image. Vector images are generated by spreadsheet programs, 3D applications like AutoCAD.

Typography

Understand design principles that are important for both paper and Web documents.

Font selection matters. Even the font you display your documents in can have powerful consequences. Some fonts can distract readers from your message while others draw in the reader’s eye, bringing the reader’s focus to your text.

1. What are the Font Families?
2. What is the Difference between Serif and Sans Serif Fonts?
3. How Should You Mix Different Font Families?
4. Strategies

What are the Font Families?

“Fontophiles” tend to have different names for font families. Below are some of the more commonly defined “font families” (see left column) and a discussion of their uses.

What is the Difference Between Serif and Sans Serif Fonts?

Serif Fonts

Serif fonts have little tails (serifs) at the ends of each letter. Serif fonts include Times New Roman, Courier New, New York, New Century Schoolbook, and Palatino.

Serif fonts provide a more traditional, conservative appearance. Readers prefer Serif fonts when large text blocks are displayed. Times New Roman is one of the most popular Serif fonts because it is very legible on the computer screen and prints very well.

Sans Serif

In French, “sans” means without. Sans Serif fonts lack little tails at the ends of each letter. Sans Serif fonts include Arial, Geneva, Helvetica, and Comic Sans MS.

Readers find Sans Serif fonts to be less readable than Serif fonts, so writers seldom use them to set long blocks of texts. Used in contrast to Serif fonts, Sans Serif fonts can catch a reader’s eye. Knowing this, advertisers use Sans Serif fonts to set headlines and call out text.

Mixing Font Families

Mixing font families can be tricky. If you include too many disparate fonts, the page will appear to lack focus (see example below). Readers may tell you your document reads like a puzzle. It’s giving mixed messages.

Designers typically advise that you should use no more than one Serif and not more than one Sans Serif font for each page.

Video

Add video to enrich or supplant printed texts.

New communication technologies enable authors to incorporate streaming multimedia into their webs.

Writers may provide video to:

1. Underscore the content of the print text, illustrating key concepts.  For example, an agency hoping to secure funds for hungry people could show video of their living conditions.
2. Illustrate the content of the printed text.  A researcher could provide video of people he or she interviewed.  A technical writer could provide a screen-movie to show users how to complete instructions.
3. Inform or persuade people who respond more positively to an engaging speaker than printed texts.

Look at several websites to see how they integrate video into the home page and other pages.