RPW 02/07/10: outils pour l'accessibilité, Flash est accessible, CSS orienté Object et l'exemple Facebook, listing des propriétés CSS3

Revue de Presse Web de ce vendredi :

• Accessibilité : liste de ressources pour aider à développer de manière accessible. Outre la formation, ce qui vous sera utile au quotidien seront sans doute les extensions FF comme Wave ou Ocawa. Je n'utilise que le premier ainsi qu'un Color Analyzer / rôle ARIA, très pratique pour discuter avec son designer du manque de contraste. Les validateurs en ligne ne sont pas pratique pour les environnements de développement qui est en principe invisible de l'extérieur (et si vous avez un site avec beaucoup d'interaction, c'est quasi inutile). Sur Alsa on est bien traités avec un menu à la carte, c'est suite à une question à propos de cet article (extensions Chrome pour faire face à certains handicaps) que M. Goetter m'a donné ces liens ma foi fort utiles.
• Accessibilité : formation "développer accessible avec Flash". C'est payant, mais si je partage ce lien, c'est surtout pour rappeler aux flasheurs qu'en théorie Flash peut être accessible, mais qu'il faut se démener pour aller chercher les bonnes options dans l'éditeur. C'était le thème d'une des conférences Paris Web, dont j'ai retrouvé les slides ici, mais pas la vidéo (si il y en avait). (via @okeul)
• CSS : réduire la taille de ses CSS en changeant sa manière de coder. L'inventeuse du concept d'OOCSS revient forte d'une expérience d'optimisation des CSS sur Facebook. CSS et l'intégration en général sont souvent le parent pauvre du Web, que l'on donne en général à des développeurs débutants voire à des graphistes. Pourtant si l'on veut éviter d'en arriver à une situation comme sur Facebook et ses 1.7Mo de CSS, et où toute évolution demande beaucoup de maintenance, il faut utiliser les mêmes principes que pour les languages de programmation : ré-utiliser le code, le penser en modules et limiter les spécificités, c'est tout le concept derrière le mot "OOCSS". Pas mal de pratiques à prendre en compte, je ne cite que les plus révolutionnaires :
  • ne pas utiliser les #id : utiliser des modules (groupes de règles réutilisables)
  • éviter width, height ou float : n'utiliser que des systèmes de grilles
  • découpler la sémantique de la présentation : exemple <h1 class="h3">
  • éviter la spécialisation : votre colonne de droite peut surement reprendre 90% des règles modulaires (taille des titres, disposition en utilisant les grilles, couleurs et taille de texte)
  • rajouter autant de classes que nécessaires dans le markup. Exemple extrait de mon Facebook : <a class="pvm uiUnifiedStory uiStreamStory uiListItem uiListLight uiListVerticalItemBorder"> soit 6 classes pour une news. Mais même en alourdissant le HTML de toutes ces classes, ils auraient au final gagné 50% de poids de HTML en le refactorisant !
  Franchement ces pratiques m'avaient fait tiquer il y a quelques années lorsqu'elle présentait les prémices de son concept en interne chez Yahoo!, mais à force de voir mes feuilles de style grossir (de mon fait ou pas), et en plongeant un peu dans sa logique, il y a beaucoup de ces techniques qui devraient être appliquées au quotidien pour garder des feuilles de style maintenables.
• CSS3 : démo live de toutes les nouvelles propriétés CSS3 et associées (les Webkit). Je me suis promis d'arretter les démos CSS3 si l'auteur n'assure pas une compatibilité IE, mais ce lien là est juste utile pour avoir un petit listing et donc s'auto-former.

Articles et liens partagés via RSS, Twitter, Facebook (twitter + blog ou blog seul), identi.ca, Delicious.

Comments

[Rédigé par : Goetter]

La prochaine fois que tu m'appelles "M. Goetter", je te vire de ma liste Twitter ! :D

[Rédigé par : jpvincent]

et moi qui hésitait avec "le Sieur Goetter" (attiré par une rime facile) :/
Raphounet ?
le gars d'Alsa ?
:)

[Rédigé par : jpvincent]

ah non peut être pas Alsa : http://www.alsa.fr/