View and vote on the article here: Introduction to Standards-Based Web Design with CSS
Introduction to Standards-Based Web Design with CSS| Category | | | Summary | | Introduction - "Why should I care about standards-based design?" |
| | Body | There has been a major push within the web development world lately to simplify the process of web page creation. Flash back to the "good old days" of web design (about 10 years ago) when the browser wars were in full force. Netscape and Internet Explorer were constantly trying to "one-up" each other by introducing their own extended HTML tags, their own unique ways of accomplishing things like client-side dynamic scripting, and so on. Because of this internal divergence between what was displayed on screen by the two major browsers with what tags, designers frequently had to design at least 2 (and often times more than that) versions of their websites in order to make it usable for their entire target audience. There were also special "printable" versions of pages, which meant a completely separate copy of the site content had to be created, maintained, and updated. When framesets and nested tables started being used as design elements, the end result was a page that was 50KB+ of just source code, before any images were loaded.
The W3C (http://www.w3.org/) wanted to put an end to this madness. They developed a standardized version of HTML, in order to get HTML back to its root purpose, which was a language to describe the content structure of a document. They also developed a new technology called Cascading Style Sheets (CSS), whose sole purpose was to change the presentation (or "look and feel") of a page. This separation is important because it allows you to completely change the way your page looks without ever touching a line of HTML (and possibly accidentally leaving off a table tag which renders your site useless). Developers soon realized the advantages in this, and began pressuring the players in industry to adopt these standards in their browsers. While initial attempts were extremely buggy and unpredictable (trying to get CSS working properly in Netscape 4 is truly a feat), the most recent browsers do a pretty good job of rendering things as expected.
In a nutshell, if you're just coming into the web development world now, count yourself very fortunate. Your life has become much easier (unless of course you have to maintain one of these sites from the "good old days"). Using standards-based design, you can write your HTML code just once (no more multiple versions of content to keep updated), and be confident that even if it looks slightly different among various browsers, it will at least be *visible* on everything that is capable of displaying web pages. CSS is an extremely powerful tool. It allows you to strip several KB off your page size in presentation-related code, create both your text-only version and printable version without ever touching your page content, and change the entire look and feel of your site by editing one file.
Sound too good to be true? Let's take a look at some examples.
Replacing tables as presentation elements
Here's some typical code for creating a table with a small border around it:
<table width="300" border="0" cellspacing="0" cellpadding="1" bgcolor="#000000">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td><p>Here is my content.</p></td>
</tr>
</table>
</td>
</tr>
</table>
Total size: 309 bytes
Here's the CSS version:
HTML:
<div class="box">Here is my content.</div>
Size: 42 bytes
CSS:
<style>
.box {
border: 1px solid #000000;
width: 300px;
}
</style>
Size: 75 bytes
Total size: 119 bytes
The CSS version is almost 1/3 the size! This ratio gets even more impressive if there are multiple boxed content areas, which is the case on most sites. Although the table-based code would have to be repeated for every boxed element, the only thing that needs repeating in the standards-based version is the small amount of code to create the division. The CSS rules are written once and automatically apply to anything with a class attribute of "box."
Change entire look and feel from one page from one file
Most people who develop sites are familiar with the attributes you can give the body tag, such as:
<body bgcolor="#000066" text="#FFFFFF" link="#FFFF00" alink="#FF0000" vlink="#00FF00">
This gives you a dark blue background, white text, and some fancy link colours. You think to yourself, "great, I have my colour scheme all picked out," and you go and create 30 pages, all of them with that same body tag at the top. Now flash forward a few months later, and you decide you really didn't like that dark blue and would rather have something more manly like #FFCCFF, and want the link colours changed accordingly. Changing and re-uploading 30 different files is going to be a lot of fun.
Now let's look at another scenario. Your body tag on all your pages looks like this:
<body>
Yes, you read that right. Just plain old ordinary <body>.
BUT, you have a file called "template.css" which contains code like:
body {
background-color: #000066;
color: #FFFFFF;
}
a:link {
color: #FFFF00;
}
a:active {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
And finally, in the <head> section of all your pages, you have:
<link rel="stylesheet" type="text/css" media="screen" href="template.css" />
Every file that links to template.css will incorporate any formatting changes specified therein.
Is it a bit more complex to set up? Sure, but once you have it this way, changing the background colour on *all* of your pages at once is a simple matter of changing one line of code:
body {
background-color: #000066;
to:
body {
background-color: #FFCCFF;
and the more presentation code you move to CSS, the more flexibility you have.
<plug type="shameless">
I'm currently working on a certification for CAU which will cover this topic (as well as overall standards-based design) in-depth and am planning on incorporating a couple of case studies to illustrate these and other points (one for osix.net and one for cyberarmy.net).
</plug>
However, since this is still in progress, I'll instead point you to another website that incorporates these techniques so you can get a feel for the power of standards-based design: http://www.csszengarden.com/ This site uses exactly the same HTML, but dramatically alters the design of the page based on what CSS file is attached.
Replacing "special" versions of pages
CSS also supports a "media" attribute, to automatically serve a style sheet for a given media device. For example:
<!-- the following style sheet will be used for 'normal' browsers -->
<link rel="stylesheet" type="text/css" media="screen" href="fancy.css" />
<!-- this one will be used when someone tries to print a page -->
<link rel="stylesheet" type="text/css" media="print" href="minimal.css" />
One line of code for your print version. Not too shabby. Additionally, users who wish to view your site without all the bells and whistles can simply disable style sheets in their browser, or even override them with their own custom styles.
Conclusion
I hope that this has given you a little taste for the power that standards-based design can afford the modern web developer, and the advantages to going by this approach are self-evident. |
|
This article was imported from zZine. (original author: snarkles)
There are no replies to this post yet.
|