Oct 21

Separating the Content from its Presentation

The main idea behind the concept of separating the content from its presentation is to allow website developers a useful framework to develop their website giving them the ability to change the website’s appearance whenever they like without needing to redo the content structure. This article will explain the rationale behind separating content from presentation.

Don’t get me wrong, there isn’t just one method for implementing this concept. More than that, since the introduction of technologies such as CGI, ASP, and PHP that allow web developers to generate dynamic web pages, a lot of companies have found creative ways to develop their website applications using this concept as their foundation.

Over the past few years, the internet community has been trying to create a set of standards for creating web sites. A new technology called CSS or Cascading Style Sheets has been introduced. There is nothing actually new in the way CSS handles a web page’s presentation. CSS allows the developer to define a style for each html tag element. This is similar to the method developers (programmers) used in the old days when they attached a variable to each html tag defining its style. The major difference is that CSS style definitions can be interpreted by most of the existing browsers available while in the older method the dynamic web page engine performs the interpretation.

The internet standards organization W3C has encouraged the use of CSS by enhancing its ability to control the web page’s look and feel. New style options have been added to the CSS specifications that have not been added to the HTML description language. There’s no doubt that this was a smart move. It’s forced web developers to use CSS to achieve an attractive web page that also supports the principle of content separation. Unfortunately CSS did not find its way into the internet mainstream easily because of compatibility issues with most web browsers. These days CSS is widely supported by most of the major web browsers, while CSS2, an enhanced version of CSS still has serious compatibility issues.

Obviously, the separation of content from its presentation deals not only with the styling aspects, but also with browser compatibility issues. The styling aspects were the first to be handled by web developers and web designers. As the complexity of information technology (IT) systems become increasingly more difficult to maintain, the internet community is looking for a solution that will become a standard so that content can be easily be managed. One goal for this standard is to define a “language” that IT systems can “talk” with each other and exchange information. Large corporations have historically used many different software platforms in their networks to conduct business. Internet based applications can provide a single platform that can act as an intermediary between all of these different systems and allow communication between them.

XML (Extensible Markup Language) has been adopted as a standard to present the content itself. OFX (Open Financial Exchange) is a close relative of XML that has been widely used by financial institutions who have been using Electronic Data Interchange (EDI) systems to transmit orders and invoices over private networks, intranets and the internet for several years.

The need to present the content in a standard way that separates it from any design elements was so urgent that for the first time in software development history all the three major players (SUN, IBM, and Microsoft) actually agreed with each other and XML become a standard almost overnight and was adopted by many content providers and news agencies.

Yet the concept was not fully implemented. CSS handles the styling aspects while XML handles the document content. What about the webpage layout? New websites are been published each day by thousands. Every day millions of new web pages are being added to the internet’s global database. Webmasters have found that changing the page background color or the font color might not be enough to keep their website fresh and polished to compete with other new websites. However, changing the website layout can sometimes involve a lot of effort because it involves modifying the web page source code. XSL was introduced to solve that issue. Consider XSL a set of rules that can describe a web page layout. Combine it with XML (and optionally with CSS) you will get a valid html file.

XSL is very similar in its mechanics as any other dynamic web page generator. Beside the fact that XSL is platform independent, its biggest advantage is that it can be processed on the client side. The web server sends the client the content using XML format and the layout definition using XSL format. By doing that, the load on the web server’s CPU is reduced allowing it to perform other tasks more quickly. However, XSL was not adopted by all the major web browsers. So unlike XML, XSL has not found its way to the market easily.

Before you run back to your desk and start redesigning your website according to these magnificent standards, you should be aware that those technologies are really not needed most of the time. In fact, using them unnecessarily can cause performance problems. CSS usually will not cause your system to slow down. Just try to keep your CSS file as small as possible. Many web developers maintain large CSS files with lots of unused style definitions. Deciding to work with XML is a serious decision. If your website generates dynamic web pages supported by databases like MySQL, adding additional XML functionality will definitely reduce your website performance. Sometimes you won’t have a choice and will need to upgrade your hardware to maintain your website’s performance. There is no rule of thumb for this issue. The decision should be based on each system and its engineering demands.