2000 – When I started designing web pages in early 1997, I knew nothing about HTML. I used Claris Home Page 3.0 and put things together until they looked right.

Three years later, I know very little HTML. I still use Claris Home Page. And I still design visually, trying to make things look right.

But there have been a lot of changes, large and small, during those three years. Not only did The New Low End Mac User shorten its name and broaden its focus (from just pre-Quadra desktop Macs), but I’ve learned a lot of tricks that make managing the site a lot easier than it used to be.

The biggest change is invisible to the visitor. Every page on this site uses a technique called Server Side Include (SSI) to combine several files into a single page of code.

Why Use Server Side Include?

A lot of information is repeated from page to page in a site like Low End Mac. Each page has navigation links across the top and a copyright notice on the bottom. Most pages have a navigation bar on the right. Some pages include links to recent articles of interest. And recently I’ve begun creating “printer friendly”* versions of new articles.

* Printer friendly means different things to different people. In my case, it means the page should not run off the right side of your printer paper, the text should be black for clarity (and to save color ink if you’re using a color printer), and links should be underlined (they aren’t otherwise underlined using browsers that support Cascading Style Sheets, but that’s a future article). On Low End Mac, the printer friendly page eliminates the navigation bar on the right and lets the text flow to whatever width your window or printed page is. [2016 – Printer friendly pages were discontinued many years ago, and we now use a WordPress plugin to create a mobile edition of Low End Mac that should print very nicely.]

Once upon a time, the navigation links and copyright notice were hard coded into every page on the site. That meant a quick run through with BBEdit every time January rolled around to change the copyright notice. It also meant I had to open each and every page to make these changes. And then I had to upload all those changed pages. That got to be very time consuming as the site grew.

Then I learned about SSI on the Mac Webmasters email list. Once I understood it, I quickly implemented it on my site. It’s made my page files smaller and greatly reduced the number of files I have to update when changing the site.

How Server Side Include Works

A basic web page contains all the HTML used to display things properly. A page using SSI is incomplete, using external files to complete itself. For instance, every page on Low End Mac includes the following code:

<!--#include virtual="/top.txt" -->

This instruction tells the server to insert the text in the file “top.txt” where the #include instruction appears. In this case, it pulls in a file that looks like this (I’ve shortened it significantly):

<P><A HREF="/index.shtml">Low End Mac</A> &#149;
<A HREF="http://lowendmac.com/news/index.shtml">Mac News Today</A> &#149;
<A HREF="http://lowendmac.com/ibook/index.shtml">iBook Page</A> &#149;
<A HREF="http://lowendmac.com/imac/index.shtml">iMac Channel</A> &#149;
<A HREF="http://lowendmac.com/macinschool/view.shtml">View From the Classroom</A> &#149;
<A HREF="http://lowendmac.com/rumormill/index.shtml">The Rumor Mill</A></P>

That text appears at the top of the page like this (sample links may not work):

Low End Mac • Mac News Today • iBook Page • iMac Channel • View From the Classroom • The Rumor Mill

By having anywhere from one to several dozen pages use the same file, each individual page file is smaller. Better yet, to add a new section to Low End Mac, I only need to update the “top.txt” file, not all the files in that directory.

The same procedure is used with the copyright notice at the bottom of the page, the right-side navigation bar, and links to recent articles.

Most recently, I’ve begun using SSI to create printer friendly versions of editorial content. Instead of having two pages that duplicate the same text (and two files to update when I find a typo, grammatical error, or just want to update things), both pages use the same include file, which contains the body of the article.

That’s how this page was originally constructed* – and the beautiful thing is, because it’s the server that puts all the pieces together, all you see is a single seamless page.

Although it did take quite a bit of time to update the hundreds of pages on Low End Mac to use SSI, in the long run it has saved a lot of time as I’ve updated the copyright notice, changed the navigation, and updated the “recent articles” links.

Part 2: Site Organization

* This page and much of Low End Mac have been migrated to WordPress beginning in early 2013. WordPress does a lot of the same kind of include work discussed here, but I no longer have to code individual files.

Our Web Design Series

1. Using Include Files
2. Site Organization
3. Cascading Style Sheets
4. Site Graphics
5. Web Content To Go
6. Reading Your Web Log
7. Redirects, Naming Files, and Some Rants

Keywords: #ssi #serversideincludes #webdesign #html

Short link:

searchword: serversideincludes