L’autre jour je mettais en ligne un site qui fut mon premier à avoir nécessité des ajustements pour Internet Explorer 8. En effet Microsoft a mis le paquet sur le respect des standards, mais peut-être un peu trop. Je m’explique : la pseudo-classe « :last-child » (dernier enfant d’un élément parent) n’est pas reconnue par IE8, et bien qu’extrèmement pratique, elle n’est pas valide d’après les spécifications CSS 2.0 du W3C. Je l’utilisais souvent et peut-être à tort, vu que la plupart des navigateurs la supportent.

Mon objectif : insérer le caractère  » |  » (pipe) entre chaque item d’une liste, sauf le dernier. Tout cela en CSS.

Avant

li {
list-style-type: none;
display: inline;
float: left;
}
li:after {
content: ' | ';
}
li:last-child:after {
content: '';
}

Sous IE8, donne :
item | item | item |

Nous avons un  » |  » de trop à la fin, il faut trouver une autre manière d’écrire notre déclaration CSS :

Après

En utilisant le sélecteur d’enfant adjacent « li + li ».

li {
list-style-type: none;
display: inline;
float: left;
}
li+li:after {
content: ' | ';
}

Qui sous Internet Explorer 8, donne :
item | item | item

› Notre liste est désormais correctement stylée sous tous les navigateurs modernes. Merci IE8 de m’avoir remis sur le droit chemin du codage CSS, je n’utiliserai plus :last-child.

À LunaWeb, nous voyons passer quotidiennement de nombreux designs sur nos bureaux. E-mailings, refonte de site Internet, nouvelle charte web, mini-site événementiel… Ils passent entre nos mains et nous devons transformer ces maquettes images en pages web, mais il n’existe pas de règle dans le domaine. Chaque intégrateur aura sa manière de travailler faute de méthode technique universellement approuvée et éprouvée.

Lors de ces 10 dernières années j’ai pu établir une « routine » de conception des pages, qui s’est optimisée de manière plus ou moins empirique à force de recommencer ce process :

1. Travaillez avec une grille, ou imposez-le au webdesigner (960.gs fournit des modèles pour photoshop, fireworks…). Votre découpage sera ensuite plus rapide et vous limiterez ainsi la prolifération de div inutiles
2. Pensez déjà aux éléments qui devront être des sprites. Vous devez les extraire de votre design pour en composer les différents états (rollover des menu, boutons réactifs…). Sprites : Tutorials et conseils techniques.
3. Tracez toutes les découpes en veillant à prévoir les marges, bordures et padding pour les backgrounds. En partant de là, imaginez  une imbrication de div simple, puis passez à l’étape suivante. Si le design est compliqué, n’hésitez pas à coucher cette structure sur papier.
4. Commencez à intégrer votre code html en respectant la structure que vous venez d’imaginer. Conteneur principal, en-tête, menu, contenu, navigation latérale, footer. Tout doit y être. Soyez lisibles dans votre manière de coder, l’indentation n’est pas un luxe.
   
5. Nommez vos blocs de façon sémantique. « menu_left » ou « content_right » sont souvent utilisés à tort car trop spécifiques : préférez « sidebar » et « content ».
   Conseil pratique : pour mieux vous repérer dans votre structure, vous pouvez suffixer vos balises fermantes par un commentaire. Ex. : </div><!– #content –>
6. Retournez à votre image et optimisez le format de vos découpes comme suit : gif (ou png 8 bit) pour les pictogrammes et aplats, jpeg pour les images riches, png transparent 32 bit pour les images à opacité variable.
7. Exportez toutes vos découpes dans un sous-dossier.
8. Très important : incluez un reset css dans le header de votre page html.
9. Utilisez la grille et vos notes pour définir la taille de vos blocs dans une feuille de style séparée.
10. Remplacez les textes n’utilisant pas de polices standard avec la technique de l’image replacement.

Voilà, votre design tient debout dans sa forme la plus basique. Vous pouvez attaquer les détails du menu, la typographie, les formulaires…

Et vous, comment voyez-vous ces étapes ? Quels conseils donner à un débutant pour accélérer le process de découpage ?

À lire sur le même sujet :

Coder en CSS plus rapidement, plus intelligemment

Enfin !!!

Google vient de communiquer sur la possibilité de disposer de la solution Google Analytics dans les animations Flash, grâce à la publication d’un API (compatible AS3 seulement) qui peut être implémenté directement dans les fichiers .fla. Cela va changer beaucoup de choses, puisqu’à présent on ne pouvait rien récupérer d’une pge intégrant un SWF à part l’info de son chargement, ce qui est sommes toutes assez léger, surtout dans el cas de sites tenant dans un seul SWF chargé par une seule page index.html…

» Aller à la page du code de l’API Google Analytics pour Flash.

Vaga est une collection de 60 icônes gratuitement distribuées sous license Open Source. Au format PNG et mesurant 16 x 16px, ces icônes créées par Ed Merritt sont disponibles au téléchargement sur le site twentybytwenty. Très fonctionnelles, elle vous permettront de doter vos interfaces d’icônes vraiment parlantes et ergonomiques.

» Télécharger les icônes Vaga.

Ted Padova, le pape du PDF et auteur de l’Acrobat Bible, publie son 101 PDF Forms Tips, un document de 55 pages qui regorge d’astuces et de clefs pour créer des formulaires en Portable Document Format convenables.

Depuis la conception du document jusqu’à l’ajout de scripts spécialisés (en Javascript), l’auteur analyse et donne des exemples en fonctionnement de formulaires simples comme évolués.

» Télécharger 101 PDF Forms Tips.

Dans son article Publicité sur le web : que fait l’ergonomie ?, l’excellentissime Ergolab revient en détail sur ce que l’ergonomie peut apporter au contenu promotionnel d’un site Internet, puisqu’il s’agit avant tout de continuer à respecter l’accès aux contenus d’un site même lorsque l’on a recours à l’e-publicité.

La publicité sur le web est omniprésente. Comme tout élément de contenu constitutif d’un site Internet, elle entraîne des questionnements ergonomiques. Notre objectif consiste à laisser la publicité jouer son rôle, tout en limitant ses défauts potentiels du point de vue de la qualité d’utilisation d’un site.
(…) Véritable fondement de l’économie numérique, la publicité sur le web existe et ne peut pas être exclue sous prétexte qu’elle est susceptible de gêner l’internaute.

Voilà qui est dit, car si personnellement je ne suis pas un grand fan de ces bandeaux qui, pour autant, me permettent de gagner ma croûte, il est en revanche nécessaire de reconnaître que c’est actuellement le moyen de pouvoir disposer de tous ces services web (YouTube, Flickr, MySpace existeraient-ils ?).

Le problème que pose Ergolab dans cet article n’est pas celui de l’opportunité ou pas de la publicité, on sait tous que l’utilisabilité d’un site Internet n’est pas facilité par ces artifices publicitaires, c’est bien la nécessité de faire avec qui est traitée ici.

Pour Alex Kirtland, intégrer les publicités dans le travail de conception d’un site peut même devenir un défi pour le concepteur web. Il s’agit donc de les considérer pour ce qu’elles sont : un contenu comme un autre, ou presque.
(…) La publicité est la cerise sur le gâteau de la complexité de la conception d’un site web.

Sans paraphraser l’article, dont je recommande la lecture étendue, l’auteur de l’article nous explique l’intérêt que peut revêtir la publicité pour l’internaute qui y accède, soulignant par la même la nécessité de faire correspondre du contenu publicitaire contextuel à celui de la page en cours. Si vous connaissez A List Apart, vous aurez remarqué la présence de petits encarts publicitaires issu de la régie The Deck, the premier advertising network for reaching creative, web and design professionals, qui a pour but de promouvoir intelligemment des produits créés par des gens du métier pour les gens du métier, le tout sur des sites consultés des gens du métier. C’est exactement le genre de pubs que je suis enclin et même intéressé à consulter, car elles font liens vers des sites qui proposent des services innovants et qui me concernent réellement.

Partant de ce principe, l’auteur de cet article cite plusieurs exemple de publicités intelligemment insérées, sachant que plus vous établissez un lien logique (par affinité directe ou indirecte) entre la publicité et son conteneur, plus vous aurez de chance de conserver une audience motivée et acceptant votre démarche d’affichage publicitaire.

Il analyse ensuite en détail les modalités d’insertion et la mise en espace d’une e-publicité sur une page Web, le tout depuis al perspective de l’ergonome. Un vrai article de fond !

» Lire l’article Publicité sur le web : que fait l’ergonomie ?

S’il est bien des sujets il est compliqué de débattre, c’est bien celui de l’achat des polices.
Je ne vais ici entrer dans le combat pour ou contre l’achat de polices, mais l’initiative d’Urbanfonts est à saluer pour ceux qui (comme nous) n’ont pas toujours les moyens d’acheter la fonte à 500$ qui va bien, et qui n’avons pas toujours l’usage des fontes très abouties techniquement.

Cela ne m’empêche pas de penser que -comme pour tout le reste- le gratuit n’a de raison d’exister que parce qu’il y a du payant à côté, et qu’un bon typographe est une personne qui vit de sa création, qu’on doit donc rémunérer à juste titre.

L’outil de sélection des polices d’Urbanfonts est simple, pratique et surtout il repose sur un principe de mot clef que j’utilise habituellement dans mon gestionnaire de polices pour critériser mes familles de typos : celtique, manuscrite, fun, etc.

Comme nous sommes sur le Web, et qu’il n’est donc pas question d’aller titiller les limites de ces fontes gratuites (regard complices vers nos potes de la PAO…), on peut donc tester tout un tas de polices dans nos créations, et mettre à profit notre expérience pour laisser des commentaires sur les polices. Un système de notations par étoiles permet de favoriser les fontes que l’on juge bien faites et réellement dignes d’intérêt.

Sans être révolutionnaire dans son fonctionnement ou ses caractéristiques, on note toutefois sur ce site plusieurs choses positives, notamment au niveau de l’ergonomie, et on sait bien que l’on est souvent en rush pendant la recherche d’une police, le gain de temps apporté par une interface claire est sobre est alors bon à prendre…

Parmi ces petit « plus », le nuage de mots clefs en entrée de site qui a le mérite de nous mettre tout de suite dans le bain :

C’est sobre et rapide au chargement, on va droit au but et on a accès aux mêmes options de personnalisations du texte de preview que dans les gestionnaires de polices logiciels :

Egalement bien foutu, le roll-over sur l’aperçu d’une police génère une vue alternative des caractères en mode alphabet :

Un clic sur l’aperçu et vous arrivez au détail de la police, vous présentant chacun des caractère dans les deux casses :

Il y a évidemment les 100 les plus téléchargées, le blog qui va bien, des outils de partage et enfin la possibilité de passer de l’autre côté de la barrière en achetant des polices dites payantes, si le coeur nous en dit…

» Visiter le site Urbanfonts.com.

Même si les choses ont un peu évolué depuis la parution de cet article de Christian Heilmann (merci Pompage.net pour la traduction), ce dernier vous permettra sans aucun doute de mieux comprendre pourquoi de nombreux clients sont encore peu sensibles à l’accessibilité et vous donnera peut-être quelques idées pour essayer de les faire changer d’avis.

Comme le dit son auteur :

Il est actuellement très frustrant d’être consultant en accessibilité dans une entreprise spécialisée dans les technologies de l’information. Les procès fortement médiatisés et les mythes profondément enracinés sur l’accessibilité ne nous rendent pas service lorsque le produit final n’aide pas vraiment les visiteurs. Nos clients ne s’inquiètent pas autant de l’accessibilité que nous le voudrions et il y a plusieurs raisons à cela.

Je vous invite à lire cet article très fourni et articulé comme suit :

1. C’est la loi (aux USA…) mais il n’y a pas d’exemple à suivre,
2. Il n’y a aucun avantage immédiat,
3. L’accessibilité est vendue comme un problème technique,
4. Le handicap n’est pas une chose à laquelle les clients veulent penser,
5. Nous ne créons plus, nous maintenons,
6. Cela ne fait pas partie de la méthodologie de test,
7. L’accessibilité, ça a l’air d’être un sacré rabat-joie,
8. Personne ne se plaint,
9. Elle exige un engagement
10. Il n’y a aucun leader à suivre.

Et de conclure joliment sur :

Inciter gentiment les clients à suivre la bonne direction. Voici quelques idées :

• Arrêtez de vendre l’accessibilité comme étant un problème technique. Abordez-la dans la phase de planification et de conception plutôt qu’à la livraison.
• Assurez-vous que les faits sont exacts avant de publier un autre article sur « L’Accessibilité » (des coins arrondis en CSS n’améliorent pas l’accessibilité, non vraiment, ils ne l’améliorent pas !)
• Rendez les présentations et les évaluations du produit plus amusantes en supprimant la souris du client et en changeant le paramétrage du moniteur.
• Si vous voulez aider les utilisateurs handicapés, ne vous arrêtez pas à un groupe. Les liens d’évitement aident aussi bien les utilisateurs de la touche tabulation que les utilisateurs aveugles, donc ne les cachez pas !
• Envoyez des mails aux entreprises à chaque fois qu’il vous est difficile d’utiliser leur site. Montrez que vous allez acheter le produit sur le site de leur concurrent et expliquez pourquoi.
• Prenez du recul par rapport au visuel. Acceptez le Design Web comme un mélange de bon contenu, de structure propre et de visuels agréables. Commencez le développement de sites dans un éditeur de texte, et non dans Illustrator.

Une seule chose à rajouter : clap clap clap !

» Lire l’article 10 raisons expliquant pourquoi les clients n’ont que faire de l’accessibilité.

A voir également : Traduit ailleurs : Mythes et idées fausses sur l’accessibilité.

Dans son article Coding for the mobile web, Chris Mills dresse un panorama des différentes techniques utilisées pour servir un contenu adapté aux terminaux mobiles (téléphones, PDA, UMPC, etc.). :

• la simple application des standards du Web
• la création d’un site spécial mobiles en doublon au site « normal »
• créer un seul site, mais ajouter du code pour optimiser le rendu de celui-ci en fonction du terminal d’affichage (utilisation des CSS filtrés par l’attribut media).

Il liste également les contraintes à respecter afin de pemrettre un affichage idéal :

• fonctions de contrôles restreints
• taille d’écran limitée
• faibles bande passante et mémoire
• petite palette de polices disponibles
• palette de couleurs réduite

» Lire l’article Coding for the mobile web

À lire sur le même sujet :

Décliner un site pour iPhone
Application iPhone ou site mobile iPhone ?
Créer l’icône de son site Web pour Iphone/Ipod Touch

Pas très à l’aise avec l’interface de Lightroom, et pourtant décidé à me servir « vraiment » des puissantes fonctionnalités de ce gestionnaire d’images made in adobe, je me suis décidé à faire l’emplette d’un bouquin me permettant de tirer parti des nombreux outils de gestion et de traitement photo de Lightroom.

Après plusieurs recherches sur le Net et dans ma FNAC préférée, j’ai finalement choisi le Traitement photo avec Adobe Photoshop Lightroom, édité par Dunod et visiblement plus adapté à mes besoins que des ouvrages du type Lightroom pour les photographes, car si j’aime prendre des photos le dimanche je suis encore loin de me considérer comme un photographe.

Voilà ce que je pouvais alors trouver comme infos sur ce livre, à la source (chez l’éditeur) :

En suivant progressivement les différents modules du logiciel, ce livre vous explique toutes les fonctionnalités de Lightroom, de la prise en main à l’utilisation des fonctions les plus avancées. Les fichiers RAW, la correction chromatique, l’impression de planches-contact et même la mise en ligne de vos photos n’auront plus de secrets pour vous.

Cet ouvrage vous montre comment :

• classer vos images à l’aide de métadonnées et de mots-clés ;
• visionner vos photos grâce à des outils et une interface très bien étudiés ;
• corriger vos clichés à l’aide d’outils familiers pour les photographes ;
• créer des diaporamas en quelques clics ;
• imprimer vos photos à l’aide de modèles prédéfinis ;
• réaliser facilement des galeries photos pour le Web, en HTML ou en Flash.

29 euros plus tard, je dois avouer que les promesses sont tenues, Lightroom est un formidable outil semi-pro qui permet de gérer de façon vraiment correcte non seulement des milliers de clichés (j’ai passé les 10.000 l’été dernier, mine de rien ça se fait vite!), mais également toutes ces petites choses auxquelles je suis attaché :

• les paramètres de couleurs (profil, gain, etc.),
• les méta-données associées à un cliché (tout est stocké en XMP dans un fichier à part, vive le négatif numérique),
• un traitement exemplaire du format Brut RAW.

Le seul hic de cette machine bien huilée était de pouvoir en tirer le meilleur, une mission que remplit très honorablement ce bouquin. Et une fois que l’on maîtrise la bête, quel plaisir de conserver l’univers de la Creative Suite pour le traitement des photos au sortir de l’appareil !