Web Design Articles

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. My advice to you is to think two steps ahead. Try to predict what kind of future services your website will be providing. Plan your website properly at stage one and save yourself lots of effort later.

 

 

 

 

why-css-is-good-for-google
using-relatve-font-sizes
random-content-rotation
web-design-xhtml-1-1
web-design-resources
accessibility-intro
web-design-xhtml-2-1
why-internet-marketing
xhtml-latin-1-character-references
google-updates
google-dance
css-positioning-properties
fancy-paragraphs
bob-regan-macromedia-accessibility
web-design-technologies
wrox-beginning-php-4-chapter-3-1
julie-howell-rnib-accessibility
handy-hints-web-design
mod_accessibility
pagerank-1
search-engine-crawling
Definition lists - misused or misunderstood.html
Accessible Data Tables
Developing sites for users with Cognitive disabilities and learning difficulties
An Accessibility Frontier Cognitive disabilities and learning difficulties
Inline elements and padding
Basic webstandards Workshop
Internet Explorer and column collapse
Building a page template in CSS - a step by step tutorial
Remote control CSS
Colored boxes - one method of building full CSS layouts
Replicating a Tree table
Creating a graph using percentage background images
Simple, accessible external links
Simple, accessible more links
Styling abbreviations and acronyms
 Web standards checklist
Floated items inside containers
Liquid layouts the easy way
Two columns with color
CSS Centering - fun for all!
Body padding and margin
List inheritance and Descendant Selectors
Taming the Taming lists model
Headings as images - The Lindsay method
Ideal line length for content
Validating Australian Museum Online
Styling the hr element
Styling and font family names that contain whitespace
Sample CSS Page Layouts
how_to_find_good_freelancer
using_colors_on_website
annoying-website-design
 
cross_browser_compatibility
banner-design-success-techniques
 
craig-tanner-freelance
ecommerce-website-design
 
ppc
separating-content-from-presentation
 
alternative
web_page_optimization
 
personalization
communicating_needs_web_designer
 
buzz
design_it_yourself_or_hire_pro
 
social_bookmarking2
w3c_validation.php
social_bookmarking
web_design_guidelines
 
digg
photo_optimization
 
buzz2
website_templates
 
viral_video
web_design_versus_web_development
 
controversy
graphic_formats
 
 
good_website_navigation_is_important