Archives de : Bruno Bichet

Chef de projet web, Webmaster éditorial, Intégrateur web, Infographiste et Formateur #html #css #seo #photoshop #illustrator #indesign #réseausociaux

Notes de lecture : « Responsive Design Patterns »

Quelques années après avoir sorti Responsive Web DesignEthan Marcotte déroule sa pensée concernant la conception web avec Responsive Design Patterns. Il ne s’agit plus de penser la page web, mais de l’imaginer comme autant de modules apparaissant lorsqu’on en a besoin. La conception web monolithique doit laisser la place à une conception modulaire. La place de chaque élément devra être soigneusement pesée en fonction de son intérêt selon le contexte de l’utilisateur. Est-il face à un grand écran avec une souris ou est-il en train de marcher en regardant son smartphone ?

38 outils en ligne pour vérifier l’accessibilité de votre site web

L’accessibilité des sites web est un enjeu majeur pour proposer des contenus ou des interactions — non pas pour un nombre réduits de personne — mais au contraire, pour le plus grand nombre. Pour paraphraser une publicité célèbre en son temps : ce qui est bon pour un lecteur en situation de handicap, est bon aussi pour un lecteur en situation de pleine possession de ses moyens. Pour cela, voici une compilation d’outils en ligne, en ligne de commande ou de logiciels pour tester la conformité de votre site web au regard des différents tests proposés : Section 508, WCAG 2.0, ADA, OAC, ISO PDF/UA, niveaux de lecture, contraste, etc.

Design tactile : le « taca taca tile » du Smartphone

Les smartphones, les tablettes et les phablettes ont envahit notre quotidien. L’étude des interactions tactiles n’en est qu’à ses débuts, et la manière de tenir ces écrans et d’interagir avec eux détermine en grande partie l’ergonomie des contenus. Les mains et les pouces ont une réalité physique que l’on ne peut ignorer, tout comme le poids et l’encombrement d’une tablette. Il faut donc « faire avec » et trouver le moyen de proposer aux utilisateurs un contenu non seulement consultable proprement (la moindre des choses), mais qui tire de surcroît partie des possibilités tactiles de nos appareils « intelligents ».

Qu’est-ce que la couleur ?

Et si on passait par le son pour expliquer le fonctionnement de la couleur ? Curieuse idée, mais qui en a sous le pied, comme nous le démontre cette vidéo issue de la chaîne Youtube Science Etonnante. L’auteur nous explique comment la couleur naît dans notre cerveau par le biais de trois cônes sensibles à des longueurs d’onde allant de 400 nm à 700 nm. Plus particulièrement, ces cônes, sensibles chacun à une plage de longueur d’onde (soit grosso modo 450 nm pour le bleu,  550 nm pour le vert et 600 – 650 nm pour le rouge), expliquent comment une couleur mélangée à une autre peut en créer une troisième.

Filtres Google Nik Collection : traitement et retouche pour Photoshop

Après avoir racheté Nik Software en 2012 pour surfer sur la vague des filtres Instagram — et après avoir baissé drastiquement les prix dans un second temps — Google offre désormais Nik Collection. Il s’agit d’un ensemble de filtres pour Photoshop, Lightroom, Bridge et Aperture, disponible à la fois pour Windows et MacOS. Ces filtres tirent partie des possibilités des objets et des filtres dynamiques de Photoshop ; ils s’insèrent donc sans problème dans un flux de travail non destructif. Il s’agit de HDR Efex ProDfineVivezaColor Efex ProSilver Efex ProSharpener Pro et Analog Efex Pro. TL;DR : si vous aviez rêvé d’avoir le talent des plus grands photographes ou d’utiliser des techniques et du matériel d’antan, Nik Collection est fait pour vous.

« We want Flex, Flex for fantasy »

J’ai eu le plaisir de recevoir dernièrement le livre « CSS 3 Flexbox, Plongez dans les CSS modernes » publié chez Eyrolles. Un ouvrage entier sur une seule propriété ? Et oui, Raphaël Goetter a choisi de consacrer près de 130 pages (en couleurs, s’il vous plait) à une seule propriété CSS, à savoir, Flexbox. Il faut dire qu’il y a matière, car les specs sont complexes et les possibilités infinies (et au-delà) !

9 liens pour l’intégrateur web

Le petit journal du web

Que celui ou celle qui n’a jamais cherché·e : des images libres et gratuites en Creative Common ; un framework basé sur le Material Design de Google ; à traduire un thème WordPress avec Poedit ; une extension WordPress pour créer des formulaires ; à tout savoir sur le développement mobile ; un fichier .htaccess pour optimiser les performances de son site ; à faire des grilles à la Flexbox, sans flexbox ; à savoir si les règles de l’ergonomie web du XXe siècles sont toujours respectables ; à connaitre le classement des projets Javascript les plus populaires sur GitHub me jette la première souris sans fil !

Sass et Compass : Scout, Prepros ou ligne de commande ?

Logo Sass

CSS évolue mais pas assez vite semble-t-il aux yeux de certains, ce qui explique l’apparition des préprocesseurs comme Less ou Sass qui ont ajouté les variables, les sélecteurs imbriqués, les calculs, etc. Sass et Compass sont des gemmes Ruby qui s’utilisent habituellement en ligne de commande. Toutefois, il existe des logiciels permettant de compiler des fichiers Sass et Compass en CSS. Ces logiciels peuvent être utiles, dans un premier temps, pour aplanir la courbe d’apprentissage : Scout pour sa simplicité rassurante et Prepros pour la richesse de ses options (en plus de sa capacité à compiler une foultitude d’autres langages). Je terminerai bien évidemment avec l’utilisation de la ligne de commande, bien plus efficace sur le moyen et long terme (même si on utilise Windows 8.1).

Faut-il sauver le soldat CSS ?

Les styles en ligne, c'est de la marde

Le monde des CSS est agité par des questions existentielles. Dernier débat à la mode : on reproche à CSS de ne pas être un langage de programmation. Ce qui gêne dans CSS ? Une broutille ! Principalement le « C » de cascade et le « S » de stylesheet, reste le style. Il est vrai que la cascade est un mécanisme puissant qui peut poser des problèmes de prédictibilité sur les styles d’un éléments donné. Pas facile, en effet, de prédire le destin d’un élément situé en bout de chaine une fois qu’il est sous la cascade. Voici un résumé du débat en question.

Optimiser WordPress avec des extensions et un fichier .htaccess

Image flou

Depuis que j’ai redonné une seconde vie à ce blog qui vient de fêter neuf années d’existence, j’essaie d’optimiser les performances web en jouant sur un maximum de leviers. J’ai d’abord opté pour un système de cache ; j’ai ensuite cherché à diminuer le nombre de requêtes et à compresser les fichiers HTML, CSS et Javascript. Pour les images, il était important de les compresser un peu plus et de les charger uniquement lorsqu’elles apparaissaient dans le champ de vision du visiteur. Pour finir, j’ai regardé du côté du fichier .htaccess proposé par HTML5 Boilerplate pour gagner encore en efficacité.