Information on templates and responsive authoring.

Editable templates

Editable templates increase flexibility, modularity, and reusability. We have two editable templates: full-width and left nav.

The homepage template has two containers:

  1. Hero container
  2. Full-width content container
Screenshot of the homepage template containers and allowed components.

The full-width (content page) template has three containers:

  1. Page header container
  2. Hero container
  3. Full-width content container
Screenshot of the full-width template containers and allowed components.

The left nav template has six containers:

  1. Page header container
  2. Hero container
  3. Navigation container
  4. Intro
  5. Content container
  6. Full-width content container
Screenshot of the right nav template containers and allowed components.

The right nav template has six containers:

  1. Page header container
  2. Hero container
  3. Intro
  4. Tertiary navigation container
  5. Content container
  6. Full-width content container
Screenshot of the right nav template containers and allowed components.

The left and right nav template has seven containers:

  1. Page header container
  2. Hero container
  3. Navigation container
  4. Intro
  5. Tertiary navigation container
  6. Content container
  7. Full-width content container
Screenshot of the left and right nav template containers and allowed components.

The interstitial template has three containers:

  1. Page header container
  2. Hero container
  3. Page container
Screenshot of the interstitial template containers and allowed components.

Responsive authoring

The AEM responsive authoring feature enables content authors to control the responsive behavior of components across breakpoints, while eliminating the dependency on development workflows and parsys and column control components.

For more information, refer to the Grid page and AEM's documentation and tutorial.

Although AEM responsive authoring allows for hiding elements on certain breakpoints, never hide content across breakpoints. Hiding content is not aligned with best practices for responsive websites because it negatively impacts the focus, tab, and content order and performance of the page.

Configuration

In order to use the responsive authoring feature, the page's Cloud Configuration must be set to /conf/ewp.

For new pages:

  1. In the Create menu, select Page
  2. In the Template step of the Create Page wizard, select the desired EWP template
  3. In the Properties step of the Create Page wizard, click the Advanced tab
  4. In the Configuration section, set Cloud Configuration to /conf/ewp

For existing pages:

  1. In the Page Information menu, select Open Properties
  2. In Properties, click the Advanced tab
  3. In the Configuration section, set Cloud Configuration to /conf/ewp

Usage guidelines

Using the Container component's responsive grid layout option with AEM's Layout Mode, authors can adjust the width and position of components. 

In order to use the responsive authoring feature, the Container component's Layout option must be set to responsive grid.

For more information about the Container component, refer to the Container page or AEM's Container Component documentation.

Screenshot of the responsive authoring view and the AEM responsive authoring grid split between the secondary navigation component and page content. Example of the responsive authoring view and the AEM responsive authoring grid split between secondary navigation component and page content.

Breakpoints

The AEM responsive authoring grid’s breakpoints have been customized to match the Bootstrap layout grid’s breakpoints.
Breakpoint nameMin-widthMax-widthNumber of columns
Extra small--576px12
Small577px767px12
Medium768px991px12
Large992px1199px12
Desktop1200px--12

Column offsets

Column widths and offsets apply to the following content containers on all templates.

The number of content columns must be evenly divisible by the number of components that are side-by-side. For example, if you have six columns available, you will not be able to have four components authored evenly side-by-side.

Column offsets must always be the same for each side. For example, you can’t have one column offset on the left side and two columns offset on the right.

BreakpointColumns
Extra small12-column content
Small10-column content, 1-column offset on each side
Medium8-column content, 2-column offset on each side
Large8-column content, 2-column offset on each side
Desktop8-column content, 2-column offset on each side
BreakpointColumns
Extra small12-column content
Small12-column content
Medium12-column content
Large9-column content (left nav template and right nav template)
6-column content (left nav and right nav template)
Desktop6-column content

Helpful tools

Some helpful tools to streamline work processes and check accessibility compliance:

  • Accessibility Insights for web is a free browser extension that reveals the tab order of a page. It also includes tools to verify WCAG compliance through automated checks and manual tests. It’s available for Chrome and Edge.
  • HeadingsMap is a free browser extension that reveals the heading structure of a page for automated accessibility and SEO testing. It’s available for Chrome and Firefox.
  • Stark is a free browser extension that validates color contrast and simulates 8 different types of color blindness and as well as blurred vision. It’s available for Chrome.