Les dégradés prédéfinis sont une aubaine pour l’intégrateur web : dans la plupart des cas, il suffira de modifier un des 140 exemples proposés.

Les paramètres modifiables sont :

• Positionnement des curseurs pour déterminer la longueur, l’opacité et le seuil des couleurs prises en compte,
• Ajustement des couleurs via des curseurs dynamique pour la teinte, la saturation et la luminosité,
• L’orientation du dégradé : horizontal, vertical, diagonal (droite-gauche), diagonale (gauche-droite) et radial,

Une fenêtre de prévisualisation permet de voir les changements en direct-live avec une case à cocher pour voir comment Internet Explorer se comporte avec les propriétés qu’il ne prend pas en compte.

Les CSS sont prêt à copier-coller avec en option l’équivalent pour SCSS (Sass) et le choix du mode colorimétrique (HEX, RGB, RGBa, HSL, HSLa).

Exemples SCSS (Sass)

// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(228,245,252); // Old browsers


@include filter-gradient(#e4f5fc, #2ab0ed, vertical); // IE6-8

// IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%));

Exemple CSS

background: rgb(228,245,252); /* Old browsers */


/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZjVmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2JmZThmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzlmZDhlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYWIwZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */

background: linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-8 */

Pour IE9 — IE10

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Envie de plus de générateur de CSS ?

→ Rendez-vous sur Le petit journal permanent de CSS3 — 100+ ressources pour commencer.

PS : Trois message subliminaux se sont glissés dans ce billet :-)

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• HTML5 et CSS pour l'intégrateur web
• CSS3 Generator : éditeur de CSS3
• Nouvelle méthode de remplacement de texte par une image

Outils en ligne

• PunyPNG — Réduit le poids des fichiers PNG, JPEG et GIF
• Smush.it — Compresse les images au format PNG

Logiciels à installer

ScriptPNG et ScriptJPG sont des logiciels pour Windows 32 bits permettant d’optimiser les fichiers images en utilisant différents niveaux de compression pour réduire la taille des fichiers :

• ScriptPNG convertit les formats GIF, BMP, JPG, PCX, ou TGA vers le formats PNG.
• ScriptJPG optimise les fichiers JPG grâce à un algorithme avec ou sans perte en fonction de la qualité d’image que vous voulez.

Autres outils

• AdvanceCOMP
• CryoPNG
• OptiPNG
• PNGCrush
• PNGOptimizer
• PNGOUT
• PNGRewrite
• PNGWolf
• TruePNG
• DeflOpt
• defluff
• Huffmix
• PrePNG
• pngquant
• pngnq
• Color Quantizer

→ Comparatif entre les différentes solutions. Merci @nhoizey pour le lien o/

Articles sur le même sujet

• 31 outils en ligne simples et efficaces pour les travailleurs du web
• 15 « Photoshop-like » en ligne testés et commentés
• PNGHack — La fin de 7 ans de malheur avec IE 6
• [résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…
• Opacité CSS et effet de trame avec GIF/PNG transparent

Remplacement de contenu

Le remplacement de contenu sera certainement une des nouveautés-phare de la prochaine version de Photoshop. Une fois votre sujet sélectionné, vous pouvez le déplacer dans l’image et Photoshop s’occupe de faire le ménage derrière vous en remplaçant votre sujet par l’environnement qui aurait du se trouver là. Une sorte de Content-Aware mélangé avec l’outil pièce, du grand art ! Via Wisibility.

Autres nouveautés ou améliorations de CS6 :

• Interface sombre pour une meilleure immersion dans l’image et une intégration plus poussée avec Lightroom,
• Nouveaux contrôles dans Camera Raw,
• Outil Fluidité amélioré avec notamment la possibilité d’augmenter la taille de la brosse et de travailler directement dans l’image,
• Edition des tracés vectoriels comme dans Illustrator,
• Enregistrement des fichiers volumineux en tâche de fond pour continuer à travailler sur un autre fichier.

→ Plus d’informations sur la chaine Youtude de Photoshop.

Adobe Creative Cloud

Adobe Creative Cloud : 5 services, 19 applications, 2 communautés et plus à venir

Creative Cloud — Dans quelques mois, Adobe proposera la Creative Suite à la location à l’année pour la modique somme de 49,99 dollars par mois. Pour ce prix, nous disposerons d’une myriade de logiciels à télécharger sur notre poste de travail, dont les célèbres Photoshop®, InDesign®, Illustrator®, Dreamweaver® et de nombreux autre outils comme Adobe Typekit pour accéder à des milliers de polices de caractère. C’est presque indécent de la part d’Adobe de nous proposer tous ces logiciels : il n’y a toujours pas plus de 24 heures dans une journée !

Cette initiative est très intéressante. Les créatifs pourront goûter aux joies de la suite d’Adobe sans être obligé de s’endetter sur 20 ans ou de risquer 20 ans de prison pour utilisation de logiciels contrefaits ! Pour le prix d’une journée et des poussières de facturation, la Creative Suite est dans la poche pour toute une année et ça fait bien plaisir :-)

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• Optimiser les images PNG, JPG, GIF
• Notes de lecture : « Responsive Web Design »
• Astuce CSS3 et RGBA avec les outils de développement de Google Chrome
• L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Les Medias Queries n’arrivent qu’au chapitre 4, une fois les fondamentaux mis en place. Rien à dire sur cette partie, si ce n’est qu’elle est concise et que les exemples sont clairs. Le meilleur est pour la fin avec la description d’un Workflow pour faire des sites web «responsive» dans une optique d’amélioration progressive, avec comme mot d’ordre : pensez mobile !

En effet, dans cette dernière partie, l’auteur explique comment mettre en place une stratégie pour utiliser les Medias Queries au plus près des besoins des utilisateurs. Il en profite pour exposer une méthode de travail qui me plait tout particulièrement : le design dans le navigateur. Bien sûr, il ne s’agit pas de remplacer Photoshop, mais de lui demander ce qu’il sait faire de mieux : produire une maquette fixe qu’il faudra adapter selon les contraintes d’affichages des différents agents utilisateurs disponibles sur le marché. Je ne peux m’empêcher de ressortir pour l’occasion cette phrase issue de l’article Et si Photoshop permettait de tester des maquettes fluides ? qui résonne bien ici :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Le sommaire

• Principes du responsive design
  • Attachez vos ceintures
  • Responsive architecture
  • La voie à suivre
• La grille flexible
  • Composition flexible
  • Créer une grille flexible
  • Marges et espacement flexibles
• Les images flexibles
  • Retour aux (codes) sources
  • Images fluides
  • Mosaïque d’arrière-plan flexible
  • Apprenez à aimer overflow
  • Négociez votre contenu
  • Images et grilles flexibles, tenez-vous bien
• Les media queries
  • Cicatrisation douloureuse
  • Le problème en question
  • Traînasser vers plus de réactivité
  • Un robot plus « responsive »
  • Les media queries en action
  • Au sujet de la compatibilité
  • Pourquoi la flexibilité ?
• Passer au responsive, design
  • Une question de contexte
  • Mobile first
  • Vers un responsive workflow
  • Être « responsive » et responsable
  • L’amélioration progressive revisitée
  • Va et sois « responsive »

Acheter le livre

Responsive web design

• Auteur(s) : Ethan Marcotte
• Editeur : Eyrolles
• Nombre de pages : 160 pages   
• Date de parution : 15/09/2011

Articles sur le même sujet

• L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?
• Et si Photoshop permettait de tester des maquettes fluides ?
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Une très brève histoire des métiers du web et de la PAO (publication assistée par ordinateur)
• Zapper la maquette Photoshop et passer directement à l'intégration HTML/CSS ?

Pour cela, je lance les outils de développement de Google Chrome (Ctrl + Maj + i ou Clic droit et «Inspecter l’élément»). Je clique ensuite plusieurs fois sur le carré de couleur jusqu’à ce que le mode rgb() apparaisse. Il suffit ensuite de copier-coller les valeurs dans lafeuille de style CSS.

Exemple visible sur la nouvelle version de WordPress & Webdesign :

#menu-download-basics a {
    background: #807666;
    background: rgba(128,118,102,0.8);
}

Finie, l’ouverture de Photoshop pour connaitre les valeurs RGB d’une couleur au format Hexadécimal !

Fonction "Inspecter l'élément" de Google Chrome

Parmi les modes colorimétriques disponibles, on trouve :

• Hexadécimal (Rouge, Vert, Bleu) : #807666,
• RGB (Rouge, Vert, Bleu) : rgb(128, 118, 102),
• HSL (Teinte, Saturation et luminance) : hsl(37, 11%, 45%).

Le dernier mode (TSL en français) est très intéressant car il permet de modifier, pour une couleur donnée, uniquement la teinte (en gardant les informations de saturation et de luminosité intactes), la saturation (en gardant les deux autres) ou la luminosité (idem).

Je ne dis pas que ces outils de développement remplaceront l’extension ColorZilla de Firefox, mais ils peuvent ponctuellement rendre des services.

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• 9 ressources pour web designer
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• Tutoriels pour apprendre HTML & CSS

Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio ;-)

Découper avec «dextérité»

Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.

A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.

Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de  80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.

Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.

Sur le fil du rasoir

Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !

Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?

Conclusion…

… Y en a pas ;-) Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• Intégration HTML & CSS des maquettes Photoshop au pixel près
• Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Avec CSS3…

Pas forcément. En ce qui concerne CSS3, il faut s’en tenir aux conseils donnés dans CSS3 pour les web designers par Dan Cederholm :

Utiliser CSS3 «ici et maintenant» à condition de s’en tenir aux éléments de présentation ou d’interactivité en ciblant la couche d’expérience non critique (interaction, récompense visuelle, réactivité et mouvement) sans toucher à l’identité visuelle, l’utilisabilité, l’accessibilité ou la mise en page.

… ou à l’ancienne ?

Pour tout le reste, il faut se débrouiller avec des images de fond, en limitant les dégâts au maximum : marquage HTML réduit au minimum, utilisation de sprites pour les images, tenter de se passer de Javascript pour des effets visuels, éviter les hacks, etc. J’irais plus loin en conseillant d’éviter même les balises sémantiques HTML5 en raison de leur accessibilité perfectible.

Bref, dans ces conditions — si le temps et l’argent le permettent — rien ne s’oppose à ce que la maquette du graphiste soit rendue au pixel près. C’est même souhaitable. L’intégrateur pourra prévoir des fallbacks pour l’affichage sur les tablettes tactiles comme l’iPad, les téléphones tels que l’iPhones ou Android. Ou alors, c’est le graphiste qui pourra dessiner comme bon lui semble la version iPhone, etc. s’il veut garder le contrôle.

C’est quoi un intégrateur web ?

Comme le dit STPo (@stpo) suite à l’article de Julien sur le rendu Pixel Perfect et les standards du web :

Le boulot d’un inté, c’est de placer intelligemment le curseur entre respect de la DA, performances, accessibilité, maintenabilité, etc. afin d’obtenir le meilleur produit final possible. Le graphisme n’est QU’UN de ces paramètres : parfois c’est le plus important, et on négligera les autres davantage. Et parfois, non.

Soyons agiles

S’il faut faire le deuil de quelque chose — que ça soit à cause de bugs ou de contraintes techniques indépassables — ce n’est pas sur cette question du rendu parfait, puisqu’il est accessible dès maintenant. Il faut faire le deuil de la méthode de travail unique. Il faut adapter ses méthodes et être agile. Et ce n’est pas facile.

Nous sommes tous à la recherche de trucs et d’astuces réutilisables. On n’aime pas réinventer la roue toutes les semaines. On préférerait que les clients comprennent nos contraintes (en même temps, si votre boss ne vous comprend pas, il n’y a pas grand chose à attendre du client qui n’y est pour rien…).

Intégrateurs web, prenez des risques !

Il faut comprendre le projet sur lequel on travaille et force est de constater que certaines organisations ne favorisent pas la prise de risque de la part de l’intégrateur web qui est rarement consulté en amont. Pourtant, avec un bref brief, l’intégrateur pourrait prendre de l’assurance et éviter de se prendre la tête pour aboutir systématiquement à un rendu parfait lorsque les projets ne le nécessitent pas.

Articles sur le même sujet

• 35 blogs de développeurs web
• HTML5 Please — Fallback et Polyfills (ou pas)
• 390 ressources Javascript & jQuery
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

On peut dire que certaines prises de position sur le «lâcher-prise» concernant le design web sont parfois l’expression de l’impuissance travestie en abstinence. On ne peut pas le faire, donc c’est mal.

Toutefois, pour en revenir à l’exemple des ombres portées, j’ignore s’il existe une norme qui définit comment elles doivent s’afficher. Leur rendu à l’écran (quels écrans ?) dépend surtout des logiciels qui permettent de les créer. Une ombre portée n’est probablement pas strictement identique dans Photoshop, Gimp ou Paint. Pourquoi serait-ce différent pour les navigateurs web qui sont des logiciels comme les autres ?

Lorsque j’imprime une ombre portée réalisée dans Photoshop, son rendu diffère selon la nature du papier  : offset, couché, non couché, bouffant ou bible ! Sans parler des différences d’une même plaquette imprimée sur le même papier chez deux imprimeurs différents (avec pourtant strictement les mêmes valeurs CMJN)…

Juste une petite pique, donc, en lisant que :

L’industrie de l’imprimerie a, de son coté, pas mal réussi à relever ce défi de standardisation, il faudrait donc s’en inspirer sur ce point et ne pas laisser tomber en route la standardisation de l’affichage.

Je ne peux m’empêcher de penser aux plus de deux millions de personnes qui se demandent pourquoi il y a encore, en 2011, cette satanée différence entre écran et résultat imprimé ;-)

Articles sur le même sujet

• Et si Photoshop permettait de tester des maquettes fluides ?
• Webdesign, lisibilité, typographie et rédaction web
• 100+ comptes Twitter pour webdesigner
• Editeur de dégradés CSS3 à la mode de Photoshop
• Optimiser les images PNG, JPG, GIF

Un question d’entonnoir

On peut voir la conception pour l’imprimé comme un entonnoir avec la grande ouverture vers le haut : qu’importe les techniques utilisées pourvu qu’elles passent sous les fourches caudines des systèmes d’impression qui aboutissent — si tout ce passe bien — à un rendu unique. En effet, qu’importe la manière dont vous faites vos ombres portées : seul le résultat imprimé compte !

Pour le web, l’entonnoir est dans l’autre sens. Il existe un nombre de techniques relativement limitées pour que ça fonctionne, en revanche — si tout ce passse bien — le nombre de périphériques de sortie est inconnu et chacun est susceptible d’avoir son propre système de fonctionnement. D’autant plus que les spécifications des groupes de travail du W3C ne sont pas toutes univoques. Pour enfoncer le clou, il faut savoir que les agents utilisateurs n’ont aucune obligation d’implémenter toutes les fonctionnalités prévues ! Cette modularité et cette liberté face aux standards est justement ce qui permet au web d’être ce qu’il est aujourd’hui… Sur le web, le résultat seul ne compte pas ; la manière d’y arriver est tout aussi importante !

Je reformulerais donc la question initiale de Julien de la manière suivante :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Gutenberg n’est pas mort (ou pas)

Et encore, c’est en gardant un flux de production plusieurs fois centenaire qui date des années Gutenberg. Dans bien des cas, il n’est pas totalement farfelu de faire l’impasse sur le lancement de Photoshop : après un rapide crayonné — et si la créativité se limite à quelques dégradés, des bords arrondis, des ombres portées, etc. — il est tout à fait légitime de travailler directement dans le navigateur ET CE N’EST PAS MAL ;)

Faire le design dans le navigateur ne signifie pas pour autant absence de graphisme ou d’illustration. Si le croquis fait référence à des éléments dessinés, je lance plutôt Illustrator pour faire mes éléments de design à la demande. Il m’arrive aussi souvent de faire des maquettes entières dans Illustrator sans idée de découpe. Je prélève chaque élément dont j’ai besoin pour l’intégrer dans mon fichier HTML et CSS, sans jamais (ou presque) passer par les outils de découpe proprement dit.

Il est parfois nécessaire d’effectuer des copier-collés dans Photoshop depuis Illustrator pour certains éléments. L’avantage, c’est de conserver tous les éléments au format vectoriel, ce qui permet de moduler la taille des éléments directement dans Photoshop en les collant lors de la création d’un nouveau document.

A la relecture, je sens bien que cette méthode en semble pas en être une, mais elle fonctionne pour moi, c’est le principal ;-)

← Pssst : l’origine de cet article sur Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur?

Articles sur le même sujet

• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Webdesigner est-il ?
• Une très brève histoire des métiers du web et de la PAO (publication assistée par ordinateur)
• Notes de lecture : « Responsive Web Design »
• L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

1. Typographie sur le web

Déclarer vos polices de caractères avec Font-Face

Modification de la méthode de déclaration Font-Face et mise à jour du billet concernant les Bonnes pratiques pour les déclarations font-face. Pas de problème si vous utilisez les kits de FontSquirrel, ils sont à jour ! Sinon, voici la bonne méthode pour inclure vos polices localement :

@font-face {
    font-family: 'MuseoSlab500';
    src: url('Museo_Slab_500-webfont.eot?iefix=') format('eot'),
         url('Museo_Slab_500-webfont.woff') format('woff'),
         url('Museo_Slab_500-webfont.ttf') format('truetype'),
         url('Museo_Slab_500-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}

Museo Slab is robust slab serif with Museo’s friendliness. It is a perfect match for Museo Sans. By Exljbris.

Museo Slab : police de qualité accompagnée de son kit fonte-face

→ FontSquirrel propose un convertisseur de polices de caractères qui permet d’obtenir l’ensemble des formats web pour l’ensemble des navigateurs (.eot, .woff, .ttf, .svg).

Maitrisez l’affichage des Webfonts

[ typographisme ] Maîtriser le délai d’affichage des fontes – Internet Explorer et les navigateurs qui utilisent Webkit (Safari, Chrome) affiche le texte lorsque la police est téléchargée. Quant à Firefox et Opera, ils commencent à afficher le texte avec la police de substitution en attendant que la police soit complètement chargée. Cet article fait le point sur ces deux approches et fournit des astuces pour limiter les dégâts : choix des polices de substitution pour limiter le clignotement ou utilisation de Web Font Loader pour contrôler le chargement et l’affichage des polices.

Unicode et typographie

Unicode et typographie : un amour impossible – Tout ce que vous avez toujours voulu savoir sur les rapport entre Unicode et la typographie10.3166/dn.6.3-4.105-137.)

• → Voir aussi Tableaux de caractères Unicode – Écritures,
• → Lire aussi Le petit journal permanent de la TypOgrApHiE !

Les fontes disponibles selon les plate-formes

• → iOS Fonts — 40 familles de polices de caractères pour iPhone 4.2 et 57 pour iPad 4.2
• → CSS font sampler and survey — The Code Style font sampler is a guide to the most common fonts on Windows, Mac and Linux.

2. HTML5 Boilerplate

[ 1stwebdesigner ] 20 bouts de code et bonnes pratiques issus de HTML5 Boilerplate — Comme beaucoup, j’ai entendu parler de HTML5 Boilerplate, un modèle de site HTML/CSS/JS/.htaccess de «tueurs» créé par Paul Irish et Divya Manian qui permet de développer des sites rapides, robustes et prêts pour le futur. HTML5 Boilerplate nous appporte les dernières avancées en matière d’intégration web sur un plateau sous la forme de plusieurs fichiers HTML, CSS, Javascript et .htaccess prêts pour HTM5 et CSS3 (mais pas seulement). Le fichier .htaccess regroupe les bonnes pratiques en matière de compression des différents formats utilisés sur le web, de dates d’expiration pour la mise en cache des éléments, de redirection sur le domaine sans les 3W, etc.

HTML5 Boilerplate existe en deux versions : une pour l’étude avec les explications sous forme de commentaires, et l’autre pour la production. Il y a beaucoup à apprendre en lisant les différents fichiers et en écoutant Paul Irish présenter HTML5 Boilerplate :

• → Lire la documentation de HTML5 Boilerplate sur GitHub,
• → Lire la documentation en mode Boilerplate (cf. HTML5 Boilerplate Documentation… en mode Boilerplate !),
• → Lire Script Loading Techniques.

3. Base.css ou Reset.css ?

[ thinkvitamin ] Setting rather than Resetting Default Styling – Avec l’utilisation (ou non) d’un framework CSS, la question de savoir s’il vaut mieux mettre un reset.css ou une feuille de style de base dans ses pages web est un peu le serpent de mer de l’intégration web. Thierry Koblentz présente les défauts inhérents au reset.css et défend l’approche de la feuille de style de «base» avec base.css qui a inspirée en partie HTML5 Boilerplate !

4. Clearfix reloaded ?

[ Yahoo! User Interface Blog ] Clearfix Reloaded + overflow:hidden Demystified – Tant que la propriété float servira pour bâtir les fondations de nos pages web, nous continuerons à utiliser une méthode pour rétablir le flux après l’utilisation d’éléments «floatants». Il existe plusieurs méthodes que j’avais compilées dans l’article Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire qui faisait lui-même suite à Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? Voici le petit nouveau :

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

.clearfix:before,
.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.clearfix2:before,
.clearfix2:after {
    content: "020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

• → Float, clear et contextes de formatage,
• → Everything you Know about Clearfix is Wrong,
• → How to « patch » clearfix so it can better handle collapsing margins,
• → CSS 101: Block Formatting Contexts,
• → The hacktastic zoom fix.

5. Apprendre CSS3

[ onextrapixel ] The No-Pressure Introduction to CSS3 — Utiliser CSS3 dès maintenant est possible. Cet article fait le point sur les différentes propriétés CSS3 avec des exemples concrets, tout en précisant leur niveau de prise en charge par les différents navigateurs, avec ou sans préfixe vendeur. L’auteur n’a pas oublié les nouveaux sélecteurs — tout aussi intéressants, sinon plus, que les «effets» — ni les Medias Queries ou Font-Face. Il nous donne en prime quelques liens vers des sites qui brossent CSS3 dans le sens du poil.

→ Lire aussi Le petit journal permanent de CSS3 — 100+ ressources pour commencer

6. Box-Shadow sexy sans image

[ Nicolas Gallagher ] CSS drop-shadows without images — L’article explique comment appliquer simplement des ombres portées originales en utilisant les pseudo-classe :before et :after. Voir la démonstration.

Par exemple :

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

• → Ombres avancées avec CSS3 et box-shadow — Tutoriel très complet en français sur la mise en place d’ombres portées originales avec box-shadow.
• → Drop Shadows with CSS3,
• → Pure CSS3 box-shadow page curl effect.
• → Des bulles de dialogue en CSS3 sans image

7. Feuille de style spécialisées pour les mobiles

[ Alsacréations ] Une feuille de styles de base pour le Web mobile — Raphaël nous propose un exemple de feuille de style CSS pour les médias mobiles qui condense les bonnes pratiques à respecter :

• Fixer le Viewport,
• Passer tous les éléments de largeur fixe en largeur automatique,
• Fixer une largeur maximale de 100 % aux éléments potentiellement problématiques,
• Gérer les mots longs,
• Passer à une seule colonne,
• Masquer les éléments superflus,
• Afficher un message personnalisé.

→ Lire aussi Une feuille de styles de base pour le media print.

8. «Faire avec» Internet Explorer

[ Design your way ] Internet Explorer In A Web Designer’s Life – Problems And Solutions –De plus en plus de développeurs et d’intégrateurs web déclarent ne plus prendre en charge IE6 dans leur projet de développement. Si ce n’est pas votre cas, sachez qu’il existe des outils pour se faciliter la vie avec le dernier de la classe (IE6) en particulier et Internet Explorer d’une manière générale. Via @_jiann.

Outils d’aide au développement

• Google Chrome Frame
• DebugBar
• CompanionJS
• Internet Explorer Developer Toolbar
• Fiddler
• HttpWatch
• Web Accessibility Toolbar
• TamperIE

Scripts

• IE7.js Javascript library
• Selectivizr
• Rounded corner HTML elements using CSS3
• CSS3 support for Internet Explorer 6, 7, and 8
• CSS3 Solutions for Internet Explorer

Outils CSS3 /HTML5

• CSS3Pie
• transformIE
• html5shiv
• IE Print Protector
• Internet Explorer User Agent Style Sheets
• Modernizr
• MySpace’s Performance Tracker
• Unit PNG Fix
• ExplorerCanvas

Tester votre site

• IETester
• IE NetRenderer
• Browsershots

Articles et discussions

• Why People Still Use IE 6
• Is IE9 a modern browser?
• IE CSS Bugs That’ll Get You Every Time
• IE6 – CSS Bugs and Fixes Explained

→ Lire aussi les articles tagués Internet Explorer, IE6 et commentaires conditionnels.

9. Compatibilité CSS et Internet Explorer

[ msdn ] Compatibilité CSS et Internet Explorer — Si votre site Web est destiné à être utilisé avec certaines anciennes versions d’Internet Explorer, vous devez connaître leur niveau de conformité à la spécification CSS. Cette article contient une vue synthétique des spécifications CSS prises en charge dans les versions récentes d’Internet Explorer et dans Internet Explorer 8.

10. Apprendre Photoshop en vidéo

[ Lifehacker ] Learn The Basics Of Photoshop: The Complete Guide — Un dossier composé de textes et de vidéos sur l’apprentissage des bases de Photoshop en cinq parties distinctes et complémentaires :

1. Learn The Basics Of Photoshop In Under 25 Minutes,
2. Basics Of Photoshop: Colour Correction, Touch Ups And Enhancements,
3. Basics Of Photoshop: Basic Drawing With The Pen Tool,
4. Basics Of Photoshop: Designing A Website,
5. Basics Of Photoshop: Next Steps And Further Resources.

→ Lire aussi Détourer les cheveux avec Photoshop

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• HTML5 et CSS pour l'intégrateur web
• Editeur de dégradés CSS3 à la mode de Photoshop
• Check your <body> avec le W3C