Share
Nous avons récemment donné à nos abonnés Twitter la possibilité de poser toutes leurs questions sur les guides de style Front End. Voici les meilleures questions et (bien sûr) les réponses!
@anna_debenham @wdtuts Quelle est la différence entre un guide de style et une bibliothèque de motifs? (En théorie et en pratique).
- Jack Appleby (@jackappleby) 12 mai 2014
Il y a beaucoup d'interprétations, mais c'est ce que je vois: les guides de style sont un terme primordial pour toute une gamme de possibilités; des guides de style éditorial qui traitent du ton de la voix, des guides de style de conception qui explorent la typographie et les couleurs pouvant être utilisées sur le site, et même des guides de style de code pour maintenir la cohérence lorsque plusieurs personnes s'ajoutent à la base de code.
Une bibliothèque de modèles est un type de guide de style proche d’un cadre à part entière. Les bibliothèques de modèles sont d'excellents résultats pour les développeurs: elles contiennent tous les extraits de code des modules trouvés sur le site. Il peut être assemblé comme un manuel d'instructions pour la gestion des styles et du code frontal d'un site..
Selon les mots de Dave Rupert: "Les produits livrables réactifs devraient ressembler beaucoup à des systèmes entièrement fonctionnels de style Twitter Bootstrap, conçus sur mesure pour les besoins de vos clients." Voilà une assez bonne description de ce que je pense une bibliothèque de modèle est.
@anna_debenham À quelle heure commencez-vous à créer le guide de style dans un projet de refonte? @wdtuts
- Matt Quirk (@MattQuirk) 12 mai 2014
Au tout début. C'est le premier développement que je fais. Chaque site a des éléments communs tels que des paragraphes, des liens, des en-têtes, des listes, des formulaires… et il est vraiment utile de disposer d'un fichier pré-préparé avec toutes ces balises dans une collaboration dès le début du projet avec les concepteurs..
Un bon point de départ est Barebones de Paul Lloyd, car il contient tout le code HTML brut susceptible d’être utilisé sur un site. Il est ensuite facile de construire sur cette base avec chaque élément de fonctionnalité qui est ajouté.
@anna_debenham @wdtuts Comment gérez-vous le processus de création / maintenance de SG ainsi que les éléments livrables haute fidélité: librairies de modèles, compositions
- James Nettik (@jnettik) 12 mai 2014
Dans les projets précédents sur lesquels j'ai travaillé, le concepteur a utilisé TypeCast pour créer ses styles, de sorte qu'il puisse tester la typographie de base dans le navigateur et la tester sur différents appareils avant de s'engager dans une conception spécifique. Cela a très bien fonctionné pour nous deux, car cela nous a permis de signaler très tôt des problèmes tels que des polices Web douteuses ou des problèmes de contraste des couleurs sur les écrans à faible résolution.
Certains concepteurs, tels que Dan Mall, construisent des bibliothèques d'éléments dans leur logiciel graphique au cours du processus de conception. En divisant le design en modules, le convertir en un guide de style est très simple. Jon Aizlewood a utilisé cette approche lors de la refonte de Code for America, ce qui m'a permis de commencer à construire des idées et des idées de prototypage pendant que le reste de la conception était en cours..
Tiré de http://codeforamerica.clearleft.com/@anna_debenham @wdtuts Des conseils sur la communication / l'approbation du client? Comment obtenir des clients avec quelque chose qu'ils ne peuvent pas visualiser complètement?
- James Nettik (@jnettik) 12 mai 2014
@anna_debenham @wdtuts Comment présentez-vous / impliquez-vous / familiarisez-vous les clients avec le guide de style? (Surtout ceux qui ne connaissent pas le web)
- natalie (@talkanatalka) 12 mai 2014
(J'ai regroupé ces deux questions car elles sont très similaires.)
Cela dépendra beaucoup du client. J'ai trouvé que les guides de style sont très faciles à vendre aux équipes Web internes, car s'ils maintiennent un site gigantesque, réécrivant constamment le même code et traitant avec une feuille de style supermassive, ils verront immédiatement l'avantage d'en avoir un..
Les clients qui ne traitent pas directement de la conception ou du code au quotidien ne comprendront probablement pas les avantages d’en avoir un (ce n’est normalement pas quelque chose que je montrerais au PDG), mais j’en construis un de la même manière car je sais que cela aide moi, et j'espère que cela aidera tout le monde à ajouter du code sur le site un an plus tard. C'est bien de pouvoir le transmettre au prochain développeur à la fin d'un projet. Il se sent comme de bonnes manières.
@anna_debenham @wdtuts Comment plaider en faveur de l'utilisation des guides de style dans les organisations qui ne les utilisent pas faute de culture / de délais serrés?
- Daniel Fosco (@notdanielfosco) 12 mai 2014
J'explique que, bien que les guides de style prennent un peu de temps à développer et à maintenir, ils permettent en réalité de gagner du temps à long terme. Peut-être que je suis plus au courant en tant qu'entrepreneur, mais cela me prend un peu de temps pour me familiariser avec un nouveau projet, et ne pas avoir toutes les informations dont j'ai besoin coûte cher en temps.
Avec un site qui a une bibliothèque de modèles préexistante, je peux ajouter une nouvelle fonctionnalité au site beaucoup plus rapidement que si je devais parcourir le site à la recherche de styles similaires ou recréer quelque chose que personne ne savait déjà existe déjà..
Avoir un guide de style passe-partout sur lequel je peux m'appuyer permet également d'économiser beaucoup de temps. Par conséquent, produire un guide pour un projet ne demande pas beaucoup d'effort supplémentaire. S'assurer que les gens le maintiennent est un travail difficile.
@anna_debenham J'aimerais savoir ce que vous pensez de ces générateurs de guides de style automatiques dont j'ai entendu parler récemment… @wdtuts
- Westley Knight (@westleyknight) le 12 mai 2014
Il existe quelques générateurs de guides de style, Welch Canavan en a dressé une liste ici: http://welchcanavan.com/styleguide-roundup/
Stylify Me et Frontify sont quelques-unes des personnes non mentionnées, vous devriez donc les consulter également. J'aime beaucoup le son de KSS (Knyle Style Sheets) car il génère un guide de style de vie à partir des commentaires de votre CSS.
Les générateurs de guides de style peuvent être utiles dans certains cas, mais l'un des avantages de la création d'un guide de style à mesure que le site se développe est de vous obliger à réfléchir plus attentivement à votre code - chaque motif est semblable à un bloc lego. vous dans le bon état d'esprit si vous optez pour une approche plus orientée objet.
À mon avis, les générateurs sont utiles: si vous entrez dans un projet pour un site déjà conçu, vous êtes soumis à un délai serré et vous recherchez les couleurs et les différents styles de titre utilisés. C'est pratique si vous voulez récupérer une liste de codes hexadécimaux.
Le type-o-matic de Nicole Sullivan est également utile dans cette situation. C'est un plugin de navigateur qui compte toutes les polices d'une page et les commande par couleur et par taille..
@anna_debenham @wdtuts Comment communiquez-vous efficacement avec les concepteurs et les développeurs back-end dans le guide de style AU-DELÀ du code? TY
- Joseph James (@joeaugie) 12 mai 2014
Lorsque vous créez votre guide de style, mettez-vous à la place d'un entrepreneur ou d'un nouvel employé à qui on a demandé d'ajouter une nouvelle section sur le site. De quelle information auront-ils besoin??
Si vous ajoutez des informations pour différents rôles, cela devient un endroit centralisé où les gens peuvent trouver ce dont ils ont besoin. C'est quelque chose que GOV.UK a réussi à réaliser avec son manuel de conception de services.
@anna_debenham @wdtuts Quels sont les bons moyens d'utiliser les guides de styles dans le développement du design, ainsi qu'une référence une fois que le site est en ligne?
- Marc Drummond (@MarcDrummond) le 12 mai 2014
@anna_debenham @wdtuts En particulier, le défi de garder le guide de style pertinent et précis si le design évolue une fois qu'il est en direct.
- Marc Drummond (@MarcDrummond) le 12 mai 2014
Prototype code et conçoit avec, et se réfère autant que possible devant d'autres personnes. Lorsque vous créez de nouvelles fonctionnalités pour le site, intégrez-les d'abord dans le guide de style. Ainsi, si vous développez dans cette version avant de faire des modifications, elle ne sera pas périmée. Ce faisant, vous pouvez également vérifier que les autres styles ne sont pas en conflit avec les nouveaux.
Version contrôler votre guide de style. Faites-en une source ouverte si possible: les gens sont plus susceptibles de la garder à jour si elle est ouverte.
Ian Feather a récemment écrit sur la façon dont Lonely Planet conserve son guide de style avec une API. Cela ne conviendra pas à tous les projets, mais je peux voir à quel point cela serait utile pour un grand site en développement constant. C’est une bonne technique à viser.
J'espère que j'ai pu répondre à certaines de vos questions sur les guides de style front-end! Si vous en avez d'autres, n'hésitez pas à leur demander dans la section commentaires.
Accentsconagua