Device specific content | Community
Skip to main content
A
adarsh_murali
Level 2
August 28, 2018
Solved

Device specific content

  • August 28, 2018
  • 3 replies
  • 3591 views

If I want to display different contents in mobile and desktop, how can I achieve that?. I am thinking about creating a content fragment with multiple variations. Is there any option to author one variation of content fragment for mobile and another variation for desktop for the same page?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by arunpatidar

    Hi,

    There are multiple ways to serve device specific content?

    • You can use Layout mode for editing to hide components which are mobile specific or desktop specific based on size

         Configuring Layout Container and Layout Mode

    • Media queries to show hide content for on devices(based on viewport size)
    • If you are using AEM as CAAS then you can access both master and variant content fragment as JSON and use whichever part you want to show based on device(device can be detected by JS)

    3 replies

    J
    jeff_foxx
    Level 2
    August 28, 2018

    I think the answer to this depends largely on your definition of "mobile".  On the sites I support, we define mobile based on a screen size. Our primary reason for targeting a screen size is to A) make sure that the user experience at that size is optimal and B) make sure we don't send unnecessary assets to a device that won't use them (i.e. don't send large images to a small screen that will only squeeze it down to less than 300px wide.)

    I also think an important question you have to ask is who is going to be authoring the content for desktops and mobiles?  I think your idea to use experience fragments (has to be experience fragments because you would want to control all aspects of the layout, etc. not just copy) is not a bad one.

    The method we use is a custom component we have built that we call the content targeting container. It allows an author to author two or more different experiences on the same page, then define device size breakpoints for each experience.  Then we use JS on the front end (matchMedia) to determine, based on the screensize, which experience to fetch, and then make an ajax call back to the server for that experience.

      arunpatidar
      Community Advisor
      arunpatidarCommunity AdvisorAccepted solution
      Community Advisor
      August 28, 2018

      Hi,

      There are multiple ways to serve device specific content?

      • You can use Layout mode for editing to hide components which are mobile specific or desktop specific based on size

           Configuring Layout Container and Layout Mode

      • Media queries to show hide content for on devices(based on viewport size)
      • If you are using AEM as CAAS then you can access both master and variant content fragment as JSON and use whichever part you want to show based on device(device can be detected by JS)
      Arun Patidar
        A
        adarsh_muraliAuthor
        Level 2
        August 28, 2018

        Thank you jeff.foxx​ for your response. I got your point of creating a custom component which give the option to author for multiple devices and rendering will take place based on client side and server side logic.

        I may not need an experience fragment because I am only concerned about text content. So I don't end up creating multiple text components for the same page for multiple devices. I would like to know whether we can leverage the capability of variations in content fragments for this purpose or the purpose of fragments is only to place variations in different pages.

        Terms & ConditionsAccessibility statement

        Loading footer...