Return to talks that NetPubs staff have given.

 

Build It So They Will Come:
Blueprints for Successful Web Page Development


Head in the Clouds, Feet on the Ground
NASIG 13th Annual Conference
June 18-21, 1998
University of Colorado at Boulder

http://www.netpubsintl.com/talks/NASIG13.html

Additional info related to some particular issues can be found at http://www.netpubsintl.com/IPNews.html.

 

This is part of a joint presentation with R Ellen Greenblatt and Cynthia F Hashert, both of Auraria Library, Colorado. This first part has a general focus. The second part, given by Ms. Greenblatt and Ms. Hashert, provides a practical case study focused on library technical services.

Abstract for the overall workshop:

This workshop will examine WWW-based Internet site development from audience analysis through design execution. For a practical case study we'll look at the construction of a technical services site. We will address features available currently and in the near future as site building blocks and how to effectively incorporate them into an useful online presence. With a continually growing wealth of online capabilities bombarding us, how do we sort through cascading style sheets, server-side includes, layers, PDF, HyperNews, listservers, Chat, Java, animated GIFs, among others? Effective site design should entice the audience to come.

 

Table of Contents

1 Intro 5.1.2 Images5.5 Installing Windows and Doors 5.9 Hanging your Shingle
2 Why Build? 5.1.3 CGI5.6 Adding Balconies, Lofts, and Spires5.9.1 Identity
2.1 History5.1.4 XML5.6.1 Plug-ins5.9.2 Digital Signatures
2.2"Why?" for you5.2Raising the Walls5.6.2 CGI Applications5.10 Choosing your Neighbors
3Design Considerations 5.2.1One per Page5.6.3 Helper Applications5.11Is it Solid?
3.1The Lay of the Land5.2.2Tables5.6.4Java/Javascript5.11.1Error Handling
3.2The Tenants and the Guests5.2.3 Frames5.7Installing the Phone Line5.11.2Stress Test
4Drawing the Blueprints5.2.4 Tricks 5.7.1 Email5.11.3Statistics
4.1Source of Materials5.3 Building Staircases and Hallways5.7.2 Web Forms6Planning Periodic Remodeling
4.2Architecture Style 5.4 Moldings5.8 The Writing on the Wall7 The Porch Light
5Raising the Edifice5.4.1Cascading Style Sheets (CSS)5.8.1General Guidelines
5.1Laying the Foundation5.4.2 Other Style Sheet types 5.8.2Copyright
5.1.1 HTML5.4.3 Server Side Includes5.8.3 Privacy Policy
1 Intro

 Slide #1

 For all slides associated with this talk: Use the left and right arrows to navigate from the current slide to the next or previous one. Use the up arrow to return to this talk.

This part of the workshop is geared towards all potential website implementations, whether you're considering a reference desk or a shopping mall.

I realized when I was putting this together that I've spent my whole career immersed in computers and the Internet and the related paradigms for navigating information. It's been a while since I've composed a talk or paper and I seem to have misplaced the art of serial exposition. So my part of the presentation is not linear. While some things definitely precede others, many of the topics I'll cover are better understood as tools in a toolkit to be considered and used as needed.

Table of Contents

2 Why Build?

 Slide #2 

Table of Contents

2.1 History

 Slide #3 

When the web was first utilized for commercial use, many large corporations hopped right on with extensive sites. It was estimated that three out of five of them shut down the following year. They had spent too much money for too little return. They hadn't really taken stock of what they were trying to accomplish and whether or not a website was the right move. After all, there's only so much value to online information about a car. When it comes down to it, you want to go down, kick the tires, and drive one before you buy. But, the web was a hot, new technology with lots of promise.

Now the web has become so mainstream that it's a standard part of most corporate PR. But how it's used varies drastically from site to site.

Table of Contents

2.2 "Why?" for you

 Slide #4 

So the questions are:

Why do you think a website would be useful?

Who is the intended or primary audience?

How does the intended audience use online technology? One association considering an online publishing program that I spoke with years ago had only a small portion of its members even using computers. They knew their audience. Know yours.

Will you have a secondary audience?

What are the primary goals of the site? secondary goals? Is it to be a resource, a communications vehicle, a commerce tool, or some combination of these?

 Slide #5

What kind of resources do you have? Technical, labor, funding…

Who is going to create it? In-house? Vended out?

Who is going to maintain it? In-house? Vended out?

How is it going to be served? In-house? Vended out?

Do you have management buy-in?

Many of these considerations will seem obvious to those of you used to developing programs. However, they still get lost at times, both due to the lure of fancy technology features which keep popping onto the scene, and to misconceptions, particularly on the part of decision makers who are further removed from the project and the technology.

 Slide #6

The primary point is that an effective website is not really a site at all, but an online program. It's not something to be built like an edifice, but more like a garden or farm, with a variety of plants, seasons, crop rotations, and different fields. Its design is not just layout, features, and navigation, but a planned evolution.

As I was working on this talk, I realized that the building analogy was not quite right. However, I'm going to continue to use it with the caveat that it works for snapshots of the project, but keep in mind that it is an evolving project with a relatively fast pace.

Table of Contents

3 Design Considerations

 Slide #7

Table of Contents

3.1 The Lay of the Land

Building a dynamic site in a dynamic environment takes some creative planning. A good-sized part of industry is now devoted to increasing the utility of the web. And we get the fun of figuring out what to do with it.

 Slide #8

Some of the materials available are essential to any well-structured site, some are useful if targeted well, and some have not made enough impact to seriously consider yet. The biggest thing to remember is that the pace of development for web-related technology is fast. What may be esoteric today may be mainstream tomorrow. Keep up with the pace or be left behind. This doesn't mean that you have to use each new advance, but it does mean that you should make sure that something you are using hasn't become obsolete and that you're still meeting your goals in the eyes of your audience.

 Slide #9

And there's much more you should be aware of. Internet technologies have been the product of Internet Engineering Task Forces and similar preceding entities. These IETFs rely on the open participation of the Internet community, which means that people with expertise and interest participate regardless of employment affiliations. Now certainly, employers tend to support an employee's efforts in these IETFs if that employee is a major contributor to the technology. PR still abounds. But the directions that the technologies go are still based on the collective creativity and judgement of the participants.

However, web technology is no longer the product of IETFs. A consortium (W3C), primarily funded by industry, is responsible for the evolution of the web. And to add to this, two of the largest web-related members of this consortium appear to be vying for position by adding competing non-standard features to their web products in an effort to get them incorporated as the standards.

Being aware of this environment will make it easier to decide the value and potential risks of using things like layers, Channels, and similarly browser specific tools on your site.

Table of Contents

3.2 The Tenants and the Guests

 Slide #10

Be aware that tool choices may exclude some of your audience. Design for your primary audience, the tenants, using tools which will reach almost all of them. Excluding some of your secondary audience, the guests, may be acceptable if the tool is useful enough to the tenants.

 Slide #11

Before building your site, get to know the audience. Surveys are invaluable for this.

Know the browsers they use. Mosaic, Cello, Netscape, Opera, IE.

Know their level of comfort with associated software and it's installation. It does no good to spend a lot of effort creating a streaming multimedia presentation if most of the tenants aren't DIYers and aren't going to install the plug-in required to view the presentation.

Know how they connect to the Internet: T3, T1, ISDN, 33.6, 28.8, 14.4, 9.6.

Know when they connect. A Saturday morning, 28.8 crowd may be able to handle more than a large, very busy ISDN office during the workday.

Know their computer equipment: SGIs w/ IRIX, 486s w/ Linux, Macs, Pentiums w/ Windows 95, 386s w/ Windows 3.1.

Table of Contents

4 Drawing the Blueprints

 Slide #12

The goals and audience have already been identified earlier in the process. Now it's time to consider the flow of the project along with the design of the site.

Table of Contents

4.1 Source of Materials

 Slide #13

The first consideration is the source of the content. Does it already exist? If so, what will be needed to repurpose it? If not, where will it come from? Whatever it's origin, you'll want to consider the whole process. For instance, if the material were originally for a print publication which is being converted to an online publication it may be worth getting your authors versed in the basic use of an HTML editor instead of the standard word processor. There's a lot of similarity in use and issues like "it's bold and 14pt, is it supposed to be an H1 or an H2?" become moot. This may not be a practical route, but it's worth looking at the entire process from content creation on to determine pragmatics.

Table of Contents

4.2 Architecture Style

 Slide #14

It's a good idea to settle on a style for the site that has a look and feel consistent with the goals of the site. The gravity of a site on criminal justice is not well served with cute cartoon characters.

Carrying a theme throughout the site gives the audience a sense of where they are no matter what page they're on. This is particularly useful given that links can just as easily go directly to the middle of other sites. If your site has a common theme a user will know just by appearance whether she's hopped to another page in your site or to a different site altogether.

Table of Contents

5 Raising the Edifice

 Slide #15

Table of Contents

5.1 Laying the Foundation

 Slide #16

Table of Contents

5.1.1 HTML

The foundation of a website is HTML. While many people talk of programming in HTML, it's a mark up language not a programming language. It's really no different than using the features of a word processor.

Table of Contents

5.1.2 Images

The second commonly found part of the foundation is the use of graphics. No one has to tell you what a picture is worth. Just check out Sotheby's. For inline images we're talking about GIFs and JPEGs. Each has it's pros and cons.

Table of Contents

5.1.3 CGI

The third piece that's commonly used in the foundation is the Common Gateway Interface (CGI). This is the webserver's mechanism for allowing the user to interface with specially designed software. Counters and guestbooks are prevalent applications using this.

Table of Contents

5.1.4 XML

XML is basically a version of SGML with a focus on web use. It's not here quite yet, but will be coming soon. It won't make HTML obsolete so you don't have to worry about losing what you've already done.

Table of Contents

5.2 Raising the Walls

 Slide #17

Table of Contents

5.2.1 One per page

One what is for you to decide. Put one concept, topic, or complete capsule of information on a web page. Don't think in terms of print media. Think about how the material will be used. Every web page requires a full communications session on the part of the web server and browser. So reading a long study conclusion in two parts (two separate web pages) requires more than twice the time to retrieve compared to the same conclusion in one part. If your audience is going to almost always read the whole thing, don't break it up. Scrolling through a long article may seem cumbersome, but not compared to getting it in pieces, particularly if you might be going back and forth.

Break material into logical units that fit expected consumption patterns.

You can make a page too big. Earth, by David Brin, would be a bit much for a single page.

Table of Contents

5.2.2 Tables

Tables provide a useful means for partitioning a page. They can be used to control layout so that certain pieces have defined positional relationships to others.

Table of Contents

5.2.3 Frames

These are also used for partitioning a page. The basic difference is that it's possible to change the contents of one from without affecting the others. This can be used very effectively to provide easy navigation or concurrent display of different aspects of the same service. For instance, having the query page in one frame and the results list in another allows the user to easily modify and launch a query based on the results without having to page back and forth between query and results.

Table of Contents

5.2.4 Tricks

There are many tricks used to enhance layout control that are not directly part of HTML. These include single-pixel transparent gifs used in image tags to provide offsets. These tricks vary over time, especially when the capability finds its way directly into a newer version of HTML. Figure out what you want and then look around to see if anyone has done it.

Table of Contents

5.3 Building Staircases and Hallways

 Slide #18

Navigation can make or break a site. If it's easy to get around and efficiently find what you want, you'll be happy. If navigation is ambiguous or circuitous, you'll probably try to find the info elsewhere.

Hypertext adds a dimension to structuring material. Don't restrict yourself to serial or hierarchical layouts for the pages. You now have the means to connect pieces any way you can imagine. The key is not to think along the lines of layout of an outline or book. Rather, consider the connections between material and concentrate on how people would traverse the data if they could easily jump from one piece to another. For instance, it can be quite useful to be able to get to a page on CPR from each of the pages on shock, drowning, and heart attacks. And likewise, the CPR page could have links to all of the pages for circumstances that might require CPR.

Think in terms of navigating the information in line with the goals of the site. It's quite acceptable to not provide links that take people on tangents. The site on 1st Aid doesn't need to link to information on causes of accidents just because it deals with them.

Table of Contents

5.4 Moldings

 Slide #19

Though we've talked about giving the site its own flavor so that it comes across as a cohesive project, there are emerging tools, which can help create and maintain aspects of the site style. Most of these are known loosely as style sheets. The other tool is the Server Side Include.

Table of Contents

5.4.1 Cascading Style Sheets (CSS)

These allow you to define suggested formatting and layout features that can then included in the web pages of the site. The cascading aspect provides a hierarchical nature in which you can set the precedence of the sheets.

One simple use would be to define the font and font size of all of the header tags. For instance, you could define all <H1> to use the Palatino font in 14 point. Then you can change this for the entire site by just changing the definition in the style sheet.

The suggested nature of CSS comes from the fact that things like font definitions aren't passed from the webserver to the browser. So if Palatino is not present on the computer running the browser, the computer will use what it thinks is the closest available font.

Table of Contents

5.4.2 Other Style Sheet types

The specifications for Document Style Semantics and Specification Language (DSSSL) are in draft form, so we won't have to worry about it quite yet. Basically, it's a programming language in which you define the formatting of the document. This definition is fed with the document to the rendering software in the browser for appropriate display.

Building on CSS and DSSSL, Extensible Style Language (XSL) provides formatting functionality for XML. This is just beginning development.

Dynamic HTML is used to describe dynamic pages generally built with a combination of HTML, CSS, and JavaScript. It's still at an experimental stage.

Table of Contents

5.4.3 Server Side Includes

SSI provides a means to say, "include this data, HTML file, or program output here". One great use for this is for uniform navigation bars. Define the snippet of HTML for the navigation bar in a file and then user SSI to include it where you desire. The inclusion is done when the document is requested so to change navigation for the whole site, just change the button bar file.

Table of Contents

5.5 Installing Windows and Doors

 Slide #20

The use of access control depends upon any restrictions you may have on the materials. Do you have a membership directory that's only available to members? Or a journal that is only for paid subscribers? Or services for the institution's faculty, staff, and students only?

Basic web access control is implemented so as to limit availability based on computer storage location. You define access to documents in a directory. Unfortunately, this doesn't lend itself to simple management in situations where there are a variety of access groups with some crossover between groups.

Access control can also be implemented outside the webserver using CGI applications. This approach can be more useful for database access control.

Table of Contents

5.6 Adding Balconies, Lofts, and Spires

 Slide #21

There are many extensions to the web that can be used for many purposes. These basically fall into three categories.

Table of Contents

5.6.1 Plug-ins

One is the crowd of plug-ins. These are software applications which can be "plugged into" the browser to handle data formats which aren't native to the browser. When the browser retrieves data of a non-native format it checks for an appropriate plug-in to use. Shockwave is one of these.

Table of Contents

5.6.2 CGI Applications

The other category is the group of web oriented applications which work via CGI. These include such things has HyperNews, a web discussion forum similar in operation to Internet news, web conferencing, shopping cart applications, and various database interfaces, which can be set-up to provide seamless access to standard databases.

Table of Contents

5.6.3 Helper Applications

There is another group of viewer known as helper applications. These are not integrated into the web browser, but the browser can be configured to launch them if a retrieved file is of the appropriate format. PDF documents are the most commonly files seen this way. You click on a link to a PDF document, which causes the browser to retrieve it. The browser can't display it directly so it checks its list of helper application and notes that Adobe Acrobat is registered as the PDF viewer. The browser causes Acrobat to start with the PDF document already loaded. Once the application is launched it has no connection with the browser, and therefore, cannot provide a vehicle for communications back to the web. The exception to this is the capability for imbedded in Acrobat, MS Word 97 and others which recognize URLs and will cause you browser to retrieve the document.

Helper applications can be used extensively with a site, but you must be aware of what software you can count on your audience using or provide options for different software. Do they use Quattro Pro, Lotus, or Excel for spreadsheets?

Table of Contents

5.6.4 Java/Javascript

Java and JavaScript provide a means for encapsulating operational instructions, or programming, with data and sending the whole thing. For instance, you may want to present a 3D model of a molecule for your audience so they can manipulate it. You could provide the data for the molecule and a manipulation program in Java. Your audience would get the complete capsule and be able to work directly with it. It didn't require that your audience have any special software, beside the Java capable web browser, already installed on their computer.

Table of Contents

5.7 Installing the Phone Line

 Slide #22

To best serve your audience, it's good to keep in touch with them. Always provide a way for them to contact you.

Table of Contents

5.7.1 Email

An email link to either an organization function, like webmaster or service, or a particular person is essential.

Table of Contents

5.7.2 Web Forms

A survey or comments form is useful in getting feedback on specifics. Is the site useful? What do you like about the site? What changes would make the site more useful? Try to keep the questions focused and worded so that appropriate responses are constructive. Asking a user what she doesn't like and getting a response that navigation is poor doesn't let you know what's poor about it. Is it unclear what to expect when you click on a button? Does it take too many hops to get to the primary material of the site?

Table of Contents

5.8 The Writing on the Wall

 Slide #23

It's useful to publish any policies regarding the site and it's contents.

Table of Contents

5.8.1General Guidelines

This includes how the contents may or may not be used. Is it for members only? Is there a restriction on use of the information for commercial purposes?

Table of Contents

5.8.2 Copyright

Copyright information is a good idea. There seem to be a lot of confusion among casual uses as to what copyright rules apply to online media. It's not that there's more confusion with online media than print. It's that most people haven't really paid attention to copyright issues for print either, but photocopying War and Peace to hand to a friend just wasn't a practical consideration. With the ease and low to zero cost of copying online material it's become apparent how little the general understanding of copyright issues really is.

Table of Contents

5.8.3 Privacy Policy

A privacy policy that outlines what information is gathered on users, what's done with it, and with whom it's shared can provide a comfort level in an age where marketing forces have long arms.

Table of Contents

5.9 Hanging your Shingle

 Slide #24

Table of Contents

5.9.1 Identity

Get your identity on each page of your site. If people print a page out, they'll still know where it came from. Some browsers will include the URL of a page on a print out, but it's not worth relying on that.

Table of Contents

5.9.2 Digital Signatures

Digital signatures provide cryptographic means for ensuring the integrity of a digital document. While use of these for websites is not common, the capability is readily available and the need is becoming more apparent. W3C even has a Digital Signature Initiative to create a technology solution that's directly integrated into the web.

Table of Contents

5.10 Choosing your Neighbors

 Slide #25

Linking is a major part of the beauty of the web. However, its use can be abused. And on the flip side, some sites basically keep you inside like the circuitous paths in a department store. If you didn't find exactly what you were looking for, you need to start over again.

People seemed more pleased with a store when the clerk can suggest alternate places to try to find just what you're looking for.

Common courtesy suggests that you get permission to link to someone else's site. If there is any commercial aspect to your site, permission for linking elsewhere should definitely be gotten.

Table of Contents

5.11 Is it Solid?

 Slide #26

Table of Contents

5.11.1 Error Handling

Most web servers come with a set of generic error message pages. These generally aren't very informative. It's a good idea to customize error pages both in appearance to work with your site (this isn't always possible if your site is served with others) and to provide more details of the incident and a means to contact someone who can help.

Table of Contents

5.11.2 Stress Test

Have people outside of the implementation group check the site out. Does the architecture of the site and the navigation make sense to them? What kinds of comments do they have?

Use link checkers to routinely and automatically verify the links both within your site and without.

Table of Contents

5.11.3 Statistics

All web servers can log transactions. Log analyzers are used to process these transaction logs and generate statistics for the sites that the web server serves. At a minimum these statistics tell you what's hot and what's not. They let you know where your audience has been and what pages aren't used. You can also help identify problems by noting what error pages are served and what page preceded the error.

Table of Contents

6 Planning Periodic Remodeling

 Slide #27

An integral part of the project should be reviewing all of the steps again on a periodic basis. This doesn't mean starting from scratch necessarily, but it does mean considering all options to determine if you should start from scratch. With changes in your audience, advancements in technology, and new goals, it may be more efficient to start fresh.

Table of Contents

7 The Porch Light

 Slide #28

Critical in the deluge of sites cropping up daily in webspace is being seen. There are all sorts of tricks to getting web indexes to list your site, but webspace doesn't exist in a vacuum. If you are already in touch with your audience via other media, use that to direct them to the site. Regardless of how much the web indexes toil at accumulating all of the sites that exist, they only get part of what's there. Don't count on being found via a web index. Web index search is not very sophisticated and takes a lot of time even for seasoned searchers to find just what they want.

However, it never hurts to use them. Use the meta tags in your web pages to define keywords that the various web index bots will collect to provide an entry for pages on your site. And use one of the handy software tools that will submit your site to a group of web indexes in one fell swoop.

Table of Contents

Return to talks that NetPubs staff have given.