Section 1.5. Content Architecture | Google Advertising Tools: Cashing in with Adsense, Adwords, and the Google APIs

1.5. Content Architecture

You should think about site architecture before you create your first content page. Site architecture should be arranged so that you can make global changes to the look and feel of a site with no impact on the content. You also want to be able to change the code for an ad programor even swap one ad program for anotheronce and have the changes take effect across your site in all the content pages.

1.5.1. Server-Side Includes

The simplest mechanism for implementing a "change code in one place, change the whole site" architecture is to use server-side includes (See "Separating Content from Design," earlier in this chapter).

Most web hosting accounts provide a server-side include mechanism. You tell the web server which file extensions mean that a file can have includes. When the web server processes the file to send back to a browser for display, it looks for the special syntax that means there is an include. When it sees this syntax, it expands the page it is serving to the browser by expanding it with the file indicated by the include's syntax.

The default file extension for a web page is usually .shtml, although you can add other file extensions so that your web server will look through them for includes (there is, of course, a slight performance hit for this).

Figure 1-4 shows a pretty typical Linux and Apache web host administrative utility with the mouse cursor pointing at the button that lets you add file extensions to be parsed for includes.

Figure 1-4. You can add file extensions to be parsed for includes by the web server

For example, suppose you have a simple .shtml home page like this:

     <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">         <head>             <title>A simple little home page</title>         </head>         <body>         <h1>Hello!</h1>         ...         </body>     </html>

You could create two include files:

styles.html , which contains CSS (Cascading Style Sheet) styles for the elements used on the site such as font size and color
top-bar.html , which contains the site navigation bar

You can link to an external CSS style sheet, or define your CSS styles in an include file. Either way, to change styles sitewide, you just have to change the style definitions in one file.

The site home page, and every other content page on the site, includes these two files as follows:

     <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">         <head>             <title>A simple little home page</title>         <!--#include virtual="includes/styles.html" -->         </head>         <body>         <!--#include virtual="includes/top-bar.html" -->         <h1>Hello!</h1>         ...         </body>     </html>

Now it's easy to change the appearance of the text on each page of the site by just making one change to styles.html. And if you need to change the appearance of the navigation bar, you can simply make the changes to top-bar.html, and it will be replicated across the site.

There's generally no requirement that included files be named with any particular file extension; instead of .html you can perfectly well use .foo, or anything else you'd like.

1.5.2. PHP Includes

If you are constructing a dynamic site using PHP (See "Separating Content from Design," earlier in this chapter) or using PHP for other programmatic purposes on your site, it makes sense to use the PHP include mechanism.

Whatever technology you use to serve your site, it undoubtedly has an include mechanism that works pretty much like server-side includes and PHP includes .

Most Linux and Apache based web hosts provide PHP scripting automatically for files named with a .php file extension. Within these files, PHP includes work almost exactly like server-side includes.

For example, suppose you have a simple little web home page in a file named index.php:

     <html xmlns="http://www.w3.org/1999/xhtml">         <head>             <title>Featured Feeds - the best of the best syndication</title>         </head>         <body>         ...         </body>     </html>

If you put the CSS styles for the elements of the web site such as the appearance of web site text in a file named style.inc, it can be included in PHP code like this:

     <? include 'style.inc'; ?>

The code for the top portion of a page, to be shared in common across the site, might be put in a file named top.inc. It could now be inserted at the top of the body of a content page using the PHP include directive:

     <html xmlns="http://www.w3.org/1999/xhtml">         <head>             <title>Featured Feeds - the best of the best syndication</title>             <? include 'style.inc'; ?>         </head>         <body>             <? include 'top.inc'; ?>             ...         </body>     </html>

As with the server-side include example, if all the pages in a site use the PHP directives to include style.inc and top.inc, then site styles and the top element can be changed globally just by changing the contents of these include files.

Note that you can include PHP codeincluding other PHP include directiveswithin PHP includes and that there is no requirement that includes be named with any particular file suffix.

1.5.3. Optimal Include Layout

The optimal include layout is to provide includes for both geographic areas of your web page and for specific ad programs. The two should not be the same, although one can go inside the other and (at least initially) consume all its area. If you don't follow this organizing principle, down the roadto take one exampleyou'll find that you named the include for the entire right side of your content pages Google_ad_right, even though it by now contains a variety of graphic elements, but no Google skyscraper.

It may be a bit easier to understand how to lay out includes with future flexibility in mind using an example. Featured Feeds, http://www.feedly.com, shown in Figure 1-5, is perhaps a bit cluttered with ads, but the underlying composition of PHP includes will make this easy to change. The composition of PHP includes used to construct the Feedly.com site is shown in diagram form in Figure 1-6.

Figure 1-5. While the Feedly.com site appears cluttered, the underlying PHP composition makes it easy to clean up

Figure 1-6. The composition of includes used in Feedly.com

Figure 1-6 shows that there is an include for each geographic area of a page that will carry graphics or ads: Top.inc, Left.inc, Bottom.inc, and Right.inc. Within the geographic includes are ad program specific includes for each ad program or type of ad. A final include holds a navigation panel at the top of the site above the page individual content.

This arrangement gives the maximum flexibility and won't have you contorted like a pretzel in the future. You can change any of the graphics in a geographic include. Alternatively, you can change ad code and swap, add, and delete ad programs in a very granular fashion. Changes take place globally across a site, but they have very little impact on the rest of a page.

Since Feedly.com is organized as I've explained, it took me less than 10 minutes to clean the site up a bit by editing the contents of the Left.inc and Right.inc include files. Once I uploaded the edited include files to my web server, the changes that I made to these includes were instantly propagated throughout all web pages on the site. I think you'll agree that the toned-down site is less cluttered (Figure 1-7), but tweaking a content site until the mixture of ads and content is right should be an ongoing effort. Fortunately, using includes takes a great deal of the pain out of the process.

Figure 1-7. It took only a few minutes to make all the pages on the site less cluttered