SiteKickr Web Development

Structuring your Site – Layout vs. Templates

Phil LaNasa

When I hear the word layout, what instantly comes to mind is a Photoshop file with design details for an upcoming web project. On the other hand, when I hear the word template, I think about a group of web files, grouped together to produce a layout.

There are three basic levels of site structure:

  1. Static. With static files, the site layout is part of each and every web file. This, arguably is the fastest performing method, but it presents a challenge when it comes time to update the site layout. That challenge usually outweighs any performance gained.

    For example, consider that your website contains 100 pages. Each page containing the HTML markup for your header, content, sidebar and footer.

    Now, consider that you would like to add a slogan next to your logo, in the site header. If you've done this before, you know what a painful experience this is. You need to change the HTML markup in all 100 of those files.

    Depending on the nature of your update, you might be able to use your code editor's file search and replace function, but this isn't always easy or reliable.
     

  2. Templates. This is the middle ground of updatability and performance. WordPress are developers are familiar with this method.

    In a typical structure, you create template files for your header, footer and sidebar. Then you include those files on every page in your site.

    For example, your index.php file might look like:

    <?php
    require('header.php');
    echo '<p>This is my content.</p>';
    require('sidebar.php');
    echo '<ul><li>This is my context-aware sidebar item</li></ul>';
    require('footer.php');
    ?>

    The header.php will contain your Doctype declaration, head tag, opening body tag, and logo and navigation markup. Your sidebar.php might contain context-aware side navigation. And, the footer.php would contain any less used navigational links, and your copyright.

    What could be better than this? Any time you want to update your logo file, add a slogan, change your sidebar or footer text, all you need to do is update the one file.

    But, what happens when we want to wrap the entire site in another <div>, or change the context-aware sidebar to an ordered list (<ol>). This is doable with the "template / include" method above, but is very sloppy.
     

  3. Layout. Unless I'm working in a framework built on the "template / include" method (such as WordPress), I always opt for the Layout method from the get-go.

    The Layout method offers the ultimate in flexibility, because your dynamic elements are stored in variables, and output by the layout file.

    This, no doubt, needs an example. To produce the same results as with the template method index.php above, in the layout method, the index.php might look something like:

    <?php
    ob_start();
    echo '<p>This is my content.</p>
    $content = ob_get_contents();
    ob_end_clean();

    ob_start();
    echo '<li>This is my context-aware sidebar item</li>';
    $sidebar = ob_get_contents();
    ob_end_clean();

    include('lay_default.php');
    ?>

    You'll notice two things here. First, that we did not wrap the <li> with a parent <ul> or <ol>. And, second, that we are storing these content elements to variables.

    Then, we are including a lay_default.php file. Now, how can this possibly produce the same results as above.

    Let's start by explaining what ob_start() does. Essentially, it creates an output buffer, allowing you to store all content created afterwards to a variable, instead of sending it directly to the output stream.

    Most languages offer a means to do this. In ColdFusion, for example, you would use the <cfsavecontent> tag.

    Our layout file might look like this:

    <!DOCTYPE HTML>
    <head>
    ....
    </head>
    <body>
      <!-- logo markup goes here -->
      <!-- navigation here -->
      <div id="content">
        <?php echo $content; ?>
      </div>
      <div id="sidebar">
        <ul>
          <?php echo $sidebar; ?>
        </ul>
        <!-- global sidebar items -->
      </div>
      <!-- footer stuff goes here -->
    </body>
    </html>

    Pretty great, right. Now, if we want to change that <ul> to an <ol> at any point, we only have to do it once, in the lay_template.php file! If we want to wrap the site in another <div>, same deal.

 

Essentially, we gain three things with the Layout method:

  1. Scalability – We can change the layout file at any time. If we want to take advantage of new HTML 5 elements, we can do so easily, in one place.
     
  2. Performance – We're only opening one additional file, the layout file.
     
  3. Simplicity – The number of template files needed is reduce, making your site easier to maintain.