How to Build Responsive Websites Using AEM 6.1

By Saravana Sivanandham 3 min read

Mobile internet usage has skyrocketed to overtake desktop as the most used digital platform. That means making your website responsive is integral to your digital strategy. Web developers resorted to options like media queries, fluid grids and adaptive images to cater to the needs of mobile browsing. But how do we tackle the ever increasing list of mobile devices, their sizes, input modes, and browsers? In this article, we talk about how Adobe Experience Manager (AEM)’s responsive layout editor comes to the rescue.

How Far We’ve Come: Then vs. Now

In the past, building a responsive website was far from easy. It started by defining which devices and view ports to support, deciding on the layout for each device, then creating unique style sheets for each. At any point (or with any new device release), changes to those layouts would require more custom programming and a new software release—a time-consuming effort.

Things have changed with AEM 6.1. With a new Responsive Layout Container, developers are no longer the lynch-pin in the process. Instead, new devices can be added with a few configurations and layout changes are made easily through content authoring.

Big, Time-Saving Advantages

The new Responsive layout editor in AEM offers numerous advantages when authoring responsive pages. Here are a few important ones:

  • It eliminates the need for frequent development cycles and code releases.
  • It’s easier to support a broader range of breakpoints.
  • It offers faster time-to-market new devices.
  • It gives more granular control over page behavior than traditional systems (e.g., Bootstrap).

How Does It Work?

Responsiveness is achieved through grid-based layouts with options for floating, nesting and hiding various content components, based on the needs of the responsive experience. It’s all possible through a “responsive parsys” (an extension of the regular parsys with the same capabilities of drag and drop, etc.). . Responsive parsys, also known as the layout container along with the lay outing mode and emulator provides options for content authors to create various layouts and breakpoints, and also to test them out. All of these features are available to be configured for landscape and portrait modes.

Responsiveness can be defined at either the page template level or the page level. If done at the page level, the responsiveness will be automatically inherited to all the child pages, which is another huge time-saver. Also, Multi Site Manager and live copy relationships can be established across various sections of pages to establish responsive behavior.

With Adobe Experience Manager 6.1, you can create device groups and different sections of the website can be supported for specific device groups as per business needs. You can create as many devices, with specific height and width specifications and add them to device groups on the fly. These device groups can then be assigned to specific sections of the website. This becomes particularly helpful when the content and audience are significantly different.

8 Steps to Creating a Responsive Experience

Now that you know how AEM helps you achieve responsiveness using the Responsive layout editor, here’s a glimpse of the high-level steps you will follow:

  1. Enable a responsive grid by adding a layout container to the page.
  2. Enable lay outing mode.
  3. Set up responsive editing.
  4. Include a responsive stylesheet.
  5. Configure break points.
  6. Create device groups.
  7. Configure the emulator.
  8. Authors are now enabled to create responsive experiences, as needed.

Curious to learn more? Stay tuned for our next blog with more details on the process.

Explore Additional Resources

Learn more on how to select the right CMS for your business and improve your customer’s Digital Experience.

Our Adobe Experience Cloud Consulting team specializes in helping you deliver a seamless, intelligent, and personalized customer experience.

GET HELP FROM OUR EXPERTS

Over the past 19 years, we have completed thousands of digital projects globally. We have one of the largest and deepest multi-solutions digital consulting teams in the world. Our proprietary processes and years of Digital Experience expertise have earned us a 97% customer satisfaction rating with our clients ranging from Global Fortune 1000 to Mid-Market Enterprises, leading educational institutions, and Non-Profits.

Interested to see a live demo of this or a POC on a page from your website? Reach out to us today.

About TA Digital

TA Digital is the only global boutique agency that delivers the “best of both worlds” to clients seeking to achieve organizational success through digital transformation. Unlike smaller, regional agencies that lack the ability to scale or large organizations that succumb to a quantity-over-quality approach, we offer resource diversity while also providing meticulous attention to the details that enable strategic success.

Over the past 20 years, TA Digital has positioned clients to achieve digital maturity by focusing on data, customer-centricity and exponential return on investment; by melding exceptional user experience and data-driven methodologies with artificial intelligence and machine learning, we enable digital transformations that intelligently build upon the strategies we set into motion. We are known as a global leader that assists marketing and technology executives in understanding the digital ecosystem while identifying cultural and operational gaps within their business – ultimately ushering organizations toward a more mature model and profitable digital landscape.

Recognized in 2013, 2014, 2015, and 2019 Inc. 5000 list as one of the most successful technology companies in the United States, TA Digital is pleased also to share high-level strategic partnerships with world class digital experience platform companies like Adobe, SAP and Salesforce and possess global partnerships with industry leaders such as Sitecore, Episerver, Elastic Path, BigCommerce, AWS, Azure and Coveo.

Saravana Sivanandham

Written By

Saravana Sivanandham