Responsief ontwerp
Met responsief ontwerp kunnen dezelfde ervaringen effectief worden weergegeven op meerdere apparaten in verschillende richtingen.
TIP- Voor inhoudsauteurs, zijn de details van hoe te om ontvankelijke ontwerpeigenschappen op een inhoudspagina te gebruiken beschikbaar in het document Responsieve Lay-out.
- Voor plaatsbeheerders, wordt de details van hoe te om de lay-outcontainer voor uw plaatsen te vormen beschreven in Vormend het document van de Container van de Lay-out en van de Wijze van de Lay-out.
Overzicht
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:
- Lay-out: gebruik lay-outs met één kolom voor kleinere viewports en lay-outs met meerdere kolommen voor grotere viewports.
- Tekengrootte: gebruik grotere tekstgrootte (indien van toepassing, zoals koppen) in grotere viewports.
- Inhoud: neem alleen de belangrijkste inhoud op wanneer u deze weergeeft op kleinere apparaten.
- Navigatie: er zijn apparaatspecifieke gereedschappen voor toegang tot andere pagina's.
- Afbeeldingen: afbeeldingsuitvoeringen die geschikt zijn voor de viewport van de client, worden weergegeven op basis van de afmetingen van het venster.
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
- Maximale breedte van 480 pixels (telefoon, staand)
- Maximale breedte van 767 pixels (telefoon, liggend)
- Breedte tussen 768 pixels en 979 pixels (tablet, staand)
- Breedte tussen 980 pixels en 1199 pixels (tablet, liggend)
- Breedte van 1200 px of hoger (bureaublad)
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
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:
- De apparaten waarvoor u zich richt
- De doelviewportgrootten
- De paginalay-outs voor elk van de beoogde viewportgrootte
Toepassingsstructuur
De typische AEM-toepassingsstructuur ondersteunt alle responsieve ontwerpimplementaties:
- Paginacomponenten bevinden zich onder
/apps/<application_name>/components - Sjablonen bevinden zich onder
/apps/<application_name>/templates
Mediaquery's gebruiken
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
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:
- Gebruik de omslag van de Bibliotheek van de a Cliëntom CSS te bepalen die wordt samengesteld wanneer de pagina wordt teruggegeven.
- Definieer elke mediaquery en de bijbehorende stijlen in afzonderlijke CSS-bestanden. Het is handig bestandsnamen te gebruiken die de apparaatfuncties van de mediaquery vertegenwoordigen.
- Definieer stijlen die op alle apparaten in een afzonderlijk CSS-bestand van toepassing zijn.
- In het css.txt- dossier van de omslag van de Bibliotheek van de Cliënt, orde de lijst CSS dossiers zoals vereist in het geassembleerde CSS dossier.
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
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
<sly data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}">
<sly data-sly-call="${clientlib.all @ categories='apps.weretail.all'}"/>
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
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
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:
- Naam:
cq:deviceGroups - Type:
String[] - Waarde:
mobile/groups/responsive
Apparaatgroepknooppunten bevinden zich in de map /etc/mobile/groups .
Responsieve afbeeldingen
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.
- Door gebrek, gebruikt de Component van het Beeld de Aangepaste Servlet van het Beeldom de juiste vertoning te leveren.
- Web-Geoptimaliseerde Levering van het Beeldis ook beschikbaar via eenvoudige checkbox in zijn beleid, dat beeldactiva van DAM in formaat WebP levert en de downloadgrootte van een beeld met ongeveer 25% gemiddeld kan verminderen.