A Standards Based Automotive Electronic Service Manual   Table of contents   Indexes   XML and CDF: GCA's XML Conference Web Site
Template
Tools
Web Template
 

Web Template Design: The Need for New Tools

 British Columbia 
 Canada 
Karatal, Kerem
NCompass Labs Inc.
 Vancouver 
 		 Kerem  Karatal
Director of Technology,  NCompass Labs Inc. 
  321 Water St.
Vancouver  British Columbia (Canada) V6B 1B8 
Email: kkaratal@ncompasslabs.com

Biographical notice

Kerem Karatal is the Director of Technology and cofounder of NCompass Labs Inc., a leading supplier of enterprise Web content management solutions. As Director of Technology, Kerem is the visionary behind the product direction and development at NCompass Labs. Prior to NCompass Labs, he worked on multimedia technology and collaborative software at IBM’s T.J. Watson Research Center. An authority and innovator in WEB technologies, Kerem’s notable achievements include the introduction of OLE controls to the WEB, now known as ActiveX.

 ActiveX 
NCompass
 Web Site 
 

Introduction

  Can you imagine a skyscraper built without an initial architectural and engineering design? Would you consider building an airplane without designing it first? Of course not, and you would be out of your mind to do so. Nobody would consider undertaking any engineering project without first completing a design and plan for the project.
  And yet, this is the ad-hoc manner Web sites are created today. It is so easy to use your favorite editor to write an HTML page and link it to other pages; so easy in fact that sites are built page by page, link by link, without an overall structure. But, when the number of pages on a site grows beyond a certain point, the site becomes unmaintainable. First generation content management tools attempt to impose some order on the chaos, but there is a limit to their effectiveness when the fundamental problem is the page-at-a- time development process.
  In this paper we first discuss the requirements for the next generation Web sites, including device and audience personalization. Second, we introduce the W3C standards that can be used to meet these requirements. Finally we introduce the template based Web site as a natural solution to the problems of a next generation Web site and discuss the requirements for a template-authoring tool to help designers create a template based Web site.
Forrester
IDC
 

Web sites today and tomorrow

  HTML was initially invented for exchanging technical documents between different university departments over the Web. Web sites grew from those small university departments and individual sites to the Amazon.com and cnn.com sites of today. The content in those Web sites grew from tens of pages to 100,000 pages for large sites like Intel or Microsoft's.
  Looking at today's sites we see that most of them are created for a general audience. According to a Forrester forum dated March 1998, only 13% of the surveyed Web sites are using personalization techniques to create personalized views for visitors. Sites will continue to grow, averaging 15000 pages in size. And companies will realize that personalization for different audiences is one of the most important weapons in applications like electronic commerce, direct marketing, and services. As a result the Web sites will turn into big applications with no single source tree.
  Another Forrester report dated June 1998 points out that 44% of Web sites surveyed are creating lowest common denominator sites and are not thinking about optimizing their sites to use the technologies made available by the 4.0 generation browsers. Futhermore, most current Web sites are only created for desktop computer access, since it is the most commonly form of Web access available today. However this is beginning to change, as we move into the future we already see devices other than desktop computers being used to access Web sites requiring sites designed to match their unique characteristics. Another Forrester report mentions that "New devices weighing 8 ounces or less will make up 40% of a large company's portfolio." According to International Data Corporation (IDC) the sales of appliances used for Web access will match that of today's PC sales.
 PDA 
Personalization
WebTV
 

New challenges - device and audience profile personalization

  Studies, conducted by research firms like Forrester show that designers need to create increasingly personalized Web sites. After all, the Web is primarily about effective communication and effective communication means optimizing the presentation for the profile of the person who is accessing the Web site. We can separate the profiles into two main categories:
 
  • Device profiles
    •  
  • Audience profiles
    •   Device profiles deal with the different devices that people use to access a Web site such as desktop computers, Web TVs and PDAs. Each of these devices has its own device profile and the layout and content requirements for different devices may differ drastically. For example on a Web TV system, the following guidelines play an important role:
     
  • Screen size is 420x560 pixels.
    •  
  • Small size fonts are not readable.
    •  
  • Full-white and full-red backgrounds cause screen distortion.
    •  
  • Scrolling is not recommended. One should try using buttons like “NEXT”, “PREVIOUS” for navigation.
    •  
  • Thin, horizontal lines are not recommended.
    •  
  • One should reduce the number of items on a page, because TV audiences are used to look at one focal point.
    •  
  • One should avoid hard-breaks.
    •  
  • A totally different interaction paradigm is used based on a remote control. Point and click is not used.
    •   On the other hand, the guidelines for a PDA are quite different:
     
  • Screen size is 240x320 pixels, which is considerably smaller.
    •  
  • 4 gray-scale colors are used - white, light gray, dark gray and black.
    •  
  • One cannot use any background images.
    •  
  • Italics fonts should not be used as they are very difficult to read.
    •  
  • Frames cannot be used.
    •   The above examples show that the layout and style requirements change drastically from one platform to another. As a result it is necessary to create different versions of the same page for different platforms. Designing for the lowest common denominator no longer works since designers can no longer rely on the limited layout standardization provided by the basic form factor of the PC.
      Unlike device profiles, which deal with client and platform variations, audience profiles mainly deal with the personal profiles like age, salary bracket, gender and interests of the person accessing the Web site. Giving people what they need creates a much more pleasant and useful experience for the end users which may lead to more sales for an ecommerce site or more satisfied customers for a services based site.
      Building a site that includes audience and device personalization immediately and dramatically increases the complexity of the site and result in a site that is no longer static and one-dimensional. Every new personalization combination adds a new dimension to the site tree, making it almost impossible to maintain and visualize. Changes in profiles can not be easily reflected to the pages, such as simple changes in content. Static HTML page type Web sites become totally infeasible.
    Active Server Pages
     CSS, Cascading Style Sheets 
    Cold Fusion
     Internet Explorer 
    Java Server Pages
    Java Servlets
    Scripting
     

    Current approaches to dynamically generated sites

      The solution to the problems introduced in the previous section looks obvious. We need to separate the content from its presentation and format. Many leading Web designers have already seen the problem and have started creating solutions based on separating content from its format either on the client or, as in the majority of cases, on the server.
      One of the interesting client side solutions used today, is the popular www.idg.net site. The version of this site that runs on Internet Explorer 4.0 uses a client side scripting technology and client side data source objects to show the current and personalized news to the subscribers. A data source object receives the content in a pure text format and then the content is bound to the layout HTML via some proprietary HTML extensions introduced by Microsoft.
      There are also many other sites using server side technologies like Active Server Pages, Cold Fusion, Java Servlets and Java Server Pages to generate pages dynamically based on content stored in a backend database. Usually these environments let the Web designers create pages to connect to backend database via a component and markup the content with HTML and CSS to generate a presentation of the content.
      Whether it is server side or client side, these technologies generally require a lot of programming to do the repetitive task of getting the content from a data source and marking it up with the correct presentation tags. The disadvantages of such systems include:
     
  • Requires a lot of programming, so it is not as simple as writing HTML pages anymore.
    •  
  • There is no clean boundary between the scripts and the presentation markup, making team work and maintenance harder.
    •  
  • Every site uses a different mechanism, so there are no standards. This makes tool vendors job harder to support a common way of handling dynamically generated Web sites.
    •  CSS, Cascading Style Sheets 
     W3C 
     XML 
     XSL 
     

    A standards based approach

      The World Wide Web consortium (W3C) has been working on standards for separating the content from its format. The first such standard emerged as a recommendation from W3C was Cascading Style Sheets (CSS). CSS mainly separates the style from the layout and content, by making it possible to create style sheets outside a HTML document. So basically you can change how a paragraph should look like by changing the attributes such as font etc. to a paragraph within these CSS files.
      In February 1998, the W3C proposed Extensible Markup Language (XML) 1.0 as a recommendation. XML enables the tagging of content with content descriptive names rather than layout related names. After its introduction, it became possible to use XML and CSS together to create a presentation of the XML content. In this case CSS serves as medium to describe the layout and style and XML describes the content. However one immediate problem with using XML and CSS together is the fact that the XML content implicitly defines the order of the content which is an aspect of layout. In other words, CSS applied to XML content can not re-order the content or use it in different places on a page. So XML and CSS do not truly separate content from its format.
      The Extensible Style Language (XSL) was proposed in 1997, as a language to not only format but also transform the content described in XML format. XSL selectively applies rules to patterns in the source content. Using this approach, an XML tree can be transformed into another XML tree. With XSL it becomes possible to re-order and re-use content in different places within a layout unlike the XML + CSS combination. For Web applications, XML content can be transformed to HTML + CSS or HTML only. The only interdependency that remains between the content and format is the schema of the source content. XSL applies rules to the elements that are defined in the source XML schema, so if the schema changes then the XSL rules become invalid, making it very important to design a schema right the first time. The major disadvantages of XSL are:
     
  • The first working draft for XSL was released in August 1998, and it is still under major construction.
    •  
  • There is still a schema interdependency between the content and format which also seems unavoidable.
    •  
  • XSL style sheets are not easy to write and visualize.
    •   The standards we discussed above make it possible to create a dynamic Web site declaratively rather than using scripting languages. The scripting languages can still be used for more programming related tasks, such as adding business logic to a Web site. More importantly though, via the standards like XML and XSL, tool vendors can create tools that can interoperate with each other and can be used at different Web application servers.
    Cold Fusion Studio
    Dreamweaver
    Front Page
    Powersite
    Template Authoring
    Visual Interdev
     schema 
     

    Template based authoring

      The requirements of the next generation Web sites make it more and more difficult to maintain a Web site based on static HTML pages that do not separate content from its format. In house personalization solutions based on scripting are of limited viability because of the heavy programming requirements along with testing and maintenance costs. Standard solutions are needed to avoid having everyone reinvent the wheel to solve the repetitive problem of binding to a data source and applying format to the data.
      If static pages are not the solution how can we author the new generation Web sites? Are there any tools for it? There are a lot of tools for creating page-at-a-time Web sites including FrontPage, Dreamweaver etc. which deal with the creation of pages but not templates. On the other side of the spectrum, there are tools for software developers to create their own home-brewed template based Web sites including Visual Interdev, Powersite, Cold Fusion Studio etc.
      Moving into template based Web sites requires tools for creating templates, without the need for programming. These are new tools because templates are intrinsically different from content pages in many ways:
     
  • The content is not known during the design phase. So the content is variable in size and absolute positioning of content is hard or in many cases impossible.
    •  
  • The navigation structure may not be fixed; requiring a navigational template that can be applied to different site structures. In some cases even the site structure may change dynamically.
    •  
  • One should design templates for a general case to optimize the reusability of the templates. Failure to do this may result in a bloat of templates.
    •  
  • Templates may also impose different restrictions based on the device or presentation format it is designed for. For example, a template designed for print media has to address the issues of fitting the content in a fixed size page. However one can get away with using vertical scrolling for a template that is designed for a desktop Web page.
    •  
  • For Web page based templates, one may have to design general interactions. For example, in a navigation template the links may not be known in design-time. So what happens when someone clicks on a link needs to be designed without knowing what that link actually is.
    •  
  • In some cases content can be coming from a variety of data sources. One should be able to define these data sources in template design time.
    •  
  • Data schemas may also change in time. The template designers should minimize their dependency on the data schemas by trying to address the content in a relative way rather than an absolute way. This is not always possible though, so the templates are always susceptible to the changes in the data schemas. Therefore it is very important to design the data schemas carefully in the first place.
    •  Content Management 
    Template Authoring Tool
     WebDAV 
     

    Requirements for a template authoring tool

      As discussed in the previous sections, template authoring is different than content authoring and there is a definite need for a template-authoring tool specifically designed for this purpose. Some of the requirements for such a tool can be listed as follows:
     
  • Designers should be able to create templates with minimal programming. Programming should be left as a last resort for defining behavior that is out of the ordinary. However it should still be possible to use programming to define one's own business logic.
    •  
  • The template authoring tool should encourage reuse of templates. One effective way of encouraging reuse is via componentizing templates into smaller template parts. Then for example, the designers can generate generic template parts for navigation.
    •  
  • The template authoring tool should be easy to understand and use. Many Web designers today create templates and they are used to concepts like placeholders for content.
    •  
  • The designers should be able to assign properties to the placeholders to declare what to do with the variable size content.
    •  
  • In some cases there can be more than a single instance of the same type of content. For example in a news related site there are various news stories, with a title, abstract and location. The template authoring tool should employ container type placeholders, where the designer can specify one of the instances and the rest gets repeated based on a predefined layout style.
    •  
  • The template designers should be able apply some declarative rules on the selection of the templates and the type of elements inside the templates based on personalization profiles. Ideally they should be able to select both the format and the content independent from each other based on the profile.
    •  
  • The template design tool should be able to work with existing tools. A lot of ISVs have created very useful products in the past and now that allows designers and programmers to create Web sites and Web applications. The Web designers should still be able to use their favorite tools.
    •  
  • The template design tool should also make it easier to query and itemize the different combinations of the templates based on the personalization profiles.
    •  
  • The designers should be able to preview their designs based on some mock-up content. Also they should be able to preview the template combinations for different personalization profiles.
    •  
  • Some automated tools that can warn the designers to use or not use some HTML elements while they are designing for a specific device profile will also be helpful.
    •  
  • The template design tool should generate standards based outputs. In other words one should be able generate a template based on standards like XSL, XML, CSS.
    •  
  • The template design tool should employ standard ways like WebDAV to communicate with backend content management systems.
    •  Web Site 
     

    Conclusion

      Web sites of the future will be very complex applications that people will expect to use in their daily lives. The promise of the Web for effective communication can only be kept if Web sites are designed to tailor the right content to the right audience. Otherwise they are no different than the printed brochures sent to people's homes everyday. And everyone knows what people do with those brochures.
      As the Web sites become complex, it becomes almost impossible to create one without a proper design. Every engineering project requires proper design and analysis and Web sites are engineering projects. As a result we need tools to support the engineering of Web sites. Most of the tools that exist today are for creating ad- hoc, page-at-a-time Web pages. They do not let designers separate content from its format. So we need tools in this area and these tools have very different requirements. Standards based tools that do not lock the designers into proprietary solutions and that interoperate with various other standards based content management systems, application servers are the future of the Web development tools
     

    References

     
  • Forrester Forum, March 1998.
    •  
  • Forrester Report, "Avoiding Browser Chaos", June 1998.
    •  
  • Forrester Report, "Computing to Go", June 1996.
    •  
  • The Economist, "The Future of Computing", September 12, 1998.
    •  
  • Forrester Brief, "Content Management Update", December 1997.
    • A Standards Based Automotive Electronic Service Manual   Table of contents   Indexes   XML and CDF: GCA's XML Conference Web Site