How to Author for Mobile vs Desktop

By default, when we log into AEM, it is pretty typical to be on a desktop device, utilizing our favorite or preferred browser, and creating new pages and editing content as they are immediately displayed.

However, there are many times where our tailored desktop look just doesn't format or come out looking well when viewing the page on a mobile device. Often times, content is completely unreadable and presentation may be a mess with colors and images overlapping in unintended ways. So, we must correct these issues.

One of the biggest issues present today is Authors creating content and pages for the desktop environment, whether simple or complex, and then not adjusting layouts and structures in the mobile view! If done correctly in Desktop, Mobile views should need only minimal changes.

When Authoring a page, there is an icon in the gray bar called the "Emulator" button. It looks like a landscape tablet with a portrait cell phone on the top. Clicking this button will drop another bar below that looks similar to a ruler. This display shows what type of device we're authoring for and the view we are currently looking at. By default, it is the desktop view spanning the entirety of your browser window.

This bar has several unique features to help users adjust content for different sized devices, but for the sake of clarity, only a select few devices get used for the mobile display.

• Select Device: This action allows the display to swap between several mobile devices including the Desktop, Samsung Galaxy S7, iPhone 8, iPhone 8 Plus, iPhone X, and iPad Retina.
• Rotate Device: Switches view modes from the default "Landscape Desktop & Portrait Mobile" to "Portrait Desktop & Landscape Mobile."
• Galaxy S7, iPhone, iPad Retina, Desktop: These sectioned buttons will actively switch the AEM view to match the device the user clicks. This is how we enter and exit mobile view editing.

In these mobile views while in Edit mode, users will notice the components are configured across both desktop and mobile environments; what was created in the desktop view is also visible in the mobile view and vice versa. Content creation and editing works exactly the same in mobile, but Authors should understand they are working with a smaller screen size in these scenarios and Edit mode changes reflect across both desktop and mobile views. The exception to this is while in Layout Mode, which is explained more on the Mobile Structure and Layout page.

Some components offer built-in functionality to differentiate desktop and mobile functions and settings, such as the Image Card v2 component. All other components will have single configurations that may or may not include separate mobile options included, such as the Image component, which runs identically across both desktop and mobile view modes.

When users want to view a published instance of a page, they would click on the Page Properties (EQ) button in the gray bar and then "View as Published." This opens the page in a published view and appends the "?wcmmode=disabled" in the URL. However, this is always in desktop view, even if the user had the view set as a mobile view before doing the "View as Published."

The most immediate way to view these pages in mobile view is while on the Published page view, press the F12 key to open the DevTools window and then click on the "Toggle device toolbar" button. This switches the active page between desktop and mobile views and while this is mostly-accurate, it may cause minor visual discrepancies. A refresh of the page may even be needed to correctly activate certain component views.