Parcours

Chris obtient un diplome supérieur dans une École d’art avec comme spécialités: Arts graphiques, céramique et multimédia (principalement avec Flash).
Rapidement, après son diplôme, le Web Design l’intéresse. Ses premiers sites sont réalisés avec WordPress. Naturellement c’est vers la logique XHTML/CSS qu’il se tournera aux dépens des sites en Flash.

Aujourd’hui, Chris Coyier s’occupe de Digging Into WordPress avec Jeff Star. C’est un site de ressources sur WordPress. Avec Jeff ont également édité un livre sur le même sujet. Quand vous achetez la version numérique, les mises à jour sont retransmises ad vitam aeternam.

Chris est aussi en poste à WooFoo, un service de formulaire en ligne. Enfin, c’est CSS tricks, son site personnel, qui a rendu Chris célèbre.

Si vous recevez l’article par email, la vidéo est ici.

CSS tricks

Ce site a commencé au moment ou Chris a démarré la profession. C’était une manière de s’améliorer en partageant sa connaissance.

CSS-Tricks, contrairement à ce qu’évoque le nom, ne concerne pas seulement les CSS. C’est une véritable encyclopédie sur de nombreux aspects de notre profession. Vous pouvez y trouver:

• des articles réguliers sur les nouvelles approches et tendances
• des modules, morceaux de code à télécharger avec une démonstration en ligne
• des tutoriaux vidéos à voir en ligne, dans iTunes (podcast) ou à télécharger
• un forum
• une bibliothèque de code organisée par catégories
• une bibliographie

Les sujets sont vastes comme vous pouvez le constater. Pour retrouver une information, le mieux est de passer par le moteur Google search, directement intégré au site.

Grandes lignes de l’interview

Plusieurs pistes sont abordées pendant cette interview. Pour ceux qui sont moins à l’aise avec l’anglais, voici les grandes lignes:

• WordPress et l’expérimentation sur un thème pour apprendre. Autrement dit, charger un thème et tester les changements sur les styles et les fonctions PHP
• le modèle de boîte (box model en anglais) dont voici un tutoriel en français. Tout fonctionne en terme de boîte et c’est capital dès que vous commencez à concevoir des maquettes avec des « floats ». Voici un tutoriel en français sur le positionnement CSS.
• la puissance des standards, leur respect dans la profession et l’énorme avantage de cette situation. Regardez les problèmes que l’on rencontre dans d’autres domaines avec les milles et unes normes incompatibles entre elles
• le choix du design au service de UX (User Experience ou expérience utilisateur) est plus important que la différence d’affichage d’un navigateur à l’autre
• Woofo et les choix HTML5 sont faits pour des raisons de compatibilité générale. Il s’agit de trouver le bon équilibre
• les Media query (article en français) et le choix des formats prioritaires en fonction des statistiques de visite du site. Dans une approche marketing, il s’agit de connaître son public et s’accorder
• Sass et Less et les variables CSS. D’après Chris, il faudra attendre au moins 2015 avant de l’utiliser directement en ligne. Pour l’instant, il s’agit d’utiliser les compilateurs cités précédemment pour générer une feuille de styles standard.
• participation aux nouveaux standards en s’inscrivant aux mailing lists et en justifiant ces besoins
• de la technologie flash vers le canvas HTML5
• librairie commune à tous les navigateurs comme standard en ligne et centralisé
• quelques trucs très utiles sur la spécificité en CSS

Quelques liens

• Je donne beaucoup de liens venant de Chris Coyier sur le Web Design dans cette partie de mon site.
• Un autre interview de Chris Coyier sur le site de sitepoint (août 2011). C’est un podcast audio et la transcription est donnée en fin d’article. Vous pouvez enfin souscrire au podcast de sitepoint par iTunes.

Pour moi, au regard de toutes les ressources disponibles, j’étais sûr de mon coup: Photoshop. Toutefois, je n’avais pas de chiffre. C’est chose faite grâce au site Webdesigntuts+ et cet article où figure le fameux sondage: Photoshop vs. Fireworks: Which One Do You Use? (Photoshop contre Fireworks: lequel utilises-tu?)

Voici une capture du résultat le 3 mai 2011. Ce sondage a démarré le 7 décembre 2010 et à ce jour, 3500 personnes ont voté.

Photoshop est le grand gagnant avec 67%, loin devant Fireworks. Illustrator de son côté fait partie des 6,35% avec GIMP et tous les autres

Quand vous arrivez sur la page du sondage, pour voir le résultat du moment, vous avez deux choix, « View results » ou « Vote »

J’ai repéré ces quelques faits marquants:

• Chrome change de version très rapidement, comme pour rattraper ses aînés. C’est psychologique. En trois ans, nous sommes déjà à la version 10 alors que Firefox est à la version 4 et Safari à la version 5.
• Safari augmente doucement mais sûrement.
• Firefox et Internet Explorer se stabilisent aux profits de Chrome. Les campagnes de publicité massives y sont certainement pour quelque chose. Dans tout les cas, je me réjouis de cette situation surtout parce que c’est aux dépens d’Internet Explorer.
• Opéra n’évolue pas beaucoup en terme de nombre d’utilisateurs.

Enjoy!

Vous pouvez vous inscrire sur le site pour être tenu au courant.

Voici une petite démonstration en vidéo:

Si vous recevez l’article par email, la vidéo est ici

Merci à Jean-Christophe Carius de m’avoir indiqué que sur You Tube, les sous-titres français peuvent être activés en cliquant l’icone « cc », comme le montre l’image ci-dessus.
Au passage, si votre connexion internet le permet, passez en HD et en plein écran.

Si vous recevez l’article par email, la vidéo est ici

Parmi toutes les données que propose la vidéo, la répartition des internautes sur le globe (du plus grand au plus petit):

• 738 257 230 en Asie
• 418 029 796 en Europe
• 252 908 000 en Amérique du Nord
• 179 031 479 en Amérique du Sud
• 67 371 700 en Afrique

Si vous recevez cet article par email, la vidéo est ici

[MAJ Novembre 2011]: j’ai regroupé sur une seule page tous les outils WebDesign que je préfère. Tous ces liens sont régulièrement mis à jour.

Voici le process:

L’ergonomie générale:

A gauche les déclaration CSS3 et en haut à droite, le rendu direct des changements appliqués.

Les fonctionnalités en détail:

• chaque déclaration peut être masquée ou affichée en cliquant sur {toggle rule off}
• Chaque valeur en jaune peut être modifiée. Elles se synchronisent toutes
• les compatibiltés (navigateurs) sont affichées à droite
• enfin, il suffit de copier/coller le code pour l’intégrer dans sa feuille de style

Enjoy!

Le développeur de module flash s’appelle Gary Hayes. (son site)

Voici le process pour l’utilisation:

Et le tableau en temps réel:

Si vous recevez cet article par email, le tableau est ici.

Pour l’anecdote, dans l’onglet « Mobile », il est possible de voir qu’un iPhone est vendu toutes les secondes.
Le nombre de SMS est aussi impressionnant.

Je ne peux m’empêcher de repenser aux animations que mon Grand Père réalisait pour tous les débuts de ces films de voyage en  super 8. Celles-ci illustraient le parcours effectué durant le périple; une petite voiture circulait sur une carte illustrée. Étant môme, j’étais très impressionné.

Si vous recevez cet article par email, la vidéo est ici.

Sur le site du québécois, Benoît Descary,  vous pourrez suivre en temps réel la plupart des évènements « LeWeb09″. L’article qui annonce cet évènement est ici.

Si vous receviez cet article par email, la vidéo est ici