{"id":756,"date":"2012-09-12T00:24:39","date_gmt":"2012-09-12T00:24:39","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=756"},"modified":"2012-09-12T00:26:04","modified_gmt":"2012-09-12T00:26:04","slug":"layouts-templates","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/layouts-templates\/","title":{"rendered":"Structuring your Site – Layout vs. Templates"},"content":{"rendered":"

When I hear the word layout<\/em>, 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<\/em>, I think about a group of web files, grouped together to produce a layout.<\/p>\n

There are three basic levels of site structure:<\/p>\n

    \n
  1. Static.<\/strong> 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.\n

    \t\tFor example, consider that your website contains 100 pages. Each page containing the HTML markup for your header, content, sidebar and footer.<\/p>\n

    \t\tNow, 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.<\/p>\n

    \t\tDepending 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.
    \n\t\t <\/li>\n

  2. Templates.<\/strong> This is the middle ground of updatability and performance. WordPress are developers are familiar with this method.\n

    \t\tIn a typical structure, you create template files for your header, footer and sidebar. Then you include those files on every page in your site.<\/p>\n

    \t\tFor example, your index.php<\/em> file might look like:<\/p>\n

    \t\t<?php
    \n\t\trequire('header.php');
    \n\t\techo '<p>This is my content.<\/p>';
    \n\t\trequire('sidebar.php');
    \n\t\techo '<ul><li>This is my context-aware sidebar item<\/li><\/ul>';
    \n\t\trequire('footer.php');
    \n\t\t?><\/code><\/p>\n

    \t\tThe header.ph<\/em>p will contain your Doctype declaration, head tag, opening body tag, and logo and navigation markup. Your sidebar.php<\/em> might contain context-aware side navigation. And, the footer.php<\/em> would contain any less used navigational links, and your copyright.<\/p>\n

    \t\tWhat 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.<\/p>\n

    \t\tBut, 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"<\/em> method above, but is very sloppy.
    \n\t\t <\/li>\n

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

    \t\tThe Layout method offers the ultimate in flexibility, because your dynamic elements are stored in variables, and output by the layout file.<\/p>\n

    \t\tThis, no doubt, needs an example. To produce the same results as with the template method index.php<\/em> above, in the layout method, the index.php might look something like:<\/p>\n

    \t\t<?php
    \n\t\tob_start();
    \n\t\techo '<p>This is my content.<\/p>
    \n\t\t$content = ob_get_contents();
    \n\t\tob_end_clean();<\/p>\n

    \t\tob_start();
    \n\t\techo '<li>This is my context-aware sidebar item<\/li>';
    \n\t\t$sidebar = ob_get_contents();
    \n\t\tob_end_clean();<\/p>\n

    \t\tinclude('lay_default.php');
    \n\t\t?><\/code><\/p>\n

    \t\tYou'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.<\/p>\n

    \t\tThen, we are including a lay_default.php<\/em> file. Now, how can this possibly produce the same results as above.<\/p>\n

    \t\tLet'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.<\/p>\n

    \t\tMost languages offer a means to do this. In ColdFusion, for example, you would use the <cfsavecontent><\/tt><\/code> tag.<\/p>\n

    \t\tOur layout file might look like this:<\/p>\n

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

    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<\/em> file! If we want to wrap the site in another <div>, same deal.<\/li>\n<\/ol>\n

     <\/p>\n

    Essentially, we gain three things with the Layout method:<\/p>\n

      \n
    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.
      \n\t\t <\/li>\n
    2. Performance – We're only opening one additional file, the layout file.
      \n\t\t <\/li>\n
    3. Simplicity – The number of template files needed is reduce, making your site easier to maintain.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      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…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[34,16,41,4],"tags":[207,205,206],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/756"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=756"}],"version-history":[{"count":10,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/756\/revisions"}],"predecessor-version":[{"id":768,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/756\/revisions\/768"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}