Share
We hebben onlangs onze Twitter-volgers de mogelijkheid gegeven om alles te vragen wat ze wilden over het onderwerp van Front End Style Guides. Dit zijn de beste vragen en (natuurlijk) de antwoorden!
@anna_debenham @wdtuts Wat is het verschil tussen een stijlgids en een patroonbibliotheek? (In zowel theorie als praktijk).
- Jack Appleby (@jackappleby) 12 mei 2014
Er zijn veel interpretaties, maar zo zie ik het: Stijlgidsen zijn een overkoepelende term voor een hele reeks mogelijkheden; handleidingen in de stijl van de redactie die tone-of-voice bespreken, ontwerpstijlgidsen die de typografie en kleuren verkennen die op de site kunnen worden gebruikt, en zelfs codestijlgidsen om de consistentie te behouden wanneer meerdere mensen aan de codebase toevoegen.
Een patroonbibliotheek is een type stijlgids die dicht bij een volledig framework staat. Patroonbibliotheken zijn geweldige deliverables voor ontwikkelaars - ze bevatten alle codefragmenten voor modules die op de site worden gevonden. Het kan worden samengevoegd als een handleiding voor het bijhouden van de stijlen van een site en front-end code.
In de woorden van Dave Rupert: "Responsive deliverables moeten veel lijken op volledig functionerende systemen voor systemen met een Twitter Bootstrap, op maat gemaakt volgens de behoeften van uw klanten." Dat is een redelijk goede beschrijving van wat ik denk dat een patroonbibliotheek is.
@anna_debenham Hoe vroeg begin je met het maken van de stijlgids in een herontwerpproject? @wdtuts
- Matt Quirk (@MattQuirk) 12 mei 2014
Al bij het begin. Het is het eerste stukje ontwikkeling dat ik doe. Elke site heeft gemeenschappelijke elementen zoals paragrafen, links, kopjes, lijsten, formulieren ... en een vooraf voorbereid bestand met al deze stukjes opmaak is echt handig om vroeg in het project met ontwerpers samen te werken.
Een goede plek om te beginnen is met Paul Lloyd's Barebones, omdat deze alle onbewerkte HTML bevat die waarschijnlijk op een site wordt gebruikt. Het is dan eenvoudig om op deze basis te bouwen met elk stuk functionaliteit dat wordt toegevoegd.
@anna_debenham @wdtuts Hoe beheer je het proces van creatie / onderhoud van SG's samen met hi-fi deliverables: pattern libs, comps
- James Nettik (@jnettik) 12 mei 2014
In eerdere projecten waaraan ik heb gewerkt, heeft de ontwerper TypeCast gebruikt om hun stijlen op te bouwen, zodat ze de basistypografie in de browser kunnen uitproberen en testen hoe deze er op verschillende apparaten goed uitziet, voordat ze zich committeren aan een specifiek ontwerp. Dat werkte voor ons allebei heel goed, omdat het al vroeg problemen opriep met dingen zoals dodgy-looking webfonts of problemen met kleurcontrast op lage-dpi schermen..
Sommige ontwerpers, zoals Dan Mall, bouwen elementbibliotheken op in hun grafische software tijdens het ontwerpproces. Door het ontwerp in modules op te splitsen, is het converteren naar een stijlgids heel eenvoudig. Jon Aizlewood gebruikte deze aanpak tijdens het herontwerp van Code for America, en het betekende dat ik kon beginnen met het bouwen van componenten en prototyping van ideeën terwijl de rest van het ontwerp nog aan de gang was.
Genomen vanaf http://codeforamerica.clearleft.com/@anna_debenham @wdtuts Enige tips over communicatie / goedkeuring van klanten? Hoe krijg je klanten aan boord met iets dat ze niet volledig kunnen visualiseren?
- James Nettik (@jnettik) 12 mei 2014
@anna_debenham @wdtuts Hoe presenteer / betrek / ken je klanten vertrouwd met de stijlgids? (Vooral degenen zonder webkennis)
- natalie (@talkanatalka) 12 mei 2014
(Ik heb deze twee vragen samen gegroepeerd omdat ze erg op elkaar lijken.)
Het zal erg van de klant afhangen. Ik heb ondervonden dat stijlgidsen heel gemakkelijk te verkopen zijn aan interne webteams, want als ze een uitgebreide site onderhouden, constant dezelfde code herschrijven en een supermassief stylesheet hanteren, zullen ze meteen het voordeel zien van het hebben van één.
Cliënten die niet dagelijks met ontwerp of code te maken hebben, zullen waarschijnlijk niet begrijpen wat de voordelen zijn van het hebben van een (het is normaal niet iets dat ik zou laten zien aan de CEO), maar ik bouw er een, ongeacht omdat ik weet dat het helpt en hopelijk zal het iemand die een jaar later code moet toevoegen aan de site helpen. Het is fijn om het aan het einde van een project aan de volgende ontwikkelaar te kunnen overhandigen. Het voelt als goede manieren.
@anna_debenham @wdtuts Hoe pleiten we voor het gebruik van styleguides in organisaties die ze niet gebruiken vanwege een gebrek aan cultuur / strakke deadlines?
- Daniel Fosco (@notdanielfosco) 12 mei 2014
Ik leg uit dat stijlgidsen weliswaar wat tijd nodig hebben om te ontwikkelen en te onderhouden, maar dat ze op de lange termijn echt tijd besparen. Misschien ben ik me er meer van bewust als een aannemer, maar het kost nogal wat tijd om mezelf vertrouwd te maken met een nieuw project en niet alle informatie die ik nodig heb kost tijd.
Met een site die een reeds bestaande patroonbibliotheek heeft, kan ik veel sneller een nieuw stuk functionaliteit toevoegen aan de site dan wanneer ik zou moeten foerageren rond de site op zoek naar vergelijkbare stijlen of iets zou moeten maken waarvan niemand weet dat het al bestaat.
Het hebben van een standaard stijlgids waar ik op kan bouwen, scheelt ook veel tijd, dus het produceren van een project kost niet veel extra moeite. Ervoor zorgen dat mensen het onderhouden, is het harde werk.
@anna_debenham Zou graag willen weten wat je vindt van deze automatische generieke gidsgeneratoren waar ik de laatste tijd over gehoord heb ... @wdtuts
- Westley Knight (@westleyknight) 12 mei 2014
Er zijn enkele generieke gidsgenerators, Welch Canavan schreef er een lijst van op: http://welchcanavan.com/styleguide-roundup/
Een paar anderen die niet genoemd zijn, zijn Stylify Me en Frontify, dus u moet die ook bekijken. Ik hou echt van het geluid van KSS (Knyle Style Sheets) omdat het een levende stijlgids genereert uit opmerkingen in je CSS.
Stijlgidsen kunnen in sommige gevallen nuttig zijn, maar een van de voordelen van het opbouwen van een stijlgids als een site zich ontwikkelt, is dat het je dwingt om meer zorgvuldig over je code na te denken - elk patroon is als een legoblok, dus het helpt om je hebt de juiste mindset als je op zoek bent naar een meer objectgerichte benadering.
Waar ik denk dat generatoren nuttig zijn, is als je een project binnenkomt voor een site die al is ontworpen, heb je een krappe deadline en ben je op zoek naar welke kleuren en verschillende kopstijlen worden gebruikt. Het is handig als u een lijst met hex-codes wilt bemachtigen.
Ook Nicole Sullivan's Type-o-matic is goed voor deze situatie. Het is een browserinvoegtoepassing die alle lettertypen op een pagina telt en deze sorteert op kleur en grootte.
@anna_debenham @wdtuts Hoe communiceer je effectief naar zowel ontwerpers als back-end ontwikkelaars binnen de stijlgids BEYOND die code laat zien? TY
- Joseph James (@joeaugie) 12 mei 2014
Bij het opbouwen van uw stijlgids, moet u uzelf in de schoenen van een aannemer of nieuwe medewerker plaatsen die gevraagd is om een nieuw gedeelte aan de site toe te voegen. Welke informatie hebben ze nodig??
Als je informatie toevoegt voor verschillende rollen, wordt het een centrale plaats voor mensen om te gaan zoeken wat ze nodig hebben. Dit is iets wat GOV.UK succesvol heeft weten te bereiken met hun Service Design Manual.
@anna_debenham @wdtuts Wat zijn enkele goede manieren om stijlgids te gebruiken in ontwerpontwikkeling en een referentie zodra de site live gaat?
- Marc Drummond (@MarcDrummond) 12 mei 2014
@anna_debenham @wdtuts Vooral de uitdaging om de stijlgids relevant en accuraat te houden als het ontwerp evolueert zodra het live is.
- Marc Drummond (@MarcDrummond) 12 mei 2014
Prototype-code en ontwerpen ermee, en verwijzen zoveel mogelijk naar andere mensen. Wanneer u een aantal nieuwe functies voor de site bouwt, bouwt u deze eerst in de stijlgids, zodat deze zich niet gedraagt als u zich daarin ontwikkelt voordat u wijzigingen doorvoert. Door dit te doen, kunt u ook controleren of andere stijlen niet conflicteren met de nieuwe.
Versiebeheer uw stijlgids. Maak het zo mogelijk open source: mensen houden het vaker up-to-date als het buiten is.
Ian Feather schreef onlangs over hoe Lonely Planet zijn stijlgids handhaaft met een API. Dit is niet geschikt voor elk project, maar ik zie wel in hoe nuttig dit zou zijn voor een grote site die constant in ontwikkeling is. Het voelt als een goede techniek om naar te streven.
Ik hoop dat ik enkele van uw vragen over front-end stijlgidsen heb kunnen beantwoorden! Als je nog andere hebt, stel ze dan gerust in het gedeelte 'Opmerkingen'.
Accentsconagua