Frontend Development
Wir bauen großartige Benutzeroberflächen.
Frontend-Development ist die Entwicklung der grafischen Benutzeroberfläche einer Website unter Verwendung von HTML, CSS und JavaScript, damit Benutzer diese Website anzeigen und mit ihr interagieren können.
Trennung von Layout und CMS
UI/UX ist Backend-unabhängigInhalte und wie diese später dargestellt werden sind zwei unterschiedliche Bausteine, wenn wir Webseiten konzipieren. Inhalte speichern wir strukturiert ab und geben ihnen damit eine Semantik, die später genutzt werden kann. Ausgabekanal kann dann eine Webseite, eine App oder ein beliebiger anderer Ausgabekanal sein. Denn wer weiß denn heute schon, wie ein Inhalt in zwei Jahren publiziert werden soll?
Drupal kann Inhaltselemente optimiert verwalten und als modernes CMS selbstverständlich auch Layout-Themes bereitstellen. In 90% unsere Projekte ist auch genau das der richtige Weg. Allerdings kann Drupal auch als so genanntes Headless CMS auftreten und Inhalte über definierte Schnittstellen bereitstellen. In diesem Fall kümmert sich der Ausgabekanal (oft eine App) um die Darstellung.
Ein Frontend-Entwickler ist dafür verantwortlich, dass das Design einer Website fehlerfrei umgesetzt wird und genau den Vorgaben entspricht. Er stellt sicher, dass die optimale Darstellung in unterschiedlichen Browsern und Endgeräten gewährleistet ist.
Atomic Design
Layouts strukturiert aufbauenUm Projekte nachhaltig und langfristig einsetzbar umzusetzen, gehen wir seit vielen Jahren nach dem Atomic Design Ansatz vor. Hierbei fangen wir klein an und lauten zuerst die so genannten Atome, kleine Textbausteine, Bilder, links, und so weiter. Aus diesen Atomen entstehenden Moleküle durch Kombination: Formulare, Buttons, und so weiter. So geht es weiter und die Elemente werden immer komplexer Ende ganze Website. Nebenbei entsteht ein Layoutbaukasten mit Regelwerk, der zukünftige Erweiterungen einfach und CI/CD-konform möglich macht.
Responsive Layout
Unterstützung verschiedener DevicesWir können nicht zuverlässig vorhersagen, auf welchem Gerät bzw. welcher Bildschirmgröße ein Kunde unsere Inhalte darstellen möchte. Daher ist es selbstverständlich, dass ein Layout keine bestimmte Größe voraussetzen darf, um perfekt dargestellt zu werden. Vielmehr muss sich das Layout an das Wunschgerät des Benutzers anpassen.
Mobile First - Benutzererfahrung auf dem Smartphone
Bei jedem Layout gehen wir so vor, wie es heutzutage sein sollte: Mobile first. Konkret bedeutet dies, dass das Grundlayout einer Webseite für Mobilgeräte aufgebaut wird und somit den minimalen Umfang an Layoutvorgaben benötigt (Stichwort: Performance).
Durch Hinzufügen von weiteren Regeln und Bedingungen wird das Layout dann schrittweise erweitert und unterstützt dann Tablets und kleine Desktops bis hin zu Wide- und Ultrawide Screens.
Wartbar und zukunftssicher - das Layout als Komponentenbibliothek
Eine Website stellt eine nicht geringe Investitionen da und sollte somit lange Bestand haben. Technisch wird dies erreicht durch die Wahl des richtigen CMS. Aber auch das Layoutframework kann seinen Teil zur nachhaltigen Nutzung beitragen. Wir bauen Layouts nach dem Atomic Design Ansatz auf und stellen unseren Kunden somit eine erweiterbare Komponentenbibliothek zur Verfügung.
Tech Stack
Professionelle Resultate durch professionelles Tooling.
Storybook.js
Storybook ist unsere erste Wahl, um ein Komponenten-basiertes Layout aufzubauen. Von Atomen über Moleküle bis hin zu kompletten Webseiten entsteht ein individueller Layoutbaukasten für unsere Kunden, der zugleich als Dokumentation dienen kann. Erweiterbarkeit in der Zukunft ist somit sichergestellt.
Tailwind CSS
Layouts für Komponenten und Webseiten zu managen und auch bei Änderungen und Erweiterungen CSS-Klassen strukturiert und ohne unnötige Angaben zu pflegen, setzt einen modernen Ansatz voraus. Wir haben im Laufe der Jahre viele Technologien genutzt und evaluiert und sind nun der Meinung: Tailwind CSS ist derzeit die beste Möglichkeit, um diese Anforderung zu erfüllen.
Alpine.js
Keine Webseite kommt heutzutage mehr ohne Animationen und Effekte aus. Klassisches Java Script funktionierte immer noch bestens, bringt aber einen gewissen Overhead mit, der sich letztendlich auch im Budget niederschlägt. Auch hier haben wir noch eine moderne und leistungsfähigen Lösung gesucht und unser Favorit ist Alpine.js
Twig
Die Template-Engine von Drupal.Drupal bringt eine leistungsfähige Template-Engine mit, mit deren Hilfe wir jegliches Layout individuell umsetzen können: Twig.
Der Vorteil für den Einsatz einer Template-Engine liegt auf der Hand. Layout wird unabhängig von der Drupal-Entwicklung durch unser Frontend-Team umgesetzt. Beim Erstellen der Templates liegt der Fokus somit komplett auf der Umsetzung eines perfekten responsiven Layouts. Platzhalter markieren die Stellen, an denen später dynamische Inhalte integriert werden sollen. Sobald ein fertiges Template im Drupal-CMS integriert wird, werden „echte“ Inhalte korrekt und im gewünschten Layout ausgegeben. Auch spätere Änderungen an der Logik sind einfach möglich, ohne sich Gedanken über das Layout machen zu müssen.
Animationen
So einfach wie nie zuvor.Lottie ist ein vektorbasiertes Grafikformat, welches auf SVG und JSON basiert. Lottie-Animationen sind dadurch sehr klein und können performant geladen und ausgeführt werden. Die Erstellung erfolgt in einem Texteditor oder durch entsprechende Plugins für bspw. Adobe After Effects. So macht die Nutzung von Animationen in Webseiten wieder Spaß.
Komm ins Team
Bist Du auf der Suche nach einem Job?Frontend Frameworks
Wenn vanilla nicht mehr ausreicht.
Auch wenn wir Layouts gerne von Grund auf selbst entwickeln, gibt es berechtigte Situationen, in denen wir auf eines der großen Standard-Frameworks zurückgreifen, um die Anforderungen unserer Kunden zu erfüllen.
React
Vue.js
Svelte
Gatsby
Angular
