Einstiegsguide zu Style-Konventionen in der Webentwicklung

    Wenn ein Webentwicklungsteam keine Bennenungs- und Style-Konventionen vorweisen kann, sind Inkonsistenzen im Code vorprogrammiert, Frust macht sich bei den Nutzern breit und das Projekt droht zu entgleisen. Befolgen Sie unsere Tipps, um die Arbeit der Entwickler und Content-Manager zu vereinfachen.

    Abonnieren Sie unseren Blog

    Heutige Digital Experiences sind das gemeinsame Bestreben großer Teams: Produktbesitzer, Strategen, Business- und Funktionsanalysten, Texter, Projektmanager, Designer und Entwickler bis hin zu Anwendungsmanagern, Mitwirkenden und Testern – jeder trägt maßgeblich zum Endprodukt bei.

    Obwohl die meisten Webentwicklungsprojekte durch die Entwicklung hindurch einem roten Faden folgen (Planung, Workshops, Wireframe, Design, Entwicklung, Testen, Support, usw.), ist es eher selten, dass alle Beteiligten zu jeder Phase des Projekts aktiv involviert sind. Infolge dieser Diskrepanz zwischen Entwicklungsphasen und Beteiligten entsteht eine Art babylonischer Verwirrung: Eine Idee wird in ein Design übersetzt, das in Code umgewandelt wird, der wiederum Bestandteil eines WCM-Systems (Web-Content-Management-System) wird. Dieser kann dann einem Content-Autor in einem vom Original abweichendes Format (und unter einem anderen Namen) präsentiert werden. 

    Allzu oft entsteht eben dieser unerwünschte Nebeneffekt und kann zu Verwirrung, Frustration oder gar totalem Chaos führen. Etwa kleinere Invarianzen werden so zu größeren Inkonsistenzen, die die Teammitglieder dort auseinanderbringen, wo sie eigentlich eingebunden sein und ein Gefühl der Eigenverantwortung für das Endprodukt haben sollten. Wie können aber alle Mitwirkenden die gleiche Sprache sprechen? Ich bin der festen Überzeugung, dass Design eine wichtige Rolle bei der Lösung dieses Problems spielen kann.

    Erfahren Sie mehr über die Vorteile eines Coding-Styleguides und den grundlegenden Richtlinien hin zu einer gemeinsam genutzten Sprache und eine besser zu pflegenden Codebase.

    Verwendung klarer, eindeutiger Definitionen

    Wenn das Benennen von Komponenten unserer Website den Entwickler überlassen werden würde, könnten am Ende Kreationen wie „der große blaue Knopf“, „etwas Text“ oder „Benutzeraktionen in der oberen Ecke“ entstehen – wahrlich kein ideales Szenario. Glücklicherweise gibt es eine Reihe von allgemein verbreiteten Konzepten für Benutzeroberflächen, wie z. B. Header, Footer, Buttons, Links, Bilder, usw. Zur Förderung einer gemeinsamen Sprache zwischen den Webteams haben UI- oder Front-End-Frameworks wie Bootstrap oder Material Design Konzepte wie z. B. Rastersysteme, Menüs, Karten, Dropdown-Menüs, Akkordeons und viele mehr eingeführt.

    Schwerpunkt auf Beständigkeit

    In der modernen Webentwicklung zeichnet sich ein Trend hin zu einem komponentenbasierten Ansatz ab. Eine Website ist in kleine Teile mit äußerst spezifischer Funktionalität aufgeteilt, die je nach Präferenz des Content-Autors zu umfangreicheren Konfigurationen angeordnet werden können. Im Design wird dieser Ansatz als Designsystem bezeichnet. Der Schöpfer eines solchen Systems erkennt die atomare Natur der UI-Komponenten an. Er ist darin bestrebt, eine visuelle Darstellung zu konzipieren, die die wechselseitige Verbindung seiner Elemente widerspiegelt. Die Einhaltung strenger Regeln im Design wirkt sich auf die visuelle Identität und die Einheitlichkeit des Endergebnisses aus – alle Bestandteile hängen zusammen. Diese Beständigkeit hat einen ebenso wichtigen Effekt auf den Code: Je weniger Code geschrieben werden muss, desto weniger muss dieser auch gepflegt werden. Entscheidend ist an dieser Stelle die Verwendung von Benennungskonventionen, um eine Komponente mit dem richtigen Namen zu versehen.

    Setzen Sie über alle Projektstufen Ihrer Website Benennungskonventionen durch

    Wenn eine Komponente in der Entwurfsphase einen erkennbaren, konkreten Namen erhalten hat, sollte dieser Name im Code (über CSS-Klassennamen oder benutzerdefinierte HTML-Elemente) und letztendlich in der Autorenschnittstelle des WCMs widergespiegelt sein. Sollte auf einer der Seiten der Website ein Problem auftreten, ist es für alle Beteiligten (Entwickler, Tester oder Content-Manager) mithilfe der Überprüfungsfunktion des Browsers viel einfacher herauszufinden, welche Komponente(n) für den Fehler verantwortlich ist/sind.

    Nutzen Sie die benutzerdefinierten CSS-Eigenschaften

    Es besteht eine Vielzahl an weiteren visuellen Eigenschaften, die von einem kodifizierten Ansatz profitieren könnten. Die in einer digitalen Anwendung verwendeten Farben sollten mit lesbaren Namen versehen werden, damit diese ohne Entschlüsselung der Hexadezimalwerte weiter erkennbar bleiben. Moderne Designsysteme unterstreichen die Bedeutung einer Primär- und Sekundärfarbe, auf denen die gesamte Palette der Anwendung basiert. Wie bei Komponenten sollten Entwickler in den Benennungskonventionen auf diese Konzepte verweisen, die sie für die Verwendung im Code festlegen (z. B. durch Verwendung von benutzerdefinierten CSS-Eigenschaften anstelle von hexadezimalen Farbwerten), und innerhalb der Benutzeroberfläche der Content-Autoren.

    Vergessen sie nicht die Text-Styles

    Dasselbe gilt auch für Text-Styles: Ein Designer hat die Aufgabe, eindeutige, erkennbare Namen für jede der im visuellen System verwendeten Text-Styles zu definieren und zu erstellen. Andere visuelle Eigenschaften, die von der Einhaltung einer vordefinierten Liste mit Benennungskonventionen profitieren könnten, Stellen zum Beispiel Ränder dar – und noch vieles mehr.

    Stellen Sie sicher, dass alle Beteiligten mit den Standards im Einklang stehen

    Moderne UI-Designer sollten nicht nur kreativ sein, sondern auch wissen, wie ihre Arbeit technisch umgesetzt wird. So können sie die Elemente, aus denen sich ihre Kreation zusammensetzt, ausdrücken und artikulieren. Das Design sollte während des gesamten Entwicklungsprozesses die Referenz schlechthin sein.

    Halten Sie Ihren Styleguide auf den neuesten Stand

    Idealerweise sollte eine Komponente nach ihrer Entwicklung einer umfangreichen Liste angefügt werden, die Benennungskonventionen aller in der Anwendung verwendbaren visuellen Elemente abbildet. Da sich die Entwicklung im stetigen Wandel befindet und manche Designelemente innerhalb späterer Phasen verändert werden können (sehr zum Leidwesen der Entwickler und auch von mir), sollte dieser Styleguide dynamisch gestaltet sein: Er sollte den aktuellen Status des Projektcodes widerspiegeln. Ebenso liegt es in der Verantwortung eines Designers, die korrekte Implementierung seiner Arbeit in dem Styleguide zu gewährleisten, um eventuelle Probleme so schnell wie möglich lösen zu können.

    Letztendlich sollte darüber reflektiert werden, inwiefern das zu Erschaffende unsere Arbeit besser bewältigen lässt und auch eine produktivere Zusammenarbeit fördert. Wenn Sie Ihr gesamtes Team dazu verpflichten, eine robuste, artikulierte Reihe anfänglicher Vereinbarungen zu definieren, können Sie derart im Vorfeld eine ganze Reihe an Problemen lösen und dafür sorgen, dass alle Beteiligten auf demselben Stand bleiben. Obwohl dies ein langwieriger Prozess sein kann, sollten Anleitungen zum Codierungsstil so früh wie möglich implementiert werden, um spätere Verwirrung zu vermeiden. Im Rahmen der Digital Experience war ich schon immer ein Befürworter der Verwendung starker Namenskonzepte in allen Projekten.

    Besitzt Ihr Team einen Styleguide zur Webentwicklung oder genormte Benennungskonventionen? Teilen Sie Ihre Erfahrungen mit uns.

    Veröffentlicht auf 07/01/19    Zuletzt aktualisiert am 07/01/19

    #Webentwicklung, #Webdesign

    Über den Autor

    Mathijs Provoost is a Front-end Web Developer at AMPLEXOR, based in Belgium. He’s responsible for writing and maintaining well designed, testable, efficient code for our clients’ public facing web-sites, web applications and lines of IT infrastructures. Mathijs also works closely with designers, developers, QA testers and support services teams to set the direction of our front-end technologies and lead their implementation.

    ABONNIEREN SIE UNSEREN BLOG

    Beteiligen Sie sich an dieser Diskussion