Selection of right Experience Fragment

[nsvsrk]

Hi all,

Let us say I have created an Experience Fragment.

When clients with different view ports require and request it, how AEM sends the right variant of it?

Based on client view port the experience and Experience Fragment should be different.

So, AEM creates Experience Fragments for each of view port sizes?

How does it know which variant should be served for which client?

Appreciate all your responses,

Thanks,

RK.

[AMANATH_ULLAH]

@nsvsrk 

AEM does not automatically create separate Experience Fragments for each viewport. Instead:

• You create one Experience Fragment that is responsive.
• The responsiveness is handled by the components used within the XF, typically using CSS media queries, responsive grids, or layout containers

In case , you created separate XF variants , then use custom logic in your page templates or components to include the right one based on device detection.

[BrianKasingli]

Out of the box, AEM does not automatically deliver different Experience Fragment (XF) variants based on viewport size. An XF is essentially a set of authored components that you can render on a page, but AEM won’t decide which one to serve depending on device type.

If you need different versions for desktop, tablet, and mobile, a common approach is:

1. Author multiple XF variations (e.g., desktop, tablet, mobile).
2. In your component dialog (Touch UI), provide Pathfields where authors can select the XF variant for each device type.
3. In your HTL (Sightly) component, include all three XF variants on the page; these XFs are server side rendered on the page.
   

   <div class="cmp-customxf__desktop" data-sly-resource="${@path=model.desktopXf,
      selectors='content', wcmmode='disabled'}"></div>
   
   <div class="cmp-customxf__tablet" data-sly-resource="${@path=model.tabletXf,
      selectors='content', wcmmode='disabled'}"></div>
   
   <div class="cmp-customxf__mobile" data-sly-resource="${@path=model.mobileXf,
      selectors='content', wcmmode='disabled'}"></div>​

4. Use CSS media queries (e.g., @media rules) or client-side logic to show/hide the correct XF variant depending on the viewport.
   

   /* Mobile: less than 751px */
   @media (max-width: 750px) {
     .cmp-customxf__desktop,
     .cmp-customxf__tablet {
       display: none;
     }
     .cmp-customxf__mobile {
       display: block;
     }
   }
   
   /* Tablet: 751px to 1199px */
   @media (min-width: 751px) and (max-width: 1199px) {
     .cmp-customxf__desktop,
     .cmp-customxf__mobile {
       display: none;
     }
     .cmp-customxf__tablet {
       display: block;
     }
   }
   
   /* Desktop: 1200px and above */
   @media (min-width: 1200px) {
     .cmp-customxf__tablet,
     .cmp-customxf__mobile {
       display: none;
     }
     .cmp-customxf__desktop {
       display: block;
     }
   }
   ​

   
   
   

This way, authors can manage content per device type, and the front-end ensures the correct version is displayed.

If you’d like a more dynamic solution, you could also explore personalization with ContextHub/Target, but for a straightforward viewport-based variation, the above approach is usually sufficient.

[nsvsrk]

Thanks @BrianKasingli .

Your explanation has gone one level deeper than what I was expecting.

Thanks,

RK.