Techniques et outils HTML et CSS

Date du document original en anglais : 6 Février 2010 – 23h44 - http://drupal.org/node/37156



Quelque soit l'attention et le soin que vous apporterez à la construction de votre site, la chose la plus importante pour l'internaute sera l'apparence qu'il aura. Gérer lesincohérences de votre thème pour chaque navigateurs, chaque module et pour chaque thème sélectionnable par l'internaute risque de se révéler un véritable défi.

Vous devez d'abord vous familiariser avec les concepts des feuilles de style en cascade (CSS). Reportez-vous à CSS Discuss ou HTML dog pour les ressources CSS (ou SELFHTML pour les francophones). Un bon aperçu de la puissance des feuilles de style peut être constaté sur CSS Zen Garden.

Validez ! Toujours. Validez en xHTML 1.0 Strict

Les navigateurs interprètent les CSS différement, et cela cause des incohérences dans les pages affichés dans différents navigateurs. La validation de votre balisage est essentielle pour obtenir l'affichage d'un page dans un navigateurs répondant aux normes et permettra l'aide d'autrui. Ce n'est que lorsque vous aurez validé votre code xHTML et CSS, et que vous vous serez assuré qu'il est correctement traité par les navigateurs respectueux des normes, que vous pourrez ajouter les corrections pour les vilains petits canards qui ne respectent rien.

On entend trop souvent les concepteurs se plaindre : « Mais mais mais ! Si je valide mon code, le site devient plus moche qu'avant la validation ! Je n'ai pas envie de tout reprendre ! ».

Cela signifie que la bonne mise en page reposait sur... un bug ! Debugger dès le départ n'est pas une option facultative !

Une mise en page propre, validée, marchera dans 90% des cas. Il sera alors facile de corriger les 9% restants et les vrais problèmes ne prendront pas plus de 1% du temps. Vraiment.

Assurez-vous d'avoir validé à la fois les CSS et le code HTML de votre site en utilisant les outils du W3C. Vous pouvez également vérifier votre thème avec WAVE & FAE.

Si vous voulez valider l'intégralité de votre site, vous pouvez utiliser ces outils.

Votre page n'aura pas la même apparence partout

Une autre chose importante à garder à l'esprit est de considérer où vos pages seront affichées

Mon téléphone portable n'est pas capable de restituer votre mise en page à 6 colonnes fixes basée sur un script JavaScript. Et il ne sera pas capable de le faire.

Pour des raisons de sécurité et de cohérence avec leurs bureaux, Safari et Konqueror ont décidé de ne pas permettre certains styles dans les formulaires. Les écrans larges redimensionneront vos polices et cela perturbera votre mise en page de largeur fixe. Les internautes utilisant des vieux écrans auront une taille de police d'affichage plus grande . Les internautes souffrant d'une connexion internet lente désactiveront les images. Ou même les CSS.

Aussi, ayez à l'esprit que les styles ne sont que des conseils donnés aux navigateurs et non des règles absolues.

Outils pour gérer les incohérences de votre thème.

  1. Nous vous recommandons de concevoir vos thèmes avec un navigateur respectueux des normes, tel que Firefox. Firefox vous permet par exemple de sélectionner une partie de votre page et d'accéder à son code-source par simple clic-droit, ce qui permet de comprendre les classes CSS de votre thème. Comprendre comment les classes CSS sont appliquées au code xHTML sous-jacent est la clé pour la compréhension de votre thème.
  2. Utilisez les conventions de nommage CSS. Nous vous recommandons d'adopter ces conventions de nommage pour vos classes CSS.
  3. Sélectionnez un DOCTYPE valide et n'oubliez pas sa déclaration.
  4. Pour vous aider à analyser votre code HTML et CSS, nous vous recommandons le plugin Firebug pour Firefox. C'est un outil précieux qui vous permettra de voir et modifier votre code HTML et CSS en temps réel, pour vous permettre d'évaluer l'impact de vos modifications. Un autre outil très utile est Web Developer toolbar. Il dispose de nombreuses fonctions très pratiques.
  5. Avant de corriger les bugs de vos CSS il est important de vous assurer que vous travaillez sur du code HTML ou xHTML valide. La barre d'outils Web Developper pour Firefox dispose d'un validateur web. Opera dispose de sa propre validation, disponible en pressant les touches Ctrl + Alt + V.
  6. Un outil d'analyse plus élaboré pour la détection d'erreurs dans les pages HTML est le Watchfire WebXACT.
  7. Si vous rencontrez des problèmes avec le code xHTML invalide d'un module, signalez le bug avec le module et joignez une copie d'écran montrant ce qui ne va pas dans le thème.
  8. Pour voir à quoi ressemble votre site pour les moteurs de recherche, vous pouvez utiliser le Lynx viewer.
  9. L'extension Firefox Total Validator fournit la validation et des copies d'écran montrant à quoi ressemble votre page dans différents navigateurs (y compris Lynx). Total Validator valide votre HTML et met en avant certaines erreurs que d'autres validateurs auraient omis.
  10. Les problèmes de positionnement rencontrés avec Internet Explorer peuvent être résolus en suivant ces recommandations : Position Is Everything Internet Explorer Primer
  11. Une bibliothèque d'exemples de problèmes xHTML ou CSS est disponible sur Quirks mode.

Compatibilité avec les navigateurs (Firefox, Internet Explorer, Opera, Safari)

La vérification de votre thème dans tous les navigateurs est difficile à réaliser. Il y a quelques outils qui vous permettront de voir ce que donne votre thème dans différents navigateurs.

  1. Browser shots est gratuit mais pourra être long à vous donner des copies d'écran.
  2. BrowserCam est un service payant, avec une période d'essai de 24 heures.
  3. Total Validator est une extension Firefox gratuite qui valide et vous retourne une copie d'écran de l'apparence de vos pages dans d'autres navigateurs. Il y a une restriction de 20 copies d'écran par jour.

Sous Windows vous pouvez utiliser Internet Explorer et télécharger Firefox, Opera et Safari. Avec Linux vous pouvez utiliser Konqueror, un navigateur basé sur KHTML (également utilisé par Safari sous MacOS), Opera, Firefox; Internet Explorer peut être lancé sous WINE. Avec MacOS, vous pouvez utiliser Safari et télécharger Firefox et Opera.

Problèmes de couleur et de graphismes

  1. Pour le choix des couleurs, vous pouvez utiliser Color schemes.
  2. Si votre thème provoque l'erreur « FavIcon non trouvé », vous pouvez créer un favicon avec ces deux outils : favicon from pics et favicon generator.
  3. Pour vérifier comment l'insensibilité aux couleurs affecte les internautes, visitez Vischeck.
  4. Optimisez toujours vos images, elles se chargeront plus vite sur vos pages, en utilisant un service tel que Smush It ou Google Page Speed, ou des programmes tels que ImageOptim, PNGOUT, OptiPNG, ou Pngcrush.

Sélectionner un thème de base

Si vous cherchez un thème vous permettant de débuter votre travail de conception, Zen ou Foundation sont de bonnes bases de départ pour les thème utilisant des CSS. Il y a également BlueMarine, mais il utilise des tableaux pour la mise en page (ce qui n'est pas recommandé par le W3C).

Sélectionner un style de menu

Suckerfish est système de menus déroulants ou latéraux fiable. Drupal utilise jQuery. Superfish est l'implémentation de Suckerfish dans jQuery. Pixture reloaded est basé sur Zen + menus Superfish et est un bon point de départ pour utiliser les menus dans le style Suckerfish.

Le module Nice Menus créé également des menus ayant l'apparence des menus Suckerfish qui peuvent être facilement ajoutés à un thème existant sans trop de travail.

CSS spécifiques aux modules

Certains modules Drupal sont livrés avec un fichier CSS par défaut. Vous devriez utiliser un outil comme la Web developper's toolbar pour Firefox pour voir si les CSS d'un module personnalisent vos éléments et causent des problèmes. Quand vous installez un nouveau module, vous pouvez aussi inspecter son dossier pour voir s'il dispose d'un fichier CSS.

Débugger votre thème

Si vous avez des problèmes our obtenir ce que vous voulez de votre thème, démarrez avec un thème de base simple ou choisissez-en un qui se rapproche le plus du but que vous vous êtes fixé.

Apprendre les classes CSS de votre thème est important pour comprendre où s'appliqueront vos modifications CSS.

Essayez d'entrer en contact avec d'autres concepteurs via IRC, fournissez de la documentation et des tutos sur ce que vous avez fait. Mettez votre thème à disposition pour qu'il puisse être analysé par d'autres et n'oubliez pas d'informer sur ce que vous avez fait.

Se faire des copains parmi les programmeurs PHP qui pourront vous expliquer ce que fait le gabarit PHP sous-jacent est aussi très important. Pensez à un échange de compétences pour obtenir de l'aide.

Cette page a initialement été écrite par Kieran Lal et Trae McCombs de CivicSpace Labs et avec Theodore Serbinski. Si vous voulez participer ou rendre plus facile la conception de thèmes Drupal, joignez-vous à la mailing-list des thèmes, ou contactez Kieran.