At RJI, we’ve been working to improve how we share information with our readers.

Subscribe

Objectives

By the end of this lesson participants will:

  • Create a plan for a news website
  • Create webpage templates
  • Create simple CSS instructions
  • Create an initial web home page for the site
  • Conduct usability testing
  • Evaluate the site’s search engine optimization

The Internet and Websites

Although some people may use these terms as synonyms, they are not. Think of the Internet as a highway system along which vehicles (Websites and other communications) travel. The Internet is a relatively new communications system -- less than a generation old. Its processes are evolving. These communications vehicles include Websites and pages, RSS feeds, wiki, blogs and "cloud" computing.

Internet services

Web pages. Web pages began as static pages. These are pages whose content change only when the editor of the page changes the content. Static pages are still the dominate from of web page display today. The developing alternative to the static page is the dynamic page whose content changes depending on the interaction the user has with the page. For example, moving the mouse over a part of the page or completing a keyboard action produces different content within that page. The user may also complete a form. The subsequent pages depend on what the user inserted in the form.

Content Management Systems (CMS). In the early years of the Internet websites were a collection of static web pages; however, the rapid expansion of content made the management of those sites impossible when content was changing rapidly as in the case of news sites. The replacement process uses a database to store the pages, either static or dynamic. The tools that manage this process are known as content management systems. These systems manage the acquisitions (creation) phase of web page content, the storage (database) functions, and the retrieval activities to display the content in the appropriate format and medium -- web, mobile, print.

The management of a CMS is beyond the scope of this workshop. That responsibility will generally be carried out by technicians in the organization's information technology department, or the maintenance of the service will be leased from a technology services provider. For purposes of this lesson, it is important to understand the operational concepts of the CMS. It will often have four or more levels of access and authority. A CMS administrator will have access and responsibility for the entire system -- both the technical and content sides. An editor will have responsibility and access to the content side of the operation. Authors may create content and edit their own work or that of their teams. Contributors/reporters may create content for the database, but it can not be published without and editor's review.

The purpose of having all of the content reside in a database is the flexibility of using it in multiple ways. Formerly, content presented in a web page was stuck within that page. If an editor wanted to reuse that content, the editor would have to create a new page. With the database, each element of content -- graphics, photographs, text, video, is stored with a separate identification. When a specific page is created, it calls for a copy of the content to be displayed as part of that page. The same content may be displayed elsewhere on the site simultaneously.

To make this highly flexible system work effectively, the site must have developed and use a consistent naming structure. See the discussion on information classification later in this lesson.

Social Media. In the first generation of the World Wide Web with its static pages, there was little opportunity for users to much beyond reading the pages, click on links to open additional static pages and occasionally enter information in a form that was sent to a server for later processing. This process was essentially a one-to-many distribution system, similar to print and broadcast media. The development of Web 2.0 has changed that. the chief addition of Web 2.0 is the creation of social media, a many-to-many distribution system. With Web 2.0 software everyone can be a publisher and editor. In fact, most people who have used the web consider themselves to have published content -- family pictures to be shared with distant family members, comments on a blog, information sharing among groups of friend in a social network. Here are illustrative social media services that have emerged in the Web 2.0 era:

  • Weblog. Blogs (Web Logs) are a CMS that displays it content on a web page. Blogs enable users to post content -- text, graphics, audio and video and allow other users to comment on the initial post or open new topics themselves. Blogs can be standalone web sites or incorporated within larger web sites. There are free or open-source services that anyone may use --blogger.com and wordpress.com, among them.
  • Wiki. Wikis also enable individuals to post and edit web content. In contract to a blog that restricts a user to posting comments or additional content, the wiki permits groups of users to edit a single body of content. This can be an open-to-the public process or one may use the software inside a private network for collaborative work within a team. The best known application of the wiki process is the Wikipedia, the free, open-source encyclopedia written by the public.
  • Social networks. Social networks are web-based services that permit individuals to establish connections with other individuals and share information content. Facebook and Myspace are the best known social networks at the time of this writing. The predecessor of these services was the list-serve that enabled e-mail users to receive and post comments to and from other members of the group.
  • File sharing. File sharing programs enable individuals to post video, pictures, audio, text on the web and share it with the public at large or with selected individuals or groups they grant permission to access the content. The best known of these programs are YouTube (video file sharing), Twitter (text sharing), Flickr and Snapfish (photo file sharing).

Other Internet communications tool.

  • E-mail. E-mail was an early Internet communications tool. It has become a universal communications process among those who have access to the Internet. E-mail provides one-to-one or one-to-many communications. The attachment process permits users to send and receive multi-media content and other text documents.
  • Smart phones. The development of high speed and wireless Internet connection and the advancement of mobile phone technology have begun to bypass the home computer as a primary reception and distribution platform for content. Smart mobile phones have substantial memory, color display, and memory capacity to do any of the functions of the desktop and laptop computers and even more with the built in cameras and records that enable them to serve as publishing platforms.
  • RSS. Really Simple Syndication (RSS) is a distribution process that sends headlines, links and short summaries of content to subscribers. The feeds are displayed on web browsers, special RSS readers, some mobile phones and web portal services like MyYahoo or iGoogle. The feeds are intended to announce new content posted on the home web site or blog.
  • Podcasts. Podcasts are downloadable audio and video content that can be saved and played on a user's computer or mobile device thus allowing the user access to the content without having to be online while viewing or listening to the content.

Cloud Computing. Cloud Computing is a process that uses software (word processing, spreadsheets, graphics programs, etc.) that are located on a remote computer server in contrast to having those programs on individual computers or computer networks. The word cloud is a metaphor for the Internet. This is similar to the early days of computing when programs were stored on a central processing unit of a computer network and the keyboards and monitors at the desks of workers accessed the software and stored content on the central processing unit. The equipment at the desk had no long term memory.

Elements of Website Design

There are two primary elements to take into account in the process of planning and evaluating a website: Its usability and the organization of the content and structure of the site.

Usability. Usability is a concept that measures how effectively the site accomplishes its purposes. Effectiveness can be measured in both quantitative and qualitative terms. How quickly and easily do users find what they need at the site and how quickly and easily do they navigate through the site? In addition, does the user learn from his or her visit and is the subsequent visit easier still? Is the experience pleasant or frustrating?

Testing the usability of sites is an important step in the design process. This can be accomplished at several stages in the development. The design team will test the site appearance and function with different browsers. Since users can enlarge or reduce the size of the text displayed on a page, the design team will evaluate the site at these various settings. The team will test the site with users of different physical capabilities to ensure, for example, that video graphics have test subtitles or alt tags (text phrases that describe multimedia content for those hard of hearing). The design team asks individuals not otherwise involved in the project to use the site for its intended purposes. The team observes the actions of those being tested to discover difficulties in their location the navigation, for example. Based on the results of those tests, the design team will modify the design and test again.

The advanced functions of the web use JavaScript, Adobe Flash and other advanced programs. These programs are not universally available on user's computers. Bandwidth users have to download complex programs can also limit access to these programs. Some rely on cursor movements by a computer mouse. This also restricts access for those who must rely on keyboard including users of various mobile devices. Thus, it is essential that site designers take these factors into consideration as they create the site for its intended users.

Information classification. It the site is to be larger than a few individual pages linked from a home page, the design team will need to develop a scheme to classify the information contained in the pages of the site and the CMS. The scientific term for this process is taxonomy -- the science of classification. Designers must plan a hierarchy for the content. What are the major and subcategories of information. The team will develop labels for these categories and apply them consistently throughout the site.

News sites may classify information by the type of stories or by geography -- politics, sports, weather or Africa, Middle East, Asia. A business site might classify content by products, services, clients, stores, etc. The task is to provide a structure that users would expect to find at the site. The classification system that designers select will be translated into the directory for the site.

This process will lead to a preliminary design of the structure of the site. Sometimes a sequence is effective. One might use a sequence structure in a tutorial in which the designer wanted students to move sequentially from one page to the next through the entire lesson. An alternative for a small site can be a spider web structure. Here any individual pages are accessed from a central home page. Users may also move around the separate pages from one to another via menus of links to those pages. A third alternative used for news sites and other complex, content-rich sites is a hierarchical structure. Here are questions for this structure. What are the major pages? What are the subpages? How should they be identified and linked? In this situation, the design must create a more complex structure but one that also provides information to the user about where he or she is within the site.

Wireframing. Wireframing for websites is a design step that creates ink-on-paper or simple line drawings to the page and site design for a website before any of the graphics or other content elements are created. The phrase is taken from the design of 3D images to allow examination of a three dimension object in two dimensions of a flat screen or paper page.

Designers layout with placeholder elements the major categories of information -- logo, titles, navigation elements, links, content areas, etc. -- for the major and subordinate page that will become the template pages for the new site.

Navigation. Designers will need to provide web page users information to enable them to find their ways through a site -- how to get from a primary page to the detail content the users seeks. In addition, since many users will come to a site from a search engine, and the first visited page may be deep within the site, designers must also help users know where they are within the site. Here are aids to help users navigate websites:

  • Primary content links. These are the major information categories that appear in the top section of the websites. These primary content links open the major content pages within the site. They may be displayed as if they were tabs of file folders or may just be words that function as links. Often primary content links will appear on each page of the site with the relevant link for the currently visited section being differentiated from the other tabs or links by color.
  • Graphic identity. The use of consistent color, page layout, text size and function (graphic identity) can provide a visual navigation to aid users in knowing where they are within a site and finding pages they might like to visit next.
  • Breadcrumb trail. A powerful way to demonstrate to users where they are in a site is to display the hierarchical path of links from the home page to the current page. This path is known as the breadcrumb trail. It is a metaphor from a children's story about leaving a trail of breadcrumbs as a path to find one's way home. The trail often appears near the top of the content section of a web page.
  • Owner information. Since web pages can and often are viewed by users separately from the context of other pages within a site, it is appropriate to provide owner information on every page. This includes information about the owner of the site, how to contact the site owners, major navigation elements and search capability.
  • Page title. The page title appears at the top of the browser and is a primary tool for search engines to locate pages. It should describe the content of the page in the context of the site. It will be the element that is stored among a users favorites when the user elects to save the location of the site.
  • Search. Website users are divided in how they seek information from a website. Some are browsers. Some are searchers. Most of people use both techniques at one time or another. Websites must accommodate both.
    Browsers being their visit to a site at the home page and move to other pages by the indexes and menus the site provides. This process is similar to browsing the pages of a newspaper or magazine to see what interesting information one might encounter.
    Searchers come to a site with a specific need for information. They may have found the site from a link on a search engine. Their first stop may be a page deep within the site. If that page is not exactly what the user wanted, he or she is likely to want to search again within the site for relevant content. It is essential that sites provide search capability as a navigation aide on every page. It can be included in the page templates.
  • 3-clicks. Website designers recommend that sites be constructed so that a visitor must click (open pages) no more than three times to find specific content the visitor would be looking for.

Site Style. The selection of colors, page layouts, consistent use of content labels are important design elements that will benefit users. The development of the site style supports the decision designers made about the information classification. here are the major considerations in creating the site style:

  • Naming consistency. The site should have a consistent way of naming content in order to store it, apply an appropriate style, and insert it in the right places on the pages in the site. Whenever possible the names for the filing system within the CMS should mirror the presentation of content on the web pages. If there is a primary content link for Middle East, there should be a primary folder in which that content is stored. In developing the plan for naming content, the designers will create a style guide that defines what are the various headline types, sub-headlines, paragraph content, etc. The actual appearance of those types of copy -- type size, font, color, etc. -- will be specified in what are called cascading style sheet (CSS), described below. With this process, the website staff that creates actual content must think only of what the piece of content they are working with is -- headline 1, 2, 3, subhead 1, paragraph copy, list, etc.? The actual appearance of that content on a web page will be determined in the CSS for that content type.
  • Templates, HTML and Style Sheets. The managers of most CMS services will have created page templates that are used to ensure the consistent appearance of content throughout the site and what are called cascading style sheets (CSS) to specify how text and other elements should appear on the pages -- font, size, color, paragraphing, etc. These are powerful tools that enable a site manager to establish, control or modify changes in many pages without having to write computer code for the individual pages. The process of creating web page templates is similar to that of creating page templates in a word processing program like Microsoft Word. The user creates a page and saves it as a template. When the user opens a new project, the user can select that template, create additional content and this time save it as a word document (.doc file).

Page templates are likely created with hypertext mark-up language (HTML). This is a form of text that tells the browser how to display a web page. HTML instruction are written within brackets (<>). For example <p> would indicate a new paragraph would begin after that insertion. A </p> would indicate the end of the paragraph. Used by itself, HTML can specify the relative size, color and font of type. It can create tables into which content can be placed. It can specify background color for pages, etc. When the web began, it was the primary authoring language. Lately, HTML has been used to create the structure of the page and CSS are used to specify how the content on those pages appears.

The primary structural elements of a page include the headlines, paragraph text, typography emphasis, lists, the insertion of images and links to other content. Below is an illustrative list of HTML instructions. They are presented her to give the participant a concept of this coding. Today's software programs with the WYSIWYG editing programs enable one to cerate pages without detailed knowledge of the coding process.

  • Headlines. These are displayed in priority order from largest <h1> to smallest <h6>
  • Paragraphs are indicated by <p> to being and </p> to end.
  • Line brakes, similar to pressing the enter key on the keyboard in word processing is indicated with a <br>
  • Sequenced lists begin with the code <ol> and ends with </ol> and each individual element of the list begins with <li> and ends with </li>
  • Un-ordered lists like this list of code items begin with <ul> and ends with </ul>
  • A definition list in which the word to be defined is followed by an indented definition begins with <dl> and ends with </dl>. the definition is surrounded by the code <dd>...</dd>
  • An image inserted in the text with code <img src="http://website location of the image/image_name.gif (or .jpg or .png).
  • A link to an audio or video file or another website is indicated by the following code: <a href="http://location of the item/name of item> some text that indicates a link</a>

The advantage of using CSS to control the appearance of page content is that an editor can change the specification in the style sheet and make multiple changes simultaneously throughout the site when the new style sheet is posted. CSS instructions may also be used to specify how pages should appear if exported to a printer or screen of a mobile phone.

Page templates should have a consistent look recognizable as within a family of pages; however, functions of various pages will suggest a variety of spaces for content. A possible range of templates would include the home page, primary section pages, secondary section pages, content pages. There may be a need for a variety of content pages to accommodate text, large an small graphics, video, etc. Designers often begin the design process with the content pages and build the templates back up the hierarchy.

"Above the fold" is a newspaper design term that refers to the prime space on the front page of a broadsheet newspaper. When the newspaper was folded with the name of the paper displayed on top, the rest of that part of the page was prime space. Stories appearing above the fold got more attention than content below the fold. The pattern is similar with web pages -- most of the attention of users is focused on the top part of the page that appears in the screen without scrolling. If pages must be scrolled, the scroll should be vertical. Avoid horizontal scrolls. Users object greatly to those.

The number of content columns may very by site or by the level of the template within the site. A home page may have three content columns. The primary section template might have only two. The content page template might have one or many columns depending on probable content with navigation dependent on the breadcrumb trail at the top of the content areas or the content of the header.

  • Non-visible page elements. The head section of each web page includes instructions to search services, the site's computer service, and the user's browser regarding the contents of the page. Except for the page title, these elements are not visible as editorial content of the page, but they provide important instruction including what CSS instruction govern the display of this page, the page title and keywords. If the user stores the page in a favorites file, the title will be the link to reopen the page. It should be descriptive of the page contents. The keywords listed in the meta tags of the head help search services find the page. The CSS instruction tell the server how to deliver the content of this page to the user who has requested it. 

Web Page Content and Structure

Page Structure. Although the practice of web design is still a young and developing art, there appears to be a convention about basic page design emerging. It presents the content in three primary sections -- header, footer and primary content area. That primary content area is often divided into three columns -- left and/or right columns for navigation, identification and supplementary information and a larger, and often center column for the content specific to that page. The references to left and right below are made for pages in English that read from left to right. The developing practice for pages in Arabic language reverses those references.

  • Headers. The header section appears at the top of a page. It will normally contain the logo or other identification of the page or site owner in upper left corner. The right end of the header will contain some or all of these functions -- search, e-commerce sign in, and help. Across the bottom of the header will be the primary content links for the site. The header may also contain advertising space and editorial content -- breaking news headlines, etc.
  • Footers. The footer section of the page appears at the bottom. It usually contains contact information of the page or site owner, copyright citation, dates of the page update, restatement of the primary content links.
  • Left and/or right content columns. The left and right content columns are narrower than the center primary content column. They contain links for navigation within the particular section of the site in which the page resides (often in the left column), identification of the site owner, supplementary information or links to that information, forms, blogs, etc., and advertising.  The search function may also be located here if not in the header.
  • Center content column. The center content column is the largest of the three content columns. It contains the primary content for this particular page. At its top, will often be the breadcrumb trail showing the location of this page to the site.

Page Appearance. The job of creating the layout for web pages is more challenging than designing the layout in print publications. In print, the designer can specify fixed dimensions, color schemes, type sizes and fonts, etc. While designers can make some of these same decisions using CSS instructions, the appearance of web pages is not entirely in the hands of the designer. Different browsers will display pages in different ways. Users can enlarge or reduce the type sizes. The screen sizes that users have to view pages differ.

The principles of graphic design and their sophisticated application are complex and well beyond the scope of this entry-level lesson. However, some principles are worth noting.

  • The purpose of graphic display is to make it easy for the user to see what is of greater or lesser importance, to easily see chunks of related content or similar functions within a page. Effective graphic design greatly increases user satisfaction with a page.
  • Put like elements together. Users expect items closely related physically to be also related in content.
  • Apply design consistently throughout the site to create a feeling of continuity.
  • Use consistent typography.
  • Simple is better than complex.
  • Chunk information in meaningful blocks.
  • Signal changes in content with subheads.
  • Provide adequate contrast between text and background color. The greater the contrast between these the greater the readability of the text. Black text on white background has the greatest contrast.

A choice designers must make for their site is whether to use fixed or variable (often called liquidpage design. This is an issue because of the display variables that are beyond the control of the designer (See the opening paragraph of this section.). If the designer specifies fixed column widths, the page will display as designed at least on the browsers on which it was tested; however, fixed column widths may work to the disadvantage of users with a greater or smaller web display screens producing wasted space or causing the user to scroll horizontally to see the entire page. The design may also be corrupted if the user enlarges the text size in his or her browser. Finally, fixed width page may not display well at al on mobile devices.

A better alternative in most cases is a liquid page width. This is accomplished by providing no formatting instruction on the width of the page columns or expressing the width as a percentage of the available display space. The variable or flexible page designs will require a greater amount of testing in the design process to select the best design for the multiple ways the page may be opened by users.

Typography. Typography is the science of the appearance of type in print, on the Web or on other digital presentation screens. Typography has two functions -- create a visual impression and deliver content. Its elements include the shape of individual letters (the font), size, color, emphasis, leading and layout on the page or screen.

The actual appearance of digital content is not entirely in the hands of the designer. Users may increase or decrease the size of the type. Their computers may not have the type fonts installed that were specified by the designer and therefore the computer may select "the next best." The best the designer can do is "recommend" typography choices through the use of CSS instructions (See section above on Templates, HTML and Style Sheets.). The wider the intended circulation for a site, the more limited the choices of CSS instructions should be to accommodate the widest ranges of users. It is also imperative for the designer to test the appearance of the pages of the site on a variety of browser and browser settings.

The typography "recommendation" that designers make for their websites will be executed in CSS instructions. The list might include these instructions when designing a website in English:

  • Paragraph text in serif type face
  • Headlines and subheads in sans-serif type face
  • Copy written with normal capitalization -- first words of sentences, proper nouns, etc. Avoid all-capital letter writing.
  • Headline style in with initial capital letter, balance of headline in lower case. Designers may need a variation of this recommendation when using a set of headlines, subheads and sections in hierarchal presentation. In that situation, one of the levels of detail might use an all-capital letter style to signal a change in hierarchy.
  • Background and text colors should produce -- contrast light background than text color. (Black type on white is the strongest.)
  • Leading. This is the amount of space between the top of one line of letters and the top of the next line. For printed copy 11 point type on 13 points of leading is desirable. For web display, leading would be expressed as a percentage of the type size, generally one third more.
  • Separate copy blocks with white space. This is a reference to printing that was done on white paper. It suggests grouping text and leave space between copy elements -- extra lines between paragraphs, larger margins for quoted blocks of text, etc. In web display the background need not be white; however, the principle of separating blocks from copy remains.
  • In English, blocks of text should be left justified with irregular right margin.
  • Text emphasis. In printed copy, one may use italics, bold face, underlining or color changes to call attention to specific words, phrases or sentences. On web pages, bold can be used without issues; however, the other three can confuse users with various navigation features. Underlining is the customary way to indicate a link. Color is often used to indicate links and already visited links in a filed of text. Italic type is much harder to read when used for lengthy bodies of type; however, it is appropriate for presentation of publication titles, and the like as part of the site's style guide
  • Links. Users may find two categories of links on web pages. One is navigation links that take the user to some other part of the page or site. The other is content links that provide additional, supplemental or definitional information. Use a consistent style of these links. This should include different colors to identify links from other content. The color should also differentiate between a link that might be clicked while on a particular page from a link that users have already clicked (visited link).

Copy writing. As a general rule, journalism copy must be written for the scanner. Television and radio copy reaches people who are doing other things while the TV or radio may be on in the background. In print publications readers often flip quickly through the pages of a magazine and look quickly at the content of a newspaper page and before moving rapidly to another page. On the web this process is accelerated. Users will look quickly at the content of a page they have reached to see if the headlines, lists, graphics or other elements suggest it might be worth the user's time to spend a few more seconds or perhaps minutes on that page.

Here are some steps editors and reporters can take to make it easier for users to get value from the page contents:

  • Divide the content of the topic into useful chunks and set them off with headlines that summarize the content themselves.
  • Present content as lists when possible. These can be lists of the major points of a long story. They can also be part of the contents of a major issue -- the voting record of legislators on an important measure, for example. Lists are easily scanned. The list should have its own descriptive headline that, alone, would give the use the gist of the contents without the user having to read further. The same is true for the list of summary statements about the content of the longer story. Each item in the list should be able to stand alone as one sentence summary of that part of the contents of the longer story.
  • Use the inverted pyramid story structure when possible. This provides the most important elements of the story in the first paragraph or two of the story. The lead of the inverted pyramid story answers several of the questions -- who, what, when, where, why and how.
  • Use the Associated Press Style guide for news copy written in English unless the organization has developed its own style guide. Consistency of presentation of the conventions for presenting names, places, numbers, helps regular users understand the information quickly.
  • Choose simple words over complex ones. In mass communications writing in English about 3 of every 4 words, excluding proper names, should be one syllable words.
  • Insert a list of links you suggest that users consider below the related chunks of your own copy rather than inserting them in the middle of your copy. Links often (except when the link is to additional content at your site) invite users to leave your site. Provide brief descriptions of what the user will find if the user selects the link. In this way you will help the user decide whether to use the link.
  • WYSIWYG help. WYSIWYG is an acronym for "what you see is what you get." It describes content creation systems that allow editors and reporters to create web content without having to insert computer mark-up language. These systems work much like word processing programs. With those programs, all the person typing can select is type size, and fount, etc. without doing any programming. For web pages, these WYSIWYG systems permit the editor or reporter to insert special characters -- copyright symbols, quotation marks, ampersands, etc. by using a standard keyboard. The system translates those symbols into appropriate computer mark-up language. Earlier, the editor or reporter would have to look up the particular mark-up language for these special characters. Here is an example of the mark-up language for opening and closing quotation marks -- the "and" -- “and"

Multimedia content. Adding video, audio, slide shows, graphics and animation to the websites can increase the interest, involvement, and learning by users of the site. However, there is substantial cost in the production and display of these resources. Here are the considerations:

  • Bandwidth. Bandwidth is a measurement amount of content that can be distributed to a user in a single time period, usually a second. A computer connected by telephone modem would have a connection speed of 56 kbit/s. A common consumer high speed connection (DSL) might have a speed of 256 kbit/s. Video uses huge amounts of bandwidth. Users may not have adequate bandwidth to download effectively. When many users access the site, it may not have the capacity to serve those users efficiently.
    Internet service providers -- companies that rent Internet access to individuals and organizations -- may set the rental fees based on the amount of bandwidth the users can consume in a given period (often a month). If the site has a lot of audio and video content and many people visit to the site to download the content, the downloads can consume substantial bandwidth. When the maximum bandwidth is surpassed, the ISP may levy additional fees.
  • Compression. All multimedia content is compressed to reduce the file sizes for distribution on the web. The compression process takes samples of the original, often eliminating some or the original data to produce the smaller file size.
  • Formats. Graphics are presented on the web in three formats -- GIF, PNG, JPEG (See the lesson Create Information Graphics.). The primary formats for web animation are .swf for the Adobe Flash software and .svg, the open-source alternative produced by such programs at W3C's SVG software. The default audio format is MP-3. There is more variety in video playback formats although the developing standard is MPEG-4. They include Windows Media Video (.wmv), QuickTime (.mov), AVI (.avi), and Flash video (.flv). The flash video normally will play back with a .swf file extension (Shockwave Flash). An editor may load multiple versions of the video and permit users to select the format that best suits their situations.
  • Playback. Editors can reduce the size of the playback window for video and the frames per second and thus reduce the file size. A developing window size for video streaming and podcasting is 320 by 240 pixels. The dimensions can be set at the time the video project is exported from the editor. On many systems, the editor can select both the window size in which the video will play on the user's screen and the desired frames per second.
  • Streaming or downloaded. The streaming format allows the video or audio to begin playing before the entire file is sent. The user's connection speed will indicate how much of the file should be sent in a process called buffering before the file begins to play. As it plays, additional parts of the file are transferred. If the playback finishes before the next portion has been received, the payer pauses for additional buffering. The streaming file must be smaller (more compressed) and the downloaded file; however, the user can skip around to find the part he or she wishes to see or hear without playing the entire program. In the download process, the entire file is sent to the user's computer before the playback begins. It must be played from the beginning -- no skipping.
  • Describe the content, file type and size. In the display of the link to the multimedia file or files, include descriptions that will enable the user to decide whether to call for the file.
  • Slide shows. Combining still pictures and audio is highly efficient (file size) alternative to video. Open-source and proprietary software permit editors to combine pictures, audio and graphics and export them in video file formats to play back on the web.

Search Engine Optimization. Many web users begin the process of finding information by visiting a web search site, typing a few keywords and clicking the "search" button. The search software returns the addresses (URLs -- universal resource locators) of the web pages that its search processes have determined match the search terms. The practice of designing web pages so that search engines can find the pages and report them to potential users is called search engine optimization (SEO). Two of the primary search services at the time of this writing are Yahoo and Google.

There are two elements of the search -- finding and reporting a web page to the searcher and listing it high in the search results. A search may produce thousands of potentially relevant web pages. The search services also rank the findings in a priority order. The goal of a web designer is to have his or her pages found and ranked highly. Of course, the primary goal of any designer ought to be creating sites and pages highly useful to those who visit the site. The focus on SEO ought to be an important, but secondary consideration.

The precise processes the search services use to determine which pages are reported to searches and which are ranked higher than others are closely held by those firms; however, some common elements are known. These are used by website designers to increase the probability that their pages will be located by the spiders (the name fore the search software that locates and identifies web pages) and ranked highly by the search service. Here are some of the variables that influence search results:

  • Links. Spiders find a web page by linking to it from a previous page. Thus the higher number of links to a specific page, the greater the chance of its being found. The number of links to a page (not links from that page to other pages) is also an element in raising the ranking of the search.
  • Page text and tags. Spiders "read" the content of pages to determine the primary content of the page. Spiders do not read text inside graphics, animations, and video or audio content. For these elements it is important to include alternative descriptions (alt tags) in the software language of the page. The tags appear to the users of the page when the cursor travels over the content, but otherwise the tags are not visible. It is important that the keywords of the page appear in the headlines and body copy near the top of the page. The keywords should also appear, as appropriate, in the alt tags that describe the graphics, video and audio content items on the page.
  • Header information. This information includes the page title and meta-tags that list the author, keywords and description of the page contents.
  • Keywords. Keywords are single words or two or three word phrases that describe the primary content of a page. It is essential that these keywords appear at several places in the page to increase the probability of a search service finding and ranking highly a particular page. However, the insertion of the keywords in a page content should be appropriate to the text -- not included merely on the hopes of increasing SEO success. In selecting keywords to describe the page, the editor or reporter should consider what words might a user list if he or she wanted to find the contents of a particular page? Those keywords should then appear in the meta tags of the page, the title, and as appropriate for the page content in the headlines and paragraph copy.

Interactivity with users. The web is developing rapidly in its ability to have real time relationships between the content creator and the user in real time. Early in the history of the web pages were static. The content changed only when the editor or designer made changes and reloaded the pages to a server. The extent of the user's interaction with the page was limited to clicking on a link to open a new page or completing a simple form that was sent to a website with only a generic "thank you" note appearing in response.

Desktop computing has taken the lead in creating interactive features for users of various software programs. Computer games are an obvious example. Word processing programs also provide immediate feedback to the typist about misspellings or other grammar errors. Spreadsheets provide immediate calculations from data entered and also feedback about potential errors in formulas the user creates in those programs.

The Internet is also using these immediate feedback tools. These include the cloud computing programs that function as if the software were on the user's own machine (See Cloud Computing in the Internet Terminology section.). Web forms for e-commerce immediately provide additional product information for users who request it. Those sites also process purchase decisions and provide immediate feedback such as credit card number verification. Users can also change the resolution of geographic maps and see the results immediately after their request to zoom in or out. News sites are increasingly using the process of serious games and simulations to enable their users to make policy decisions as if they were in the position of legislators or other government officials in the development of budget alternatives and the like.

When well done and appropriate to the content of the site, these engagements with users increase substantially their satisfaction and enjoyment from using the site.

Steps in Creating a Website

Many of the organizations with whom new staff members might work will already have established websites. They will have established templates, CSS instructions and work flow processes. The new staff person will join a team and will not have to take the initial steps to establish a site from the beginning; however, it should be helpful to understand the start-up process in order to know where the new staff member fits into the full team.

Location. There are two elements of locating a website.

First is the selection of a domain name. This is a recognizable name usually spelled in letters with an appropriate suffix. It stands for the actual address of the server on which the website is located. Initially this server address was a 32-bit string of numbers. Because of the huge growth in the web, it is being replaced with a 128-bit string known as the Internet Protocol (IP) address.

The most popular of the suffixes is .com. Other widely used, unrestricted suffixes are .org (non-profit organizations), .net (Internet services), .biz (used often when .com is not available), .name (for individuals), .info (for information sites). Some top-level extensions (as the suffixes are called) include .gov (government) and .edu (educational institutions).

Sovereign countries and independent territories may also have extensions that represent Internet address systems within their territory -- .qa (Qatar), .eg (Egypt), .uk (United Kingdom), .us (United States of America). Some popular country extensions have been appropriated by other Internet users. For example, .tv, (Tuvalu) is used widely as an extension associated with television content.

The domain name that precedes the extension should be descriptive of the content of the site and recognizable as a potential keyword search term that potential visitors might use -- Aljazeera.net and cnn.com (for news sites of those television news channels). Private companies accredited by the Internet Corporation for Assigned Names and Numbers or by national accrediting organizations maintain domain names and provide search services to prospective website owners to learn whether a name is available.

The second location step is the hosting service for the website. This involves the selection of a company that will lease space to the website owner and provide technical support for the operation (non-editorial) of the site. Of course, most large organizations will operate their own web servers and host their site themselves.

Software. Adobe Dreamweaver is the best known and widely used software for creating and managing websites. Microsoft Extension (replacement for Front Page) and Publisher are other popular programs. Many of the CMS packages also have tools for the creation of sites, templates and pages. Open-sourced versions of those packages include JoomlaDupal and WordPress.

Site set-up. Before the editor can create templates or content for a site, it must be set up. Most web design programs will have a set-up wizard that can guide editors through the process. It will be necessary to locate a place on the home computer or local network to store the local version of the site. The set-up wizard will also require information about the URL address, the IP address, user authorization and password at the host site to create a parallel structure there. After your site is set-up, you can begin to create content including folders for special content (images, video, audio, Asia, Europe, etc.) You make these additions to the site from the "manage site" menu selection.

Templates. The planning done during the early part of the design process will have indicated the variety of page types the site will initially require. This process is likely to produce a need for a home page, the initial page that return visitors, particularly, are likely to open first. Other required pages will be primary-topic index pages, subordinate content pages, and supplementary pages that are linked from the content pages. Ideally, the planning should produce a site that requires no more than three clicks to get to any specific content on the site.

The process of creating templates begins with the creation of a web page that is saved as a template. Thereafter, when the editor wants to open a new page, he or she will select the appropriate template into which the editor can place the new content. In sites managed by CMS programs, the page creation process can be automated.

In setting up both regions, the editor should use structural tags to identify the parts of the web page into which specific content will be put. Structural tags describe the boxes or containers for content. In HTML code these structural tags are enclosed in brackets <>. The tag for the prominent headline on a page would be rendered: <h1> followed by an </h1> at the conclusion of the headline text. The actual size of that headline, its font and color can be set by CSS instructions. A common structural tag will be <div>, often with a name for the division <div id="lead"> to indicate the opening paragraph for a story. The characteristics of the "lead" division can also be governed by a CSS instructions named .lead. Those instructions will apply to all division tags by the name "lead" throughout the site.

The process of creating template pages beings with the creation of individual pages as models for each template page. The editor can select "save as template" to create the template page. After the page has been saved as a template, the editor will identify editable regions of the template page. The editable regions are those into which specific content can be placed when the template is called up. The non-editable regions are areas in which content is placed during the template creation process. In most cases this will be the page header information and the recurring content for the left and/or right columns.

Evaluating Websites

How will the editor of a website measure the success of the enterprise? The relative youth of the Internet has the discipline of impact measurement still a developing science. However, statistics that can be made available to the website owner from the logs the server produces can be highly useful in analyzing the potential impact of the site. Among the measures one often considers are these:

  • Hits. Hits are requests made of a web server to deliver specific content to display a web page. A single web page with many text and graphic elements will have multiple requests to the server and thus multiple hits for a user to see a single page. Therefore, the "hits" is not an effective measure of impact.
  • Page Views. Page views are a statistic that produces more meaningful measure. It reports the total number of pages the server delivered in a particular time period.
  • Unique Visitors. Unique visitors are a measure of the number of different IP addresses that request a page (or pages within a site) in a given period of time.
  • Repeat Visitors. Repeat visitors are a measure of the number of IP addresses that visit the site more than once during a counting period. Obviously, a return visit is a potential indication that user believes the site may provide useful information.
  • Time. Time is statistic that reports the average time a visitors spends with a page or site. The longer the time on the site, the more likely the site is useful to the visitor and the greater the probably impact the site can have for the user.
  • Origins. Origins list the location from which the user come to the page within the site. This is useful to see how users are learning about content of the site. What search engines or links from other sites are prompting users to come to a page in your site?
  • Page Visited.  The pages visited statistic lists the pages within the site that are visited by the frequency of the visits -- most visited, next most, least, etc. This can provide useful information about what users value about the contents of the site.
  • External Links. A report of the number of external links to pages within your site is an important measure of quality assessment by outsiders. What other sites link to your pages? How many other sites link to the pages within your site? These can be important measures of the quality that other web editors attach to the contents of your site. External links are also one of the measures that search engines use to rank the relative value of a site in listing it higher in keyword web searches.

Share

Recommended for You

Related Stories

comments powered by Disqus