How AEM Puts Responsive Design in Your Hands
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:
- Layout Mode
- Emulator Tool
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.
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.)
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
Smaller Tablets
Mobile Devices
In each breakpoint view, you can enter Layout Mode and resize specific components to achieve a desired layout for its associated 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.
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.