Responsive Design, les breakpoints - Rollingbox Retrouvez ici l’ensemble des breakpoints utiles à ce jour pour s’assurer de réaliser un responsive design cross-plateform. Le responsive Design? Mais c’est quoi? Chaque année le web mobile, expression qui désigne la navigation sur Internet depuis les supports mobiles comme les smartphones et tablettes, prend de l’ampleur et gagne du terrain sur le web originel qui lui se fait depuis un ordinateur sédentaire ou portable. 3 raisons d'utiliser HSL pour vos couleurs Maintenant que nous connaissons mieux HSL, Dudley Storey passe en revue quelques situations où HSL peut vraiment vous changer la vie. Designer devient plus simple, plus facile et plus rapide. Par Dudley Storey Nous avons vu dans l’article précédent tout l’intérêt qu’il y avait à utiliser HSL pour créer et manipuler les couleurs, mais il est des domaines où cela présente tellement d’avantages qu’il est presque surprenant que les développeurs n’en profitent pas plus. Créer des prototypes rapides de schémas de couleurs
Enregistrer des modifications et modifier un dépôt Git Dans la leçon précédente, nous avons initialisé un premier dépôt Git. Dans cette leçon, nous allons apprendre à enregistrer les modifications effectuées sur notre projet dans Git ainsi qu’à modifier un dépôt Git (enlever des fichiers du suivi, renommer un fichier, etc.). Ajouter ou modifier des fichiers dans un projet et actualiser notre dépôt Git A ce niveau, nous avons donc d’un côté notre projet contenant un ensemble de fichiers et de ressources sur lesquelles on travaille ainsi qu’un dépôt Git qui sert à gérer les différentes versions de notre projet.
Apprendre à utiliser CSS @supports CSS Shapes est simple, mais beau. Il est vraiment très facile à ajouter (NdT : voir l'article de Sara Soueidan CSS Shapes, une introduction)et il permet, par exemple, d'enrouler un texte autour d'une image comme ceci : Voici le CSS : À ce jour, la compatibilité navigateur de shape-outside est de 65 %. Pas très brillant donc, mais ce n'est pas grave. Créer des menus simples en CSS Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire Le code HTML Utiliser HSL pour vos couleurs La méthode HSL de création de couleurs est bien connue des designers mais négligée par les codeurs. Dans cet article en deux parties, Dudley Storey nous montre tout son intérêt. Par Dudley Storey
Le guide du débutant pour un design web responsive en 2021 (exemples de code et de mise en page) L’internet étant de plus en plus accessible à partir d’appareils mobiles, il ne suffit plus d’avoir un site web statique dont la conception n’a d’intérêt que sur un écran d’ordinateur. Sans oublier qu’il faut aussi tenir compte des tablettes, des ordinateurs portables 2 en 1 et des différents modèles de smartphones avec des dimensions d’écran différentes lors de la conception d’un design. Donc, le fait de mettre votre contenu dans une seule colonne et en rester là ne va pas suffire. CSS Shapes - CSS : Feuilles de style en cascade CSS Shapes est un module de spécification CSS qui décrit les formes géométriques. Selon le niveau 1 de cette spécification, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément. Exemple simple
La signification cachée des couleurs en communication visuelle Une recherche de l’Institute for Color Research (une division de Color Communications Inc.) menée en collaboration avec l’Université de Winnipeg a démontré que les consommateurs n’ont besoin que d’un maximum de 90 secondes pour se faire une opinion sur un produit quant à sa valeur, à sa fiabilité, etc., et que la couleur compte pour 62 à 90 % dans ce résultat.1 Plusieurs théories et recherches sur la couleur appuient ce principe et démontrent que la couleur à une grande influence sur notre perception et nos comportements face à une marque. De plus, la couleur est la composante visuelle que l’on assimile le mieux et se remémore le plus, avant les formes et les mots. Chaque couleur a une signification cachée et exerce ses effets à un niveau inconscient. Dans cet article, nous démystifions la perception visuelle, la signification et les principales utilisations de 12 couleurs largement utilisées : Le BLEU
CSS Shapes, une introduction L'article de Sara Soueidan paru dans A List Apart a fait le buzz dernièrement. Sara présente ici avec clarté ce qui sera l'avenir des formes et du design dans CSS. Par Sara Soueidan Des rectangles dans des rectangles, telle est depuis toujours la structure de nos pages web. Depuis longtemps, nous tentons de nous libérer de leurs limitations en utilisant CSS pour créer des formes géométriques, mais ces formes n'ont jamais affecté le contenu situé à l'intérieur des éléments, ni la façon dont ces éléments affectent les autres éléments de la page. La nouvelle spécification CSS Shapes change tout cela.
SIGNIFICATION COULEURS - Symbolique des couleurs Les couleurs et leur signification De plus, selon les pays, les cultures et les époques, les couleurs revêtent des significations différentes parfois aux antipodes de celles des cultures voisines ; comme le blanc associé en Occident à la pureté, alors qu'il est lié au deuil dans la plupart des pays asiatiques. Porteuse d'un sens et d'une symbolique, la couleur ne peut donc être choisie à la légère, d'autant plus sur une page web qui va être vu par des milliers de personnes venues de tous horizons. Vous devrez tenir compte de l'ambiance que vous désirez créer, de l'information qui accompagne la couleur, du profil des visiteurs, etc.