Topicality versus Prettiness: How to Enable Easy Content Management during Web Development

Inke Kolb and Dieter Strecker, Fraunhofer Institute for Media Communication (IMK), Germany

http://imk.fraunhofer.de

Abstract

The concept of the World Wide Web was developed to enable scientists to easily publish their research results and discuss them with others all over the world. Nowadays the web is turning into a marketing platform, where more stress is put on the look and feel and less on the information itself. But, in the end, the information is the key to our potential. Prettiness may attract users once, but only useful information and topicality make them come back again and again.

To ensure topicality it is necessary to integrate updating of the web content in the conventional workflow. Since museums are operated with restricted budgets and human resources the museum staff must be enabled to edit the web site themselves. Instead of having to learn fancy web techniques like HTML, JavaScript, Flash etc, museum staff should be provided with an easy-to-learn interface that allows editing all types of content.

In the development of the Digital Beethoven House we emphasize the autonomy of the content provider. Easy maintenance is relevant for each design decision. A content management system provides the editor with a single interface to the web site. With this interface, not only textual content and images, but also navigational elements and whole pages can be added, modified or deleted without the need for specialized technical know-how.

The Digital Beethoven House consists of three components: the Internet presence, the digital library and the Digital Salon. The library will contain 26,000 pages of original manuscripts, music scores, letters, first editions, illustrations of Beethoven and many other personalities, places, music instruments, and ephemera, together with descriptive metadata. In the Digital Salon the visitors will be able to experience Beethoven's life and work in the form of an immersive 3D virtual reality.

The online presence is based on the web content management system SixCMS. (www.six.de) The main modules of the web site are already available in German. A complete English version will follow at the end of 2003. The paper elaborates the main development guidelines gained from experience in the development of the Digital Beethoven House online presence.

Keywords: Web Design, Web Layout, Web Structure, Web Content Management, Content Management System, Web Maintenance, Web Development

Introduction

The Beethoven House in Bonn is a museum in the birthplace of Beethoven. In the project "The Digital Beethoven House" (Borowski 2001) the original manuscripts and music scores will be digitized in high quality color reproduction. With the help of digital media and the Internet, Beethoven's cultural assets will be made accessible to the general public and to music scholars worldwide. The project aims at addressing new audiences.

The Digital Beethoven House consists of three components:

The following interim results have been achieved: the high-end digitization of 26,000 single pages has been carried out and completed with a professional digital camera system and a color management system. With respect to the sheer number of digitized pages and the quality of the digitization, the project has pilot character. The conception of the project has been completed. We are developing the web site in modules, first of all the German ones, later the English version. The web site was launched in May 2002 with the first two modules. The third module was added and launched in November 2002 (IMK DBH 2001).

The Word Wide Web (WWW) concept as we know it today was designed in 1989 by Tim Berners-Lee and other scientists at CERN (European Centre for High Energy Physics in Geneva). They were interested in making easier to retrieve research documentation. To archive this goal they created protocols based on hypertext that makes it possible to connect content on the Web with hyperlinks, defining HTML (hypertext markup language) and HTTP (HyperText Transfer Protocol). Early on, the Internet was limited to non-commercial scientific users because it's backbone was provided largely by the National Science Foundation, the National Aeronautics and Space Administration, and the U.S. Department of Energy, and funding came from the government. The only goal of the web at that time was the dispersal of structured information and the layout of the pages was of no special concern. But as independent networks began to spring up, users could access commercial web sites without using the government-funded network.

During the rapid development of the Internet millions of web sites entered into competition, which forced the content providers to think about how to attract visitors to their pages and so more and more spectacular homepage entrances were designed. Nowadays "Skip Intro" is one of the most frequently executed actions in the web during the first call of a web site. The most important characteristic of the information presented has changed from structure to layout. The visual catchiness of the information seems to have a higher value than the content itself. Many web sites seem to be an advertisement rather than an information source. On the other hand, the amount of out-dated information on the web is enormous.

Topicality and prettiness from different points of view: What is the aim of the user? What is the goal of the content provider?

The users addressed by museums are mainly private persons with no special computer and Internet skills and equipment. In a series of interviews with visitors of the Beethoven House museum in Bonn we found out that people accessed the site of the Beethoven House (www.beethoven-haus-bonn.de) because they wanted to learn something about Beethoven or because they wanted to prepare a future visit to the museum. For them, the quality and ease of retrieval of the information itself was most important, followed by the speed of its accessibility which has to be convincing even for those users who do not surf with high-end equipment or use slow data connections. Meeting these user preferences implicates obvious limitations on web pages. If there are too many gimmicks the users will get frustrated by long loading times. Furthermore, some of these "special features" might only work with a special plug-in and annoying questions like "Do you want to install x right now?" will occur and confuse those who are not interested in Internet techniques.

The content providers want to present themselves in the web in a manner consistent with their established corporate design. They are interested in attracting as many visitors as possible to their web sites. In order to achieve these goals flashing pages are created. Users, who are not technically equipped to read the pages, will leave the site and will never come back again. The other users will stay and enjoy it. But, if they do not find the information they are searching for or if the pages are out-of-date they also will leave the site after a short while and will neither recommend it nor come back to it later.

So the visual design of the pages is important as an enhancement of the information presented on a web site, but without topical content, prettiness has no value at all.

How to bring the different points of view together

Joint development

There is a lot of information available with content providers. There is also a demand for a lot of information from the users. The task is to bring both together on the web site. The content providers should be sure to know what the special interests of their users are by conducting an appropriate user survey. The web developers (technicians and designers) contribute the technical know-how. Joint developing means that the web developers work closely with the content providers from the very beginning of web site developing. Joint development ensures useful and up-to-date information.

The main purpose of the first phase will be to understand each other's business and vocabulary (Kolb 2001). After that, the developers are able to suggest the web site's layout and structure. A content description table (table 1) (Siegel 1997) helps to clarify what exactly the content of a page is, where it is going to come from and who will be responsible to supply or create it. The inclusion of the column "update frequency" gives the content providers a hint of how much work will be necessary to maintain the web site.

Table 1: The Content Description Table

The usefulness of a web content management system

We assume that the budget of most museums, libraries and archives does not allow the employment of special personnel to maintain the web site. Maintenance has to be carried out by the people of the institution, who deal in their daily work with those appropriate bits of information.

A web page consists of content and display instructions. If you want to change anything on that page you need knowledge about the content and technical realization (e.g. HTML, CSS). A web content management system (Web CMS) helps laypersons to deal with their web content. It separates the layout in form of templates and the content of a web page and merges them together when a browser asks for the page (see figure 1). In this way both parts can be created and changed separately. If the layout and structure of the web pages are planned carefully the templates can be used for many different web pages, which will all have the same look and feel, supplying corporate design.

Fig. 1: Web Content Management System

Integrate the content provider

To ensure topicality of the web site from the beginning it is necessary to train the content providers as soon as possible. Therefore, we divided the web site development into modules (Kolb 2001). After implementing the first module, the content providers were trained to use the Web CMS. In this way they are able to put the information for the first launch on the web themselves. Additionally, problems with the usability of the interface immediately become evident and can be corrected before launching. Afterwards, the content providers are able to change, delete and add content independently.

The new tasks of the content providers have to be integrated into their daily workflow. The update of the web site must be as easy as possible and well integrated. They should be able to use their desktop computer and known software. Necessary new skills should be minimal and new training provided in a timely fashion. In this way newest information will find its way to the web as soon as possible.

Different web techniques

This section gives a short overview over the main web techniques.

Basic Web Standards

The basic technique of building web sites is using the HTML (hypertext markup language) or the XML-version XHTML (extensible hypertext markup language). To ensure all visitors of the web site are able to read the information it is necessary to create a browser and platform independent code. The World Wide Web Consortium, W3C, (www.w3c.org) supports developers with appropriate recommendations. They recommend a set of commands in the XHTML standard (XHTML 2003). Unfortunately, using standard HTML is not enough, because there are a few special needs of common browsers, which should be considered.

Another recommendation from the W3C concerns the use of layout elements. With the introduction of Cascading Style Sheets (CSS 2003), all formatting should be done by CSS instructions. Other style languages like XSL (XSL 2003) followed. The main benefit of using style sheets is the consequent distinction between layout and content.

A special facility of style sheets is the exact positioning of objects by layers, which unfortunately results in different layouts in different browsers and often leads to errors.

Scripting

Because of the limits of the basic World Wide Web, adding scripts to the HTML pages is becoming more and more popular. Scripting allows effects to be put on the pages like changing pictures on special events. The users trigger the events, for example, the mouse is moved onto a picture. This action may lead to changing this or another image (called mouse-over effect). This is one of the very simple scripting features, which are already supported by most common web editors and browsers. Web developers should be aware of the limitations common browsers set on scripting. Avoid proprietary scripting languages to ensure everyone is able to view your pages. Scripting languages are also useful to create interactive pages or to connect to information in a database.

Animation

A very popular technique to put animations on the web is Flash. To create Flash animations you need the software from Macromedia (http://www.macromedia.com/). To view these the user needs to install the Flash player, which can be demanded for free.

A W3C recommendation of 2001 is the Scalable Vector Graphics (SVG) (SVG 2003). It is a language designed for describing graphics in XML to be used on the Internet. SVG drawings can be dynamic and interactive. To view these the user needs to install a special viewer, which can be downloaded for free. SVG is not yet popular, but will in the future possibly substitute other animation techniques.

Topicality and prettiness: guidelines

Style sheets

As described above it is recommended to put the layout of the web site into style sheets. Especially the development of web pages will be much easier. At first glance it makes no difference for the users if style sheets were used or not.

Some browsers are unable to deal with style sheets in general or with some special styles. The users can switch off the use of style sheets in most browsers.

For these reasons we define the following set of rules: Use style sheets for all layout definitions. Each web page should also be at least readable, and in ideal case look nice, without the style sheet.

The considerations mean that style definitions should not overwrite HTML features. For example, we recommend the use of the basic HTML tags for paragraphs, headings and lists. Afterwards, special styles can be defined for those tags. Take care not to redefine the tag by the style, for example giving the heading 2 a bigger font than the heading 1.

These rules are especially important if HTML layers are used. Independent on what kind of layer technique you are using, there is the need of style sheets. When the user turns off the style sheets, the browser does not know layers anymore. It is not able to place the texts and pictures where the developers intended to place them.

Fig. 2: Web page of the Beethoven House displayed with Netscape, Style Sheets turned on; http://www.beethoven-haus-bonn.de/

The example shows the current web page of the Digital Beethoven House, which is built on layers. The first screenshot (figure 2) is taken from a Netscape browser (Netscape 4.78) with style sheets turned on. Watch the second screenshot (figure 3) to see how this page looks in Netscape with style sheets turned off. It is the same in older browsers, which do not support style sheets. What happened? There are images and links, which lay on different layers one upon the other. They should be displayed as mouse-over effect. When the browser does not know about layers, the images and links are displayed at the same time. If the pages are not implemented carefully, the content of the layers might be spread over the page in such a manner that it is not readable any more.

In our example, the web page is completely readable without style sheets and it even does not look that bad. This is how the style sheet rules are supposed to be applied. To satisfy the rules a tricky to implement layout may not be possible, but it is worthwhile that anyone can read your page.

Fig. 3: Web page of the Beethoven House displayed with Netscape, Style Sheets turned off; http://www.beethoven-haus-bonn.de/

More text, fewer pictures

As the basic web techniques do not support a lot of layout features, more and more layout is done with graphical elements. Images can be information itself (e.g. charts, photos) or just decoration for the web page. Both are uncritical in use. The third type of picture is used to create buttons or menu entries. We call them text images, because they are alphanumeric character strings converted to graphics.

Text images are used because developers want to have full control over their web page. The font and color of strings is depending on the platform, the browser, and the preferences of the user. With the font even the dimension may change. The second reason is the use of mouse-over effects, which can easily be added to images.

It seems to be much easier to put an image on the page than to consider all possible configurations. Longer loading time is justified with this logic. But the main disadvantage of images is that most content providers are not able to change or create them. So, once on the web, the picture will probably never be changed.

We recommend as few text images as possible, because strings are much more flexible than images. A word can be changed by anyone while an image has to be edited with special software and know-how. Also not using text images is good for people browsing with images turned off.

Fig. 4: Typical web page of the Beethoven House; the menu on the left can easily be modified by the web editors; http://www.beethoven-haus-bonn.de/verein

The example (figure 4) shows a typical web page of the Digital Beethoven House. There is a menu bar on the top, which is built with images to implement the mouse-over effects. This menu divides the web site into the main areas and it is considered as fixed. The left menu changes within each area. We implemented those menu entries as texts, although we had to do without a similar mouse-over effect. The use of the Web CMS enhances the advantage of using character strings. The content provider can add pages and define the name of the menu entry. Figure 5 illustrates how the content provider adds a completely new page including a menu entry. Figure 6 shows the web page after this change.

Fig.: 5 The Interface of the Six Content Management System to add a new web page including a menu entry

Fig. 6: Web page of the Beethoven House with new menu entry

Prettiness as extra

Striking the right balance in web site design between prettiness and topicality is challenging. To satisfy all different users you may consider to develop two, or even more, different representations of your institution, e.g. a plain HTML-site and another Flash-site. Unfortunately, most budgets do not allow double developing and at least not double maintenance.

Thus, when planning a museum's web site it is useful to divide the content into two categories: necessary and extra. Necessary information is everything you want everyone to read, for example the opening hours of the museum and a route map. To display this, only basic web features should be needed. It is guaranteed that every web user is able to get the information.

The extra is nice-to-have. It might be decorating images, sounds, videos, and animation. It can be implemented through techniques like Flash, java script or other scripting or programming languages. Users possibly have to install new plug-ins to take advantage.

The rule is: do not present necessary information with fancy techniques; put in prettiness for extra information. It is especially important for the starting web page because your potential visitors will never come back to your site if they are not able to read the starting page.

Fig. 7: Web page of the Beethoven House with decorating picture

Fig.8: Web page of the Beethoven House with add-on information in a pop-up window

One of our layout concepts is shown in this screenshot: many pages are decorated with a picture topically belonging to the content. The example above (figure 7) shows a page of the Beethoven House library. The library owns many ancient books with carefully decorated covers. We decided to use those decorations to mix up the library pages. As an add-on we put the respective scan of the whole cover and some information about the book in a pop-up window (figure 8). Those pop-up windows are java script calls. The main information is displayed on a plain HTML web page and so available for all users. The add-on information requires more technique.

If you fill out the content description table carefully, you may find out that there are some bits of information that will never change. This will not be any current information, but historic data. You may, e.g. document a historic event. This kind of content might be cast in a Flash-animation, a video or done with another special technique. The result is a fixed module, which can be integrated in any online presentation. Be aware that those kinds of modules will possibly bore users after a short while. For the Beethoven House web site we developed such a module with Flash to present one of the alternating exhibitions (DBH 2002).

Conclusion

There is a general tendency towards non-standard web techniques. The public is accustomed to splashy animations on TV, videos and CD-ROMs, leading users and also content providers to have the same expectations of the web. The techniques and software to create visually complex animations are available. Such resources should only be used if the web site is intended to be an advertisement media. In this case, the techniques and the content have to be updated in frequent intervals, which is, of course, only possible with an appropriate budget.

Most museums require low-budget web solutions. Such solutions need to be planned carefully because they need to have long life cycles and therefore have to be maintained easily. It is necessary to plan the update workflows before and while developing the Internet presence. Layout and content of the web site have to be separated by using style sheets. A content management system makes an easy-to-use interface available for the content provider. Text images are complicated to update and should be avoided. In the future, the handling of graphics, especially text images, might be much easier for laypersons with the use of SVG. Fancy techniques may be used in modules with never changing, historic information and for add-ons.

In order to measure up to the importance of topicality it might be a good idea to award prizes to well maintained sites instead of pretty developments.

References

Bogen 2001. Digitizing a cultural heritage - the key issue for preservation and electronic publishing; Bogen, Manfred; Borkowski, Christian; Borowski, Marion; Löffler, Jobst; WebNet 2000 / Davies, Gordon; 2001

Borowski 2001. Beethoven's contemporary world revived for the future, Borowski, Marion; Lang, Gudrun; Cast01 - living in mixed realities / Fleischmann, Monika; 2001

CSS 2003. W3C; Learning CSS; last updated Jan. 2003; consulted Jan. 2003 http://www.w3.org/Style/CSS/

DBH 2002. "Von der Bonngasse ins Schwarzspanierhaus: Bonner und Wiener Beethoven-Häuser in alten Ansichten"; last updated April 2002. consulted Jan. 2003 http://www.beethoven-haus-bonn.de/flash/

IMK DBH 2002. Fraunhofer Institute for Media Communication, Project description "The Digital Beethoven House"; last updated Jan. 2001. consulted Jan. 2003 http://www.imk.fraunhofer.de/Beethoven

Kolb 2001. Kolb, Inke "Web Site Engineering with Content Provider Participation"; presented on the workshop "Web Site Engineering" at WWW10 Conference 2001, Hong Kong; last updated Jan. 2003. consulted Jan. 2003 http://www.gmd.de/People/Inke.Kolb/www10.html

Siegel 1997. David Siegel, Secrets of Successful Web Sites: Project Management on the World Wide Web, 1997, Hayden Books

SVG 2003. W3C; Scalable Vector Graphics (SVG);last updated Jan 2003; consulted Jan. 2003 http://www.w3.org/Graphics/SVG/Overview.htm8

XHTML2003. W3C; HyperText Markup Language (HTML); last updated Jan. 2003; consulted Jan. 2003 http://www.w3.org/MarkUp/

XSL 2003. W3C; The Extensible Stylesheet Language (XSL); last updated Jan. 2003; consulted Jan. 2003 http://www.w3.org/Style/XSL/