Le nombre en bas à droite d’un shaarlink, c’est le nombre de clics ?
Ce n’est pas indiqué explicitement.
Pourquoi ne pas utilisé une image de fond sur le chiffre, genre un petit curseur de souris, pour modéliser le "clic", ou alors faire un peu comme les boutons FB ou Twitter : un logo shaarli avec le nombre juste en dessous (hé, on est en train de produire un vrai rézososio là !).
Je pense qu’on peut trouver mieux que le curseur de souris en fond, mais faudrait qu’on sache ce que ça veut dire^^.
N’hésitez pas à mettre des attributs « title » partout non plus : ils sont invisibles, sauf quand la souris passe par dessus (après, « title » n’est pas le top sur mobile, mais ça sera toujours ça pour desktop).
Parlant de mobile, je vois ceci :
http://lehollandaisvolant.net/img/94/Screenshot_2015-07-07-10-08-21.png
Je vois plusieurs problèmes :
▶▶ les liens en haut sont trop serrés à droite. Solution : utiliser "flex" pour les distribuer sur toute la largeur.
Dans le thème mobile (dans le
@media (max-width: 600px)), ajouter ça :
.menu ul.show-for-small-only { display: flex; float: none; }
.menu ul li { flex: 1 1 auto; text-align: center; }
(1 1 auto : le premier 1 pour dire que chaque "li" a un poids de 1 dans la réduction de taille (un bloc avec 2 serait doublement réduit) lors du redimentionnement flexible ; le seconde 1 c’est la même chose pour l’agrandissement ; le dernier "auto" c’est pour dire que le bloc n’a pas de taille fixe (en px) minimal. Mettre « 100px » aurait permit un agrandissement/rétrécissement flexible dans la limite inférieure de 100px.)
(aussi je vois dans le code qu’il y a 3 fois le HTML : une fois pour mobile, une fois pour desktop, une fois pour grand-desktop. C’est assez moyen comme pratique. Il faut mieux limiter le HTML et le rendre adaptable. En faisant ça, on se force à le simplifier (en nombre d’éléments HTML)).
Résultat pour le menu en haut :
capture.
▶▶ Les boutons "top du jour" "top hebdo" sont trop petits.
Solution : ajouter un padding sur les liens. Ça va agrandir les liens ET l’espace cliquable (ou touch-able) en même temps. J’augmente aussi la taille de pixel, un peu (même s’il faudrait tout mettre les font-size en "em" ou "%", pour faire les choses bien).
.row .button.microscopic { padding: 1.3 em; font-size: 12px; }
Ces boutons sont maintenant juste un peu plus gros. Je choisis ces valeurs dans l’éditeur de code sur Firefox Desktop. Il le peut qu’ils soient à ajuster lors d’un essaie réel sur mobile.
▶▶ Le champ de recherche est large et fin. Trop fin sûrement.
Regardes le champ de recherche (en mobile) sur la page de
Google,
DuckDuckGo ou même la barre d’url sur les navigateurs mobiles : ils ont une taille adaptée au tacile.
Ici pareil, un simple padding fait l’affaire.
On centre avec "margin: 0 auto", On remet "height:auto" (sinon le padding bug) et je met aussi la largeur à 90%, question d’esthétique) :
#searchbar { margin: 0 auto; height: auto; padding: 15px; width: 90%; }
▶▶ Chaque bloc de liens est accolé à celui du dessus et celui du dessous. C’est bien pour gagner de la place, mais pour voir où l’un débute et l’autre fini, sachant qu’il y a une bordure sur les blocs, c’est pas facile.
Sur desktop, même en réduisant la largeur de l’affichage pour faire jouer le responsive-design, il semble y avoir un "linear-gradient". C’est bien, c’est ce que j’allais proposer, mais il n’est pas visible sur mobile, bizarrement.
Dans tous les cas, la bordure du dessous d’un bloc, et la bordure du dessus du bloc d’en dessous (on suit) se touchent et ça donne une double bordure de 2 px qui n’est pas jolie.
.article + .article { border-top: 0; }
Ainsi, tous les blocs, à commencer par le second bloc, n’auront pas de bordure en haut. La séparation sera assurée par la bordure du dessous du bloc au dessus.
Voici ce que ça donne avec un avant/après :
capture.
▶▶ La ligne avec les tags et le nombre de clics se fait (sur mobile) sur deux lignes : le nombre de clics est passé en dessous. C’est pas esthétique.
Là aussi, ça peut être résolu avec flex.
Dans le code, pour le bloc avec les tags et le nb-clic, il y a un
<div class=""> (la classe est vide!). Il faudrait y mettre quelque chose comme "article-footer".
À ce moment là, on mettrait :
#div-container-articles .article-footer { display: flex ; }
#div-container-articles .article-footer > div { float: none; }
#div-container-articles .article-footer > div.text-left { flex: 1 1 auto; } /* le bloc des tags est flexible entièrement */
#div-container-articles .article-footer > div.text-right { flex: 0 0 40px; } /* le bloc du nb-clic est fixe, non flexible. */
40px devraient suffire pour le nombre de clics. Je pense pas qu’on arrive à un nombre de clics à 30 chiffres. Sinon, il serait intéressant de commencer à mettre « 4k » ou « 3M » si le nombre de clics est de 4000 ou 3000000.
(en parlant de ça : le TOP hebdo/du jour : c’est en fonction du nombre de partage ou du nombre de clics ?
▶▶ Enfin, dernier point : la prévisualisation d’un lien (l’image sur la droite, là) est sympa sur desktop, mais sur mobile, il fait 40px sur 40px. Je ne sais pas si à ce niveau il est encore utile.
Je sais qu’on peut cliquer dessus pour la voir en grand (même sur mobile), mais le bouton pour le refermer est foireux : à chaque fois ça m’ouvre le lien plutôt que fermer la prévisualisation.
Peut-être ajouter un «
z-index: +1; » sur la petite croix.
(il se peut qu’il y ait des soucis de priorité CSS. Je n’ai pas pu tester en réel.)
C’est à peu près tout.
— (
permalink)