Conception « mobile first » dans Wildfire
Sur cette page
- Principe n° 1 : La plupart des visiteurs utilisent un appareil mobile
- Principe n° 2 : Moins, c'est mieux
- Principe n° 3 : La vitesse est essentielle
- Principe n° 4 : Une navigation simple
- Principe n° 5 : La mise en page s'adapte aux appareils mobiles
- Principe n° 6 : Nom du site web, logo, slogan
Aperçu sur smartphone
Wildfire vous propose un aperçu de l'affichage sur smartphone ; vous pouvez l'utiliser pour vérifier l'affichage de votre site sur un téléphone portable !
Vous trouverez l'aperçu mobile dans un menu déroulant situé dans le coin supérieur droit, lorsque vous consultez (mais non lorsque vous modifiez) une page.
Test sur un smartphone
Vous pouvez créer un code QR à scanner avec votre appareil mobile pour accéder rapidement à votre site :
- Cliquez sur « Aperçu en tant qu'invité »
- Copiez le lien
- Collez le lien dans la barre d'adresse
- Créer un code QR :
- Chrome et Edge : cliquez avec le bouton droit pour ouvrir le menu contextuel. Choisissez « Créer un code QR pour cette page »
- Safari : vous devrez peut-être trouver une extension pour le faire, ou utiliser l'application Raccourcis.
Avertissement !
Nous vous recommandons d'éviter d'utiliser des générateurs de codes QR « gratuits » disponibles sur Internet, car ceux-ci peuvent présenter des failles de sécurité et exposer votre clé d'invité à des tiers.
Créer un code QR en Google Chrome et Microsoft Edge
Principe n° 2 : « Moins, c'est mieux »
N'utilisez du texte que lorsque les images ne suffisent pas.
Des phrases courtes et percutantes, écrites en gros caractères, sont plus efficaces pour communiquer que de longs blocs de texte.
Évitez de surcharger les petits écrans.
Principe n° 3 : la vitesse est essentielle
Des temps de chargement trop longs feront fuir les utilisateurs.
Limitez le nombre de vidéos présentes sur la page d'accueil (et évitez la lecture automatique).
Un trop grand nombre d'images volumineuses peut également ralentir le chargement (téléchargez des images redimensionnées à moins de 1 Mo).
N'oubliez pas que les visiteurs peuvent avoir des vitesses de connexion différentes.
Ce site utilise des icônes et des liens sur la page d'accueil pour guider les utilisateurs
Voici un exemple de bouton d'appel à l'action sur une page d'accueil
Ergonomie
L'ergonomie concerne la facilité avec laquelle on peut naviguer sur un site, trouver du contenu et interagir avec celui-ci. Une ergonomie médiocre peut faire fuir les visiteurs avant même qu'ils ne trouvent votre contenu. Vérifiez l'ergonomie sur ordinateur et sur mobile.
Exemple : les fichiers PDF individuels sont moins faciles à consulter sur mobile ; il est préférable d'utiliser une bibliothèque de PDF.
PDF - L'affichage d'un seul élément fonctionne bien sur ordinateur :
mais devient trop petit sur le portable :
La bibliothèque PDF est préférée, car le fichier PDF s'affiche en plein écran
L'option « Enroulement du texte » de la fonction « Image avec texte » est utile pour les textes plus longs, par exemple un paragraphe ou une citation plus longue. L'image peut être grande ou petite. Si l'image est trop grande, le texte ne s'enroulera pas autour d'elle.
Principe n°5 Modifications de mise en page dans l'affichage mobile
L'affichage mobile se présente en une seule colonne, et la colonne de gauche s'affiche toujours au-dessus de celle de droite (dans les langues de lecture de gauche à droite).
Réfléchissez à votre mise en page : vaut-il mieux utiliser deux colonnes ou placer l'image et le texte côte à côte ?
Une alternance texte/image rend bien sur un ordinateur de bureau, mais n'est pas aussi harmonieuse dans l'affichage mobile. Testez le temps de chargement initial de votre site.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Les noms de domaine ne constituent pas de bons noms de sites web
