Skip to end of metadata
Go to start of metadata

In order to provide the designer with a comprehensive idea of what visual elements are going to be required for content pages, the table below has been created. Please keep it updated as we work through the different areas of the site and new requirements come up. This resource will also dictate what becomes an HTML snippet for use by the web maintainers.

Element Name

Description

Example of usage (link to content page if applicable)

Simple Boxout

An area of plain text that should stand out from the main body of text. Element should have a background color to delineate it from the rest of the content, and possibly be outside of the main flow.

Used for supporting information, e.g. opening hours on a page discussing the shops on campus.

Related Links

An unordered list of links that relate to the main content of the page

Links to the various campus maps from a page about getting around the University.

Alternating Table

A long table of information that needs to have each row highlighted so that the user can easily follow the information across the page

Overview of rooms within accommodation area.

Quoted

An area of the main content that has been quoted for emphasis

Every BBC news article.

Calendar

A styled calendar in which important dates can displayed

Something like this but without the squares?

Image with expanding caption

Inline picture with caption and correct margins so the body text flows around - additional captioning on mouseover.

Example on Southampton's website.

Emphasis boxout

A pull quote style box which emphasises some key information (that isn't actually a quote)

Items you will need to provide with your application

Boxout table

A table that is floated to the right and emphasises key information in tabular form

Exceptions

  • No labels

7 Comments

  1. Unknown User (ccsya)

    I would like to see standard template versions of everything that's in the common template HTML snippets

    1. We should review those and judge for suitability in the new template. I don't think they should all come across.

      Additionally I'd like to see us drop the idea of a "related links" element. If it's related enough to appear, why is it not in the main page content?

      1. I should be more specific:

        • do we need department-specific snippets?
        • do we really want centred paragraphs?
        • do the gradient boxes complement the new design? I'm uninformed on this but my intuition would be "no".
      2. Unknown User (ccsya)

        Sorry, I wasn't very clear there - I didn't mean exact equivalents of things; I was thinking of things like being able to have two or four boxes arranged on a page (however they may be styled).  And you're right, we don't want centred paragraphs or department-specific snippets (though we would need study-specific, research-specific, about-specific etc).  We also need to decide at some stage if we are going to have different colours for the different faculties (though this could be difficult to enforce - e.g. ACE don't like the Engineering Faculty orange).

  2. Could I just restress that the HTML snippets will come FROM the creation of the required page elements as outlined above, and not the other way around.

    Thanks.

    1. Unknown User (ccsya)

      Of course - my point was that, as we don't want maintainers to put in their own designs for content, we need to pre-empt this by having a number of different page layouts available.

  3. Unknown User (ccsajm)

    It's good we are thinking about this before we do the work. One thing we should keep in mind is not to try and fit the content into the predefined elements. I know that people aren't suggesting this, but I wonder if it's an easy trap to fall into.

    If our content suggests another route we should pursue that.