Avant de commencer
Cet article vous explique comment votre mise en page s'adapte pour s'afficher de manière aussi lisible sur ordinateur que sur mobile. C'est ce que l'on appelle aussi le Responsive Design (optimisé pour mobile).
- Le Responsive Design
- Règle générale pour les pages personnalisées
- Astuce design
- Dans un bloc de texte
- Pour les pages spécifiques
- Faire des vérifications simples et rapides du responsive
Le Responsive Design
Le Responsive Design ajuste automatiquement l’affichage d’une page web à la taille d’écran de l'appareil utilisé (smartphone, tablette, ordinateur de bureau..).
Il s’agit d’adapter le site à toutes les résolutions. Autrement dit, les blocs de contenus (textes et images) se redimensionnent et se réorganisent en fonction de l’espace disponible sur l’écran.
Règle générale pour les pages personnalisées
Les pages personnalisées seront celles qui vous demanderont le plus de temps à paramétrer et personnaliser de manière générale. Aussi il y aura quelques petites choses à faire pour avoir un affichage cohérent sur tablette et téléphone portable.
Affichage par défaut sans personnalisation
Si vous ne personnalisez pas l'affichage responsive de vos pages personnalisées, les règles de lecture de contenu suivantes s'appliqueront :
- Lecture du contenu de gauche à droite
- Puis lecture de haut en bas
Prenons l'exemple suivant : Un bloc de texte qui va avec un bouton "TEXTE" (en bleu) et un bloc image qui va avec le bouton "IMAGE" (en vert). La lecture brute de cette page avec les règles ci-dessus se voit avec la flèche rouge : Texte > Image > Bouton texte > Bouton image.
L'affichage responsive par défaut ressemblera donc à ceci :
Ce n'est a priori pas cohérent avec le message que je veux faire passer !
Personnaliser l'affichage responsive
Un ajustement est donc à faire pour regrouper le bloc texte avec son bouton, de même pour le bloc image qu'on souhaite voir rester avec son bouton.
Pour grouper les blocs, sélectionnez les en maintenant la touche Ctrl de votre clavier enfoncée, puis en cliquant sur les blocs qui vont ensemble. Une fois les blocs sélectionnez, vous verrez la possibilité de grouper les blocs dans le bandeau à gauche.
Après la manipulation, vous n'aurez plus qu'un seul bloc (comme ci-dessous). Vous pourrez les dégrouper si besoin.
Voici le rendu final sur tablette et téléphone portable :
C'est directement plus cohérent !
Attention, si j'avais groupés tous les blocs dans un seul bloc (texte + images + boutons), les règles de lectures générales se seraient appliquées dans le bloc !
La bonne pratique est donc de rassembler uniquement les blocs qui vont ensemble ;)
Astuce design
Les affichages ou délimitations des blocs peuvent parfois être inexistantes. Ceci se traduit pas des contenus qui sont compactés. L'impression sur téléphone est que les éléments sont collés les uns aux autres, ce qui ne facilite pas forcément la lecture.
Voici donc une petite astuce pour aérer votre site internet et son affichage responsive.
Jouez avec les marges
La plupart des blocs disposent de marges intérieures et/ou extérieures. Ces marges se trouvent dans le bandeau de gauche quand vous sélectionnez un bloc. Jouer avec ces marges vous permettra d'espacer un peu les contenus les uns des autres !
Les marges doivent être ajustées avant de grouper les blocs pour l'affichage responsive. Vous pouvez toujours dégrouper des blocs, ajuster les marges, puis les regrouper.
Dans un bloc de texte
Une fois sur la page, sélectionnez le bloc de texte et glissez-le sur le damier
3. Ajoutez du contenu
Vous pouvez maintenant ajouter les éléments directement dans ce bloc.
4. Ajout d'une image
Dans le même bloc, cliquez sur l'option image dans la palette d'édition
Ensuite, cliquez sur Téléverser > Choisir un fichier > Envoyer sur le serveur
Vous serez alors dirigé automatiquement vers les propriétés de l'image où vous pourrez réajuster la hauteur et la largeur de celle-ci. Faites OK pour l'enregistrer.
Il ne faut pas utiliser l'option Image qui se trouve dans le menu situé sur votre gauche car les images ajoutées depuis cette option seront centrées en responsive mais pas redimensionnées.
Voir la présentation sur le site en version Desktop
Voir la présentation en version mobile
Pour les pages spécifiques
Bonne nouvelle, vous n'avez rien à faire pour les pages spécifiques ! (pages de blog, galeries photos, agenda, sondages, pages d'annuaires).
Leur contenu est responsive par défaut. Vous ne pourrez pas le modifier.
Faire des vérifications simples et rapides du responsive
Vous avez groupé vos blocs, mais le travail n'est pas encore fini. Il vous faut maintenant vérifier que l'affichage est bien responsive sur petit écran. Bonne nouvelle, vous pouvez faire la vérification sans portable, juste avec votre ordinateur !
Pour faire ceci, suivez les étapes suivantes :
1. Enregistrez vos modifications
Forcément, si vous n'enregistrez pas, les blocs n'apparaîtrons pas groupés. Donc n'oubliez pas de faire cette petite manipulation.
2. Allez voir le rendu de la page
Plusieurs possibilités ici. De manière générale, vous pouvez voir le rendu de la page en passant par : Site internet > Menu est pages > ... de la page > Voir le rendu
3. Diminuez la taille de la page de rendu (sur ordinateur)
Vous pouvez réduire la taille de la page sur votre ordinateur afin de simuler un affichage sur téléphone portable. L'important ici est surtout de réduire la largeur de la page. La hauteur n'a pas d'importance.
Pour réduire la taille de votre page, regardez la capture écran ci-dessous :
4. Actualisez la page du rendu après chaque modification
Étape extrêmement importante et qu'on a tendance à oublier, surtout quand on apporte plusieurs modifications sur une même session de travail. Actualisez la page où vous voyez le rendu !
L'enregistrement de la page en mode édition n'est pas suffisant, surtout quand vous affichez déjà le rendu sur une autre page.
Vous avez plusieurs solutions pour actualiser une page :
- Appuyez sur F5
- Cliquez sur la flèche d'actualisation à côté de l'url - https://association.assoconnect.com/etc
- etc.
Vous pouvez bien sûr aussi regarder l'affichage directement à partir de votre téléphone portable. Actualisez juste systématiquement votre page.
Commentaires
0 commentaire
Vous devez vous connecter pour laisser un commentaire.