Get Your Site

Qualität hat ihren Preis. Aber muss dieser Preis hoch sein? Nein. Mit Drupal 8 als Content Management System und dem Einsatz der perfekten Module für Website-Entwicklung, können moderne Websites schnell und kostengünstig erstellt werden.


Get your site - mit Drupal und komponentenbasierter Webentwicklung.

Bild von Meinolf Droste

Atomic Design - Komponenten für Ihre Websites.

Vielleicht kennen Sie dieses Problem. Ihr Entwickler hat Ihnen schicke Elemente für Ihre Website entwickelt. Diese werden auf festgelegten Seiten angezeigt. Nun möchten Sie ein solches Element in Ihrem neuen Blog- oder News-Artikel verwenden. Aber das geht nicht so ohne weiteres.
Sie müssen Ihren Entwickler beauftragen das für Sie zu erledigen.
Erfahren Sie hier, wie sich solche Probleme, mit wiederverwendbaren Komponenten, lösen lassen.

Moderne Info Blöcke

Fügen Sie Ihren Artikeln modern gestylte Info-Blöcke mit CTA Buttons hinzu. Jederzeit einfach änderbar und per Drag & Drop im Artikelformular zu verschieben. Einfacher war Inhaltserstellung mit Drupal noch nie. Alles was Sie auf dieser Seite sehen besteht aus UI-Patterns und Widgets des Stacks Moduls.

Bootstrap 4

Bootstrap 4 und Flexbox

Alle Komponenten, die Sie hier sehen basieren auf Bootstrap 4. Bootstrap 4 ist ein flexibles CSS-Framework, mit welchem Frontend-Entwickler schnell und kostengünstige das Design Ihrer Website entwickeln können.

Ich habe Bootstrap 4 in ein Drupal 8 Theme integriert und kann so Komponenten sehr schnell zur Verfügung stellen. Dank des Flexbox CSS Layout-Models lassen sich häufig gewünschte Features, wie gleichlange Spalten oder vertikale Zentrierung aller Elemente in einer Box, viel schneller entwickeln als mit den früher notwendigen Floats.

Volle Kontrolle

Sauberes perfektes HTML5 für SEO

Entwickler der Komponenten haben volle, alleinige Kontrolle über den HTML Output. Kein Modul, kein Plugin gibt irgendein HTML vor, das dann kompliziert überschrieben werden muss.

Auch das beschleunigt den Entwicklungsprozess und erspart widerum Kosten.
Und gutes, sauber strukturiertes HTML5 ist gut für SEO und Performance.

Ich habe für dieses Theme dutzende Komponenten entwickelt, die Sie auf Ihrer Site einfach nutzen können.

Responsive Design

Optimiert für mobile Geräte

Natürlich sind alle Komponenten Responsive, also für die Darstellung auf allen mobilen Endgeräten optimiert. Das ist heutzutage eine Notwendigkeit, denn nicht optimierte Websites verlieren beim Ranking aller Suchmaschinen deutlich.

Bootstrap 4 stellt ein Gridsystem, für feingranulare Einstellungen zur Anzeige der Komponenten auf unterschiedlichen mobilen Endgeräten, zur Verfügung.

Für folgende Viewports lassen sich unterschiedliche Grids definieren:

Extra small <576px, Small ≥576px, Medium ≥768px, Large ≥992px, Extra large ≥1200px

Perfekte Qualitätskontrolle

Prüfen Sie Komponenten an einer Stelle

Die Qualitätskontrolle für Ihre Websites wird dem hier beschriebenen, komponentenbasierten Ansatz zur reinen Freude. Der Entwickler schreibt den Code für die Komponenten in einer genau definierten Datei. Und der Kunde kann die Komponente an einer Stelle testen und sicher sein, dass diese Komponente auf allen Seiten, in denen sie eingesetzt wird immer gleich dargestellt wird.

Das ist in vielen, nicht komponentenbasierenden, Umsetzungen nicht immer der Fall.

Sie kennen das sicherlich: auf einer Seite sieht alles gut aus und auf einer anderen Seite nicht. Das kann endgültig vorbei sein, wenn Sie sich für komponentenbasierendes Website Building entscheiden.

Content Management und Drupal

 

Drupal ist eines der mächtigsten CMS und Frameworks, wenn es um komplexe inhaltliche Strukturen und eine Vielzahl von Funktionalität geht. Und das alles ist von Version zu Version besser geworden. Es kann sehr schwierige Anforderungen geben, die mit Drupal in erstaunlich kurzer Zeit umgesetzt werden können. Auf der anderen Seite kann es manchmal extrem aufwendig und umständlich sein ein kleines neues Textschnippselchen irgendwo in einer komplexen Struktur einzufügen. Häufig musste dies in der Vergangenheit ein Entwickler tun.

Mehr über die Drupal Module Stack und UI-Patterns erfahren

Wiederverwendbarkeit

Alle Komponenten können jederzeit und überall wiederverwendet werden. Egal auf wievielen Seiten Sie eine Komponente einsetzen, wenn ein Fehler entdeckt wird oder aus einem anderen Grund etwas geändert werden soll, muss die Änderung lediglich an einer Stelle im Code vorgenommen werden. Das bedeutet eine große Zeit- und Kostenersparnis

Komponenten können problemlos in unterschiedlichen Projekten eingesetzt werden. So kann mit der Zeit eine Bibliothek wiederverwendbarer Komponenten entstehen.
 

Voransichten

Von jeder Komponente steht eine Voransicht zur Verfügung. Diese Voransicht ist vollkommen unabhängig von der Verwendung und Struktur in Drupal. Sie wird mit Dummy-Text erstellt und kann so sehr schnell getestet werden.

Damit stehem Kunden und Entwickler ein sehr gutes Kontrollwerkzeug zur Verfügung. Erst, wenn eine Komponente völlig fehlerfrei ist, wird sie zur Verwendung in Drupal freigegeben.

Hier können Sie ein Beispiel sehen: Voransicht einer Infocard

Dokumentation

Im Code für die Voransichten kann der Entwickler eine Dokumentation der Komponente erstellen. Alle Beteiligten können so jederzeit nachlesen aus welchen Einzelelementen eine Komponente besteht, was beim Einsatz zu berücksichtigen ist, ob es irgendwelche Einschränkungen gibt usw. usf. Dieses Kriterium kann nicht genug betont werden.

Voransicht einer einfachen Komponente

Wiederverwendbarkeit, Voransichten und Dokumentationen

Wiederverwendbarkeit, Voransichten und die Möglichkeit die Komponenten zu dokumentieren, gehören zu den Alleinstellungsmerkmalen von UI-Patterns.

Inhaltslisten

Jede Website benötigt Auflistungen von Inhalten. Häufig sind das Teaser in einer bestimmten Ausprägung, die Listen z.B. von den neuesten Blogeinträgen anzeigen. Solche Listen werden automatisch vom CMS generiert. Diese automatische Generierung Listen jeglicher Art von Inhalt, wird in Drupal mit dem Modul Views gelöst. Bis jetzt eigentlich immer.

Das Stacks Modul bietet jetzt allerdings zwei Alternativen zur Erzeugung solcher Listen: Content Lists und Content Feeds.

Content List

Das Submodul Content List ermöglicht die Erstellung von statischem Inhalt, der in Listen bestimmter Ausprägung in einem Artikel angezeigt werden soll. Das ist genau das, was Sie hier in diesem Dreispalter sehen.

Jeder Textblock ist eine Komponente, die überall wiederverwendbar ist. Die sog. Widgets des Stacks Modul erlauben auch die Wiederverwendbarkeit von Inahlt. D.h., wenn ich diesen Block mit diesem Inhalt in einer anderen Liste, auf einer anderen Seite verwenden will, ist das überhaupt kein Problem.

Conten Feed

Content Feed

Content Feed ist ein Submodul des Stacks Modul. Es ermöglicht uns dynamische Inhaltslisten, ohne den Einsatz von Views, zu erstellen. Das ist sehr nützlich, wenn wir dynamische Auflistungen innerhalb eines Artikels benötigen. Z.B. die letzten 3 Blogeinträge einer Site oder etwas wie Related Content.

Da das Content Feed Modul Widgets (Komponenten) zur Anzeige benutzt, ist auch hier eine konsistente Darstellung unserer Inhalte gewährleistet.

Responsive

Jede Komponente ist 'Out of the box' responsive und verhält sich überall, wo sie eingesetzt wird, gleich. Bevor eine Komponente produktiv auf einer Website eingesetzt wird, kann sie in einer Art Testmodus betrachtet und verändert werden. Erst, wenn Sie als Kunde 100% mit der Komponente zufrieden sind, wird die Komponente für den produktiven Einsatz freigegeben.

Jederzeit einfach änderbar

Was ist aber, wenn eine Komponente auf dutzenden von Seiten eingesetzt wird und nun eine Änderung notwendig wird? Dann wird die Änderung im Testmodus vorgenommen, ohne Auswirkung auf die realen Komponenten der Website. Ist die Änderung abgeschlossen, wird diese durch wenige Zeilen Code an einer Stelle im Template der "echten" Komponente übernommen. Alle Seiten, die die Komponente nutzen werden automatisch den neuen Zustand übernehmen und anzeigen.

Sicher, vorhersehbar und zuverlässig.

Die hier beschriebenen Vorgehensweisen sind sicher, vorhersehbar und zuverlässig. Vorbei die Zeiten, in denen kleinste Änderungen zu einem hohen Aufwand und damit Kosten führten. Egal, ob die Komponente in unterschiedlichen Inhaltstypen, in Blöcken oder in Views eingesetzt wird, es ist immer nur das HTML in einem Template zu ändern

Entwickler können für ein Stacks Widget verschiedene Varianten erstellen. Z.B. eine Hero-Section mit Hintergrundfarbe oder mit einem Hintergrundbild. Sie als Content Manager können jederzeit die eine oder die andere Variante auswählen, ohne das der Inhalt in irgendeiner Weise in Mitleidenschaft gezogen wird. Das kann ein wertvolles Mittel bei A/B Tests sein.

Layout Wechsel on the fly

Das Layout eines Widgets kann jederzeit durch 2 Klicks durch ein anderes ersetzt werden.

Drupal Entwicklung seit 2005

Meinolf Droste

Mich haben die Möglickeiten dieser zwei Module innerhalb weniger Tage restlos überzeugt. Endlich ist Inhaltserstellung und die Möglichkeit verschiedene Layoutblöcke in einem Artikel zu verwenden kein Geheimwissen mehr. Schreiben Sie mir, wenn Sie diese Möglichkeiten auch auf Ihrer Drupal 8 Site einsetzen möchten. Viele Komponenten stehen Ihnen Out of the box zur Verfügung.

Und schauen Sie Hin- und wieder hier vorbei, um sich weiter über Atomic Design mit Drupal 8 zu informieren.
GertYourSite ist ein Service von mdwp - Digital Consulting & Services
Impressum

UI-Patterns Dokumentation

Hier geht's zur Dokumentation des UI-Patterns Moduls.

UI-Patterns auf Github

Hier geht's zu den Issues auf Github

Gitter Chat UI-Patterns
Gitter Chat

Gitter Chat von UI-Patterns

Einführung des Stacks Moduls

Hier wird das Stacks Modul vorgestellt.

Dokumentation des Stacks Modul

Hier geht's zur Dokumentation des Stacks Modul.

Share this.