[Kler]

Bonjour !
Et voici le dernier site que je viens de développer pour mon agence :
MTE R. Le Bras
J'attends vos réflexions ;-)
K.

[bess]

le site est assez épurée et colle au style de l'entreprise et j'aime ce côté

j'ai du mal avec le menu ou le sous menu apparait mais n'est pas cliquable tant que tu n'a pas cliqué sur son parent

attention à l'inclusion de l'image full size dans la page (url de l'image = /uploads/news/id11/DSC02964.JPG) il faut penser aux miniatures

de trop nombreuses erreurs Xhtml et css qui m'étonnent de toi :/

enfin une notes "Yslow" de basse qualité et de "pageSpeed" à peine dans la moyenne sur deux pages différentes

Allez copie à revoir Kler

[bess]

j'ajoute :

404 sur le fichier menu.js
taille de la page : 1,21Mo > 2,26Mo Ultra lourd ! sans aucun doute lié à la présence des photos sans miniature.

[Noctis]

Re,

Je pense que bess a tout dit ! à part que je vois une erreur 404 trainer dans la partie anglaise du site : Contacts > Full Contact Detail ( à voir donc =D ), bonne chance pour la suite.

Noct

[Kler]

Oh là là ! La honte sur moi ! Pour ce qui est des miniatures, j'ai pourtant suffisamment formé notre client et j'ai bien spécifié dans le Guide que je lui ai remis qu'il fallait utiliser le gestionnaire d'images... Mais bon, y a encore du boulot. Quant au menu.js je vois cela rapidement, et les validation Xhtml CSS... Bref y a encore du boulot ;-)

Et les rapports Gmetrix, pour te répondre franchement e je ne comprends pas vraiment ce que c'est et ce que je dois modifier...

Merci pour ces quelques remarques.

[bess]

t'es sur Lorient ? faudrait qu'on se voit à l'occasion que je te fasse le point sur Gmetrix, c'est loin d'être difficile et très intéressant pour améliorer tes sites web

[Kler]

Avec plaisir ! Mais si mes souvenirs sont exacts tu es de chez SU3 ? Bon j'ai corrigé le xhtml et CSS, j'ai réduit les miniatures, reste plus qu'à remettre la main sur ce menu.js ...

[Kler]

Et voilà le travail ! Validité Xhtml, validité CSS, et correction sur le menu / sous menu, ce qui rend la navigation tellement plus facile !
A+

[bess]

Mais si mes souvenirs sont exacts tu es de chez SU3 ?

bha c'est pas non plus comme si j'étais son président

et t'as toujours pas envoyé ton bulletin d'inscription signé en plus

Sinon c'est good : tout est corrigé et optimisé puisque tu redescend en dessous des 200Ko par page ce qui est bien mais pas miraculeux non plus. Il te reste à améliorer tes notes Yslow et pageSpeed, Le site Gmetrix est très bien expliqué mais en anglais. Si tu t'en sors pas, paies moi le restau la semaine prochaine je te fait une explication au petit oignon sur ton PC

et je suis pas exigeant, un mac do me va très bien (quoi que le KFC a ouvert ...)

[kraygoon]

Ca y est, j'ai en fin trouvé le site Gtmetrix et non pas Gmetrix ;-)
Bon, je vais regarder en détails ce que c'est parce ce que j'ignorai son existence.

[Jean le Chauve]

Salut Kler, désolé de te l'apprendre, mais ta css n'est pas adaptée pour IE 6-8 : le contenu passe sous la sidebar.
Petit indice : l'image du déchargement des voiliers dans les news. Max-width n'étant pas reconnu par IE, cette dernière prend sa taille totale.

[Kler]

En effet sous IE6 c'est pas terrible... Mais bon, "Utiliser Internet Explorer 6, c'est comme boire du lait périmé depuis 9 ans" déclarait Microsoft dans une campagne demandant la migration vers IE8 il y'a quelques mois. IE 6 n'est utilisé qu'à 5% en Europe et aux USA. Aujourd'hui, seuls 4.7% de postes surferaient encore sous IE6, contre 11.5% il y a un an.
Source : Stat Counter

C'est fini le temps des dinosaures, il faut savoir évoluer dans la vie ;-)

Par contre sous IE8, le résultat est optimal, copie d'écran IE8 Windows XP à l'appui : Copie d'écran IE 8
Et sous IE 7 : Copie d'écran IE 7

Copies d'écran réalisées sous Browserlab

Dernière notification : les versions I7 et IE8 reconnaissent les propriétés max-width, max-height, min-width et min-height, si, si !

Mais si tu connais une solution rapide pour pallier à ce problème, je suis ouvert à toute suggestion (sans doute un coup de pouce Javascript ?)

[Jean le Chauve]

On dirait que le plugin IE pour firefox ne donne pas les mêmes rendus. Je viens d'en changer et ton site sort correctement sous IE7 et 8 (pas sous IE6).
Tu as beau chercher des excuses pour IE6, mais je reste convaincu que tu perds tous les internautes qui ne peuvent pas (ou ne savent pas) upgrader leur navigateur (9,75% dans le statCounter, et ton site est sensé être vu par le monde entier).
Je serais le client, je n'accepterais pas de perdre 10% de visites.

En plaçant dans le sommaire de la news un thumbnail au lieu de l'image grandeur nature, tu devrais être bon sous IE6.

[Kler]

Oui mais comment faire ? Pour l'aperçu j'utilise le {field} et je l'affiche comme suit : {$entry->file_location}/{$field->value}
Il suffirait d'insérer un thumbnail dans le sommaire ? Mais dans ce cas, il s'affichera aussi dans le détail de l'article, non ?

[Jean le Chauve]

{$entry->file_location}/thumb_{$field->value} dans le gabarit sommaire.
Mais cela ne fonctionnera pas si tu utilises une définition de champ : le fichier est uploadé dans uploads/news/... au lieu de uploads/images/... ce qui implique qu'il n'y a pas de thumbnail automatiquement créé.

Mais je pense que cela n'a rien à voir, car tu sembles insérer les images avec le whysiwyg et entrer des propriétés manuellement. Tu devrais plutôt créer un style :
div#leftsidebar div.NewsSummaryField img {max-width:100px;float:left;etc.} et
* div#leftsidebar div.NewsSummaryField img {width:100px;}// pour IE
Lors de l'insertion de l'image, ne pas laisser le client devoir entrer les propriétés.

[Jean le Chauve]

J'ai trouvé la possibilité d'utiliser un champ de définition pour uploader une image dans les articles et que celle-ci crée automatiquement un thumbnail :
Il faut modifier le config.php :
#Where are uploaded files put? This defaults to uploads.
$config['uploads_path'] = '/.../uploads/images';

#Where is the url to this uploads directory?
$config['uploads_url'] = $config['root_url'] . '/uploads/images';

Il suffit ensuite de modifier le gabarit de sommaire :
{$entry->file_location}/thumb_{$field->value}

Attention, il faut que le client passe par le gestionnaire d'images et clique sur cette image (elle se trouve dans uploads/images/news/id de la news/ pour que le thumbnail soit créé.

Vous pourrez placer des propriétés sur cette image par : .NewsSummaryField img {}

Démo : http://www.confederationparascolaire.org/

[Kler]

Non, non, le client n'utilise pas le wysiwyg pour intégrer ses thumbnail mais bien la définition de champ. Je vais me pencher sur ton idée de gestionnaire d'images, mais mon client aime la simplicité et il n'acceptera pas une technique trop laborieuse...

En fait je peut peut-être simplement utiliser le hack suivant ?

min-height: 100px;
height: auto !important;
height: 100px;

[Jean le Chauve]

Alors, c'est que tu as ajouté le style dans le gabarit du sommaire... (il serait bien mieux dans la css).

Cette technique n'est pas laborieuse pour le client (ni pour toi), elle demande seulement d'ouvrir le gestionnaire d'images du dossier correspondant.

Pour le JS dans la head, je pense que ceci devrait fonctionner (il s'agit d'un problème de width et non de height) :

Code :

<script type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
    <!--[if lte IE 6]>
    <style type="text/css">
    .NewsSummaryField img {width:expression(P7_MinMaxW(90,100));}
    </style>
    <![endif]-->

[Kler]

Merci JLC,
Ça m'a l'air bien ma fois =)
Un autre Résolu.

[matdollars]

Salut,

je trouve dommage qu on ne puisse pas cliquer sur les 3 miniatures à la page nos métiers...

Le guide que tu donne au client c'est toi qui la réalisé ou tu la repris un existant que tu a modifié ?

sinon j aime bien.

[Kler]

Je ne comprends pas la question sur les miniatures ...

Quant au guide c'est moi qui l'ai réalisé, pour mon Agence. Je le développe à chaque nouveau site, en reprenant point par point les différentes fonctions de mise à jour du site. J'ai également un peu puisé dans la doc CMS pour ce qui est de certaines rubriques.