Responsiv design responsive-design

Med responsiv design kan samma upplevelser visas effektivt på flera enheter i flera olika orienteringar.

Ökning overview

Utforma era upplevelser så att de anpassar sig till den kundvisningsruta där de visas. Med responsiv design kan samma sidor visas effektivt på flera enheter i båda riktningarna. I följande bild visas några sätt på vilka en sida kan reagera på ändringar i visningsrutans storlek:

Utveckla Adobe Experience Manager-program (AEM) som genererar HTML5 som anpassar sig efter olika fönsterstorlekar och orienteringar. Följande intervall med visningsrutebredder motsvarar till exempel olika enhetstyper och orienteringar

Mer information om hur du implementerar responsiva designbeteenden finns i följande avsnitt:

När du designar kan du använda verktygsfältet Emulator för att förhandsgranska sidorna för olika skärmstorlekar.

Innan du utvecklar before-you-develop

Innan du utvecklar ett AEM-program som har stöd för dina webbsidor bör du fatta flera designbeslut. Du måste till exempel ha följande information:

Programstruktur application-structure

Den typiska AEM-programstrukturen har stöd för alla responsiva designimplementeringar:

Använda mediefrågor using-media-queries

Mediefrågor möjliggör selektiv användning av CSS-format för sidåtergivning. Med AEM utvecklingsverktyg och -funktioner kan du effektivt och effektivt implementera mediefrågor i dina program.

W3C-gruppen tillhandahåller rekommendationen Mediefrågor som beskriver den här CSS3-funktionen och syntaxen.

Skapa CSS-filen creating-the-css-file

I CSS-filen definierar du mediefrågor baserat på egenskaperna för de enheter som du har som mål. Följande implementeringsstrategi är effektiv för att hantera format för varje mediefråga:

I WKND-självstudien används den här strategin för att definiera format i webbplatsdesignen. CSS-filen som används av WKND finns på /apps/wknd/clientlibs/clientlib-grid/less/grid.less.

Använda mediefrågor med AEM Pages using-media-queries-with-aem-pages

WKND-exempelprojektet och AEM Project Archetype använder Page Core Component, som innehåller klientlibs via sidprincipen.

Om din egen sidkomponent inte är baserad på Page Core-komponenten kan du även inkludera klientbiblioteksmappen i HTML- eller JSP-skriptet för den. Om du gör det genereras och refereras CSS-filen med de mediefrågor som behövs för att det responsiva rutnätet ska fungera.

HTL htl

<sly data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}">
<sly data-sly-call="${clientlib.all @ categories='apps.weretail.all'}"/>

JSP jsp

<ui:includeClientLib categories="apps.weretail.all"/>

JSP-skriptet genererar följande HTML-kod som refererar till formatmallarna:

<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">

Förhandsgranska för specifika enheter previewing-for-specific-devices

Med emulatorn kan du förhandsgranska sidorna i olika visningsrutestorlekar så att du kan testa beteendet i din responsiva design. När du redigerar en sida i platskonsolen kan du trycka eller klicka på ikonen Emulator för att visa emulatorn.

I emulatorns verktygsfält kan du trycka eller klicka på ikonen Enheter för att visa en nedrullningsbar meny där du kan välja en enhet. När du väljer en enhet ändras sidan så att den anpassas till visningsrutans storlek.

Ange enhetsgrupper specifying-device-groups

Om du vill ange de enhetsgrupper som visas i listan Enheter lägger du till en cq:deviceGroups -egenskap i noden jcr:content på mallsidan på platsen. Värdet för egenskapen är en array med sökvägar till enhetsgruppsnoderna.

Exempelvis är mallsidan för WKND-webbplatsen /conf/wknd/settings/wcm/template-types/empty-page/structure. Noden jcr:content under den innehåller följande egenskap:

Enhetsgruppnoderna finns i mappen /etc/mobile/groups.

Responsiva bilder responsive-images

Responsiva sidor anpassar sig dynamiskt till den enhet som de återges på, vilket ger en bättre upplevelse för användaren. Men det är också viktigt att resurserna optimeras till brytpunkten och enheten för att minimera sidinläsningstiden.

Core Component Image Component Componenthar funktioner som adaptiv bildmarkering.

Layoutbehållaren layout-container

Med AEM Layout Container kan du effektivt och effektivt implementera responsiv layout för att anpassa sidans dimensioner till klientens visningsruta.

GitHub-dokumentationen för det responsiva rutnätet är en referens som kan ges till gränssnittsutvecklare så att de kan använda AEM-rutnätet utanför AEM, till exempel när de skapar statiska HTML-modeller för en framtida AEM-webbplats.

Kapslade responsiva stödraster nested-responsive-grids

Det kan finnas tillfällen då du tycker att det är nödvändigt att kapsla in responsiva rutnät för att tillgodose ditt projekts behov. Tänk dock på att Adobe rekommenderade metod är att hålla strukturen så platt som möjligt.

När du inte kan undvika att använda kapslade responsiva stödraster bör du kontrollera följande:

Detta inkluderar alla strukturella behållare från sidmallen.

Kolumnnumret för den inre behållaren får aldrig vara större än det för den yttre behållaren. Följande exempel uppfyller det här villkoret. Medan kolumnnumret för den yttre behållaren är 8 för standardskärmen (skrivbordet) är kolumnnumret för den inre behållaren 4.

container
  @layout = responsiveGrid
  cq:responsive
    default
      @offset = 0
      @width = 8
  container
  @layout = responsiveGrid
    cq:responsive
      default
        @offset = 0
        @width = 4
    text
      @text =" Text Column 1"

<div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--8 aem-GridColumn--offset--default--0">
  <div id="container-c9955c233c" class="cmp-container">
    <div class="aem-Grid aem-Grid--8 aem-Grid--default--8 ">
      <div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <div id="container-8414e95866" class="cmp-container">
          <div class="aem-Grid aem-Grid--4 aem-Grid--default--4 ">
            <div class="text aem-GridColumn aem-GridColumn--default--4">
              <div data-cmp-data-layer="..." id="text-1234567890" class="cmp-text">
                <p>Text Column 1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>