Le nouveau lomart.fr est en ligne

[lomart]

Bonjour à tous,

J'ai enfin mis mon site en version 3.5.1 : http://lomart.fr
Il faut dire que J'en ai profité pour mettre au propre la douzaine de petits modules et plugins réalisés pour mes besoins perso ou pour le plaisir.
Vous trouverez également des trucs et astuces et fiches références pour les utilisateurs de Joomla!.

Le site est réalisé avec une version de base de Joomla 3.5.1 (sans CCK) afin d'expérimenter mes créations.
Le template est une expérimentation perso basée sur une version largement modifiée de Knacss avec un minimum de Bootstrap dedans pour la compatibilité.
Les extensions utilisées sont indiquées sur cette page dédiée : http://lomart.fr/credits

N'hésitez pas à me faire des suggestions/remarques sur le site.
Si vous avez des questions sur mes extensions: pour ne pas alourdir ce post, préférez le forum de mon site ou créez un post spécifique sur ce forum.

Lomart

[fynhooft]

Re : Le nouveau lomart.fr est en ligne

Bonjour,

Juste des détails de couleurs qui me "perturbent" : le jaune qui encadre "Rechercher" et le rose de la colonne de droite. Pourquoi ne pas resté uniforme dans le bleu, le blanc ou le gris ?

Tu n'as pas précisé quelle extension tu as utilisée pour ton module de soutien. De plus, dans ce dernier, il traine un mot anglais "Amount"

Le module "Traduction", je le mettrais en tête de colonne ou mieux dans le header.

Quand tu simules un smartphone :
Ton icône "hamburger" apparait deux fois : apparemment ce ne sont pas les mêmes.
Le module de traduction apparait à la fin !

Ton site est bien mais demeure classique. Dommage que tu n'as pas utilisé les interfaces modernes du genre Helix3

[lomart]

Re : Le nouveau lomart.fr est en ligne

Merci pour tes remarques averties

Pour les couleurs, je pensais avoir mis du bleu et du beige (#EFDEBF) et non du rose. Je viens de passer le jaune de rechercher en beige (ou rose)

Je viens de mettre le crédit pour le module soutien qui est Donate Elite. Je viens de supprimer le mot amount

Bien vu pour le module traduction, il a le défaut d'avoir une zone vide en dessous que je n'arrive pas à supprimer. C'est pour cela qu'il est en fin. Dans le header, il prend trop de place en vue smartphone.

Bien vu aussi pour le menu, je pense que je vais en changer si je n'arrive pas le supprimer.
Correction: je viens de supprimer le double hamburger.

Sur le côté classique du site, je suis un peu contraint par bgmax qui se marie mal avec ce genre de site. J'avais aussi besoin d'une mise en page plus classique pour une présentation blog. Je voulais aussi utiliser le module Masonry. C'est dur de concilier graphisme et démonstration de ses extensions...

[fynhooft]

Re : Le nouveau lomart.fr est en ligne

Bonjour,

Modifies ton css ainsi :

.bg-beige {background-color: rgba(128, 128, 128, 0.1);}
.sidebar-right{display: block; width: 90%; padding:2%;}
.pagination{text-align: center;}

Je pense que cela sera plus joli.

Je serais un peu plus sémantique : pourquoi tu mets bg-beige alors que tu mets du rose ? Il faudrait plutôt mettre bg-aside comme cela si tu changes la couleur, ce n'est pas contradictoire !
Tu devrais aussi suivre les conseils de ce monsieur pour le nom des couleurs

Le breadcrumb, je le mettrais après le header.

Maintenant, c'est toi qui choisit.

[lomart]

Re : Le nouveau lomart.fr est en ligne

Bonjour et encore merci pour tes précieux conseils,

Pour la couleur de fond sur sidebar, je fais un test avec ta couleur et du padding. C'est vrai que cela fait plus discret, mais après des semaines avec cette couleur, je m'y était habitué ...
Par contre, je conserve mon display:table-cell pour avoir la couleur sur toute la hauteur
Bien vu pour le centrage de la pagination

Le breadcrumb, je l'aime bien en bas car il sépare du footer et met une barre de navigation à la fin de l'article

Pour la couleur rose, je t'assure qu'elle était beige. La preuve en image :



En ce qui concerne le nom des couleurs, je ne veux pas faire mentir le dicton qui veut que l'on ne fasse pas ce que l'on dit.
Peut-être qu'un jour, je ferais un article sur ma logique de nommage des classes ... mais c'est une autre histoire !

[cavo789]

Re : Le nouveau lomart.fr est en ligne

Bonjour

Ton site réponds rapidement toutefois j'ai été curieux et j'ai lancé un test GTMetrix (https://gtmetrix.com/reports/lomart.fr/8OIZLbUb).

Il y a plusieurs points sur lesquels tu pourrais agir pour obtenir ton score A en PageSpeed comme spécifier la taille des images, envoyer des images taillées (p.ex. custom-admin-menu-avant-apres.png qui a une taille de 930x507 mais redimensionnée à l'écran en 189x103). Tu pourrais aussi spécifier la durée de vie (leverage browser caching) pour deux fichiers (un svg et un woff).

GTMetrix recommande aussi des images mieux optimisée (39% de gain pour l'une d'entre elles).

Ces petites modifications pourront t'amener vers un score A, c'est certain.

Bonne journée.

[lefabdu51]

Re : Le nouveau lomart.fr est en ligne

: je viens de supprimer le double hamburger.

[humour]
supprimes aussi les 3 simples et les deux litres de coca que tu prends à coté .
La facture sera moins lourde aussi au drive ....
[/humour]

sinon la couleur que je vois sur ton site n'est pas beige, n'est pas rose, mais chair...

[humour]
enfin moins que de t'inviter au resto g l'impression......
[humour]

[lomart]

Re : Le nouveau lomart.fr est en ligne

@Cavo

Merci pour ton analyse et tes réflexions

J'ai fait quelques-unes des modifs comme mettre une version vignette pour custom-admin-menu-avant-apres.png
Avant j'avais une photo de 25ko (pas mal comme poids pour un 930x507, pour info la version JPG compressée à 80% fait 180Ko), maintenant j'ai en plus une vignette en 164x300 (la taille sur smartphone) de 12ko.
Je trouve que les règles pour l'optimisation des images datent du temps où le responsive n'était pas encore sorti.
Quel intérêt d'indiquer un couple largeur/hauteur quand celui-ci va varier selon le device et sera forcé par une règle CSS ?

Dans le même ordre, pour des images (logo extension) que l'on va retrouver souvent dans différentes tailles, n'est-il pas préférable de charger une version grande taille bien optimisée de 7ko qui restera dans le cache que plusieurs versions pour un total de 15ko ?

Je pense qu'il faudrait un peu plus de bon sens dans les critères d'analyse.

Actuellement les données transférées pour charger ma page d'accueil font environ 370ko en 57 requêtes, dont 100k et 20 requêtes pour le seul module traduction. Je trouve que ce n’est pas trop mal ... d'ailleurs tu le dis "Ton site réponds rapidement"

Je n’ai pas encore touché aux durées de vie. Il faut que je teste les effets induits.

@lefab

sinon la couleur que je vois sur ton site n'est pas beige, n'est pas rose, mais chair...

Mais chair de quelle couleur ? vert de celui qui a peur, rouge de l'émotif, violet de celui qui s'étrangle ?

[cavo789]

Re : Le nouveau lomart.fr est en ligne

Je pense qu'il faudrait un peu plus de bon sens dans les critères d'analyse.

Absolument d'accord. Ces règles sont purement théoriques et au webmaster à, en effet, choisir les bons critères.