WORKING WITH STYLE
Développer un site web ou une application mobile c’est bien, mais lui donner du style c’est encore mieux. Faites le tour des méthodes et bonnes astuces pour développer efficacement en CSS, SCSS, LESS ou encore en SASS.
PARTONS DE LA BASE : LE CSS
Un peu d’histoire
Le CSS ou encore Cascading Style Sheets peut se traduire par une feuille de style en cascade. Il est utilisé pour mettre en forme, gérer le design de fichiers HTML ou XML.
Il permet notamment de :
- Séparer la structure de la page et le style
- Décliner les styles selon le récepteur
- Permettre la cascade de styles
Les propriétés, qu’est-ce que c’est ?
Les propriétés sont regroupées par blocs de règles, entre accolades. Chaque bloc est précédé par un sélecteur désignant un élément de structure : éléments, classes, ID.
Display et positionnement
L’affichage sur CSS est simple :
- Inline : affichage en ligne
- Inline -block : création de bloc
- Block : un ensemble d’éléments
Display flex : Il offre une capacité à un élément flexible de modifier ses dimensions pour remplir l’espace disponible de son container. Il est particulièrement apprécié sur du React Native.
Il existe plusieurs outils de position :
- Static : sa position de base.
- Relative : par rapport à sa position initiale (static).
- Absolute : se fixe par rapport au parent le plus proche en relatif.
- Fix : se fixe par rapport à la window.
LES NOUVEAUX LANGAGES
Le CSS c’est bien mais il n’est pas assez souple. Plusieurs langages ont été créés pour pallier les manques du CSS.
Le SASS (Syntactillay Awesome Style Sheets) : un langage de script interprété en CSS qui intègre de grandes nouveautés :
- Variables : changer la couleur d’un site ne sera plus un casse-tête, il suffira de changer la variable.
- Mixins : rend votre travail beaucoup plus efficace, il vous permet de réutiliser des pans entiers de CSS, propriétés ou des sélecteurs.
- Operators : le calcul est maintenant possible !
Son gros point faible est qu’il ne contient pas d’accolades dans son code. Pour répondre à cela, un nouveau langage est apparu : le LESS. Une réelle correction du SASS, il est maintenant possible de coder du CSS dans un fichier LESS.
Alors comment faire son choix ?
- Simplicité : La syntaxe du LESS est plus proche du CSS. Néanmoins le SASS a su combler ce manque en lançant le SCSS qui tout comme le LESS intègre les accolades.
- Profondeur : le SASS offre plus de profondeur sur la partie calcul.
- Simple choice : le choix va au final se porter entre le $ ou @.
BOOTSTRAP
Bootstrap est un framework de style, de CSS, apportant plusieurs points positifs :
- Fonctionne sur tous navigateurs modernes
- Adopte une approche «Mobile First »
- Il est personnalisable
- Aide les développeurs anti-UX
- Des centaines de templates sont disponibles
- Il est intégré avec des plugins Vue, Angular et React
- Et dispose d’une grande documentation disponible sur leur site
Il y a un point important à connaitre sur Bootstrap c’est le container : il doit absolument être placé au début de tout. Un container va contenir des row (lignes) et des col (colonnes). Il est donc important de respecter l’ordre : container – row – col.
Si vous n’êtes pas rigoureux vous allez vous retrouver avec des pixels en trop.
Astuce : Il est aussi possible de faire du display flex avec Bootstrap
Même si Bootstrap est customisable on retrouve souvent des sites qui se ressemblent et il est assez limité pour des écrans compliqués.
L’IMPORTANCE DE L’UI/UX
L’UX représente l’expérience globale ressentie par l’utilisateur lors de l’utilisation de l’interface. L’UI est ce qui fait le lien entre l’humain et la machine. Votre design doit avoir un but, il est donc important de déterminer votre cible et définir son utilisation.
Il y a néanmoins quelques bonnes astuces que vous pouvez déjà appliquer dans vos design :
- L’importance des typos : préconisez des typos plutôt classiques, lisibles et facilement compréhensibles par votre audience.
- Attention au scroll excessif : c’est une fonctionnalité basique qu’il faut savoir doser. Par exemple, le parallax est en général une mauvaise idée mais certains sites l’ont implémenté avec brio (Costa Coffee).
- Adoptez un design responsive : la navigation mobile a dépassé celle du deskop, il est donc primordial d’intégrer les normes du mobile (respecter la taille des icônes par exemple). Un bon moyen de poser de bonnes bases pour du responsive design est d’utiliser du display flex et du système de grid.
Pour travailler avec style et être accessible à tout le monde voici une infographie qui peut vous aider.
