Principe

L'approche de cette conception n'a pas pour but de masquer les différences entre les générations de client web, mais permet de rendre les sites web utilisables en toute circonstance.

En toute bonne fois, il s'agit d'un retour au bon sens. Cette méthodologie ne s'applique pas forcément à tous les types de sites, dans la mesure où le rendu des pages est forcément différent selon les navigateurs utilisés.

Le principe de base est simple, le contenu avant le contenant : afficher l'information et rendre le site utilisable avant de le rendre 'beau'.

la sémantique comme format de base : HTML5 pour le découpage des pages (tags nav section...).
les CCS par couche historique en fonction de la compatibilité des navigateurs, mais sans le rendre indispensable à l'aspect général du site.
le Javascript pour améliorer les pages, mais sans le rendre indispensable au fonctionnement (lien/évènement onclic...).

HTML

Les navigateurs web ne rendant que les tag qu'ils connaissent, il est tout à fait envisageable d'utiliser les tags HTML les plus récents.

En se basant sur HTML5 nous pouvons structurer les pages avec les derniers tags sémantiques :

<hml>
   <header>
      <title>Titre de la page</title>
   </header>

   <body>

      <header>
         En-tête de page (bannière de titre..., tag H1/H2/...)
         <nav>
            'Menu' de navigation... (tag OL/LI...)
         </nav>
      </header>

      <section>
         Sous-sections éventuelles, autres tags HTML (div/span...)
         <article>
            Contenu de l'article, avec éventuellement des sous-sections et tous les tags habituels (div/span...)
         </article>
      </section>

      <footer>
         Pied de paghe (auteur...)  
      </footer>

   </body>

</hml>

Pour les contenus, il vaut mieux utiliser les tags signifiants/sémantiques et non de mise en forme comme par example <em> au lieu de <i>, ou <strong> au lieu de <b>...

Ne pas oublier aussi les attributs signifiants comme alt= pour les images et rel= pour les liens. Ces attributs servant aussi pour l'accessibilité du site. A ce propos il ne faut pas hésiter à utiliser le micro-format (XFN pour les intimes) qui permettent un enrichissement des marqueurs HTML.

CSS

Pour les CSS, il faut savoir que l'interprétation des régles suit une certaines logique :

tout sélecteur non compris par le navigateur annule tout le bloc d'attributs sur lequel il porte, y compris si d'autres sélecteurs sur le même bloc sont valides.
tout sélecteur plus 'fin' (ex: p.intro) a priorité sur tout autre (moins 'fin' donc) s'appliquant sur le même élément (ex: p).
tout attribut non compris par le navigateur n'a aucun effet.
toute valeur non comprise par le navigateur n'a aucun effet.
toute valeur d'attribut appliqué remplace les précédentes (validées aussi donc).

Un bon usage de ces règles d'application de de priorité permet d'écrire des CSS qui 'respectent' tous les navigateurs avec plus ou moins de rendu :

# On défini d'abord des règles valident sur tous les navigateurs,
# donc des sélecteurs basiques, puis on défini des règles avec des sélecteurs
# plus sophistiqués qui ne sont pas forcément supportés par tous les navigateurs

# Basique
p {
   # Attribut basique
   color: rgb(255,0,0);
   # Attribut pas forcément supporté par tous les navigateurs
   color: rgba(255,0,0,.50)
}

# Pour les navigateurs récents
p[lang], .intro {
   # Attribut basique
   color: rgb(128,0,0)
   # Attribut pas forcément supporté par tous les navigateurs
   color: rgba(255,0,0,.50)
}

# Les media n'étant pas supportés par tous les navigateurs on les
# défini plus tard, avec éventuellement une approche mobile first
@media (min-width:1024px) {
   p {
      margin: 20px;
   }
}

Javascript

Concernant Javascript, on part du principe que le navigateur ne le supporte pas forcément ou que l'utilisateur a décidé de désactivé pour ce site (raison de sécurité...).

Il faut donc que les liens et formulaires fonctionnent parfaitement sans Javascript en se basant sur les attributs HTMlde base (href= pour les liens, action= pour les formulaires).

Javascript ne doit être la, que pour améliorer l’expérience utilisateur.

D'autre part, il s'agit aussi de rester discret en n'insérant pas le code Javascript directement dans la page HTML, et en n'attachant pas le code directement dans cette même page. La 'connexion' des fonctions Javascript au boutons/liens/formulaires pouvant se faire depuis le code Javascript :

# Fichier .js a lier depuis la page HTML (ex: <script src="css/toc.js" defer></script>)

var link = document.getElementById("mylink");

if (link) {
   link.onclik = function() {
                    newwin(this.href); # newwin à définir bien sûr
                    return false;
                 };
}

Une autre utilisation progressive de Javascript consiste à modifier ou compléter les classes des éléments HTML pour faire appliquer un autre style CSS, donnant un rendu adapté aux navigateurs avec Javascript activé.

Le code Javascript peut permettre de complètement remanier la page, mais ne pas oublier de bien tester le résultat des appels de fonctions voir la présence de ces mêmes fonctions avant de les appeler.

Accessibilité

L'approche déjà décrite permet une meilleur accessibilité, tags et attributs sémantiques, fonctionnement sur des navigateurs basiques (à tester sous Lynx et sous un navigateur audio).

La norme Aria permet d'ajouter une couche supplémentaires pour les navigateurs en ajoutant une notion de rôle aux tags et des attributs spéciaux (commençant tous par aria-) :

<ol role=navigation>
   <li>....
   <li aria-disabled>....
   <li>....
</ol>

Le livre d'Aaron Gustafson va bien plus loin que cet hyper résumé.

Voilà, il ne me reste plus qu'à appliquer tout ça à mon propre site, et le tour sera joué.

Antoine