RajeshGoli.com :: Technology - Holy Grail of Web Site Development

Looking to create a web site of your own? There is one thing that you can learn from my (not necessarily good) experience.The golden rule of web development - Always separate the content from the design. Now, you ask me, what is content? What is design? Why they should be separated? Let me try to answer these questions one by one.

Content of your website is the information you want to display on your site.In a simple example of my site, the content is the C programming information that I want to display.

The design of your site is the "look" of it. It is all of the HTML tags that you write, all the CSS you type in. The HTML tags and the Stylesheets that you use (for most part) define how your page is formatted. They determine how your web page will look. Simply put, design in your site is all but its contents.

Ahh, you say, wondering why design and content should be separated. Well, there is one most compelling reason to do so. You don't want to edit HTML tags or add CSS code every time you change something simple in your site. In corporate terms, designer is not necessarily the same dude as the programmer ( he's a nerd ) or the dude that types in content, and you should keep them in separate cubicles. You are beginning to get an idea, but you still ponder over the relative insignificance of the issue. After all, you have a great looking site which has all the content you need. Before you relax, I just have one exercise for you. In the about page, just add an address next to your name. As you can see, you are typing in HTML to format your address, the content typing dude need not necessarily know this. He will not know that address is usually aligned to right (ok, left, if you say so , or does not know how to align it right. The designer dude knows this. But he does not know your address.

People like me, who are both content dude and the design dude themselves may find the whole discussion rather silly. But, hey, hold on! This can save many hours of indenting every repeating item in your site manually. I mean, I know how you hate to type tags to align everything into place every time you add something new.

Revelation dawns on you. You begin to realise that this separation is really an extension of the policy 'divide and conquer', which has worked so well in computer science. You begin to appreciate the number of times this technique could have saved your violated deadlines. Great! you say, just like I did, and ask, what on earth brings about this magic separation.

As an aside, you may wonder, as I did, why the w3c people, the supposed punters of world wide web, overlooked such a basic rule when creating HTML standard. At the inception, the Internet did not have many complicated sites. Most of the sites just had basic information and didn't need complicated design. And most Internet users were savvy, so needing to type a few tags to align your data didn't look like much. But as the bad days showed signs of a 20-30 nested tables in every decent corporate website, w3c woke up, and released the magic remedy, which will the subject of next paragraph.

I am no expert in web design matters. But I will tell you how I went about doing this as related to my site. My site was a mess to start with, with no separation whatsoever. Every time I had to update my site, I went through a painful procedure of editing tags and keeping my temper under control. Then, One fine day, I discovered the three magic words that would (apparently) seemlessly bring about the separation, Cascading Style Sheets. I discovered that CSS can be used to format and indent the whole page. The designer dude in me would just code CSS. the content dude in me would still need to have know HTML, but he would most of the times just type in DIV tags. So it was okay. It was like a dream, until I woke up from it.

One fine day, the designer dude in me wakes up to the fact that he doesn't like the look of the site anymore. He wants to change the whole site's look. He tries to do so without disrupting the way content dude works. But realise very soon, that this is no ideal world (a la CSS zen garden, www.csszengarden.com ). He realises that he cannot change the design at this stage without disturbing the content dude!

Note to CSS fans (I am one too : Before any of the ardent CSS fans flame me saying how good CSS is and how ignorant I am, please consider the fact that CSS implementation is inconsistent across major browsers. For instance, Internet explorer puts padding within the width of a block, reducing the content. And please consider the effort it takes to make a site that has "pure design", as in ability to change the look without affecting HTML. Also, consider the effort it takes to design a CSS site that has consistent look in all browsers.

One more turmoil ensues. It takes a while for it dawn on my bird brain that the way out of this new mess is the templating system. Now what the heck is a templating system? you ask. Well, It is a system which completely separates design and content. In this system, the content is simply stored in database. The content dude just fires up phpMyAdmin, types in the content into the database. He knows not a thing about how it is displayed. The designer gives the system the exact look of the page, and is at liberty to choose from any way to design it.

But, hey! who connects the database thingy to the HTML thingy? Enter the programmer dude. The designer dude places placeholders (or variables in nerd's paralance) to represent content that will eventually be put in its place. The programmer dude writes scripts that extract information from the database and puts it in the variables. Now the system correctly places the information from the value of variables. Perfect! I hear you say, whats the system called. Well, Its called smarty.

The whole idea was given to me by Mahendra Kalkura, a php wizard and a designer with great sense of aesthetics. This dude described to me the whole concept and pursuaded me to adopt it. Other wise you would still be seeing me editing my table laden static HTML pages and wiping buckets of perspiration that resulted from the process.

Created on 19^th September 2004

1. Good Effort

Hai
Now what are you doing?? Studying or working. All the best. Technology needs guys like you . Can you tell me the basics of php

Roseena on 5^th December 2007

2. suggestion

Undoubtedly it is a gud stuff...but provide sum links to the this techy stuff so that others can try there hand too.gud job..

Rajesh on 2^nd September 2005

3. congratulations

rajesh u have done a good article on the new technology over the web designing .
meet u later bye

lakshmibabu on 22^nd June 2005

4. An excellent work

hi Rajesh ur this piece of work is something which really needs to be extolled

Surendra Kumar on 29^th April 2005

5. web

hi rajesh ur article is good and beutiful

santhosh on 12^th February 2005

6. So you are the dude....

stop using the word dude....

Harish on 26^th October 2004