Responsief ontwerp responsive-design

Met responsief ontwerp kunnen dezelfde ervaringen effectief worden weergegeven op meerdere apparaten in verschillende richtingen.

Overzicht overview

Ontwerp uw ervaringen zodat ze zich aanpassen aan de clientviewport waarin ze worden weergegeven. Met responsief ontwerp kunnen dezelfde pagina's effectief op meerdere apparaten in beide richtingen worden weergegeven. In de volgende afbeelding ziet u enkele manieren waarop een pagina kan reageren op wijzigingen in de viewportgrootte:

Ontwikkel Adobe Experience Manager (AEM) toepassingen die HTML5 produceren die zich aan veelvoudige venstergrootte en richtlijn aanpast. De volgende bereiken van viewport-breedten komen bijvoorbeeld overeen met verschillende apparaattypen en -oriëntaties

Zie de volgende onderwerpen voor informatie over het uitvoeren van ontvankelijk ontwerpgedrag:

Aangezien u ontwerpt, gebruik de Mededinger toolbar aan voorproef uw pagina's voor diverse het schermgrootte.

Voordat u ontwikkelt before-you-develop

Voordat u de AEM-toepassing ontwikkelt die uw webpagina's ondersteunt, moet u een aantal ontwerpbeslissingen nemen. U moet bijvoorbeeld over de volgende informatie beschikken:

Toepassingsstructuur application-structure

De typische AEM-toepassingsstructuur ondersteunt alle responsieve ontwerpimplementaties:

Mediaquery's gebruiken using-media-queries

Met mediaquery's kunt u CSS-stijlen selectief gebruiken voor het weergeven van pagina's. Met de AEM-ontwikkelingsprogramma's en -functies kunt u mediaquery's effectief en efficiënt implementeren in uw toepassingen.

De W3C groep verstrekt de 🔗 aanbeveling van de Vragen van Media 0} {die deze CSS3 eigenschap en de syntaxis beschrijft.

Het CSS-bestand maken creating-the-css-file

Definieer in uw CSS-bestand mediaquery's op basis van de eigenschappen van de apparaten waarvoor u een mediaquery maakt. De volgende implementatiestrategie is effectief voor het beheren van stijlen voor elke mediaquery:

Het WKND leerprogrammagebruikt deze strategie om stijlen in het plaatsontwerp te bepalen. Het CSS-bestand dat door WKND wordt gebruikt, bevindt zich op /apps/wknd/clientlibs/clientlib-grid/less/grid.less .

Mediaquery's gebruiken met AEM-pagina's using-media-queries-with-aem-pages

het WKND steekproefprojecten Archetype van het Project van AEMgebruiken de Component van de Kern van de Pagina, die de clientlibs via het paginabeleid omvat.

Als uw eigen paginacomponent niet op de Component van de Kern van de Pagina wordt gebaseerd, kunt u de omslag van de cliëntbibliotheek in het manuscript van HTML of JSP van het ook omvatten. Als u dit doet, wordt het CSS-bestand gegenereerd en wordt ernaar verwezen met de mediaquery's die nodig zijn om het responsieve raster te laten werken.

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"/>

Met het JSP-script wordt de volgende HTML-code gegenereerd die verwijst naar de stijlpagina's:

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

Voorvertonen voor specifieke apparaten previewing-for-specific-devices

Met de emulator kunt u uw pagina's voorvertonen in verschillende viewportgrootten, zodat u het gedrag van uw responsieve ontwerp kunt testen. Wanneer het uitgeven van een pagina in de Console van Plaatsen, kunt u het Emulator pictogram tikken of klikken om de mededinger te openbaren.

In de emulatortoolbar kunt u het pictogram van Apparaten ontsteken of klikken om een drop-down menu te openbaren waar u een apparaat kunt selecteren. Wanneer u een apparaat selecteert, wordt de pagina aangepast aan het formaat van de viewport.

Apparaatgroepen opgeven specifying-device-groups

Om de apparatengroepen te specificeren die in de lijst van Apparaten verschijnen, voeg a cq:deviceGroups bezit aan de jcr:content knoop van de malplaatjepagina van uw plaats toe. De waarde van de eigenschap is een array van paden naar de knooppunten van de apparaatgroep.

De sjabloonpagina van de WKND-site is bijvoorbeeld /conf/wknd/settings/wcm/template-types/empty-page/structure . En het knooppunt jcr:content eronder bevat de volgende eigenschap:

Apparaatgroepknooppunten bevinden zich in de map /etc/mobile/groups .

Responsieve afbeeldingen responsive-images

Responsieve pagina's worden dynamisch aangepast aan het apparaat waarop ze worden weergegeven en bieden een betere gebruikerservaring. Het is echter ook belangrijk dat elementen zijn geoptimaliseerd voor het onderbrekingspunt en het apparaat om de laadtijd van de pagina te minimaliseren.

de Component van het Beeld van de Component van de Kerneigenschappen zoals adaptieve beeldselectie.

De container voor lay-out layout-container

Met de AEM Layout Container kunt u op efficiënte en effectieve wijze responsieve lay-out implementeren om de afmetingen van de pagina aan te passen aan de viewport van de client.

de documentatie GitHubvan het ontvankelijke net is een verwijzing die aan front-end ontwikkelaars kan worden gegeven die hen toestaan om het net van AEM buiten AEM te gebruiken, bijvoorbeeld, wanneer het creëren van statische modellen van HTML voor een toekomstige plaats van AEM.

Geneste responsieve rasters nested-responsive-grids

Het kan voorkomen dat u responsieve rasters moet nesten om de behoeften van uw project te ondersteunen. Houd er echter rekening mee dat de aanbevolen werkwijze van Adobe erin bestaat de structuur zo vlak mogelijk te houden.

Zorg ervoor dat wanneer u het gebruik van geneste responsieve rasters niet kunt vermijden:

Dit omvat alle structurele containers van het paginasjabloon.

Het kolomnummer van de binnencontainer mag nooit groter zijn dan dat van de buitencontainer. In het volgende voorbeeld wordt aan deze voorwaarde voldaan. Terwijl het kolomnummer van de buitencontainer 8 is voor het standaardscherm (bureaublad), is het kolomnummer van de binnencontainer 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>