Module 4: Planning a Website

Overview

The purpose of this module is to practice the various aspects of planning that are needed to create a high-quality website. Students have visited and critiqued web sites, studied the basics of color theory and design, explored web standards and the need to ensure that websites are accessible to all users. Now, they will consider the importance of developing an organizational structure to a website. This is the final step before they get started on creating their own web pages. This module provides both exposure to organizational theory and hands-on experience organizing the content of a website.

Lesson 1: Organizing a Website

• Estimated lesson length: 90 - 120 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• This lesson requires a set of pre-printed index cards (in PDF, requires Adobe Acrobat Reader). The index cards are comprised of different topics that might be included on a high school website. The scenario is this: They have been hired by a school whose website has gotten unwieldy after years of willy-nilly development and is wanting the site to be better organized, starting from the ground up. Students must organize the cards into meaningful chunks and propose to the school a new navigational system, with a single menu item representing each chunk of content.
• An alternative means of delivering this lesson would be to use an online card-sorting website such as Concept Codify. As of August 2014, this website is free although they acknowledge that they are likely to charge a fee for use in the future. They also claim they will offer special pricing for education. Note that currently this site requires the ability to drag cards with the mouse, and therefore is not accessible to all users.
• When organizing the index cards into meaningful categories, students should be encouraged to come up with their own organizational system. There is no right answer. However, they should also be asked questions about why they feel a particular card belongs a particular category. This presents a great opportunity for class discussion.
• The school-related index cards provided with the curriculum could optionally be replaced with cards representing a content on a business or other type of website.
• Laminating a few sets of these cards requires an initial investment in time, but will allow them to be more durable so they can be reused in subsequent classes.
• This lesson provides students with an opportunity to learn a very important idea about web design: Individuals can have very different ideas about how a website should be organized. It is therefore important for web designers to consider the perspectives of a variety of users when planning a website. In the real world of web design, card sorting is practiced with actual users who represent the website's target demographic. Data collected during card sorting activities can then be used to get a better understanding of where users expect to find content, and the site can be organized accordingly. This information should be discussed with the class when discussing the lessons learned at the conclusion of this activity.
• An alternative way of staging this activity is for the instructor to play the role of web designer, and students to play the role of users of the client website. In this role, students can organize the cards, then the instructor can lead the class in a discussion of the various results. Are there any trends or themes that are consistent across most students? How can the site be organized now, given what we know about users' expectations?

Answers to the Reading Check

1. Question: List the five basic steps to organizing information for a website.
   Answer:
   1. Inventory your content
   2. Establish a hierarchical outline of your content
   3. Chunking: Divide your content into logical units
   4. Draw diagrams that show the site structure and rough outlines of pages
   5. Analyze your organizational system by testing with real users; revise as needed.
2. Question: Briefly describe the three essential structures for organizing websites.
   Answer:
   1. Sequences: Pages are organized in a logical sequence, with a beginning and end.
   2. Hierarchies: Usually centered around a single home page, with secondary pages representing sub-topics, and possibly third-level pages representing sub-sub-topics. This is the best structure for organizing most websites.
   3. Webs: All content linked to related content, with few structural restrictions. This structure most fully exploits the Web's power of linkage and association, but often results in confusion for users.
3. Question: How might programmers utilize site diagrams as they move a new website project from planning to production?
   Answer: This is not a question that elicits just one answer, so any answer that demonstrates understanding of what a site diagram is, and its potential uses, would be acceptable. In general, site diagrams are useful for visualizing the overall site and how the individual pages relate to the whole. This is particularly helpful when working with a team or when developing a website for a client, as it provides a visual map that all parties involved in the project can refer to when planning.