Planning Your Templates

A very common mistake that new CMS developers make is to trivialize the task of planning their site (or planning application development in general). As you'll probably read in a couple of places in this book, it's one thing to create a CMS-enabled site, but it's another matter entirely to create a good CMS-enabled site. Unlike in traditional Web development, you're not creating pages, you're creating templates. When you create pages, you have complete control over every aspect in your site. There are no surprises and there are no "gotchas," because you've been over the entire site and you're building one page at a time. If you encounter a page that doesn't quite fit, you can make slight adjustments so that it renders properly. Unfortunately, as you develop your site and you build more pages, you are "stuck" coding each page; or if you've componentized some portions of the page, you're still coding unique HTML that may only exist on that one page largely because the content may force changes (images that have to be there, but are bigger than you planned on, for example).

Conversely, using CMS, you can more consistently regulate how your site is developed through the use of templates. You're probably familiar with the concept of templates in the context of Word, Dreamweaver, and FrontPage. In each case, the template provides a framework so that you can start entering content or adding functionality. The advantage is that as you create new pages or documents based on this template, you can reduce the repetitive tasks such as formatting and you only have to concentrate on the actual tasks of entering the unique content or functionality. In the case of CMS, you'll define how each page within the site will behave by creating the "rules" for how a template should render content given a certain set of circumstances. This kind of development generally leads to reduced maintenance, more consistent site design, and an improved user experience. However, you need to be careful to appropriately plan your new site to realize these benefits (yes, we're repeating ourselves because it's important).

So, how do you start the process of developing your site in this sort of environment? Well, from a template perspective, there are two steps to begin with: analyzing your existing site (or new design) and creating your template framework.

Analyzing Your Site

After reading the first part of this chapter, you're probably beginning to analyze your own Web project. You're mentally walking through the different page types within your own site, or you may even be "flipping" through your site right now. If you're doing either of these activities, you're on the right track. The trick is to try to understand precisely how your site works, identifying the common elements and varying pages types. Ultimately, this will lead to a general definition of what templates might make up your site. What you'll probably find are a few basic page designs, common across your site. In a very large site, you may have groups of pages with a common design and/or functionality set. As you navigate through your site, take notice of how the navigation appears or doesn't appear. How many content elements make up the page? All these questions will help you better understand the construction of each page, and ultimately the components that you'll have to build.

Later, as you're developing your site, you'll probably find that your initial plan wasn't 100% accurate. Don't be discouraged it happens to the best of us. The important thing to remember is that the changes you're making will likely improve your site, including details that you probably overlooked in your enthusiasm to begin development.

To begin this process, find a page design that seems to be common to a grouping of content. This design may be common to the whole site which is ideal or it may be common to a subset of the content. What we're looking for is something "generic." We want to try to create a template that has no unique elements but contains only those page elements that are common to the set of content you've logically grouped together. In the BOTS Consulting site, you'll notice that the branding image, the global navigation, and the footer always appear the same way, no matter what page is shown. Each of these elements is common to all the pages within the site and therefore can be included in your generic template. Once you've identified common elements, try to identify those elements that may be semiconsistent across your site. For example, in the BOTS Consulting site, you may have noticed that the left-hand navigation appears most of the time within the site. Include these elements in your generic template as well. In the BOTS site example, the left navigation appears about 80% to 90% of the time (we'll deal with the rules for when it doesn't show up later), so we'll include that in our generic template.

Once you've finished assembling the generic template (you can do this all in HTML), load it in a browser and compare it with the rest of your site. You should be able to clearly identify how each page could fit into this template. There may be gaping "holes," which may or may not be filled with content (remember, though, white space is good), but in general you should be able to "see" your site. Figure 12-7 shows the generic template for BOTS.

Figure 12-7. The BOTS Consulting generic template

If you compare this generic template with the pages you've seen earlier in the chapter, you'll notice that all the other pages have the core design elements contained in the generic template. Essentially what we've done is to create the basis for all the other templates, which will then support the site postings. After we've created this generic template, we need to start identifying the components that make up the template. For example, the header is a common element and could be componentized. The same holds true for the footer and navigation. It's this kind of site deconstruction that will help you establish your site framework.

Creating Your Template Framework

Once you've developed your generic template, start analyzing each page in your site to determine the components that make up each page. Some of these components will be included in the generic template, while others will only be included in specific templates. Remember, a template isn't limited to the visual design; there may be functionality differences as well. Let's return to the BOTS Consulting Web site and take a look at the home page (Figure 12-5). You'll notice that the generic template and the home page share a number of similarities, but the home page contains a news summary, a case study summary, and introduction text. These two elements of a page are a great start in identifying the unique elements in your site.

In Chapter 36, we discuss several methodologies that you can use to help with this process. For example, a content inventory will help you assess all of the content in your site. After the inventory is finished, you'll be in a better position to determine your specific template needs. Once you're ready to start building your templates, the generic template will serve as your foundation, eliminating a lot of the grunt work in developing your templates.

In the case of the BOTS Consulting site, the IS/IT department created several components (user controls) to include in the generic template. One element is the header user control. This user control primarily contained two elements: the branding and the global navigation. In Figure 12-8, you can see the Design view of that control. If you look closely, you'll see that the control simply contains a graphic banner at the top that contains the branding and the photo element. Just below that graphic is the table server control, which will ultimately house the main navigation when the code is executed.

Figure 12-8. The header user control in the BOTS site

You'll notice that there isn't much to the control. However, this control can be used over and over again across the site. In fact, every template in the site will use this control, since it provides both the branding and the navigation.

As the BOTS Consulting IS/IT department analyzed their site, they ended up creating the following user controls, which are common to all templates:

• Header

• Footer

• Side navigation

Each of these elements is common to all of their templates. Interestingly, it's possible to further deconstruct their site. For example, the footer contains three distinct elements: a copy of the main navigation, the copyright message, and three global navigation elements. The header contains two distinct elements: the branding image and the main navigation. Finally, the side navigation also displays the currently authenticated user, as well as navigation to sections within the site. Depending on your particular needs, you may choose to create even more granular elements to build your templates. Although BOTS chose to create "larger" components, creating smaller components may have advantages, such as the ability to place the global navigation on a page, without carrying the main navigation and copyright notice. Again, the choice is up to you.