Display options in the wide template
The wide page contains a lot of white space, which serves the general readability and accessibility. In addition, this presentation is optimised so that the content is equally weighted on the desktop view as on the smartphone.
For reasons of accessibility and user-friendliness, text is limited to a maximum of 80 to 100 characters in width. This is to visually optimise the readability of the text. Text is never displayed in the full width of the wide page.
Components are typically displayed in text width, large and/or full width.
In-page quicklinks:
The Image component has four display sizes: Small, Textwidth, Large and Fullwidth. When uploading images, please note the corresponding image sizes. The images can be "cropped" within the component. However, it is important that the images have a sufficiently high resolution, but do not exceed the maximum file size (1.0-1.5MB). See the corresponding information in the AEM manual.
The use of pictures in combination with text is still possible via the Text with image component. With this component, images can also be used in a smaller representation.
Further examples
To interrupt a longer text block and/or to highlight individual statements, the quote component can be used. This works both with and without an image.
“The quote can be customised in the familiar CD colours and used with or without a photo.”Design Refresh
Here is the variant without a picture:
“However, we recommend using only one colour per website.”Design Refresh
Text with image component
Whereas the content of the Text with image component was previously displayed in the order of image followed by any title or text to the right and wrapping the image, the display is now in the following:
- Titles are block elements (on a line of its own). If it is the first text element in the component, it will display above the image.
- Image
- Paragraph text (still wrapping image)
The order is especially important for screen readers, because the main heading should not follow the first information which would be the image. Screen reader users often jump from heading to heading. This meant, in the past, readers were missing information that was meant to be read as a whole. The reordering adjustment improves accessibility, making sure that the screenreader informs the user of the title first, followed by the image (or its alternative text) and then any text, guaranteeing the connection between title and image is maintained.
Problems with titles and the display of images with the Text with image component
Title 3 (for purpose of display only-not semantic)
Title 4 (for purpose of display only-not semantic)
This display is created when you use two titles and an image in the same text/image component.
Title 3 (for purpose of display only-not semantic)
Title 4 (for purpose of display only-not semantic)
To create a correct display, place the first heading in another text-image component above it and format it as a heading. It is not possible to insert two H2 titles one after the other, otherwise accessibility is not maintained. Further information on the protected pagetitle hierarchy.
With the 2-column component, content can be placed next to each other and can be displayed in Textwidth and Fullwidth.. Even though the user guidance in the wide page template is basically from top to bottom, there is still content that is more conveniently placed next to each other, such as references to further content page. However, when using the two-column component, be aware of the reordering structure when these are displayed on mobile devices. Depending on your layout, it may be necessary to use multiple two-column components to achieve a correct order and display. Information on this can be found in the protected pageResponsive websites page.
3 images (4:3) full width display
-
For images in a series or gallery, all images should be cropped. (Image: ETH Zürich / Gian Marco Castelberg) -
-
ETH main building inside. (Image: ETH Zürich / Gian Marco Castelberg)
5 images (4:3) full width display
-
For images in a series or gallery, all images should be cropped. (Image: ETH Zürich / Gian Marco Castelberg) -
-
ETH main building inside. (Image: ETH Zürich / Gian Marco Castelberg) -
Visit the ETH main building. (Image: ETH Zürich / Gian Marco Castelberg) -
ETH main building in Zurich. (Image: ETH Zürich / Marco Carocari)
Slideshow
Videos can be displayed in two sizes: Text width and Large.
Newsfeed 2.0
The Newsfeed 2.0 has different display options: Small, Medium and Large. The Small and Medium can also be displayed with a 'top story' display where the first two news items on desktop are displayed larger. Not only can a feed be configure to display automatic news directly from a channel, but the component can also be configured to only show specific news items as well for more tailored content.
Example: Newsfeed 2.0 "Large"
Example: Newsfeed 2.0 "Medium with top story"
Example: Newsfeed 2.0 "Small with top story"
Where to put the content from the context column?
This question cannot be answered in general. There are different purposes for which the content in the context column was used. Take a look at examples of how you can include the content from the context column in the content area.