Long Product page

The product page should

  • Present your offering to the customer (product, service, solution)
  • Include permanent information about your offering.
  • Focus on customer benefits
  • Always include a call-to-action that is tied to the goal of the page
  • Follow the same requirements as listed for Product Page regarding the goal of the page and content.
  • Be carefully planned out to make sure that the page tells a compelling story. A pre-requisite is sufficient time and resources to produce the text and graphics necessary to lead the reader through the page.
  • Work both as a story and as chapters where the user could use Call-to-action or links to interact with the content.
  • Only contain one h1, the one at the top of the page.

If creating internal navigation within a sub-section of the page, headline block should always be used.

It is now possible to create hierarchies with Long product pages. This means that the editor could use product pages as navigation. The editor should still avoid creating hierachies of more than three levels.

General design checklist

  • You should always start with creating a wireframe of the page to be sure that it works as a whole.
  • The template gives more freedom than other templates, but remember that the Visma Design Guide still applies to pictures, illustrations, color and fonts.
  • Include a lot of air on the page through use of margins and graphics.
  • Use short, inviting and to-the-point headings and text. Long texts don’t work well with columns and the air necessary to get this template to work.
  • The graphics need to convey the message. The page will not communicate well with bland graphics. This goes for all web content, but the long product page this is even more critical.
  • Be careful when using background pictures, that it is following design guideline and makes the text easy to read.
  • It is possible to use tabs, but try to avoid it.

The long page consist of several different section you could put together in any order. Here are some guidelines for each type of section.

Background image for all elements is 1200 px in width.
Example of sketch for long product page
Example of  wireframe made in Balsamiq

Flexible Row block

Flexible Row Blocks can be used to create custom-size defined content area. The Flexible Row Block is based on a responsive grid of 12 columns, whichs means that you can create any combination of columns sizes as long as the number of columns is possible to divide by 12.

For one and two column elements, it could be user to use the blocks made for this, but Flexible Row block will be able to handle these simpler grids too.

Screenshot of flexible row block
  • Start with creating a Flexible Row Block
  • Continue to create Flexible Column Blocks as needed. The editor marks how much space the content takes with Number of columns on the block. Parts of the grid without content could be placed with Offset columns.
  • One full row is 12 columns. You could create several rows in one Flexible Row Block as long as you make sure that Columns and Offsets adds up to twelve.

One column
Could be used for any type of content, both text and graphics. If you have need for a banner at the top, use the Content background image. Avoid staggering several One column-elements at the top of each other, unless there is a reason for it.

Two column
Use it to easily create two columns of content.

CTA
As a general rule, there should always be CTA or link after a chapter. As a general rule, when using a long page, there should always be more than one CTA on the page.