Plate-forme de veille + thème

Lunatic

Salut,

Voici un site en construction, dont l'objectif est de remplacer une page Scoop.it que je tenais à propos de la notion de genre et du/des féminisme(s).

Cherchant à reproduire le look de Scoop.it, j'ai bidouillé un truc grâce à Bootstrap et plus particulièrement au site layoutit ainsi qu'à Masonry (merci je-evrard !).

C'est en cours de finalisation donc le thème n'est pas tout à fait prêt à être distribué — et d'ailleurs si vous avez des critiques/suggestions avant finalisation, je suis preneur — mais l'essentiel est là. Il me semble que les erreurs de validation w3c sont dues au contenu des billets et non pas au thème lui-même.

Y'a certains éléments « classiques » qui n'apparaissent pas, comme le nom de l'auteur ; c'est volontaire.

Le site en lui-même n'est pas encore en activité. Faut que je transferts tous les liens que j'avais dans Scoop.it, et que je formate correctement les billets déjà là, que je leur ajoute des tags, bref, y'a du boulot encore.

Le site en question.

Merci encore à Jerry Wham pour son boulot sur inMyPluxml !

Gzyg

En tout cas c'est bien parti.

Vu que c'est du work-in-progress, je suppose que ça va changer mais je trouve la lecture des articles pleine-page un peu pénible : lignes trop longues et polices trop petites, illustrations trop importantes (en surface) par rapport au texte (au moins sur desktop - en mobile, ça passe plutôt bien) d'autant que le mode article n'apporte rien de plus (en terme de contenu) par rapport au mode home (excepté la possibilité de laisser un commentaire)...

Bon courage pour la suite.


à plus,

Gyg

Stéphane

Bonjour

Je suis d'accord avec Gzyg la lecture d'un article est assez pénible vu la longueur des lignes. D'ailleurs j'avais lu (je ne sais plus trop où), que pour ne pas fatiguer la lecture une phrase ne devait pas dépasser un certain nombre de mots.
Sinon la page d'accueil est bien réussi visuellement.

joebart

L'idée est bonne, plein d'article sur la page home, ça donne une vision d'ensemble et j'approuve :P
En plus petit, ça serait mieux je pense et en conservant une sidebar.

Jerry Wham

@joebart : Une sidebar pour quoi faire ? Tout est bien placé dans l'entête et le pied de page.

@Lunatic : Le reproche que je ferais est que c'est très long à charger.

Tu devrais placer tes appels javascript en toute fin de page. Il a été prouvé que ça améliore l'impression de chargement rapide des pages.
Ta page style.css est appelée deux fois et le reset est inexistant, ce qui doit ralentir un peu le chargement (il est inutile en plus, vu que le boostrap tweeter en embarque un).

Le chargement est long aussi parce que les images sont toujours hébergées sur le site d'origine. Je vais essayer d'améliorer le plugin pour qu'une copie soit rapatriée en local (car en plus, ça peut déplaire à certains que leur bande passante soit un peu amputée).

Sinon, y a de l'idée. C'est peut être un peu trop sobre (sombre?) à mon goût (mais ça facilite la lecture) et il y a une barre de scroll horizontale qui s'affiche inutilement (overflow-x:none à mettre ?).

Je mettrai également un onclick="window.open(this.href);return false;" sur les liens "lire sur le site d'origine" pour pouvoir revenir facilement sur les autres articles que l'on a pas encore lu (car parfois, on peut être amené à suivre un autre lien en lisant un article et c'est moins pratique de retaper une url que de fermer un onglet).

Lunatic

Merci pour vos commentaires et suggestions d'amélioration. Quelques réponses et questions en retour :

@ Gzyg et Stéphane :

Je suis entièrement d'accord sur la difficulté de lecture, je vais diminuer la largeur. Sur impression papier, il me semble que l'idéal est aux alentours de 58 caractères par ligne, et il est vrai qu'un bouquin fait rarement beaucoup plus (et parfois moins, aux alentours des 55).

Comme la noté Gzyg, la page article n'apporte finalement rien d'autre que les commentaires (et c'est aussi le but : n'être qu'un site « tremplin » vers d'autres, donc si on peut se limiter à la page d'accueil, tant mieux !), mais c'est tout de même vers elle que pointerons les éventuels liens diffusés sur les réseaux sociaux…

@joebart : je me demande également en quoi tu trouverais utile de placer une sidebar ? Ce serait par « esthétique » ou pour y places des infos qui n'apparaissent pas là ?

@Jerry : tu utilises plein de mots/notions que je ne comprends pas

Plus sérieusement, c'est cette histoire de « reset » : c'est quoi ce truc ?
Edit : ok, je viens de piger.

Concernant les autres suggestions je les note ; mais c'est vrai que j'aime bien la sobriété/simplicité, qui peut passer pour de l'austérité pour certains (faut pas que je te montre la tête de mon bureau sous Debian )

Enfin concernant le « onclick="window.open(this.href);return false;" », je suis d'accord avec ton analyse, et en même temps je ne sais pas si c'est à moi d'imposer ce comportement à l'internaute. Après tout, s'il veut ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre, il peut le faire par ses propres moyens (mais la discussion est ouverte, je n'ai pas d'avis tranché…)

En tout cas encore merci à vous.

Edit : concernant le temps de chargement, c'est peut-être aussi dû en fait que je tourne sur Raspberry Pi.

Jerry Wham

Quand je dis reset, je parle de la page reset.css qui apparait dans le code source de ta page au tout début ligne 28. Quand on clique dessus, on tombe sur une page 404. Tu devrais tout simplement supprimer cette ligne car elle ne sert à rien. La feuille de style de boostrap (ligne 13) embarque déjà une méthode pour normaliser le comportement des navigateurs (d'où le terme de reset qui efface les spécificités de chacun pour les redéfinir pour tous selon ce que l'on souhaite obtenir).

Ensuite, quand je dis que tu devrais déplacer le javascript en bas de page, je parle des lignes 31 à 34, que je placerais juste avant la ligne 413 (ligne concernant le script mansory).

Pour ce qui est des images, l'url source de chaque image affichée pointe vers le site d'origine de l'article. Cela veut dire que ton serveur interroge le serveur "initial" où est rédigé l'article d'origine, pour l'afficher sur ta page. Ce qui bouffe un peu de la bande passante au serveur "initial". En clair, si tu as un gros trafic sur ton site, cela sera répercuté également sur tous les sites vers lesquels les articles de ton site pointent, même si tes visiteurs ne cliquent sur aucun lien.

La barre de scroll, c'est une barre que le navigateur affiche quand le contenu dépasse le contenant. En l’occurrence, il en affiche une en bas de page, si la fenêtre est un peu "étroite" (aux alentours de 1200px de large). Ce qui n'est pas très pratique je trouve.

Enfin, le débat sur "j'ouvre ou pas par défaut une nouvelle fenêtre en cliquant sur un lien" est un débat sans fin. Et je ne veux pas lancer de polémique à ce sujet. Je sais que je préfère ce comportement quand il me semble justifié dans des utilisations comme pour ton site. Mais d'autres te diront que ça peut gêner certains lecteurs (comme les aveugles en particuliers, mais qui peuvent désactiver le onclick).
Donc c'est à toi de voir.
Tu ne te mouilles pas en n'en mettant pas. Tu prends position si tu en mets. ]:D

joebart

Oui en effet, la sidebar est inutile, j'avais pas tout vu :8

Lunatic

Merci Jerry pour tes nombreuses explications mais je te rassure, j'avais saisi l'essentiel
Le coup du overflow-x m'a bien aidé tout de même (mais apparemment, ce n'est pas none, mais hidden)

Concernant l'hébergement des images, j'avais bien pensé au problème mais j'ai le temps de voir venir : je doute avoir un grand nombre de visites sur le site… Mais ce qui m'embête tout de même c'est que certaines images font 500 ou 700 ko… et là on se rend compte que certains sites, pourtant professionnels, sont loin d'être optimisés !

Je viens de tester la mise à jour du plugin et malheureusement, chez moi, si l'image est un peu volumineuse, ça provoque une erreur 504 lors de l'affichage.

--

Par ailleurs j'ai pris en compte vos remarques et l'article est désormais affichés sur une colonne bien plus étroite qu'avant.

Jerry Wham

Je viens de faire une mise à jour car l'encodage en base64 ce n'était pas une bonne idée. Le plugin permet maintenant une sauvegarde locale de l'image.

Lunatic

Bon, j'ai bossé un peu sur l'apparence du thème, je trouve ça un peu plus chouette comme ça. Ça reste sobre mais moins austère (enfin, je trouve). Du coup me reste à nettoyer un peu les fichiers php/css et je diffuserai le zip ici.

Dudy

Bonjour Lunatic
je voulais donner quelques conseil ou suggestion par apport à ton projet :
-changer favicon bootstrap
- title et sous titre la même largeur que le content
-navigation je mettrais les voix du menu ensemble et le recherche sur la droite
-la couleur de arrière-plan je ferais un gris clair( #EFEFEF) uni, celui actuel ça fais mal aux yeux après 3 min que je suis sur le site
-je ferais pas des coins arrondis, c'est un peu vieux comme style, j'opterais plutôt pour un style comme Metro windows 8
-le footer est trop serré par apport aux texte et la couleur gris foncé sur fond noir je n'arrive pas à lire
-je mettrais moins de texte dans les articles, vu que les articles te dirige sur les sites d'origine et je dois me souvenir jusqu’à ou je lus
pour le reste c'est un bon projet, différent est très culturel
ciao

Lunatic

Merci Dudy pour tes précieux commentaires.

Concernant les couleurs, j'ai appliqué dans la journée une image de fond. J'espère que ça te fait moins mal aux yeux
Concernant le footer, je suis d'accord.
Pour la largeur du titre/sous-titre et celle du content, j'avoue ne pas savoir comment adapter cette dernière automatiquement au texte qu'il contient. J'ai simplement diminué sa taille.

Tu soulèves un point intéressant avec la longueur de texte. Je n'avais pas pensé au fait qu'il était difficile de retrouver où on en est lorsqu'on bascule sur le site d'origine. En même temps, moins de texte ça peut aussi vouloir dire moins donner envie de lire (parfois, les 2 premières phrases sont peu informatives).

Dudy

pour le titre je crois que c'est dans la feuille de style ici

[== CSS ==]
/* Ligne 5 */
.jumbotron
{
  text-align: center;
  color: #428bca;
  margin-bottom: 20px;
  padding-bottom: 3px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 65%;
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.9);
}

le width doivent etre a 100% je crois, il prennent le maximum de la largeur
pour les articles je mettrais la présentation dans le chapo et le reste sur ton site (liens lire la suite) et a la fin j ajouterais la source avec le lien et le remerciements, dans cette façon le visiteur reste sur ton site, actuellement tu oblige le visiteur a sortir de ton site en le rédigeant sur le site de la source,
et avec le temps je crois que ton site vas servir juste pour des liens
ça c'est ma façon de voir la chose mais peut être que je me trompe

Dudy

fait aussi attention au responsive design
voici mes tests
Responsive

Lunatic

Merci.

J'avais compris que tu me suggérais justement de ne pas mettre la boîte de titre à 100%, afin que la largeur de la boîte ne soit pas plus grande que celle du texte.

Sinon concernant les articles, je ne souhaite pas repomper l'intégralité des pages d'origine. Ce n'est vraiment pensé que comme une ferme de liens (à la Shaarli), un tremplin vers les sites d'origine.

Dudy

sinon tu peux simplement enlever la couleur de fond aux titre et ça dérange moins,
pour les articles si tu veux t'inspire à la shaarli alors je comprends mieux ton projet

Lunatic

C'est fait, j'ai passé la largeur de la boîte à 100%.

Je l'avais déjà fait mais j'étais revenu en arrière car si on regarde bien, les trois boîtes blanches ne sont pas parfaitement centrées sur la page (car je dois imposer un margin pour avoir de l'espace entre elles mais en faisant ainsi, margin ne peut pas être en « auto », donc ça ne centre pas. Finalement j'ai triché et en tâtonnant, j'ai cherché la largeur par boîte la plus grande possible pour que ça prenne tout la largeur du div ; j'ai donc mis à 32.4%. Je ne sais pas si je suis clair :P)

Merci pour ton aide, c'est sympa. J'apprécie

Jerry Wham

Ça rame encore par contre. Je pense que les boutons tweeter, facebook et consort y sont pour quelque chose. Tu devrais essayer de mettre des boutons qui ne nécessitent pas javascript ni d'appels à leurs serveurs pour fonctionner. [del]De plus, cela permettra une navigation moins fliquée.[/del]

Lunatic

C'est déjà le cas Les boutons sont de simples images avec un lien par dessus (jamais tu ne verras leur javascript sur mes sites )

Je ne sais pas si la lenteur est plutôt due à la bande passante réduite (auto-hébergé… et je suis en ADSL classique) ou à la machine elle-même qui ramerait (un Raspberry Pi comme je l'ai déjà indiqué). Je crois qu'il y a des outils pour tester ça, faudra que j'y jette un œil.

Heureusement, les visiteurs arrivent davantage sur la page d'un article que sur l'accueil ; et un article unique est tout de même bien plus rapide à charger.

Jerry Wham

Il y a une marge en dessous du footer qui fait que l'on voit le fond gris (les bandes) à nouveau. Et les derniers articles en bas de page ne sont pas alignés comme pour le haut (c'est surement dû à mansory).

Lunatic

Pour ceux que ça intéresse, le thème est dispo sur Github : https://github.com/JulienBiaudet/skoopit

@Jerry : merci pour ton retour ; je ne parviens pas à voir ce problème d'alignement.

Jerry Wham

Tu as corrigé la marge du footer. Par contre, les blocs en bas de page ne sont pas alignés (pas de même hauteur) mais je pense que c'est normal, les blocs n'étant pas tous identiques.

Lunatic

Oui, ça c'est normal