Faire un site compatible sur tous les navigateurs

Rien de véritablement révolutionnaire dans ce billet : il ne s'agit que d'un petit récapitulatif des principales étapes à observer pour rendre un site web compatible avec les différents navigateurs actuels.

Je tiens à préciser qu'il s'agit de la méthode que j'emploie personnellement, qu'elle n'a aucune valeur universelle et qu'elle ne fait pas référence. Il y'a certainement des manques et des lacunes, on pourrait écrire des livres sur le sujet, mais l'objectif ici est de faire le plus concis possible, sans s'étaler sur chaque point.

Trois étapes :

  1. En général, on commence par faire une structure (HTML ou XHTML) propre, qui est fonctionnelle sans styles, scripts ni mise en page particulière. Un document web doit toujours être consultable sans mise en forme (CSS) ni scripts ou plugins. Cette étape prend en compte ce que j'ai appelé Principes Fondamentaux, ainsi que la validation (X)HTML. Elle se doit d'être conforme aux standards établis.
  2. Puis on s'attache à la mise en page générale, aux CSS, toujours en se référant aux Standards et en testant sur les navigateurs qui respectent au mieux ces normes (Mozilla, Firefox, Opera par exemple). Le document doit passer avec succès les validateurs CSS et Accessibilité.
  3. Pour finir, on adapte le tout par rapport aux "mauvais élèves" (Internet Explorer 6, autres vieux navigateurs), soit en simplifiant les CSS soit en utilisant des commentaires conditionnels... soit en les ignorant ! (le tout est de s'adapter à son public cible). A savoir qu'il faut parfois se poser la question du choix entre le vieux navigateur et l'accessibilité aux handicaps.

Il est important de souligner qu'un site Validé par l'outil du W3C ne signifie pas qu'il sera obligatoirement affiché de la même façon partout. En effet, chaque navigateur a ses spécificités (marges différentes sur les éléments) et ses bugs.

Ressources :

Pour ce qui est des ressources à la disposition des webmasters, Laurent Jouanneau a rassemblé les différentes références sur l'un de ses billets.

A savoir également que de très nombreuses Ressources sont disponibles sur le Forum "Standards" (sites conformes, tutoriels, livres, blogs, etc.) et qu'elles concernent tous les domaines des standards Web.

Tester son site sur différents navigateurs :

Si après ces trois étapes vous estimez devoir tester votre site web sur certains navigateurs ou plateformes, voici quelques outils utiles :

Bonne chance et bonne conception de sites !

Par Raphael GOETTER - samedi 27 novembre 2004 à 19:35

Standards et Accessibilité - #93 - Lu 47369 fois - Intérêt du billet: 2.19(58) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le dimanche 28 novembre 2004 à 08:39, par Groumphy :: #

@ Raphael > Tu aurais pu rajouter que pour avoir la certitude que cela fonctionne sur les différents navigateurs, il est toujours bon de tester avec ces dits navigateurs (mais bon je l'accorde, tout le monde n'a pas un PC et un Mac sous la main, et parfois même Linux ou Windows installé sur le même PC) ... De plus, demander de tester son site par un public plus large (en version Test/Beta) est toujours bon à faire aussi, afin de reperer ce qui ne vas pas :)

Le dimanche 28 novembre 2004 à 11:31, par Raphael :: #

@Groumphy > oui je vais rajouter quelques liens, même si - en théorie - les 3 étapes sont suffisantes pour être compatible sur les navigateurs modernes.

Le dimanche 28 novembre 2004 à 13:33, par LapinLove404 :: site :: #

J'ai quand même l'impression qu'il est encore difficile de faire l'étape 2 dans déjà avoir en tête l'étape 3. Certaine erreurs d'affichage des mauvais élèves rendent pratiquement inutilisables des effets CSS ou des type de mises en pages...

Le lundi 29 novembre 2004 à 11:25, par Xavier :: site :: #

Il y a une remarque dans cet aticle qui a l'air d'une petite remarque, mais qui me semble d'importance : "chaque navigateur a ses spécificités (marges différentes sur les éléments)".

Lorsque la mise en page nécessite un positionement plutôt strict, à cause d'éléments graphiques par exemple, ces histoires de marges et padding peuvent devenir douloureuses. Pour remettre les pendules à l'heure, ne peut-on pas conseiller de débuter son CSS par :
* {padding:0;margin:0}

Le lundi 29 novembre 2004 à 11:31, par Raphael :: #

"Pour remettre les pendules à l'heure, ne peut-on pas conseiller de débuter son CSS par :
* {padding:0;margin:0}"

>> Je suis mitigé. Je suis assez peu enclin à utiliser (imposer?) ce sélecteur universel.
Il faudrait voir exactement ce que ça implique (une petite discussion sur le forum, peut-être?)

Le lundi 29 novembre 2004 à 23:36, par Xavier :: site :: #

Ah ? tu penses qu'il pourrait y avoir un problème ?
Pour ce qui me concerne, je ne voyais qu'une ombre au tableau : manque de performance de IE7 sur ce selecteur.
Quoi d'autre ?

Le mardi 30 novembre 2004 à 00:06, par Raphael :: #

Discussion lancée : forum.alsacreations.com/t...

Le mardi 30 novembre 2004 à 00:39, par pickupjojo :: site :: #

Merci beaucoup pour les liens Raphaël, je cherchais justement une des plus anciennes versions d'Internet Explorer pour tester la v4 de mon site, actuellement en construction.

Le mercredi 1 décembre 2004 à 12:03, par bobito :: #

Hello, par exemple selon vous, qu'est-ce qui fait que www.chocolat.nestle.fr/ sous IE soit ok, mais ascenseur sous firefox par exemple ?

Le mercredi 1 décembre 2004 à 12:07, par Raphael :: #

@bobito > Je ne comprends pas ta question : j'ai le même rendu visuel sur IE6 que Firefox :-/

PS : dans tous les cas, ce n'est certainement pas une question à poser en commentaire de blog. Si tu as besoin d'assistance, il y'a un forum qui sera bien plus adapté qu'un blog : forum.alsacreations.com ;)

Le jeudi 2 décembre 2004 à 09:48, par bobito :: #

@RAPHAEL > désolé pour l'emplacement, tu as raison... Cela dit, pourquoi je vois un ascenseur sous Firefox à ton avis ? Suis-je le seul ?
J'ai testé d'autres résolutions, j'ai la toute dernière version, étrange... J'ai pris ce site en exemple au hasard, mais j'ai déjà eu ce problèlme en allant voir d'autres sites. Or je pense qu'il serait interessant de savoir ce qui déclenche ce "bug" (SP2 ?) qu'en penses-tu ?

Le vendredi 21 janvier 2005 à 17:53, par blastmanu :: site :: #

bonjour tout le monde
j'en peut plus la mon site marche parfaitement sous firefox mais sur IE c'est la cata je debute et impossible a remedier a ce probleme pouvez vous m'aider svp ???
(mon site est un peu lent mais c'est normale en ce moment je l'heberge chez moi et avec une 512k et emule qui tourne c'est pas top)

Le vendredi 21 janvier 2005 à 17:53, par blastmanu :: site :: #

bonjour tout le monde
j'en peut plus la mon site marche parfaitement sous firefox mais sur IE c'est la cata je debute et impossible a remedier a ce probleme pouvez vous m'aider svp ???
(mon site est un peu lent mais c'est normale en ce moment je l'heberge chez moi et avec une 512k et emule qui tourne c'est pas top)

Le vendredi 21 janvier 2005 à 21:20, par MUmu :: #

un lien intéressant pour installer plusieurs IE sur une même machine et faire des tests

labs.insert-title.com/lab...

Le vendredi 21 janvier 2005 à 23:30, par Raphael :: site :: #

@blastmanu > un blog n'est pas vraiment fait pour servir de SAV. Il y'a un forum pour cela.
Et tu peux commencer par lire les billets importants du blog qui te dépanneront sans doute (les billets important sont en haut à droite dans le menu)

Le mardi 29 mars 2005 à 20:39, par Chris :: site :: #

Vous vous rendez compte comme les webmasters doivent se prendre la tête ! tout ça parce que certains ne prennent pas la peine de tenir à jour leur navigateur... affligeant, moi, la personne qui a la flemme de faire ses mises à jour tant pis pour elle, je ne vais pas passer des jours à tout vérifier sur tous les navigateurs que ça marche parce que certains veulent pas perdre 5 mn pour leur m.a.j.

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.

  • CSS2
  • Memento XHTML
  • Le zen des CSS
  • CSS
  • Web accessible