Grids & Structure

We deploy grid-based layouts ‘behind the scenes’ in all our basic skins. The idea behind these layouts is to provide your website with a solid visual and structural balance from the word go.

These layout structures offer ample flexibility and enhance the visual experience for your visitors, and introduces an easy-to-follow consistency across your site, while allowing you to create and update both design and content in a well thought-out, standardised framework within the constraints of the browser.

Grid-based layouts on the web

There are many resources available if this topic sparks your interest:

Semantics

Although it’s not always possible we do aim for a certain consistency when it comes to structuring a Tank site. We follow established naming conventions to enable logical hooks into the underlying structure of all our basic skins:

header

navigation

canvas

content

sidebar

footer

If you are familiar with CSS you can edit the properties of the underlying structure of your site easily.

Navigation & Architecture

The idea behind most navigation in a Tank site is that of context-sensitivity - which boils down to the fact that navigation will appear when and where is required. If you add a portfolio images will be thumb-nailed for you and be immediately navigable to larger views of the uploaded media. If you add a blog date archives, categories and RSS feeds will be present automagically. All you need to do is consider your content, and what you want to do with it.

Information architecture

Besides this approach the following options are available to further architect your information according to your requirements.

Global navigation

Content grouped into the global navigation is usually accessible via the menu structure in the header of a site and demarcates the most important information on your site. The good stuff goes here.

Utility navigation

Content grouped into the utility navigation is usually accessible via the menu structure in the footer of a site and demarcates the necessary or additional information on your site. Everything else goes here.

Hidden navigation

You can also set content to ‘hidden’ which means it’s only accessible if you either link to it or tell someone where to find it.

A blend between these three options enables you to build almost any site any way you want.

Text & Typography

We use a text-to-HTML conversion tool - a filter - that allows you to write using an easy-to-read, easy-to-write plain text format, which is converted it to structurally valid HTML for rendering on the web.

In a nutshell it means you use certain characters as formatting commands and you place these characters amongst your text to create certain effects (bolding text) and functionality (linking text).

E.g. headings

You can easily apply the full range of headers (h2 to h6) as follows:

# big heading## smaller heading##### smallest heading

E.g. formatting text

Formatting text - bolding text, italicizing text, or even striking text is quite simple. Simply use the basic formatting rules you’ve just seen and surround your text with the appropriate characters.

Typography

We utilise and deploy percentage-based text-sizing, popular font-stacks & web-safe fonts across all our sites. This means that your site is legible and readable from the get-go, but still customisable according to your specifications and personal taste.

There are many resources available if this topic sparks your interest. Please visit the links below for additional information:

Images & Galleries

There are two ways of displaying images in your site: ‘inline’ with the rest of your content, or in sortable collections in a dedicated ‘photo section’ of their own.

Inline images

Images attached to content appear ‘inline’; in other words in the content you place them. The image below has been placed just below this paragraph and is sized automatically according to the width of the container it’s placed in.

That means images look great no matter where you put them. No need to ‘size down’ anything - in fact we recommend uploading your images large enough to cater for higher resolutions.

Inline galleries & slide-shows

If multiple images are attached to content it is possible to ‘string’ these images together into an inline gallery or slideshow. It couldn’t be simpler or easier.

Collections of images

Images can also be placed in order-able collections inside a photo section - a slightly easier way to manage large sets of images as all images are thumb-nailed and placed automatically according to the dimensions of the current skin.

Hello.

Please take a minute or two to familiarise yourself with your new site. We’ve taken the liberty to pre-populate your site with certain information we think you should know: how images & galleries work, getting to grips with grids & layout, touching base with navigation & typography and a quick primer about text (and formatting text) - all the little details that in conjunction make up a modern website. This ‘default’ content can easily be edited, deleted or re-purposed - it’s now your site after-all.