Contact information placement

There is no general solution for the position of contact information. Depending on the intent to the user, it can be placed in different places on a webpage.

In many cases, the information in the right column was supplementary information and therefore, the bottom of the page will make sense. However, if for example the information was important and needed to be seen initially by a user on page load, then it may need to be moved closer to the top of the page.

In the case of inherited content, the author will need to decide whether the information was simply inherited but not really needed for the page or whether it is actually needed. If it is needed, then before switching parent pages, one may need to copy component information to the content area of a subpage before making the switch of a parent page with inherited content on subpages below.

Display options for contact boxes

Stand alone in content area

The default display in the content area of a wide page is a horizontal layout. The default border colour is grey, but one can to align the colour with the standard website/webpage colour theme by marking the configuration box in the component dialogue (Figure 1).

Figure 1. Default and colour themed Contact box display

Two column display

For contact information for two persons on a page, the protected page2-column container can be used to display two contact boxes side by side. The display will always be vertical and should use the restricted to text width option in the 2-column container for the best display (Figure 2). For listing more than two person's contact information, the protected pagePerson list component should be considered.

Figure 2. Contact boxes in 2-column container display

When contact information is of primary importance on a page, it may make sense to place a Contact box component at the top of a page near the title/lead information. This can be by directly placing a Contact box component on the page at the top (Figure 3) or placing an anchor hyperlink at the top page which links to a Contact box component at the bottom of a page (Figure 4).

Enlarged view: Figure 3. Example of a page with the Contact box placement at the top of the page. — Figure 3. Example of a page with the Contact box placement at the top of the page.

Enlarged view: Figure 4. Example of a page with an anchor hyperlink for contact information at the top of the page — Figure 4. Example of a page with an anchor hyperlink for contact information at the top of the page

An alternative to direct placement of one or more contact boxes on a page, whether at the top or the bottom, is to place a contact box in an accordion item in an Accordion container. Figures 5 shows an example for a single contact with the accordion closed and showing the display after a user clicks the accordion open in Figure 6.

Enlarged view: Figure 5. Example contact information implemented in an Accordion container (closed view) — Figure 5. Example contact information implemented in an Accordion container (closed view)

Enlarged view: Figure 6. Example contact information implemented in an Accordion container (open view) — Figure 6. Example contact information implemented in an Accordion container (open view)

If the contact information is supplementary to the information on the webpage, then the contact box can be placed at the bottom of the page content (Figure 7). Note: Users are quite used to scrolling down to a page bottom to find contact information on a page or in the footer of websites.

Enlarged view: Figure 7. Exampe of contact information placement at the bottom of a webpage — Figure 7. Exampe of contact information placement at the bottom of a webpage