Principaux validateurs du W3C

• Unicorn– C’est le Validateur unifié du W3C pour :
  • Vérifier la conformité générale en effectuant tous les tests possibles.
  • Vérifier la validité pour les profils CSS 1, CSS 2, CSS 2.1 et CSS 3.
  • Vérifier la compatibilité avec les portables.
  • Vérifier la syntaxe des flux Atom ou RSS.
  • Un dernier choix permet de sélectionner les tests à effectuer parmi les items précédents.
• Markup Validation Service — Connu également sous le nom de Validateur HTML, ce service vérifie la conformité des formats HTML, XHTML, SVG ou MathML.
• Link Checker — Vérifie les ancres dans un document HTML / XHTML. Pratique pour faire le point sur les liens brisés.
• CSS Validator — Vérifie la conformité des feuilles de style CSS ou des documents qui comportent des styles CSS. Les trois derniers outils sont réunis dans Log Validator qui permet d’améliorer la qualité d’un site web pas à pas en cherchant les erreurs en premier lieu dans les documents les plus populaires. Plus d’information à ce sujet dans Passer aux standards Web rédigé par Karl Dubost (@karlpro).
• mobileOK checker — Vous développez pour les périphériques mobiles ? Ce service vous aidera à découvrir les points faibles de votre site lorsqu’il est affiché sur un smartphone.

Autres services du W3C

• Semantic Extractor — Affiche votre page web d’un point de vue  sémantique : outline, description, langages utilisés, etc.,
• RDF Validator — Vérification et affichage des documents RDF,
• Feed Validator — Vérification des flux de nouvelles aux formats ATOM et RSS,
• P3P Validator — Vérifie si un site est compatible P3P,
• XML Schema Validator — Outil en cours d’approbation par le W3C,
• Logiciels open source du W3C.

W3C Cheat Sheet

Valider c’est bien, encore faut-il savoir comment améliorer les éléments que ces fabuleux outils soumettent à notre sagacité. Si le W3C est capable de trouver la source des maux dont souffrent nos pages web, il nous donne aussi les clés pour améliorer notre pratique.

W3C Cheat Sheet est un outil open source que le W3C met librement à la disposition des développeurs web. Il fournit un accès rapide à tout un tas d’informations concernant les différentes spécifications publiées par le W3C :

• Moteur de recherche
• Mobile Web Best Practices
• Accessibility: WCAG2 at a Glance
• Internationalization Quicktips
• English Typography

Articles sur le même sujet

• Tutoriels pour apprendre HTML & CSS
• 9 ressources pour web designer
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations
• Améliorations cosmétiques et ergonomiques sur ce blog

Rapido

• Télécharger 940-fluid.css,
• Voir un exemple de page de contenu,
• Voir un exemple de grille (placement des blocs),
• 940.css en version fixe.

Le fichier

Pixels vs Pourcentage

Le passage des pourcentages aux pixels ne s’effectue pas sans douleur : il est difficile en effet d’imbriquer des blocs possédant une largeur en pourcentage les uns dans les autres, sans effet de bord. Dans le contexte des grilles de mise en page, les pourcentages de pourcentages donnent des valeurs qui diminuent lorsque les blocs sont imbriqués.

Imbriquer les blocs

Pour palier cet inconvénient, j’ai ajouté des classes spécifiques pour diviser des blocs de manière égale lorsqu’ils sont imbriqués. Voici une page composée d’une zone de contenu principale divisée en deux blocs, et d’une barre latérale.

.container (24 colonnes)
    .span-16
        .span-8
        .span-8
    .span-8

Problème

Dans un monde «fixe», les .span-x ont toujours la même largeur, qu’ils s’appliquent à des balises imbriquées, ou non. En revanche, dans un contexte en pourcentage, les deux .span-8 enfants de .span-16 (initialement réglés sur environ 32% de la largeur totale) se transforment en 32% d’environ 66% (.span-16), ce qui réduit d’autant leur largeur. Nous voilà bien ^^

Solution

Sachant que le nombre de colonne totale est de 24, il suffit de trouver les diviseurs qui vont bien et de les utiliser pour obtenir un nombre de blocs au lieu de chercher un nombre de colonnes.

.span-half, .span-12 {} // Deux blocs
.span-third, .span-8 {} // Trois blocs
.span-quarter, .span-6 {} // Quatre blocs
.span-sixth, .span-4 {} // Six blocs
.span-eighth, .span-3 {} // Huit blocs
.span-twelfth, .span-2 {} // Douze blocs

.container (24 colonnes)
    .span-16
        .span-half
        .span-half
    .span-8

Blocs de largeur inégale

Cette technique n’empêche pas d’obtenir des blocs imbriqués de largeur inégale ; il suffit de tâtonner un peu avec les pourcentages.

C’est ainsi que :

.container (24 colonnes)
    .span-16
        .span-12
        .span-4
    .span-8

.container (24 colonnes)
    .span-16
        .span-16
        .span-third (ou .span-8)
    .span-8

Un bémol toutefois en ce qui concerne la largeur de la gouttière entre les blocs imbriqués : elle est également réduite et passe de 20px pour les blocs de premier niveau, à 12.3333px (en valeur calculée) pour les deux blocs imbriqués.

D’un point de vue «typographique», ce n’est pas très gênant, car il n’y a rien de choquant à ce que des blocs de largeur réduite soit séparés par une gouttière moins importante que les blocs principaux de la page.

Conclusion

Je ne l’ai pas testé cette grille fluide dans toutes les configurations ; elle est encore en version bêta. J’ai laissé des valeurs de pourcentage avec plus de 30 chiffres après la virgule pour laisser aux navigateurs le soin faire les arrondis «au mieux».

Pour éviter d’autres problèmes de calcul, j’ai supprimé les classes .border et .colborder qui permettaient d’afficher des bordure à la gauche des blocs : les 1px d’épaisseur des bordures posaient des problèmes en renvoyant les blocs sur la ligne suivante lorsque le redimensionnement de la page arrivait à un certain niveau.

A vos tests !

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d'Or
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• PXtoEM : Conversion Pixel — EM

L’article est en anglais, mais les nombreux exemples de codes CSS et les illustrations le rendront accessible à tous sous réserve d’avoir de bonnes bases en CSS.

Après un bref rappel sur le reset CSS, le programme continue avec :

• Choisir une police de caractère — Utilisez html { font-family: sans-serif; }pour afficher la polices sans serif par défaut du système : Helvetica sur Mac et Arial sur PC. Attention toutefois aux changements des préférences par l’utilisateur.
• Choisir une taille de police de caractère — 16 pixels sont l’idéal, mais si vous tenez à 12 pixels, utilisez html { font-size: 0.75em; /* 16 * 0.75 = 12 */ } soit 75% de la taille par défaut du navigateur.
• Utiliser une grille — Il existe de nombreux systèmes de grilles dont voici une liste de près de 40 frameworks CSS. Lire aussi Blueprint vs 960 Grid System et The Blue «940» Grid Simpler.
• Nombre de caractère par ligne — Le nombre optimal de caractères par ligne est compris entre 45 et 75 signes (espaces comprises). Plus la ligne est longue, plus l’interlignage (line-height) doit être important pour garantir au lecteur un bon confort de lecture. La phrase suivante contient exactement 66 signes :

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan.

• Rythme vertical : la ligne de base — Déterminez l’interlignage global (votre nombre magique) — 1,5 fois la taille de votre texte, par exemple — et basez toutes vos mesures là-dessus. N’oubliez pas de décaler votre grille en background au départ si besoin avec html { background: url(grid.png) center -6px repeat-y #fff; } si votre texte n’est pas parfaitement aligné sur la ligne de base de votre grille.
• Echelle de valeur — Il faut penser aux sauts de ligne avant et après les titres et les paragraphes, s’occuper de la taille des différents niveaux de titres h1 — h6 et déterminer l’interlignage de chaque élément selon sa taille avec la formule (magic number) ÷ (font size) = (line height).

La suite de l’article donne des conseils pour gérer les signes de ponctuation et les images dans le contexte d’une grille :

• Utiliser les guillemets,
• Utiliser les tirets,
• Utiliser les points de suspension,
• Placer correctement la ponctuation,
• Gérer les images avec une grille.

Pour la route, une video de Tim Brown : More Perfect Typography :

Tim Brown – More Perfect Typography from Build on Vimeo.

→ Plus de ressources typographiques dans Le petit journal permanent de la TypOgrApHiE !

Articles sur le même sujet

• Useful Shortcuts — Symboles accessibles via la touche Alt de votre clavier
• 940.css version fluide — Grille de mise en page en pourcentage
• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Près de 60 polices de caractère pour Google Font Directory
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

1. Standards du W3C — Après un bref historique sur l’histoire du HTML et les travaux du W3C et du WHAT WG, la présentation aborde le niveau de prise en charge des propriétés et API’s HTML5 par les navigateurs. Une présentation simple, rapide et qui va à l’essentiel.
2. Accessibilité des icônes “@font-face” — Le côté séduisant des icônes créées avec la propriété font-face ne doit pas nous faire oublier de penser à leur accessibilité par les lecteurs d’écran. (cf. 11 vidéos pour comprendre l’accessibilité).
3. CSS Color Palette extractor — Extrait les couleurs d’une feuille de style CSS sous la frome d’une palette des couleurs et des niveaux de gris. Idée originale et pratique de @mauriz.
4. Google Developper — Le site de Google pour maitriser les API’s de Google : Google+, Android, Chrome, Google Maps, Google TV, le e-commerce, etc.
5. Learning JavaScript Design Patterns — Un cours complet sur les bonnes pratiques de développement avec Javascript et jQuery.
6. ColorHexa — Informations sur les couleurs et conversion vers les modèles Hexadecimal, Binaire, RVB, CMJN, TSL, CIE-Lab, etc. ColorHexa gère également les correspondances de couleur complémentaire, analogique, triadique ou monochromatique.
7. Microthemer — Un plugin pour personnaliser votre thème WordPress visuellement, sans connaissance technique particulière. Fonctionne pour les thèmes : Twenty Eleven, Twenty Ten, Thematic et Toolbox. Via @BoiteAWeb.
8. Typography Converter — Un outil de conversion de mesures typographiques parmi la myriade des convertisseurs  disponibles sur unitconversion.org. Un must-have à garder sous la souris.
9. La timeline de la création numérique — Last but not least, voici une présentation rapide de mon nouveau projet pour tous les designers : web, print et au-delà.

Retrouvez-moi sur Twitter à travers mon compte @br1o, histoire de faire plus ample connaissance o/

Articles sur le même sujet

• Améliorations cosmétiques et ergonomiques sur ce blog
• Check your <body> avec le W3C
• Le petit journal du web — WordPress, développement web, etc.
• Le Petit Journal du Web — 09/2011
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

Ces symboles sont classés par thèmes :

• Lettres avec accent – Caractères avec accent grave, accent aiguë, accent circonflexe, tilde, tréma, etc.
• Messagerie instantanée — Coeur, émoticônes, symboles garçon et fille),
• Mathématiques — Fractions, inégalités, carré, cube, pi, infini,
• Décoration — Puces, flèches,
• Monnaie — Livre anglaise, euro, dollar, cent, yen, pesetta,
• Dessin – Coins, angles, remplissage,
• Symboles grec — Alpha, beta, gamma, delta, etc.,
• Typographie — Ligatures, tirets,
• Droit d’auteur & propriété intellectuelle — Copyright, trademark, registered,
• Flèches – Flèches et carrés d’épaisseur différente,
• Programmation — Accolades, parenthèses diverses, pipes,
• Ponctuation — Point d’interrogation, point d’exclamation, parenthèses, édition, guillemets, abréviation.

Et tout un tas d’autres symboles dont l’énumération serait aussi longue que fastidieuse ;-)

Articles sur le même sujet

• Tutoriel grille verticale en CSS par Smashing Magazine
• 7 conseils pour mélanger plusieurs fontes dans votre design web
• Check your <body> avec le W3C
• 940.css version fluide — Grille de mise en page en pourcentage
• 9 ressources pour web designer

Un logo Gothic Back in Black avec Fette Fraktur (taille réelle : 240x72)

Fette Fraktur

La typographie est laissée aux bons soins de la fonte Fette Fraktur qui ne manque pas de caractère et que vous pouvez retrouver chez Linotype. Personnellement, j’ai toujours rêvé d’utiliser dans un projet une typographie qui casse trois pattes à un canard : avec Fraktur, ça c’est fait ;)

Back in Black

Pour les couleurs : du noir, du noir et encore du noir, pour : 1) coller à l’univers Gothic (Hark Rock, AC/DC, etc.) ; 2) s’adapter à la sobriété de l’habillage de Basics que j’ai mis en place sur WordPress & Webdesign ; et 3) rendre hommage à Bon Scott, le premier chanteur d’AC/DC.

(We Salute You)

Articles sur le même sujet

• HTML5 Boilerplate + Toolbox + Codex = WordPress Basics
• WordPress je thème
• « css 4 design » — Nouvelle charte graphique et redesign du logo
• Mes thèmes WordPress Basics et Beyond Basics sont sur Github
• 9 ressources pour web designer

Les progrès réalisés par les CSS3 et leur prise en charge grandissante par les navigateurs permettent des mises en pages créatives.

Mise en page avec CSS3 et Lettering.js. Cliquez pour voir la démo

→ Petit bémol cependant concernant les problèmes d’accessibilité d’un script comme Lettering.js soulevés dans les commentaires qui ont suivi la publication de Lettering.js — La typographie dit «merci» à jQuery !

→ Bien entendu, personne ne vous demande la lune et vous pouvez également choisir les couleurs qui vous conviennent le mieux ;-)

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• 35 blogs de développeurs web
• Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek
• Recommandations pour développeurs web front-end
• Check your <body> avec le W3C

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

TypOgrApHiE !

Beautiful Type — Un blog créé par les deux webdesigners. Francis Chouquet (@fran6) et Aurélien Foutoyet (@allfordesign) partagent une passion commune pour la typographie et le prouve en présentant un patchwork de photographies et d’illustrations «typographiques». N’hésitez pas à jeter un oeil sur le design soigné de ce blog qui vaut le détour !

→ Jetez également un oeil sur le petit journal de la TypOgrApHiE qui le vaut bien !

Css Sans Stress !

Reset CSS V2.0 — On ne présente plus le reset CSS d’Eric Meyer, mais vous pouvez toujours lire Eric Meyer fait encore risette avec Resetting Again et 5 Reset CSS à la loupe pour vous rafraichir la mémoire ! Au menu de cette V2.0 : suppression de la suppression de l’outline sur l’ensemble des balises HTML et sur la pseudo-classe `:focus` (l’accessibilité devrait s’en trouver mieux) et prise en compte des nouvelles balises HTML5 article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video.

• Banque de liens d’Ergolab — Ressources commentées dans les domaines de l’ergonomie, de l’architecture de l’information, du design d’interaction… Plus de 200 liens classés par thèmes, dans l’ordre alphabétique ou sur une seule page.
• cssdesk — Sorte de JSFiddle pour CSS et CSS3 : une fenêtre pour le marquage HTML, une deuxième pour les CSS et enfin, le résultat de vos manipulations dans une troisième fenêtre.
• Spritebox — Facilite la création de Sprites CSS en se basant sur la position du background. Il suffit de télécharger votre image et de sélectionner chaque composante du Sprite et de générer le code CSS.
• ProCSSor — Formatez vos feuilles de style à votre convenance : indentation, placement des Curly Braces et d’autres options à découvrir. Pratique lorsqu’on doit reprendre des CSS que l’on a pas codées soi-même.
• Multiple Class / ID and Class Selectors — L’utilisation des sélecteurs multiples a longtemps été sous-utilisée en raison certainement d’une prise en charge déficiente par IE6. A l’heure où le parc des navigateurs fait peau neuve, il est bon de se pencher sur l’utilisation de `.classe1.classe2.classe3` ou de `#id1.classe1`.
• Bonnes pratiques pour les déclarations font-face — Incorporer des polices de caractères dans nos pages Web est devenu plus simple avec la propriété Font Face. Toutefois, les incompatibilités entre les navigateurs — notamment dues à Internet Explorer — rendent l’opération assez complexe. Cet article fait le point sur les problèmes à résoudre.

Inspiration, création

SearchPSD — Un moteur de recherche spécialisé dans les fichiers Photoshop. Plus de 1 500 fichiers .psd gratuits classés par catégories. Il suffit d’effectuer une rechercher sur «Logo» pour trouver une palanquée de logo issus des stars du Web comme Facebook, Google, Twitter, Yahoo. Le nombre de fichiers est encore faible, mais SearchPSD peut s’avérer utile dans l’avenir : à suivre ! Via Cyril Lopez.

• 139 Impressive Typography Design Inspiration — Foultitude d’exemples et de liens vers des créations qui font la part belle à la typographie.
• 1000+ Brushes Photoshop — 40 sites proposant des brosses Photoshop issues du domaine de la technologie pour donner un look futuriste ou techno à vos créations.

Développement web

• Exemple d’AJAX en PHP + XML + jQuery — Tutoriel pour réaliser des appels Ajax de la création du fichier XML avec PHP à la  gestion d’Internet Explorer et de la navigation dans l’historique.
• UI kits et stencilpack — Une bonne liste d’outils pour vous faciliter la conception d’interface, pour un wireframing efficace.
• Fillerati — Le faux-texte à base de Lorem Ipsum n’est pas forcément une bonne idée, l’idéal étant de travailler avec les contenus définitif. Si toutefois vous n’aviez pas le choix, essayez-donc Fillerati qui offre des vrais textes issus de la littérature (disponibles dans plusieurs langues, faut scroller pour trouver) pré-remplis dans des balises `p`, `h1`, `li` et du texte de longueur variable.
• Spritzer — Ce script PHP permet de générer des images Sprites pour vos CSS à l’aide d’un simple fichier texte de configuration. Disponible sur Github.
• Internet Explorer 9 Beta Guide for Developers — The Internet Explorer 9 Beta Guide for Developers provides a look at the features and improvements in Internet Explorer 9 Beta.
• Coding A HTML 5 Layout From Scratch — As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
• Android : introdution aux styles et aux thèmes — Cet article vous présente une particularité assez plaisante d’Android vis-à-vis des autres systèmes d’exploitation mobiles : la possibilité de créer des interfaces graphiques à l’aide de simples fichiers XML.

C’est dans les vieux po(s)ts qu’on fait la meilleure soupe

• CSS Differences in Internet Explorer 6, 7 and 8 — On devrait y être habitué, mais il est parfois difficile de se souvenir des propriétés et sélecteurs CSS pris en charge ou non par les différentes versions d’Internet Explorer (IE6, IE7 et IE8). Voici un récapitulatif clair et concis avec des tables de compatibilité à garder sous la souris.
• 60 Questions to Consider When Designing a Website — 60 questions à se poser avant de lancer votre site dans le grand bain du web : gestion de projet, code HTML, CSS & Javascript, Webdesign et expérience utilisateur.

Miscellanées

• 101 sites Web très utiles — Une mine d’or pour ceux qui sont à la recherche de sites web utilitaires.
• TABLEIZER! — Créez des tableaux HTML à partir des données issues de vos feuille de calcul et autres tableurs !

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• HTML5 et CSS pour l'intégrateur web
• Nouvelle méthode de remplacement de texte par une image

Lisibilité des caractères

Les caractères avec des empattements sont réputés pour offrir une lisibilité supérieure à ceux qui n’en possèdent pas. Les empattement guideraient l’œil. Pourtant dans le même temps, on entend souvent dire que l’on ne déchiffre pas les mots lettre à lettre mais que l’on reconnait la forme globale des mots. Il manque donc un paramètre pour démontrer la supériorité des caractères possédant des empattements.

Il faut savoir qu’au début du XXe siècle, il y avait effectivement une différence notable entre la lecture des caractères serifs et sans-serif : ces derniers faisaient tout juste leur apparition. En matière de lisibilité, les habitudes sont un critère important.

→ Lire Le petit journal permanent de la TypOgrApHiE !

Lecture en «F» ou en «Z» ?

Certaines études utilisant l’eye-tracking ont démontré que les résultats issus de la page du moteur de recherche Google étaient pour ainsi dire «scannés» par l’œil selon un parcours en «F». Pour autant, vos pages doivent-elles se contenter d’un seul sens de lecture ? Non ! Le parcours en «Z» d’une page imprimée est sans doute encore d’actualité sur le web. La question étant plutôt de placer les éléments importants de votre communication au-dessus du fold plutôt qu’au-dessous.

→ Lire 10 principes pour un design web efficace et Les habitudes de scrolling à la loupe (Eyetracking).

Interlignage à 120% ou 150% ?

Dans l’imprimé, on utilise couramment des valeurs d’interlignage comprises entre 100% et 120% de la taille des caractères pour les pavés de textes destinés à la lecture continue. A l’écran, ces valeurs sont trop faibles. En raison des contraintes de la lecture à l’écran (définition, contraste, luminosité, distance de lecture), il est préférable d’utiliser un interlignage compris entre 140% et 150% par rapport au corps de la fonte utilisée.

A moduler évidemment selon l’œil, la hauteur d’«x» des caractères, la largeur des pavés de textes, le nombre de mots et la difficulté intrinsèque des concepts abordés. Un nombre de caractères compris entre 60 et 66 par ligne est idéal pour la lisibilité et l’intelligibilité des textes. On peut aussi estimer la largeur des pavés à environ 40 fois la taille du caractère qui le compose (soit 640 pixels pour un corps de 16 pixels).

→ Lire Manifeste pour un interlignage minimum syndical pour les blogs !

Taille des caractères

La distance qui nous sépare du support de lecture est un élément essentiel qui est rarement évoqué pour expliquer la différence qu’il y a entre lire à l’écran et sur le papier. C’est pourtant cette distance qui a été retenue pour définir la taille par défaut des polices utilisées par les navigateurs : les 16 pixels que certains trouvent trop importants à l’écran ne sont finalement que l’équivalent des 12 points sur le papier, si l’on tient compte que l’œil n’est pas à la même distance dans les deux cas.

→ Lire 5 règles simples pour améliorer l’affichage de vos textes.

Nombre de fontes par page

Au-delà de trois fontes, il est généralement admis qu’une page web ou imprimée manque de… de quoi au juste ? De classes ? De lisibilité ? D’intelligibilité ? Bref, on ne sait pas trop. Mon conseil : utilisez autant de fontes que nécessaire, selon votre projet. Ne vous limitez pas à-priori. Expérimentez : il en restera toujours quelque chose ! Il sera toujours temps de faire le ménage dans un deuxième temps. Notez que c’est la même chose pour l’utilisation des couleurs.

→ Lire Des ensembles de polices cohérents pour le web et La typothèque idéale par Smashing Magazine

Rédaction web

La lecture à l’écran n’est pas si différente que sur le papier. Loin d’être des sœurs ennemies, ces deux lectures sont plutôt des sœurs jumelles dizygotes. En conséquence, il n’y au aucune raison pour que l’écriture pour le web soit si différente que celle destinée au papier. Si vous maitrisez l’enchainement des idées, la grammaire et l’orthographe, votre prose sera lisible sur tout les supports !

→ Lire Bien rédiger [ pour le web ] [ tout court ]

Justification des textes

L’alignement des textes au «fer à gauche» garantit un espacement constant entre les mots, ce qui améliore la lisibilité. Les textes justifiés offrent quant à eux l’avantage de produire des marges régulières à droite et à gauche, donnant au bloc de texte la forme d’un rectangle très net. HTML n’offre aucun mécanisme pour gérer les césures (je ne parle même pas des veuves et les orphelines.) ce qui entraine souvent des pavés de texte plein de trous (lézardes)…

→ Pour y remédier, jetez un œil sur Hyphenator — Gérer les césures avec Javascript.

Sortez du cadre !

Entre les idées toutes faites et les idées reçues, il reste de la place pour exprimer sa créativité : mélangez les polices de caractères et les couleurs, osez les structures de phrases alambiquées et l’imparfait du subjonctif (juste ce qu’il faut, hein ?). Jouez avec le sens de lecture pour maintenir l’attention de vos lecteurs et sortez du cadre (attention à la tête). Bref, soyez vous-même. Enfin, là, demandez quand même autour de vous, si c’est judicieux :-D

A suivre…

Linkographie

• La lecture facile à l’écran,
• De la typographie pour le web,
• Confort de lecture : l’écart entre l’écran et le papier se réduit,
• La macrotypographie de la page Web,
• La typographie comme outil de design,
• The 100% Easy-2-Read Standard,
• How Users Read on the Web et iPad and Kindle Reading Speeds,
• Stanford Poynter Project (Etude Eyes-tracking sur 67 personnes [en]).

Articles sur le même sujet

• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Calculer une grille de mise en page « typo » avec le nombre d'Or
• Le petit journal permanent de la TypOgrApHiE !
• 7 conseils pour mélanger plusieurs fontes dans votre design web
• 940.css version fluide — Grille de mise en page en pourcentage