Comme des milliers de personnes, recevez gratuitement chaque semaine Il est nécessaire de penser aux utilisateurs mobiles lorsqu'on publie du contenu sur le site :
Auparavant, les utilisateurs des sites se connectaient uniquement depuis un ordinateur équipé d'un moniteur. Ces dernières années, la situation a changé avec l'utilisation de téléphones portables équipés de petits écrans. Il faut donc changer ses habitudes car 60% des utilisateurs viennent sur les sites depuis un mobile, et c'est en augmentation constante.
Si on ne tient pas compte des utilisateurs mobiles, ceux-ci risquent d'être gênés lors de leur utilisation du site (et arrêter de l'utiliser). Les moteurs de recherches tiennent également compte de ce critère pour le classement des pages car si on fait une recherche sur mobiles, on doit obtenir le meilleur résultat SUR MOBILES (et l'affichage de la page sur ordinateurs n'a alors aucune valeur). Si on ne tient pas compte de ces critères, on prend le risque que votre page ne soit plus bien référencée sur les moteurs de recherches et donc plus utilisée comme avant. Les moteurs de recherches sont maintenant capables de détecter si une page s'affiche bien ou mal sur mobiles.
Il est donc indispensable de penser à l'utilisateur "mobile" lorsqu'on publie quelque chose de manière publique (un exercice, un cours, un forum...)
Exemple du problème des ascenseurs :
On est sans arrêt obligé de faire défiler l'écran vers la droite pour voir la suite du contenu, ce qui est très pénible.
Exemple du problème des images trop larges :
(image d'illustration, pas à la bonne échelle)
Le mobile a été obligé de réduire la taille des caractères pour afficher l'image bleue de décoration (qui dépasse la largeur de 320), ce qui rend l'ensemble pénible à utiliser, car il faut sans cesse zoomer sur le contenu pour le voir.
Images :
Merci d'éviter les images d'une largeur supérieure à 320. Pour vous donner une idée, cette image fait 320 de largeur :
Image à la bonne échelle(Cette image s'affiche sur 100% de la largeur d'un écran de mobile, ce qui est parfois difficile à comprendre sur un ordinateur. Mais si vous chargez cette image dans un mobile, toute la largeur de l'écran sera occupée par l'image)
Si vous utilisez une image supérieure à 320, vous ne verrez probablement pas le souci sur ordinateur.
Mais si vous regardez la page sur un mobile, toutes les lettres seront devenues petites parce que le mobile aura dézoomé pour pouvoir afficher l'image dans la largeur de la page. Ou s'il n'y arrive pas, il affichera des ascenseurs pour voir TOUT le contenu de la page (même l'exercice), ce qui rend l'ensemble de la page difficile à utiliser. Résultat : il faut faire le maximum pour ne plus utiliser d'images avec une taille supérieure à 320, d'autant plus, s'il s'agit d'une simple décoration. Une seule image d'une mauvaise dimension suffit à "casser" l'affichage de l'ensemble de la page, et à rendre par exemple le cours ou l'exercice inutilisable sur mobile. Attention également à ne plus utiliser les images répétitives qui sont très agaçantes :)
Tableaux :
Si vous construisez un tableau à 2 colonnes avec à gauche une image, et à droite, un texte, il y a de grandes chances que l'ensemble dépasse la largeur de 320. Il vaut mieux donc mettre au-dessus l'image et en-dessous le texte. Les tableaux ne sont pas recommandés dans ce cas car ils ont le même problème que les images (cf ci-dessus).
Exemple de problème dans le cours : Lien
(exemple au hasard)
Fiche qui comportait auparavant un tableau à 4 cases pour les pronoms relatifs et qui a été corrigée : Lien
Si vous mettez un tableau supérieur à la largeur de 320, la page s'affichera mal sur mobiles, car on aura du mal à voir le cours et l'exercice (le mobile va essayer de dézoomer, ce qui fera que les lettres seront toutes petites OU le mobile affichera des ascenseurs sur toute la page, ce qui rendra la page très difficile à utiliser - y compris l'exercice, car il faudra sans cesse faire défiler l'écran vers la droite pour voir la suite de la ligne).
Un moyen "facile" de s'en sortir est d'indiquer une largeur de tableau de 100% au lieu d'indiquer une taille en pixels. Ainsi, le tableau occupera 100% de la largeur de l'écran, peu importe la taille de celle-ci.
Exercices :
Les champs de réponses ne doivent pas être trop longs. S'ils sont trop larges, ils dépasseront de l'écran. Ils devraient avoir une taille maximale de 40 caractères, c'est-à-dire que la réponse attendue la plus grande ne devrait pas comporter plus de 40 caractères, ce qui représente ceci :
abcdefghijklmnopqrstuvwxyzabcdefghijklmn
(cela représente déjà pas mal de caractères à taper, cela peut aussi être utile de limiter la taille des réponses même pour un ordinateur)
Flash / Voki :
Les contenus en Flash (comme les Vokis) ne s'affichent plus. Il faut donc arrêter de les utiliser.
Trop de caractères :
- si vous utilisez plusieurs fois à la suite le même signe, par exemple ----------- répété sur toute une ligne, le mobile va considérer qu'il ne s'agit que d'un mot, et il ne peut alors pas le couper. Cela va tout décaler vers la droite et votre test s'affichera mal sur mobiles. Il est conseillé de ne pas utiliser des caractères répétés de très nombreuses fois.
Exemples : beaucoup d'espaces pour centrer une image (utiliser plutôt l'outil "centrer"), une quarantaine de "+" ou de "===" pour délimiter des parties (utiliser plutôt l'outil "trait horizontal").
- pour la même raison, il vaut mieux limiter les tableaux à 2 colonnes.
une bonne habitude est de ne pas dépasser deux colonnes, cela ne fonctionne pas à tous les coups (par exemple, s'il y a une grande image dans la colonne 1 et du texte dans la colonne 2, ça peut dépasser), mais il y a moins de risques que d'avoir par exemple 4 colonnes, qui vont dépasser à coup sûr.
Savoir ce que Google pense d'une page :
Il suffit d'entrer l'adresse de la page ici : Lien
Cet outil renvoie "Awesome! This page is mobile-friendly." quand tout va bien. Par contre, un message rouge avec des explications apparaît en cas de souci.
INDISPENSABLES : 