Page Structure and Design

Elements of a Page

Detailed instructions in the WCMS Wiki on Bayerncollab/Confluence (access-restricted).

A page consists of various basic elements.

The stage (also called “header” or “header area”)

The stage contains central elements such as the logo and the name of the institution. These elements are defined at the beginning. It includes important navigation components such as the hamburger menu, breadcrumb navigation and quick links / deep links. On desktop screens, a language switch option is also visible.

On detail and overview pages, the stage includes a precise heading and a text that summarizes and/or introduces the page content.

A stage image is mandatory on overview pages and optional on all other page types.
A stage image is only used on detail pages if it provides editorial added value.
For pages generated from data sources (person profiles, news or event pages), the stage is created automatically.

Footer

The footer contains contact information for your institution, social media channels, and can, if necessary, be adapted by your project administration or central support. In addition, legally relevant information on privacy, accessibility, and imprint (legal notice) is included.

Navigation Component

Navigation helps your users find their way around your website, stay well-oriented, and quickly access the topics relevant to them. A good navigation structure improves accessibility as well as findability and ranking in search engines.

Challenge:

If you create too many pages with menu items on a single level, there is a risk that the menu will appear overloaded and not all items will be relevant to the target audience. “If everything is important, nothing is important.”
If the structure is not intuitive for your target audience, relevant content will either not be found or only via long click paths. Users quickly feel lost on the website.

Recommendations:

Follow your concept and sitemap: Base the navigation structure on your overall concept and sitemap.
Grouping topics: Combine logically related topics under one menu item. Rule of thumb: Try not to list more than 4–7 menu items in the top navigation levels.
Prioritisation: Place important topics for your target audience higher in the navigation hierarchy.
Show information progressively: Don’t put everything at the top level; guide your users step by step to the topic. Use broad categories on top levels and more detailed subcategories below to avoid overwhelming users.
Consistent structure in sub-areas: Use a consistent layout (e.g., the same substructure for all degree programs or all research projects that are comparable).
Pages with menu items: Create menu items for all central, permanent content → main categories, important service pages that should always be findable by all user groups.
Pages without menu items: Only accessible via direct links and harder for search engines to find. Ideal for pages that should only be reachable via specific paths (e.g., forms, special detailed information).
Terminology: Use short terms that are understandable to the target audience and name them consistently.

Hamburger Navigation

The hamburger navigation is the main navigation, present consistently across all pages of your web presence.

You can choose which individual pages should be displayed as menu items and which pages should only be accessible via direct links.
For multilingual sites the menu also includes a link to the second language; on mobile devices, this link is the only way to navigate to that second language.
A parent institution or overarching unit is always specified.

Breadcrumb Navigation

On the top left you find the so-called “breadcrumb” navigation, which shows where in the subsection of the site you currently are and allows you to jump up one or more levels.

Only pages that have a “menu item” are displayed here.

Horizontal Navigation Items – Quicklinks/Deep Links

Directly next to the hamburger navigation are three horizontal navigation items that serve as quick access points to the most important subpages of your site. Like the hamburger menu, these quicklinks are displayed on all pages. They are usually determined during the go live phase but can also be adjusted later by the project administration or central support.

Anchor Links (Optional)

Anchor links can be enabled for a page. They are generated automatically and create a table of contents of the main headings on a page. They allow users to jump quickly to individual topics.

Especially on pages with a lot of content, anchor links should always be enabled.
Anchor links can be used either as simple jump links that point to the headings of content modules, or as a table of contents that provides a more detailed listing of heading hierarchies within standard content.
Anchor links can be activated on all page types!

Language switching

If your website is multilingual , users have two options for switching between languages:

Switching via hamburger navigation: At the end of the hamburger navigation, there is an extra menu item that allows you to switch to the second language. This option works on all devices.
Switching via horizontal navigation: On desktop devices, a language switch is also displayed at the top right of the horizontal navigation bar. Note: If you minimize the browser window on a desktop device, this option will disappear. However, you can always use the language switch via the hamburger navigation.

Which page types are available?

FirstSpirit at LMU offers you various page types with specialized features and matching modules for design.
There are specialized paragraph modules for all page types, allowing you to design your websites and content appropriately. Some paragraph modules can only be used on certain page types due to their characteristics, while others are available on all page types.

Overview pages for introducing detail pages
Detail pages for detailed content and overviews
Special pages from data sources such as contact pages, news and event pages

Overview pages cannot simply be converted into detail pages or vice versa. It is therefore important that you consider in advance which page type is more suitable for the planned content. We recommend that you start with the content that loads on detail pages and then create the corresponding overview pages later.

Example overview page

Overview pages - approx. 10% of a website

The overview page is a search engine-optimized landing page that announces a broader topic area and directs users to various subtopics via various teaser modules. It does not provide information, but rather arouses interest in a specific topic and serves an advertising purpose. Overview pages are therefore very image-oriented and focus on emotional appeal.

Suitable for

e.g., for homepages, landing pages for target group pages, and central topic pages

Text display
The overview page is not intended for displaying detailed explanations and complex relationships. The 2-column text module is available on overview pages for introductory and short explanatory texts.

Example detail page

Detail pages - approx. 90% of all pages on a website

The detail page ("content page") is the standard page type. Its purpose is to present information, facts, and complex content in a clear and structured manner for the various target groups of LMU. As the name suggests, detail pages go into detail. They contain fewer images than overview pages. In order to clearly structure complex and text-heavy content for LMU's target groups and make it easily accessible, the detail page primarily offers text modules such as "Standard Content."

Suitable for

e.g., pages with detailed project, degree program, or course descriptions with lots of text and detailed information

Special pages: persons, news, and events

Contact person pages as well as news and event pages can become so‑called “data sources.” These are created once by editors in the system and can then be integrated and displayed at many locations.

You do not need to create separate pages for persons, news, or events yourself - you only enter the data in the data source editor. FirstSpirit then automatically generates the specific page when it is accessed.

Person profile page

On person profile pages, all details about an individual are listed. In addition to standard contact information, a variety of modules familiar from other page types can be integrated—such as for displaying the CV, assistance team, or publications in an illustrative manner.

Example of a person contact page

News page

On news pages, developments are presented in detail. In addition to the standard fields, you can also use additional modules for elaborate presentation of the news, such as embedding an image slider or video.

Example of a news page

Event page

Event pages display events in detail. In addition to the standard fields, you can also integrate other modules such as an Anny booking form.

Example of an event page