EngagementHQ utilise une conception Web réactive pour s'adapter automatiquement à la meilleure expérience utilisateur en fonction de la taille de l'écran et de la résolution de l'appareil de l'utilisateur. La conception réactive est une pratique courante pour les sites web accessibles.
Pour tester l'apparence de votre site sur différents appareils, vous pouvez redimensionner la fenêtre de votre navigateur aux dimensions souhaitées. Vous obtiendrez ainsi une approximation raisonnable de l'aspect de la page sur d'autres appareils. La conception réactive est transparente, mais il existe quelques différences subtiles que vous devez connaître.
Projets sur appareils portables
Le contenu de vos projets sera classé comme suit dans la vue réactive :
En-tête et menu de navigation: votre menu de navigation s'affichera automatiquement sous la forme d'un « menu hamburger ».
Bannière du projet : comme les autres images, la bannière se rétrécit pour afficher la largeur maximale.
Description du projet : la zone de contenu contenant l'image du projet et le texte se rétrécit pour s'adapter aux écrans plus petits, en supprimant tout défilement horizontal.
Outils : vos onglets d'outils s'affichent en cascade.
Widgets: vos widgets apparaîtront dans le même ordre que vos outils.
Liens de Pied De La Page : vos liens resteront les mêmes mais s'afficheront en colonnes sous vos liens sociaux et au-dessus de votre logo.
Votre page d'accueil sur les appareils mobiles
Lors de la prévisualisation de votre page d'accueil, vous pouvez passer d'un appareil à l'autre. Votre page d'accueil affichera toujours toutes les sections, mais les cartes seront empilées au lieu de la disposition que vous avez choisie. Ainsi:
Tous les types de sections sont rétrécis pour s'adapter à la taille de l'appareil, ce qui donne des éléments empilés.
Les bannières sont recadrées pour montrer le point central avec le message de bienvenue que vous avez défini.
Les images des cartes de projet sont recadrées autour du point focal et s'affichent sur toute la largeur avec des hauteurs variables.
Les curseurs sont recadrés pour montrer le point focal. Le titre, la description et le bouton s'affichent au-dessus ou au-dessous de l'image, en fonction de la mise en page.