The Client is the app or web software that is responsible for rendering the Hypermedia Structure.

The Body is the author-controlled area of a Site and Document. On the web Client, it takes up the whole window (matching the html <body>). In desktop Clients, it takes up the main view (under the app's title bar, right of the navigation sidebar, left of the panels, and above the app footer)

Here we define the Presentation: how Sites and Documents should be rendered by the Client inside the Body.

Visual summary of the suggested Presentation

Visual summary of the suggested Presentation

Site Header

The Site Header is meant to show the reader what Site they are inside, and give access to the Site Navigation and other features that the Client provides, such as access to the mobile menu.

The Home Document may specify a layout for the header that the Client should respect, to enable different visual styles for the Header. For example, a layout for center-aligned Navigation under the Site Logo.

Site Logo

The Site Logo is determined by the attributes of the Home Document.

If the logo attribute is set, use the image from there.

Otherwise, the Site Logo is created by combining the name and icon of the Home Document.

Navigation

The Navigation Views of a Document should always be easily accessible while the Document is open. For a Site Home Document, it should appear in the Site Header (or be accessible from the Header, if there is not enough space). If space allows, the Navigation should be visible in the Sidebar.

Site Home

Breadcrumb

Shows the parent Documents and may give access to the Home Document

Note: The Breadcrumb may have different presentation styles— it does not have to take the form factor of traditional breadcrumbs (for example it may be a dropdown or a vertical list of parents) This would be decided by the Client and may be informed by Document Attributes.

Site Home Mobile Breadcrumbs

Subdocument Mobile Breadcrumbs

Mobile Support

To support phone-sized screens, a Client should give easy access to the Navigation of the document. To ease navigation across the site, the navigation should have its own Breadcrumb that helps the user access the Navigation of Parent Documents and the Site Home.

This strikes a balance of keeping the UI minimal and focused, while giving the reader easy access to navigate across the site.