Planning the Website

1. Planning the Website Web hosting and Managing Union County College

2. A Paradox • When is the best time to learn about planning your website? • On the one hand, you can't plan for what you don't know. • But on the other hand, planning should always come first. • The answer to the paradox is that designing a web site is like writing: it is a process

3. Why We Plan • Planning the website has a number of advantages: • The website will be easier to use. • It will be easier to maintain. • The job will be less stressful. • Why We Don't Plan • Two words: human nature.

4. First Things First • Concentrate on content first. What's it all about? • Next, worry about functionality. • How will it work? • Style or presentation should be last on your list.

5. See What’s Out There • Spend some time surfing the Web and see what competitors are doing. You can find plenty of examples of bad design and poor planning • If you see something you like, consider a similar site • Start out by “copying” but you will invent your own as you work through the process • Check source code

6. Project Management • Half of planning your website is project management, which is all about making life easier for yourself. • (The other half of planning is design, which is about making life easier for the people who use your pages.) • It's essential to develop a workflow. There are a number of steps in the process of creating and maintaining a Web page, and every project is different. Planning will help you realize what those steps are. • Summary and a few other pointers: • Surf the Web. See what's out there. • Don't be overly ambitious. • Don't try to re-invent the wheel. • Set aside some time for planning. • Set aside some time for learning. • Realize that maintenance is continuous. • Have fun with it!

7. Use Pencil and Paper • Your most important tool for digital projects are good old pencil and paper. Often you'll do your best thinking with these tools. • All you need is pen and paper.

8. Write a One-Sentence Summary • Summarize your project in a single sentence. If you can't do that, then you probably need to spend some time focusing your thoughts. • Here's the one-sentence summary for a site: • These pages will support the "Planning Your Wedding" seminar and will contain tips for bridal customers on how to plan their wedding from the engagement through the ceremony.

9. Make an Outline • To help organize your thoughts, it's often helpful to make an outline of all the content that you plan to include.

10. Make a Flow-Chart • The user's experience may closely parallel the linear progression of your outline. Then again, it may not. Hypertext allows for a non-linear experience. • You should draw a flow chart to show how you want users to navigate through the content. The chart can be very simple and still very effective for organizing your thoughts. Consider the differences between these two charts:

11. What are the Differences in the Two Charts?

12. Draw SketchesIt's a good idea to sketch out what you think the layout of your pages should be. Don't worry about being very precise. Just get the general idea down on paper as a reference. Here are a couple of examples:

13. Layout Sample Sketches

14. Write a Design Document • If you followed through on the last three steps, you should now have a collection of papers relating to the plan for your website. • You're well on your way to writing a complete design document. • A design document is simply a comprehensive plan for your project. If you want to do anything that is even mildly ambitious, a design document is strongly recommended (see handout).

15. Make Backups • What's the average failure rate for hard drives? What percentage of hard drives ultimately die?

16. Logical Document Structure • Hypertext Markup Language (HTML) provides a way of marking the logical structure of your documents. Use HTML to designate to designate logical elements of your documents -- paragraphs, headings, lists and so forth. • Of course, it doesn't hurt to organize your content logically either.

17. Logical File Hierarchy • Any time you have more than one document relating to a particular topic, you should probably consider creating a folder to contain them. • It is also common practice to create an "images" folder in which all your image files are stored.

18. Example of Logical File Hierarchy facilities electron.html • equip.html • facilAvail.html • facilities.html • facWorkroom.html • labPol.html • prodLab.html • studentLab.html • teachLab.html images • banner.gif • catbanner2.gif • ec502.jpg • facwkrm.jpg • Production.jpg • StudentLab.jpg • TeachingLab.jpg index.html resources conferences.html • grants.html • hbcu.html • links.html • resources.html • webauth.html • workshops html2 • concepts.pdf • index.html • samples • 01-meta-refresh.html • 02-withstyle.html

19. Use Templates • Even if you enjoy creating Web pages from, you should use templates for the sake of efficiency and consistency. • A template is simply an HTML file which you can use as starting point. Copy and paste to save your self the trouble of typing. • Sample List of Links • For example, consider the following list of links: • National Science Foundation Information about grants; program areas in all the sciences. • National Endowment for the Humanities Grants for teaching, film, radio, preservation, and more. • National Endowment for the Arts Lots of good arts-related resources, including funding opportunities. • Take a look at the source code to see how easy it would be to copy and paste entries in this list.

20. User-Centered Design • The other half of planning your website is design. (The first half was project management.) The goal of Web design should be to make life easier for the people who use your pages. • It's hard to over-emphasize this point. The needs of your users should be the light that guides all your design decisions. • Focus on the user. Figure out who your users are. Remember that the Web is truly global, so you have the potential to reach a very wide audience. • It may be helpful to think of your users in several groups.

21. Site Design and Page Design • If you have more than one Web page, you must give some consideration to site design -- how the individual pages of your site are related to one another. • It's often helpful to think of your site as being divided into several sub-sites. For example, you may have a collection of pages relating to each department of the company. • There are certain conventions which you should observe for each site (or subsite). For example, it's standard practice to have a "home" or "main" page for the site. • All pages within the site should link back to this main page so that users don't get lost. The home page should provide the best possible starting point for accessing the information in the site.

22. The Home Page • What are its strengths and weaknesses? • What do you think of this page?

23. About Us or Personal Page • You should include a personal page somewhere in your website. • A personal page should have a picture of the company or you and contact information.

24. The Politics of Linking • Maintaining Links to Other Sites • Remember that other people may move their pages around or even take them off-line altogether. You should check your links periodically to make sure they still work. • You may find it easier to maintain your external links if you groups them together. This is why many people have a page on their site dedicated just to links. • Link Titles • You can use the TITLE attribute (not to be confused with the TITLE element) to add a little extra information about a link, which a user may see when they position their mouse over a link. • Style of Linked Text • Don't say "To read the full report, click here." • Instead, say "You may read the full report." • Linking to Large Files • Remember that many users may be accessing the Internet via a slow modem. As a courtesy, you should warn them when linking to big multimedia files. • For example: "You may read the full report [63 Kb]." • How big is big? Anything over 50 Kb should probably be flagged.

25. Navigation Strategies • There's no universal solution to the problem of navigation. One common strategy is to develop a standard "navigation bar" and include it on every page in the site. • Google a Graphic Navigation Bar Or: • Sample Text Navigation Bar • Search | News | FAQs | Dictionaries and Journals | Health Info. for Special Groups | en EspañolOffice on Women's Health | About NWHIC | Guest Editor | What's New? | Contact Us | Home Page

26. Small is Beautiful • File Size • One problem with the Web is that information must be retrieved from a remote location before it can be displayed on the user's machine. Even though this information may fly around the planet at a truly amazing speed, it still isn't fast enough. One of the most basic principles of design for the Web today is: keep your files as small as possible. A good rule of thumb is to keep your pages under 35 Kb. • How to Calculate • You can calculate the size of any given Web page by adding the size of the HTML file and all of the inline image files. For example, this page is weighs in at a bloated 77.5 Kb. The text file is only about 2.5 Kb, but the background image is 48 Kb and the screen shot below is 27 Kb. • Image Caching • There is one more wrinkle that complicates matters. Most browsers will store images in a temporary cache on the user's hard drive, which means they only have to be downloaded once. If that same image is used in another page, the browser will use the cached version and the page will load more quickly. • So even though the background image of a page could be large, it could be justified if used as the background for all the pages. • Layout • Small is also beautiful in terms of page layout. Some people use monitors that are 640 pixels wide by 480 pixels tall. A Web browser takes up some of this space, leaving only a 600 by 300 pixel window for many users.