Plan templates

Before responsive

The best approach to convert existing, non-responsive, templates to responsive is to start over completely from scratch. Plan the responsive appearance and functionality based on the devices the website will be designed for.

Many people think it is a good idea to think "mobile first". This basically means focusing on what is important for the website, starting from that and starting to build based on the smallest format (telephones). Things are then added when the format is larger (instead of deleting things when the screen shrinks). One reason for this is that all content is loaded despite a limitation to what is to be seen. This means that all content that is available for normal computer resolution is also loaded for the mobile solution.

Designs for three different types of resolutions are common:

• Computer (up to 978 px)
• Tablet (up to 768px)
• Telephone (up to 480px)

Be sure to start from your website! If the design works equally well for computer resolution and tablet resolution, there is no point in creating a breakpoint for a tablet. A breakpoint for a smaller screen resolution may then be sufficient (such as a telephone).

Here is an example with only a computer resolution and a telephone resolution:

Planning template areas and content areas

It is good to know how other templates should look (not just the home page) when creating the first template. Before the responsive build begins, it is a good idea to sketch out a simple drawing of the templates. Plan the template and content areas to get a good structure,because the templates are built on each other.

• Template areas marks the areas in the template that can be changed when building the next template.
• Content areas means the areas that the editor has the right to add content to.

In this example, sketches are shown for the larger resolution, but the other resolutions are noted.

Based on the above sketches, we build five different templates, a template part with template area, and four templates with content areas:

1. Template parts - Start template

Here we build a start template with

• Top header (100% grey background)
  • Top menu (8 columns wide)
  • Search (4 columns wide)
• Header
  • Logo (12 columns wide)
• Template area (marks the area for new templates based on this template)
• Footer
  • Box 1 (4 columns wide)
  • Box 2 (4 columns wide)
  • Box 3 (4 columns wide)
• Bottom footer (100% grey background)
  • Contact details (12 columns wide)

2. Template 1 — one column

The template is based on the start template (so are all the templates in the example).

The template consists of only one column so we add a grid row and convert it to a content area.

• Centre column (content area, 12 columns)

2. Template 2 — Standard (2 columns)

The template is based on the output template.

The area for the template area is divided into two parts, where each part consists of a column containing columns:

• Centre column (content area, 6 columns)
• Right column (content area, 6 columns)

Convert the two areas to content areas.

3. Template 3 — News template

The template is based on the output template.

The area for the template area is divided into two parts, where each part consists of a column containing columns:

• Centre column (content area, 8 columns)
• Right column (news menu, 4 columns)

Convert Centre column to a content area.

4. Template 4 — Start template

The template is based on the output template.

The area for the template area is divided into three parts divided into two rows. Add two grid rows. Add a column with all columns in width in the top row. Split the bottom row into two columns where each column is given a width specified in columns.

• Row
  • Top image (content area, 12 columns)
• Row
  • Centre column (content area, 6 columns)
  • Right column (content area, 6 columns)

Convert all three areas to content areas.