EN
AR
RU
ZH
FR
ES
8 mars 2025 • Par KWD
Cinq principes de conception pour les développeurs afin d'améliorer l'efficacité : utiliser des unités CSS relatives, baser les points d'arrêt sur le contenu et non sur la largeur de l'appareil, prioriser les fonctionnalités par rapport aux éléments visuels, suivre l'ordre wireframe-conception-code, et tester la réactivité avec les outils appropriés.
Points clés
- Utilisez rem et des pourcentages en CSS au lieu de pixels pour des styles fluides et évolutifs sur tous les appareils.
- Définissez les points d'arrêt des requêtes médias en fonction des besoins du contenu, et non de la largeur de l'appareil, pour de meilleures performances.
- Énumérez d'abord les fonctionnalités requises avant de vous concentrer sur les aspects visuels du développement.
- Suivez un ordre strict : croquis de wireframes, puis conception avec couleur et typographie, puis code.
- Testez la réactivité du site Web à l'aide d'outils dédiés comme LT Browser pour la compatibilité mobile.
Le design est l'intelligence rendue visible. - Alina Wheeler, Auteure.
Le rôle principal des designers est de concevoir les composants visuels frontaux d'une application/d'un site web. Leur travail affecte la convivialité et l'expérience utilisateur de l'application/du site web.
D'abord résoudre le problème. Ensuite, écrire le code. - John Johnson
Les développeurs, en revanche, se concentrent sur le codage des idées et concepts lors du développement des fonctionnalités de l'application/du site web.
Les designers sont une race différente des développeurs. Dans les petites entreprises, leurs responsabilités se chevauchent et parfois dans les grandes entreprises aussi. Il existe quelques principes que les développeurs devraient garder à l'esprit pour mettre le produit en production.
Relativité en CSS
L'utilisation de em, rem et pourcentages aide à la fluidité de vos styles CSS sur différentes tailles d'écran.
Au lieu d'utiliser les pixels comme unités, utilisez rem. Par exemple, section.hero {width: 90%; font-size: 1.5rem;} plutôt que section.hero {width: 900px; font-size: 16px;}
Par exemple, si vous devez modifier un point de rupture, vos largeurs restent cohérentes. Et vous pouvez modifier la taille de police de n'importe quel élément simplement en modifiant la taille de police de l'élément.
Requêtes Média et Contenu
Le contenu détermine les points de rupture pour tout appareil et non la largeur de l'appareil.
Si vous deviez considérer la largeur de l'appareil, les appareils évoluent à un rythme exponentiel avec lequel nous, en tant que développeurs, ne pourrons jamais nous tenir à jour.
Nous devons trouver une solution intelligente à ce problème et le contenu nous offre une opportunité de résoudre ce problème.
@zomigi la première requête média est en fait l'absence de support pour les requêtes média. — Bryan Rieger (@bryanrieger) 1er décembre 2011
Si vous vous sentez un peu perdu, utilisez la Calculatrice de Typographie du Nombre d'Or pour décider des longueurs de ligne.
Un autre aspect important d'avoir les points de rupture de contenu est l'amélioration des performances car tout semble simplement fonctionner correctement sans grand-chose à déboguer.
La brièveté est l'âme de l'esprit. - Polonius
Soyez bref, soyez simple.
Lister d'Abord les Fonctionnalités
En tant que développeurs, nous commençons d'abord par lister les fonctionnalités qui doivent être développées.
La plupart du temps, quand notre travail se chevauche avec celui des designers, nous nous perdons dans les aspects visuels plutôt que de nous concentrer sur la tâche à accomplir, qui est de lister d'abord les fonctionnalités, puis de passer aux autres aspects.
Les questions que vous vous posez sont un indicateur du type de résultat que vous produirez.
Supposons que vous vous posiez la question : « Cela devrait-il être flotté à gauche ou à droite ? » au lieu de « Quels sont les moyens de mettre l'utilisateur à l'aise en utilisant l'application ? »
Listez d'abord les fonctionnalités, puis concevez.
Wireframes, Design, Codage : Dans cet Ordre
Quoi que vous fassiez, d'abord, faites un croquis approximatif de l'idée sur papier ou un wireframe approximatif.
Ensuite, concevez avec des schémas de couleurs, de la typographie et des éléments visuels.
La dernière étape est de coder.
Le temps de production s'améliorera si on suit cet ordre.
LT Browser - Test de Réactivité
Saviez-vous qu'il existe un navigateur pour tester la réactivité d'une application ou d'un site web ? Il s'appelle le LT Browser (Navigateur Lambda Test).
C'est le navigateur de nouvelle génération pour créer, tester et déboguer des sites web mobiles.
https://www.youtube.com/watch?v=RH95O9mOGoc
Conclusion :
En résumé, en tant que développeurs, voici les cinq principes de design que vous pouvez suivre pour faire fonctionner votre site web ou votre application avec efficacité et sans tracas.
