Start of Main Content

Responsive web design and display have catapulted to the forefront of web development over the past decade. As the market share for mobile users continues to grow in the digital space, it has become essential for your website to have a clean, easy-to-navigate mobile experience, so users can effectively connect with your site’s content.

Developing your website with responsiveness in mind can be beneficial in several areas including:

  • Analytics
    • More accurately track your website’s performance to get a clearer picture of how your users are experiencing the site on different devices and screen resolutions.
  • SEO
    • Better position yourself for success with search engines like Google, since they don’t take kindly to sites that aren’t built properly for mobile use.
  • Brand Consistency
    • Maintain a more seamless user experience for your audiences whether they’re interacting with your site on mobile, desktop, or alternating between devices.
  • Achieving Your Digital Business Objectives
    • Execute digital campaigns for every device type and enable your team to reach your audiences on multiple platforms.

Adobe Experience Manager (AEM), provides content authors with two distinct features to build and maintain a website’s responsive experience:

  1. Layout Mode
  2. Emulator Tool

Learn more about how we can help you build responsive digital experiences in AEM.

We’re an Adobe Bronze Partner with almost a decade of experience crafting websites in AEM. Discover how we use AEM to craft responsive personalized digital experiences that engage your audiences.

Layout Mode

AEM allows content authors to easily place and position components on a page by using the core Layout Container as a starting point.

This component is used alongside AEM’s Layout Mode which allows you to resize components for side-by-side use.

A screenshot of the Layout Mode in AEM with an arrow pointing to the control that lets content authors resize components and put them side by side.

After selecting Layout Mode, the editor displays a defined responsive grid as guidelines for you to resize the component as you see fit.

You can easily drag a component to create different layout components on a page (two-up, three-up, etc.)

A screenshot of the responsive grid guidelines that appear in AEM’s Layout Mode.

Emulator Tool

The Emulator Tool is automatically enabled when you enter Layout Mode, but you can also navigate to the editors’ toolbar to toggle this feature on and off.

After defining the position of your components on a page, you need to consider how each component will display on different viewports and devices. AEM’s Emulator Tool serves as a user-friendly way to do that. With it, you can see the responsive grid with defined breakpoints for each page, as well as associated device names for these breakpoints. As you build out pages, you can select each breakpoint and view how a page and its components will display.

The following are examples of how the same page might appear on different devices when you’re using the AEM’s Emulator Tool.

Desktop and Larger Tablets

A screenshot of what a webpage looks like on desktop and larger tablets when you’re using AEM’s Emulator Tool.

Smaller Tablets

A screenshot of what the same webpage looks like on smaller tablets when you’re using AEM’s Emulator Tool.

Mobile Devices

A screenshot of what the same webpage looks like on mobile devices when you’re using AEM’s Emulator Tool.

In each breakpoint view, you can enter Layout Mode and resize specific components to achieve a desired layout for its associated device view.

A screenshot of Layout Mode where you can adjust a page layout for a specific device view.

Note: AEM does not limit how many breakpoints a page can have. A developer can configure custom breakpoints or use the default, out-of-the-box values specified by AEM.

Additionally, the emulator provides a “Rotate Device” view so you can configure and anticipate page layouts on all device displays.

A screenshot with an arrow pointing to the “Rotate Device” button in AEM’s Emulator Tool.

AEM Puts Responsive Page Design in Your Hands

Normally responsive page design is a labor-intensive development-led task. But AEM’s Emulator and Layout Mode puts the power of display configuration in your hands. It provides an easy-to-understand, user-friendly way to responsively design engaging pages for your audiences. With Layout Mode you can drag and drop components on a page. And with the Emulator Tool you can preview your page’s layout, so you can tweak its design to display perfectly on the devices that users interact with your website on.

Want to learn more about how you can use Adobe Experience Manager to create responsively designed pages for your website? Contact us. You can also learn more about our Adobe experience to discover how we use AEM to craft responsive personalized digital experiences that engage your audiences.


Latest Ideas

Take advantage of our expertise with your next project.