[Résolu] [PRO] informations sur les mutations interne - premier site

EDIT : j'ai mis PRO mais je fais ce travail bénévolement pour aider un camarade qui ne trouvait ni financement, ni chef de projet métier pour le faire. A la base je suis plutôt TELECOM. Je ne regrette pas mais je n'imaginais pas dans quoi je mettais le doigt...

Pour le premier vrai site que je réalise, j'ai choisi de faire un premier jet en pur HTML/CSS avant d'envisager une migration sous JOOMLA pour faciliter ensuite la gestion de contenu par mon client , le chargé de communication de l'organisme pour qui le site est réalisé.

Le design est conforme au cahier des charges du client. J'ai tenu à respecter l'esprit des bonnes pratiques (y suis-je parvenu) en effectuant mes rotations de titre en CSS au lieu de coller des images partout. Et c'est bien de là que viennent mes problèmes :

Le site sera publié sur un intranet dans lequel l'OS (W7) et les navigateurs (FF17 et IE8) sont installés par la DSI via par le réseau, les utilisateurs n'étant pas administrateurs de leur poste.

Evidement IE8 n'accepte pas les border radius et les translate rotate et je suppose que c'est à cause de cela et d'autres choses que je n'ai pas encore identifiées qu'il passe en mode IE7 pour la page d'accueil et Quirks pour les autres pages...?

La solution de demander aux visiteurs de faire [F12] et Alt+8 sous IE n'est pas réellement acceptable donc cela fait plus de 15 jours que je cherche et que je tente diverses manœuvres de contournement.

Je soumets donc mon code à la critique de la communauté, je n'ai pas encore assez d'expérience pour trouver seul et rapidement la solution.

La solution que j'envisage à ce stade est la création de feuille de styles dédiés à IE8, avec une boucle conditionnelle sur ma page d'accueil. Mais j'ai l'impression qu'il utilise quand même en partie ma feuille base.css par exemple au lieu de la feuille base-ie.css exclusivement.

Je creuse donc cela en ce moment : création de six feuilles de styles supplémentaires avec une mise en page différente : (plus de border radius, pas de texte vertical....) pour obtenir au moins un site propre et lisible même s'il est moins "sexy" !

Mon démonstrateur est en ligne sur mon domaine perso : www.gaudino.net, merci par avance pour vos critiques.

Yann
Modifié par yanngaudino (23 Apr 2014 - 17:11)

Bonjour.

- Pour commencer : un doctype en html5, ce serait putôt bien...
- Etant donné que le site n'est pas responsive (adaptable à tous les médias) il aurait été bien de le prévoir aussi pour les résolutions d'écran moyenne, et pas seulement pour les très grandes résolutions.
- J'aurais mis la carte en zoom disponible au clic, et pas seulement au survol (en plus du problème d'accessibilité).
- Le retour à la page d'accueil s'effectue via un lien en bas de page. Il serait bien plus intuitif de pouvoir cliquer sur le logo du site en haut de page. Comme sur tous les sites web.
- Les paragraphes peuvent chevaucher le titre h1 d'une page, de même pour les titres h2.

Je trouve le contenu du site intéressant et j'aime bien l'idée générale du design. Mais pour l'intégration, il y a encore du travail...

Bien à vous

Olivier C a écrit :
Bonjour.

- Pour commencer : un doctype en html5, ce serait putôt bien...
- Etant donné que le site n'est pas responsive (adaptable à tous les médias) il aurait été bien de le prévoir aussi pour les résolutions d'écran moyenne, et pas seulement pour les très grandes résolutions.
- J'aurais mis la carte en zoom disponible au clic, et pas seulement au survol (en plus du problème d'accessibilité).
- Le retour à la page d'accueil s'effectue via un lien en bas de page. Il serait bien plus intuitif de pouvoir cliquer sur le logo du site en haut de page. Comme sur tous les sites web.
- Les paragraphes peuvent chevaucher le titre h1 d'une page, de même pour les titres h2.

Je trouve le contenu du site intéressant et j'aime bien l'idée générale du design. Mais pour l'intégration, il y a encore du travail...

Bien à vous

Merci pour les encouragements.

Je trouve effectivement le doctype html 5 plus simple, mais ne risque t -il pas de poser PB avec un vieux navigateur comme IE8 ?

Pour la carte, le souhait du client était les deux possibilités et c'est ce que j'ai fait, survol plus clic avec target="_blank" (même si je sais que l'usage du target n'est plus recommandé).

Je suis moins à l'aise avec les notions d'adaptabilité aux tailles d'écran, il faut encore que je creuse ça.

le retour à l'accueil via un lien bas de page fait partie du cahier des charges, j'aurais moi aussi suggérer le retour via le logo..

Le gros point noir c'est bien le chevauchement de mes titres sous IE (avec FF ou OPERA c'est correct).

Je suis en train de réécrire des feuilles de styles dédiés mais pour l'instant ce n'est pas satisfaisant.

Je vous remercie vivement pour les remarques.

Yann

Bonsoir,

yanngaudino a écrit :
Je trouve effectivement le doctype html 5 plus simple, mais ne risque t -il pas de poser PB avec un vieux navigateur comme IE8 ?

Aucun problème avec le doctype HTML5 pour les vieux navigateurs. En revanche, il n'est pas du tout obligatoire/utile de changer de doctype si aucun élément HTML5 n'est utilisé dans le site.

yanngaudino a écrit :
Pour la carte, le souhait du client était les deux possibilités et c'est ce que j'ai fait, survol plus clic avec target="_blank" (même si je sais que l'usage du target n'est plus recommandé).

Il faudrait a minima intégrer la carte affichée au survol dans un conteneur sur fond plus sombre car avec le chevauchement du reste du site, c'est tout de même peu lisible…
Plutôt que d'afficher la carte en plus grand au survol et dans une nouvelle fenêtre (pas bien, pour plein de raison) lors du clic (tout ceci n'est vraiment pas courant…), il serait bien plus ergonomique d'avoir un seul et unique comportement. Par exemple, l'affichage de la carte dans une fenêtre modale lors du clic uniquement. Un effet de transparence ou l'affichage d'une icône de loupe (par exemple) sur la carte au survol permettrait de suggérer ce comportement.

yanngaudino a écrit :
Je suis moins à l'aise avec les notions d'adaptabilité aux tailles d'écran, il faut encore que je creuse ça.

Tu as raison ! Chaque chose en son temps

a écrit :
le retour à l'accueil via un lien bas de page fait partie du cahier des charges, j'aurais moi aussi suggérer le retour via le logo..

Oui c'est vrai, ça manque terriblement ce lien sur le logo.

a écrit :
Le gros point noir c'est bien le chevauchement de mes titres sous IE (avec FF ou OPERA c'est correct).
Je suis en train de réécrire des feuilles de styles dédiés mais pour l'instant ce n'est pas satisfaisant.

Oui, là le plus simple pour ton cas c'est d'avoir une feuille de style dédiée (ou une classe ad hoc appliquée à l'élément <html>) et de faire des correctifs au fur et à mesure des besoins/bugs.

—
Petite correction : "image cliquable" et non "clicquable"

Dans le menu de navigation, sur Chrome/Mac OS, il y a beaucoup d'items qui débordent de leur conteneur. Ça ne fait pas très propre.

Dans les pages de contenu, tes textes justifiés sur de petites colonnes sont difficiles à lire à causes des blancs/rivières formés par la justification CSS imparfaite. Je te conseille plutôt d'aligner tes textes en drapeau pour éviter cet effet désagréable.

D'une manière générale, je trouve qu'il manque une grille sur l'ensemble du site. Les éléments semblent positionnés au doigt mouillé, sans vraiment de cohérence dans les espaces blancs, les marges, gouttières et autre.

ATTENTION : ça ne m'étonnerais pas que ton site passe en mode quirks sur IE car tu as un commentaire HTML qui précède ta déclaration de doctype. Or aucun caractère ne devrait précéder le doctype

Il faut vraiment éviter tous ces target="_blank". C'est vraiment désagréable. Au pire, si tu souhaite tout de même les conserver (j'en suis malheureusement certain… ), je t'engage à placer la mention "ce lien s'ouvre dans une nouvelle fenêtre" dans les attributs title de chacun de ces liens et à utiliser un pictogramme visuel pour les différencier des liens internes.
Tu peux par exemple les différencier à l'aide de règles CSS :

/* Pour les liens en target blank (prévoir une icône 10x10 par exemple représentant une petite flèche :–) */
a[ target] { background: url(icon-blank.png) left center no-repeat; padding-left: 20px; }
/* Pour les liens ouvrant un pdf (prévoir l'icône PDF) (utilisable pour d'autres types de documents) */
a[ href$=".pdf"] { background: url(icon-pdf.png) left center no-repeat; padding-left: 20px; }

/* Note : je ne sais pas pourquoi mais le forum bug avec ces sélecteurs : il faut donc bien faire attention à supprimer ensuite l'espace suivant l'ouverture des crochets de chaque règle ;–) */

Je m'arrête là pour ce soir.
Bonne continuation, yanngaudino !
Modifié par audrasjb (09 Apr 2014 - 20:19)

Juste un point :

yanngaudino a écrit :
le retour à l'accueil via un lien bas de page fait partie du cahier des charges, j'aurais moi aussi suggérer le retour via le logo.

Oui. Mais c'est aussi votre job - et pas l'aspect le plus inintéressant - d'essayer de les convaincre que c'est une TRÈS mauvaise pratique.

Olivier C a écrit :
Oui. Mais c'est aussi votre job - et pas l'aspect le plus inintéressant - d'essayer de les convaincre que c'est une TRÈS mauvaise pratique.

+1, Olivier.
Tout comme pour l'usage du target="_blank", qui est par ailleurs tout aussi –voire plus– néfaste
Modifié par audrasjb (09 Apr 2014 - 20:46)

audrasjb a écrit :

Dans les pages de contenu, tes textes justifiés sur de petites colonnes sont difficiles à lire à causes des blancs/rivières formés par la justification CSS imparfaite. Je te conseille plutôt d'aligner tes textes en drapeau pour éviter cet effet désagréable.

Merci audrasjb, pour ces remarques, que veux dire aligner les textes en drapeau ? Je ne vois pas : est-ce à gauche ?

Ouaip

audrasjb a écrit :

ATTENTION : ça ne m'étonnerais pas que ton site passe en mode quirks sur IE car tu as un commentaire HTML qui précède ta déclaration de doctype. Or aucun caractère ne devrait précéder le doctype

Excellente remarque, j'ai du corriger mes squelettes et 88 pages mais je viens de passer un cap :
IE 8 ne s'ouvre plus en mode Quirks mais en mode navigateur : affichage de compatibilité IE8 et en mode document IE7 : il y a du progrés.

Question de débutant : pourquoi les validateur Tidy ou en W3C en ligne valident-ils le code avec du commentaire avant le doctype ? (Je suppose que c'est encore uniquement IE qui pose problème).

J'ai très longtemps hésité avant de soumettre mon code à la critique, mais je ne regrette pas, je tournais en rond et passait des heures à lire mes bouquins et les sites sans avancer d'un pouce !

merci encore.

yanngaudino a écrit :
(Je suppose que c'est encore uniquement IE qui pose problème).

Bingo ^^

yanngaudino a écrit :
J'ai très longtemps hésité avant de soumettre mon code à la critique, mais je ne regrette pas, je tournais en rond et passait des heures à lire mes bouquins et les sites sans avancer d'un pouce !

Hé oui, tu as bien fait. Les critiques peuvent parfois être dures à accepter quand on travaille depuis des semaines sur son site, mais c'est la meilleure façon d'avancer

Bonjour,

Souci d'affichage sous IE 8, notamment les propriétés de texte vertical qui ne sont pas reconnus (je n'ai pas pu tester sous IE9 mais cela risque d'être la même chose).

Ce n'est pas un gros point noir, mais c'est tout de même important.

L'infographie est pas mal, le site est clair et répond je le pense bien au besoin.

Il serait bon d'utiliser une balise meta viewport, de sorte à au moins proposer une résolution unique sous les mobiles, à défaut d'être responsive.

Les commentaires dans le code source parlant de PHP ne donne pas un aspect très professionnel au site, ce sont des indications qui devraient être limite commenter en PHP afin de ne pas être affichés à la vue de quelqu'un qui consulte le code source.

Pourquoi ne pas rajouter un favicon ? C'est facultatif mais tout de même appréciable.

Bon courage

Un grand merci à tous ceux qui ont répondu à mon sujet.

J'ai effectivement encore des progrès à faire.

Je suis déjà en mesure d'appliquer certaines remarques (notamment pour IE8, j'ai choisi l'option feuille de styles dédiées IE plus faciles à gérer pour mon niveau actuel).

J'ai identifié des axes de progrès notamment dans la gestion du zoom et l'affichage sur des écrans différents, mais dans ce domaine il faut encore que je me document et que je fasse des test : je n'ai pas tout compris....!

Je devrais mettre à jour le site ce soir dans sa version corrigée pour IE8, je vais le laisser encore qques jours avant de le retirer pour le mettre définitivement en ligne sur le réseau intranet auquel il est destiné.

Prochaine étape : migration sous JOOMLA afin de faciliter la gestion du contenu par le responsable du recrutement et de la communication pour qui le site a été conçu. Je suis donc en train de me pencher sur la création ou l'adaptation des templates.

yanngaudino a écrit :
J'ai effectivement encore des progrès à faire.

Je suis déjà en mesure d'appliquer certaines remarques (notamment pour IE8, j'ai choisi l'option feuille de styles dédiées IE plus faciles à gérer pour mon niveau actuel).

Je trouve que tu te sous-estimes, le site est vraiment propre à mon sens, tant sur le plan visuel que sur le plan de la navigation.

Concernant IE 8, son support est de moins en moins soutenu, donc ce n'est pas en soi rédhibitoire de proposer une version full-compatible pour cette version, IE 9 en revanche est encore suffisamment (si ce n'est exclusivement) utilisé sous XP pour s'en préoccuper.
Modifié par ohweb (23 Apr 2014 - 17:43)