Mobile Structure and Layout

The mobile structure of a given page in AEM aligns with the desktop structure, and within the HTML code of a page, users may see how the mobile elements are actually nested within the desktop elements.

This is done by going into Preview mode and using the Inspect action by right-clicking the element you want to inspect on the page and then clicking "Inspect" at the bottom of the pointer popup. This opens up the DevTools window to the Element tab and highlights the HTML code of the element. Users may also use the F12 key to pop up this window.

Notice in the HTML code in the image below, where each responsive container that is added to the page has HTML code for a child container, which also has HTML code for a child mobile container. This behind-the-scenes nesting behavior aids in keeping content uniform across views and not having to completely author the mobile versions of pages in AEM. However, we do have a way to hide components from specific view modes by using the Layout mode, which also lets users resize components in mobile views separately from desktop.

Layout mode is specifically used for adjusting the individual layouts for components in desktop and mobile views. At the top right of a users Author instance, they may click the dropdown next to the "Edit" text and select "Layout" to switch to Layout mode.

Layout mode allows component resizing adjustments and does not allow users to insert new components or edit configurations/settings of those components. By soft-selecting a component, blue dot "handles" appear at the midway height point of the component on both left and right sides. We can then utilize the right blue dot to adjust the size of the component to tailor our needs for mobile view.

What tends to happen in mobile view after authoring desktop, is components end up squished and compressed, making it impossible to read, plus it flat-out makes the webpage look bad. In mobile view, components typically just need resized to be full-width of the device display.

You may get more in-depth understanding of these resizing features by checking out the video below:

Layout mode has fewer and different options than Edit mode. This is noticable by looking at the Component Toolbar that pops up for a selected component, which only has 3 options to work with:

• Parent: hovering the different, listed Containers will highlight the nested behavior of each one, to help note where in the "structure" the component resides.
• Float to New Line: automatically sends the component down to a new line, effectively overriding the responsive grid layout for that component.
• Hide/Unhide: hides or unhides the selected component from the display.

Hiding and unhiding components may be necessary in mobile and desktop views, as certain desktop setups may cause Accessibility-related issues in their mobile views.

By strategically hiding and unhiding components, users will be able to individually insert content viewable only to that view mode. The downfall to this, is the more that a page is created this way, the more components that will need manually updated between each view, which may become not only hard to manage, but also hard to remember to do in the first place.

You may get a better understanding of hiding and showing components in general by checking out the link below: