Progettazione reattiva responsive-design
Progetta le esperienze in modo che si adattino al riquadro di visualizzazione client in cui vengono visualizzate. Con il design reattivo, le stesse pagine possono essere visualizzate in modo efficace su più dispositivi in entrambi gli orientamenti. L'immagine seguente illustra alcuni modi in cui una pagina può rispondere alle modifiche apportate alle dimensioni del riquadro di visualizzazione:
- Layout: utilizza layout a colonna singola per riquadri di visualizzazione più piccoli e layout a più colonne per riquadri di visualizzazione più grandi.
- Dimensione testo: utilizza dimensioni maggiori del testo (se appropriato, ad esempio le intestazioni) nelle finestre di visualizzazione più grandi.
- Contenuto: include solo il contenuto più importante quando viene visualizzato su dispositivi più piccoli.
- Navigazione: sono disponibili strumenti specifici per i dispositivi per accedere ad altre pagine.
- Immagini: distribuiscono rappresentazioni di immagini appropriate per il riquadro di visualizzazione client in base alle dimensioni della finestra.
Sviluppa applicazioni Adobe Experience Manager (AEM) che generano HTML5 adattabili a più dimensioni e orientamenti di finestre. Ad esempio, i seguenti intervalli di larghezze dei riquadri di visualizzazione corrispondono a vari tipi di dispositivi e orientamenti
- Larghezza massima di 480 pixel (telefono, verticale)
- Larghezza massima di 767 pixel (telefono, orizzontale)
- Larghezza compresa tra 768 e 979 pixel (tablet, verticale)
- Larghezza compresa tra 980 e 1199 pixel (tablet, orizzontale)
- Larghezza uguale o superiore a 1200 px (desktop)
Per informazioni sull’implementazione del comportamento di progettazione reattiva, consulta i seguenti argomenti:
Mentre progetti, utilizza la barra degli strumenti Emulatore per visualizzare in anteprima le pagine in diverse dimensioni dello schermo.
Prima di sviluppare before-you-develop
Prima di sviluppare l’applicazione AEM che supporta le pagine web, è necessario prendere diverse decisioni di progettazione. Ad esempio, è necessario disporre delle seguenti informazioni:
- Dispositivi di destinazione
- Le dimensioni del riquadro di visualizzazione di destinazione
- I layout di pagina per ciascuna dimensione del riquadro di visualizzazione di destinazione
Struttura dell'applicazione application-structure
La tipica struttura di applicazioni AEM supporta tutte le implementazioni di progettazione reattiva:
- I componenti della pagina risiedono sotto
/apps/<application_name>/components - I modelli si trovano sotto
/apps/<application_name>/templates
Utilizzo delle query multimediali using-media-queries
Le query multimediali consentono l’utilizzo selettivo degli stili CSS per il rendering delle pagine. Gli strumenti e le funzioni di sviluppo AEM consentono di implementare in modo efficace ed efficiente le query multimediali nelle applicazioni.
Il gruppo W3C fornisce il consiglio Media Queries che descrive questa funzione CSS3 e la sintassi.
Creazione del file CSS creating-the-css-file
Nel file CSS, definisci le query multimediali in base alle proprietà dei dispositivi di destinazione. La seguente strategia di implementazione è efficace per la gestione degli stili per ogni query multimediale:
- Utilizza una cartella Libreria client per definire il CSS assemblato al momento del rendering della pagina.
- Definisci ogni query multimediale e gli stili associati in file CSS separati. È utile utilizzare nomi di file che rappresentino le funzioni dispositivo della query multimediale.
- Definisci gli stili comuni a tutti i dispositivi in un file CSS separato.
- Nel file css.txt della cartella Libreria client, ordinare i file CSS di elenco come richiesto nel file CSS assemblato.
L'esercitazione WKND utilizza questa strategia per definire gli stili nella progettazione del sito. Il file CSS utilizzato da WKND si trova in /apps/wknd/clientlibs/clientlib-grid/less/grid.less.
Utilizzo delle query multimediali con le pagine AEM using-media-queries-with-aem-pages
Il progetto di esempio WKND e l'archetipo del progetto AEM 🔗 utilizzano il componente core Pagina, che include clientlibs tramite i criteri di pagina.
Se il tuo componente pagina non è basato sul componente core pagina, puoi anche includere la cartella della libreria client nello script HTL o JSP. In questo modo si genera e si fa riferimento al file CSS con le query multimediali necessarie per il funzionamento della griglia reattiva.
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"/>
Lo script JSP genera il seguente codice HTML che fa riferimento ai fogli di stile:
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">
Anteprima per dispositivi specifici previewing-for-specific-devices
L’emulatore ti consente di visualizzare in anteprima le pagine in diverse dimensioni di riquadri di visualizzazione, in modo da poter testare il comportamento del design reattivo. Quando modifichi una pagina nella console Sites, tocca o fai clic sull'icona Emulatore per visualizzare l'emulatore.
Nella barra degli strumenti dell'emulatore puoi toccare o fare clic sull'icona Dispositivi per visualizzare un menu a discesa in cui puoi selezionare un dispositivo. Quando selezioni un dispositivo, la pagina cambia in base alle dimensioni del riquadro di visualizzazione.
Specifica dei gruppi di dispositivi specifying-device-groups
Per specificare i gruppi di dispositivi visualizzati nell'elenco Dispositivi, aggiungere una proprietà cq:deviceGroups al nodo jcr:content della pagina modello del sito. Il valore della proprietà è un array di percorsi ai nodi del gruppo di dispositivi.
Ad esempio, la pagina del modello del sito WKND è /conf/wknd/settings/wcm/template-types/empty-page/structure. Il nodo jcr:content sotto di esso include la seguente proprietà:
- Nome:
cq:deviceGroups - Tipo:
String[] - Valore:
mobile/groups/responsive
Nodi del gruppo di dispositivi nella cartella /etc/mobile/groups.
Immagini reattive responsive-images
Le pagine reattive si adattano dinamicamente al dispositivo su cui vengono riprodotte, offrendo un’esperienza migliore per l’utente. Tuttavia, è anche importante che le risorse siano ottimizzate per il punto di interruzione e il dispositivo per ridurre al minimo il tempo di caricamento delle pagine.
Il componente core Immagine offre funzionalità quali la selezione di immagini adattive.
- Per impostazione predefinita, il componente Immagine utilizza Adaptive Image Servlet per distribuire la rappresentazione corretta.
- La consegna di immagini ottimizzate per il web è disponibile anche tramite una semplice casella di controllo nei suoi criteri, che fornisce risorse immagine da DAM in formato WebP e può ridurre la dimensione di download di un'immagine di circa il 25% in media.
Contenitore di layout layout-container
Il Contenitore di layout AEM consente di implementare in modo efficiente ed efficace il layout dinamico per adattare le dimensioni della pagina al riquadro di visualizzazione client.
Per ulteriori informazioni sul funzionamento del Contenitore di layout e su come abilitare i layout reattivi per i contenuti, vedere il documento Configurazione del Contenitore di layout e della modalità di layout.