Toujours dans cette optique d’avoir un site optimisé pour tous, je me suis retrouvé face à un souci au niveau de mon thème en responsive, notamment sur les petits écrans avec mon menu.
En effet, sous mobile, avec n’importe quel navigateur, mon menu se refermait tout seul lors du scrolling pour faire défiler un peu le menu.
Cet effet de fermeture correspond en fait au moment où le navigateur enlève une de ses barres de navigation (celle de l’URL surtout).
Ce souci a lieu avec les navigateurs Firefox, Samsung, Opéra et Chrome pour mobile… Autrement dit, tous.
L’astuce que j’ai trouvé c’est donc de faire un menu déroulant lorsque l’écran est un peu petit (si vous voulez tester, il suffit de vous mettre en paysage sur mobile sur la page d’accueil).
Mais le plus fun, c’est que ça se fait en CSS.
Le code que j’ai appliqué est celui-là :
overflow: scroll;
overflow-x: hidden !important;
max-height: 100vh;
Overflow c’est pour afficher l’ascenseur de défilement, ça autorise un débordement avec défilement.
Je dis à mon block de ne pas afficher de barre de défilement sur l’axe x (« Overflow-x »). Cette technique évite à mon menu d’avoir un glissé vers la droit qui apparaît lorsque l’ascenseur vertical se montre, ça ajoute une marge en quelque sorte et décale le block du menu.
Enfin, je dis à mon menu que sa hauteur maximale théorique ne pourra pas dépasser 100vh. Le vh c’est une unité qui se définit comme un pourcentage de la surface d’affichage visible en hauteur. 100vh c’est donc 100% de l’écran visible.
Dans ce cas, mon menu occupera 100% de la page mais aura un ascenseur de défilement.
Quelques unités qui peuvent être utiles sans devoir tout calculer à chaque fois :
https://developer.mozilla.org/fr/docs/Web/CSS/length
http://www.pompage.net/traduction/css-unites-et-usages
Si tu es là dedans, voici le testeur de site mobile de Google :
https://search.google.com/test/mobile-friendly?url=https%3A%2F%2Flokoyote.eu%2F
Et pour le testeur d’accessibilité, y’en a plein, mais j’aime bien celui-là :
http://wave.webaim.org/report#/https://lokoyote.eu
Sinon, pour ton site en particulier : quand on focus sur un lien, tu mets le texte en gras (pour la visibilité). C’est bien, mais ça pose problème : le texte en gras occupe plus de place à l’écran, donc quand on focus sur un lien, le texte se déplace.
J’ai fait une capture là : https://lehollandaisvolant.net/img/df/lokoyote-css.png
Même remarque pour les champs texte nom/email/site web dans les comm.
Je ne sais pas ce que t’en penses, mais à mon avis, changer juste le contraste (couleur / couleur de fond) et une bordure/outline, suffit.
Pour la bordure, même problème parfois : sur les éléments qui sont emmenés à porter une bordure lors du hover/focus, il faut mettre une bordure identique mais de couleur « transparent » à l’état normal : comme ça, la bordure est toujours là c’est juste la couleur qui change au hover/focus et il n’y a pas de problème de redimensionnement.
Enfin, un petit détail quand on se lance dans ces considérations : il faut considérer que l’internaute ne visite pas que ton site. Pour beaucoup, un site se place dans un contexte plus grand : « internet ».
Avec ceci en tête, il y a des choses qui doivent être identiques peu importe le site qu’on visite : couleur des liens (bleus!), comportement/style des champs texte, etc.
Bien-sûr, on peut styliser ce qu’on veut en fonction du public, mais si on veut que le plus de monde s’y retrouve, il faut rester plutôt proche des styles par défaut, ou ceux qui sont « standard de fait » sur le web. Ce n’est pas pour rien que Google, Wikipedia, Facebook ont tous ces trucs là en commun^^
(Sinon : GG pour l’initiative, je prendrais peut-être quelques idées sur toi à l’occasion :) )
@le hollandais volant :
Merci pour ton commentaire et pour tes liens !
Je connais celui de Wave, je me base un peu dessus pour modifier au fur et à mesure certaines choses, mais celui de Google je ne connaissais pas et c’est pas con de leur part, surtout que le référencement se base dessus maintenant.
Oui c’était voulu la mise en gras, mais c’est un artefact que j’ai oublié d’enlever avant de mettre plus de contraste au final qui était bien mieux… Merci pour le retour en tous cas, c’est modifié !
T’as utilisé l’émulation du responsive du navigateur pour ta capture d’écran ?
Faut que je regarde cette histoire de bordure, j’ai pas fait gaffe à ce détail, mais c’est clairement la meilleure chose à faire que de simplement changer la couleur.
Je pars du principe de ne pas trop en ajouter mais de modifier simplement ce qui existe déjà (un background, une couleur, une taille, etc).
Par contre ajouter une bordure en plus du contraste risque aussi de me poser le souci de débordement, j’avais essayé ça aussi au départ…
Et en effet, j’essaie aussi de garder les « codes d’usage », je suis le premier à râler quand je ne trouve pas rapidement un lien par exemple ou un bouton et c’est normal, mais c’est bien de le rappeler ! Quand je vois certains sites… C’est beau mais c’est clairement pas pratique ! Surtout que beaucoup d’effets ne fonctionnent pas ou mal sur mobile. Quand on sait que le mobile devient la norme de navigation devant le PC depuis quelques années maintenant à tel point que beaucoup d’articles parlent de « mobile first » (ex : http://mobibot.io/blog/420/devenir-mobile-first-doit-etre-votre-objectif-en-2018.html), c’est bien de garder certaines choses en tête.
Tiens en passant, il y a un truc que je ne trouve pas terrible avec certains navigateurs pour la navigation au clavier c’est que le focus des liens en bas de page reste toujours en bas de page, alors que sous Chrome(ium) par exemple, le navigateur met le lien en focus au milieu de la page en faisant descendre la page pour plus de visibilité, c’est un gros plus en vrai !
(Merci :) si des trucs intéressants te bottent, clairement, hésite pas, même si tu gères bien mieux que moi le CSS et que ça risque d’être moi qui vais piquer quelques idées sur toi :P)