Overall Layout

This page applies to version 7.3.0 and up.

This page will describe every part of the "overall" template, why things are in certain places, etc. with regards to the overall template.

Note that on this page, whenever we speak of templates or anything like that, we will be referring to how things work in the default design, to help you understand how the default design works. But since you ultimately have full control over templates, you can change things to work however you want¹⁾.

Default RWD Uses HTML5 Boilerplate Project

When we were working on the new RWD layout, we decided to use the HTML5 Boilerplate as the starting point. This is the same open source project used by many sites across the web, and many other modern web based software using HTML5 as well. We decided to do this as it ensures we start from the best practices of the industry. That said, we've made heavy modifications and removed a lot that is in the starting HTML5 boilerplate contents. As the project says, it is very "delete key friendly" meaning they make it easy to remove the stuff that you do not need to use.

There is also a lot of modifications to make the HTML5 boilerplate fit into the Geodesic software context.

Our developers actively monitor changes on the HTML5 Boilerplate project, and will apply changes based on new versions of the project as needed. We will try our best to keep this process as streamlined as possible so that updates are as easy as they can be. But at the same time, if some change to overall templates are needed to, for instance, fix some issue on a new device, we will have instructions on how to apply the changes required as part of the full update instructions. Whenever the changes are minor in nature and have little (if any) effect on existing sites, we will omit such changes. In other words, if you follow the full update instructions, you will get all the changes you "need" and skip over any that aren't that big a deal.

3 Layout Starting Templates

There are 3 main layout templates listed below:

layout-1-column.tpl
layout-2-column.tpl
layout-3-column.tpl

Note that none of the 3 templates are used directly, they are not attached to any pages in the system. If you make a change in any of those templates, that change will have no effect on your existing design. These templates are used as a starting point; every "overall" page template started from one of these 3 templates. For instance, basic_page.tpl used layout-1-column.tpl as the starting point, while the listing details templates used layout-3-column.tpl as starting points.

All 3 layouts have very similar contents, in fact the beginning part up to the <body> tag is going to be identical on all 3 templates. We will go over that section first.

HTML & Head Explained

This section will explain the common section up to the beginning body tag. This section will be identical for all 3 layouts.

The HTML will look like this:

<!DOCTYPE html>
<html class="no-js">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>{module tag='module_title'}</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
		{head_html}
 
		<!--  This loads the RSS feed  -->
		<link rel="alternate" type="application/rss+xml" title="Newest Listing Feed" href="rss_listings.php" />
 
		{include file='head_common.tpl'}
		<script src="js/modernizr-2.6.2.min.js"></script>
		<script>Modernizr.load({ test: Modernizr.mq('only all'),nope:'{external file="css/old_ie.css"}'});</script>
	</head>

Below the different parts are explained. Note that this is based partly on the HTML5 Boilerplate Docs but changed to reflect any differences with the software.

Doctype

The first line:

 <!DOCTYPE html>

This is the standard HTML5 doctype, it should always be the first thing in the overall template.

HTML & The no-js class

Line 2:

 <html class="no-js">

Allows you to more easily explicitly add custom styles when JavaScript is disabled (no-js) or enabled (js). It is best to keep this intact. Note that the Modernizr library will automatically change the class from no-js to js, but is only able to do this if JS is enabled on the browser. Therefore if the no-js class is still set on the HTML tag, you can be sure that JS is disabled on the browser. One use of this would be to show a paragraph explaining to the user that they need to have Javascript enabled to fully enjoy the website. This will help avoid what is known as FOUC.

You can see more info at Avoiding the FOUC.

The Order of Meta Tags & Title

Lines 4-10:

		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>{module tag='module_title'}</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
		{head_html}

This is just an explanation of the order for the following lines, note that some of the lines have their own additional explanations further down.

As recommended by the HTML5 spec (4.2.5.5 Specifying the document's character encoding), add your charset declaration early (before any ASCII art ;) to avoid a potential encoding-related security issue in IE. It should come in the first 1024 bytes.

The charset Meta tag should also come before the <title> tag, due to potential XSS vectors.

The meta tag for compatibility mode (The X-UA-Compatible Meta tag) needs to be before all elements except title and meta.

X-UA-Compatible Meta Tag

Line 5:

		<meta http-equiv="X-UA-Compatible" content="IE=edge">

This makes sure the latest version of IE is used in versions of IE that contain multiple rendering engines. Even if a site visitor is using IE8 or IE9, it's possible that they're not using the latest rendering engine their browser contains.

The meta tag tells the IE rendering engine it should use the latest, or edge, version of the IE rendering environment.

This meta tag ensures that anyone browsing your site in IE is treated to the best possible user experience that their browser can offer.

This line breaks W3C validation but is necessary for the best experience using Internet Explorer. This is actually the only line anywhere currently in the default design, that causes a validation error. We strive to make the HTML fully W3C compliant and valid, for several reasons, but this line is the one exception. It is the best solution to make sure the website displays the best way possible in Internet Explorer.

Alternative: Add the following lines to the top or bottom of your .htaccess file:

<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=edge"
</IfModule>

You would remove the X-UA-Compatible meta tag from all of your templates, then place the above lines in your .htaccess file. Note that this is compatible with the SEO addon, simply add the lines below the content generated by the SEO addon.

Note that we would have preferred to use this option, however it relies on the Apache headers module, and also requires adding lines to the .htaccess file, which would be adding a little more work than we wanted to add for every single site. Not to mention it would not work for IIS servers. So instead, we can live with having one single "validation error" in exchange for making things a lot easier on site owners. Note that despite this one error, we still put top priority on making sure the default design and software produces fully W3C compliant HTML (other than this one error).

For other solutions and discussion about this, you also might want to read Validating: X-UA-Compatible²⁾.

Using non-standard Port

If you are serving your site on a non-standard port, you will need to set the X-UA-Compatible header on the server-side. This is because the IE preference option 'Display intranet sites in Compatibility View' is checked by default.

Title

Line 6:

		<title>{module tag='module_title'}</title>

The title, by default, is generated by the title module within the software. This module has several configuration settings within the admin of the software, that control what it displays on what pages. Most sites should leave this as-is to allow the title module to generate the title based on the current page being viewed.

Description Meta Tag

Line 7:

		<meta name="description" content="">

The templates come with a blank description, to allow you to enter your own. Generally you would enter a brief description of your site in this meta tag.

Since this particular meta tag has a lot of implications with Search Engine Optimization (SEO), we will briefly mention a few things regarding SEO below.

First you might notice, the templates do not come with keywords meta tag, for a very good reason: all modern search engines basically ignore keywords (this is according to google). Note: do not confuse this with keywords on your website, we are only speaking about the keyword meta tag here.

The description meta tag on the other hand, is used by search engines, primarily as the description used in the search results. As recommended by google³⁾, you should avoid "keyword stuffing" in the description. Keep in mind this description will display below search engine results for your site, if someone sees an incoherent jumble of keywords there instead of an actual description, they are likely to not click on the result.

That said, let us make it clear that the choice on how the meta tags appear on your site is entirely up to you. We recommend to do some research before changing things too much, and avoid "snake oil" companies promising to make your site rank #1… Google Webmaster Tools is a great resource for finding reliable information about the best ways to make your site search engine friendly.

Mobile Viewport

Line 8:

		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

There are a few different options that you can use with the viewport meta tag, each option separated by comma in the "content" parameter. You can find out more in the Apple developer docs.

Here are the default options used by the templates:

width=device-width

This tells the mobile device to set the overall width of the page to be the same as the device width. This is pretty standard for RWD websites.

initial-scale=1

Tells the mobile device to start with a scale of 1.0, which basically means at the normal scale without being zoomed in or out. This also is pretty standard for RWD websites.

user-scalable=no

This prevents the user from being able to use pinch to zoom, and more importantly, prevents the mobile device from "auto zooming" when the user taps on a field to select a value or type in something into the text box.

We would prefer to not use this option, as we feel it is good to let users zoom in on a part of the page if they want to for whatever reason, for instance to zoom in on an image or to see something more clearly. However, both Android and iOS (iPhone) automatically zoom in when you tap on an input field such as a search box or similar, and the bad part, they do not zoom back out when you are done on the field. So after you interact with any input field, your view will be zoomed in. At this time, the user-scalable=no is the most elegant and easiest way to prevent this un-desired behavior.

If you would prefer to allow zooming at the expense of the problems with "automatic zooming in", feel free to remove the ", user-scalable=no" portion from the meta tag, but just be aware of the above mentioned usability problems that may happen as a result.

{head_html}

Line 10:

		{head_html}

This line is required, do not remove it or your entire website design will break! This is a smarty tag, that is unique to the software⁴⁾.

You can read more information about this tag in the design section. Basically this will automatically generate the contents needed to include CSS, JS, and other resources required by the software itself.

Many people ask "what template creates the {head_html} tag", the answer is none: The contents are dynamically generated by many different parts of the software, there is no "one template" that generates the contents. It will change from page to page and even from user to user in some cases. So just make sure it appears in the template at roughly the area that it is at.

RSS Feed

Lines 12-13:

		<!--  This loads the RSS feed  -->
		<link rel="alternate" type="application/rss+xml" title="Newest Listing Feed" href="rss_listings.php" />

This line informs browsers about the RSS feed for your site. Some browsers, such as Firefox, will then have options to "subscribe" to your website, which will basically make the browser monitor the RSS feed for new listings that would show in the RSS feed.

head_common.tpl

Line 15:

		{include file='head_common.tpl'}

This line is a Smarty include tag, what it does is "include" the head_common.tpl template. This same sub-template is included in all of the overall templates.

This allows you to add "common" things to all of your pages, and only edit a single template file head_common.tpl. For instance, if you wanted to insert a custom JS script, you might do it in this sub-template.

Note that in the past (versions before 7.3), the default design actually used a head.tpl which contained all of the lines described in this section. In 7.3 the design now breaks away from that, as it makes it more difficult to customize certain things specifically for certain pages. For instance, if desired, it is now much easier to use a different title (other than the title module) on a specific page, while the rest of the pages on the site continue to use the module title like normal.

Modernizr

Line 16:

		<script src="js/modernizr-2.6.2.min.js"></script>

The software comes with a custom build of Modernizr (using the one shipped with the HTML5 Boilerplate project).

Modernizr is a JavaScript library which adds classes to the html element based on the results of feature test and which ensures that all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv). This allows you to target parts of your CSS and JavaScript based on the features supported by a browser.

Needs to load right before </head> tag:

In general, in order to keep page load times to a minimum, it's best to call any JavaScript at the end of the page using the {footer_html} tag, because if a script is slow to load from an external server it may cause the whole page to hang. That said, the Modernizr script needs to run before the browser begins rendering the page, so that browsers lacking support for some of the new HTML5 elements are able to handle them properly. Therefore the Modernizr script is the only JavaScript file that is not combined with other JS and not delayed in {footer_html}, it is the only one synchronously loaded at the top of the document. Doing so also helps to prevent FOUC.

Old IE CSS

Line 17:

		<script>Modernizr.load({ test: Modernizr.mq('only all'),nope:'{external file="css/old_ie.css"}'});</script>

This uses Modernizr, to load the old_ie.css CSS file, but only for browsers that do not support media queries, which will be Internet Explorer 8 (IE8) and below. This is needed for IE8 and below to work because the design uses a lot of CSS3 techniques that IE8 is simply too old to work with. The old_ie.css file contains compatibility CSS, for instance it expresses font sizes in pixel size rather than root em (rem) units. It also has CSS to make IE8 always show like it is the large desktop size, necessary since media queries do not work in IE8.

If you do not want to support IE8 and below on your own site, you can remove this line for very slightly smaller⁵⁾ page size.

Internet Explorer Support:

Over time the line may be removed once usage of IE8 and below drops. At the current time we support Internet Explorer 8 enough to make sure things "work" in the old browser, but the experience will probably not be as good as a modern browser. Since many government agencies still rely heavily on the old browser, we will continue to support it⁶⁾. Note that we do NOT support Internet Explorer 7 or below because such browsers can be upgraded to IE 8, and because usage of IE7 and below has dropped over the last few years to almost nothing.

Wrapper (CSS Class)

There is one div that "wraps" the entire contents, that will have a class of "wrapper". With CSS you can actually have multiple classes on a single element, separated by space. That is the case with the wrapper as well, it will have one additional class, one of three:

one-column - used in layout-1-column.tpl
two-column - used in layout-2-column.tpl
three-column - used in layout-3-column.tpl

This second CSS class acts to organize the different sections of the page, into either a 1 column, 2 column, or 3 column layout on desktop sized screens.

header.tpl

This is another "include" sub-template. This is where the top menu / logo resides.

Browsehappy

This section displays on Internet Explorer 6, linking such visitors to http://browsehappy.com to upgrade to a modern secure browser.

main

This is the "main" section, where the main column contents go. Note that this is above the sidebars when you are viewing the template HTML. This is how RWD works, the main content appears before the side content so that on smaller screens, when those side-bars are displayed full width, they go below the main content and you must scroll down to see them.

This section is used in all 3 layouts.

This is the left sidebar, it will be directly below the main section.

This is used in layout-2-column.tpl and layout-3-column.tpl.

sidebar2

This is the right sidebar, only used on the 3 column layout in layout-3-column.tpl. The only "build in" page that uses all 3 columns are the listing details templates.

¹⁾

Just make sure you do NOT edit default templates!

²⁾

Note that the linked page is not specific to the software.

³⁾

TODO: find link to google saying this

⁴⁾

Meaning that it is a custom Smarty function, it is not built into the Smarty template system itself.

⁵⁾

a few bytes

⁶⁾

Hopefully one day really old computers still running Windows XP will stop working and fall apart, forcing agencies to finally upgrade to a computer built within the last decade. When that day comes we will gladly stop supporting IE8.

Geodesic Solutions Community Wiki

Sidebar

Table of Contents

Overall Layout

Default RWD Uses HTML5 Boilerplate Project

3 Layout Starting Templates

HTML & Head Explained

Doctype

HTML & The no-js class

The Order of Meta Tags & Title

X-UA-Compatible Meta Tag

Using non-standard Port

Title

Description Meta Tag

Mobile Viewport

{head_html}

RSS Feed

head_common.tpl

Modernizr

Old IE CSS

Wrapper (CSS Class)

header.tpl

Browsehappy

main

sidebar

sidebar2

Geodesic Solutions Community Wiki

User Tools

Site Tools

Sidebar

Table of Contents

Overall Layout

Default RWD Uses HTML5 Boilerplate Project

3 Layout Starting Templates

HTML & Head Explained

Doctype

HTML & The no-js class

The Order of Meta Tags & Title

X-UA-Compatible Meta Tag

Using non-standard Port

Title

Description Meta Tag

Mobile Viewport

{head_html}

RSS Feed

head_common.tpl

Modernizr

Old IE CSS

Wrapper (CSS Class)

header.tpl

Browsehappy

main

sidebar

sidebar2

Page Tools