[111Design.ca]

111Design Consulting

Supporting Industry Standards and Accessibility [Navigation]

Menu

[toxic waste]

design tips

You are here:  Design Tips » Server Side Includes

tip#3

Server Side Includes (and other tricks for reducing page weight)

See Also: Design Tips » Images

Server Side Includes are remote files (usually javascripts or style sheets) that are called in the head section of a document. They can speed up page load time considerably, even give your Site a better ranking with the search engines. Embedded javascripts and inline style sheets require a LOT of code. Search engines look for relevant text. This other stuff means nothing to them. The higher up on the page in the source code your content and keywords appear, the more they are going to like you. That's another reason for using table-less layouts. Here are some examples:

Put javascripts in a plain text file giving them a ".js" extension. The code shown below can go in the head or body section of your page, depending on what the script does.
 
<script type="text/javascript" src="preload.js"></script>
<script type="text/javascript" src="menu.js"></script>

Instead of cluttering up your page with inline styles, put these in a separate text file giving it a ".css" extension. Style sheets are cached, meaning, they only need to be downloaded once. Both the @import statement and any media attribute other than "screen" effectively hide complex styles from Netscape 4 which tends to choke and crash on such things. Example:
 
<link rel="stylesheet" type="text/css" href="plain.css">
<link rel="stylesheet" type="text/css" href="fancy.css" media="all">
<style type="text/css">@import "crashburn.css";</style>

For XHTML (Note the space before the trailing slash):
 
<link rel="stylesheet" type="text/css" href="mystyles.css" />

If you must use inline styles, surround them with comment tags to prevent old browsers from rendering them as visible text. XHTML style comments look like this:

<style type="text/css">
/*<![CDATA[*/
body, p { margin: 10px; padding: 10px; }
/*]]>*/
</style>

CSS shorthand is another great space saving trick worth learning. Compare the two examples below which both mean the same thing:

p { font-family: Verdana, Arial, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: italic;
color: #ffccff;
background-color: #440044;
background-image: url(images/flower.gif); }
 
p { font: bold italic 13px Verdana, Arial, sans-serif;
color: #fcf;
background: #404 url(images/flower.gif); }

And...

ul { border-top: solid 1px #ffffff;
border-right: solid 1px #ffffff;
border-bottom: solid 1px #ffffff;
border-left: solid 1px #ffffff; }
 
ul { border: solid 1px #fff; }
 
or:
 
p.notes, ul, div#menu { border: solid 2px 1px 2px 1px #fff; }

The last example gives paragraphs with a class attribute of "notes", a div block with the id "menu" and all unordered list boxes a white border two pixels thick on the top and bottom, and one pixel thick on their right and left sides. Top, right, bottom and left border attributes must appear in the order I've typed them. One way to remember it is to think of the word, "trouble" (TopRightBottomLeft)... because that's what you'll get if you mix them up! The same shorthand and rule applies to margin and padding. Note that any hexadecimal color with repeating values can be shortened to 3 characters. And elements sharing the same style attribute(s) are grouped together to save space. You don't have to repeat the same rule over and over.

Copyright © 2003-2009, 111Design.ca