Die 3 Phasen zur Verbesserung Ihres Alltags als Entwickler

Einleitung

Hat Sie der Gedanke, bei jedem neuen Projekt alle Phasen der Entwicklung von Grund auf neu durchlaufen zu müssen, schon einmal geärgert und Sie dabei das Gefühl gehabt, von der Monotonie heruntergezogen zu werden? Entwickler sind oft frustriert – sie haben das Gefühl, dass jedes Projekt dem gleichen langwierigen Prozess folgt und kaum Raum für Kreativität bleibt.

Aber was wäre, wenn ich Ihnen sagen würde, dass es eine Möglichkeit gibt, aus diesem Teufelskreis auszubrechen und Ihre Webflow-Entwicklungserfahrung in eine Quelle der Freude und Zufriedenheit zu verwandeln? Das Geheimnis liegt in der Verwendung bewährter Methoden und Innovationen, mit denen Sie Ihren Webflow-Entwicklungsworkflow auf die nächste Ebene bringen können.

In diesem ausführlichen Leitfaden sehen wir uns Techniken an, mit denen Sie routinemäßige Entwicklungsschritte optimieren, alltägliche Probleme überwinden und das volle Potenzial der Plattform ausschöpfen können. Also schnallen Sie sich an und machen Sie sich bereit für eine Reise in eine Welt, in der Effizienz herrscht.

Phase 1 - Die Voraussetzungen für den Erfolg schaffen

Wenn Sie Ihr neues Webflow-Projekt starten, muss es eine solide und effiziente Grundlage haben, um von dort aus skalieren zu können. Obwohl dies eine Vorbereitungsphase ist, hat die Entwicklung bereits begonnen und es gibt wichtige Punkte zu beachten, die Sie auf den Erfolg vorbereiten.

1.1 Stilrichtlinien

Wenn Sie sich einen Styleguide als Blaupause für Ihr Projekt vorstellen, wird seine Bedeutung deutlich. Das Erstellen eines Styleguides markiert den Beginn Ihres Projekts und stellt sicher, dass sich Klassen und Stile durchgängig vorhersehbar verhalten. Bevor Sie sich also in die Entwicklung bestimmter Seiten stürzen, nehmen Sie sich die Zeit, an den Stilen zu arbeiten. Es gibt zwei Ansätze zum Erstellen eines Styleguides:

• Entweder erstellen Sie Ihr eigenes Basisprojekt von Grund auf, das Ihren Wünschen entspricht, oder
• Verwenden Sie vorgefertigte Open-Source-Frameworks wie Finsweet , Relume , Wizardry oder andere.

1.2 Variablen

Dank eines aktuellen Updates von Webflow ist die Verwendung von Variablen noch intuitiver und effizienter geworden. Durch die Organisation von Variablen in gut gestalteten Gruppen können Sie die Entwicklung vereinfachen und die Effizienz steigern. Ich empfehle, die Erstellung von Gruppen wie diesen in Betracht zu ziehen:

• Gemeinsame Farben
• Hintergrund
• Text
• Textgröße
• Textgröße Mobile
• Container (maximale Breite)
• Symbolgrößen

Sobald diese Gruppen erstellt und den entsprechenden Klassen zugeordnet sind, können Sie problemlos und sicher mit der Entwicklung von Webseiten fortfahren.

Die Arbeit an der Erstellung von Variablen war schon immer eine bewährte Methode, und Webflow setzt diese Tradition im Bereich der Low-Code-Entwicklung fort. Diese vordefinierten Gruppen bieten eine solide Grundlage für jedes Projekt und ermöglichen einen reibungsloseren und strukturierteren Entwicklungsprozess. Und wenn ein Kunde mit der Bitte auf Sie zukommt, das Farbschema von dunkel auf hell zu ändern, werden Sie dankbar sein, dass Sie Variablen verwendet haben.

1.3 Priorisierung der Zugänglichkeit

Die Barrierefreiheit wird oft erst in den letzten Phasen eines Projekts behandelt, aber ihre Bedeutung kann nicht genug betont werden. Von Anfang an sollte die Integration von Barrierefreiheitsfunktionen im Vordergrund stehen und jede Entscheidung und jedes Element beeinflussen, das Sie hinzufügen.

Webflow hat eine Checkliste öffentlich zugänglich gemacht. Nach sorgfältigem Studium werden Sie einen Überblick über die wichtigsten Punkte zu diesem Thema haben.

Einer der herausragenden Vorteile von Webflow ist das integrierte Barrierefreiheits-Dashboard, das visuelle Informationen darüber liefert, wie Ihr Projekt von sehbehinderten Menschen wahrgenommen wird. Mit dieser Funktion können Sie Ihr Projekt durch mehrere Barrierefreiheitsfilter betrachten, unterschiedliche Betrachtungsbedingungen simulieren und potenzielle Verbesserungsbereiche hervorheben.

Es geht darum, eine gerechtere und integrativere digitale Umgebung zu schaffen. Indem Sie der Barrierefreiheit von Anfang an Priorität einräumen, verbessern Sie nicht nur die Benutzerfreundlichkeit Ihres Projekts, sondern zeigen auch, dass Sie sich dafür einsetzen, allen Mitgliedern Ihres Publikums unabhängig von ihren Fähigkeiten den gleichen Zugang zu Ihrem Projekt zu ermöglichen.

Phase 2 – Den Entwicklungsprozess meistern

Jetzt kommen Sie in die Phase, in der Sie alle Seiten direkt gemäß dem Design entwickeln. Hier sind einige Empfehlungen, die Ihnen helfen, diese Phase erfolgreich zu meistern:

2.1 Benutzerdefinierter Code

„Halt. Warum? Wozu? Aber wie kann das sein?! Schließlich ist die Zukunft schon da und warum brauchen wir jetzt Code?“, sagen Sie vielleicht. Aber seien wir ehrlich: Auch ohne Codekenntnisse können Sie anfangen, sich mit Webentwicklung zu beschäftigen und schnell in Ihre Karriere starten. Aber wettbewerbsfähig zu bleiben und mit der einfachen Drag-and-Drop-Funktionalität von No-/Low-Code-Plattformen außergewöhnliche Dinge zu schaffen, scheint nicht die Wahrheit zu sein. Willkommen also bei der endlosen Entwicklung und dem endlosen Lernen, über das ich in meinem vorherigen Artikel gesprochen habe.

2.1.1 HTML

Wenn man auf Low-Code-Plattformen wie Webflow arbeitet, ist es verlockend, sich ausschließlich auf Divs und Textelemente zu verlassen, um Struktur zu schaffen. Aber hier unterscheiden wir uns von uns selbst gestern, denn nach der Lektüre meines Artikels übernehmen wir zumindest die Verantwortung für die Qualität des fertigen Produkts. Stellen Sie sicher, dass Ihr Markup semantischen Konventionen folgt, indem Sie Elemente wie <header>, <nav>, <main>, <aside>, <footer> und andere verwenden und die Überschriftenebene korrigieren, um die Übersichtlichkeit und Zugänglichkeit zu verbessern.

2.1.2 CSS:

• Unterteilen Sie Ihren zukünftigen Code gedanklich in global und lokal. Fügen Sie der Navbar-Komponente globales CSS hinzu. Auf diese Weise haben Sie von jeder Seite aus Zugriff darauf und sehen bereits vor der Veröffentlichung des Projekts, wie Stile angewendet werden.

• Schreiben Sie Stile für Hover-Zustände im Code, indem Sie Medienabfragen verwenden. Diese Methode stellt sicher, dass die Hover-Position nur auf dem Desktop angezeigt wird:

  
  

 <style> @media screen and (hover:hover) { //Insert your code here... } </style>

• Schreiben Sie separate Stile für 1024 Pixel breite Bildschirme, um die einzigartigen Layoutprobleme zu lösen, die für Geräte dieser bestimmten Größe spezifisch sind.

  Obwohl es einfach ist, in Webflow ein responsives Design zu erstellen, beginnen Tablet-Layouts bei einer Breite von 991 Pixeln. Es stellt sich heraus, dass der 1024-Bildschirm alle Desktop-Stile auf sich selbst anwendet. Ich hatte jedoch noch kein einziges Projekt, bei dem ich nicht separat Stile für einen 1024-Bildschirm schreiben musste. Ich würde diesen Punkt für die Überprüfung als obligatorisch betrachten. Ob Stile separat registriert werden oder nicht, hängt von jedem einzelnen Projekt ab.

• Fügen Sie Ihrem CSS-Code Kommentare hinzu, um die Lesbarkeit zu verbessern und die Zusammenarbeit mit anderen Entwicklern zu erleichtern. Erleichtern Sie sich und anderen Entwicklern das Leben bei späteren Projektbearbeitungen. Hinterlassen Sie das Projekt so, wie Sie es gerne sehen würden, wenn Sie es von einem früheren Entwickler übernommen haben.

 <style> /* About page Start */ //Insert your code here... /* About page End */ </style>

• Anstatt sich ausschließlich auf Webflow-Animationen zu verlassen, empfehle ich dringend die Verwendung von CSS-Animationen, um Ihre Seite einfacher und effizienter zu gestalten, ohne die Seitenleistung zu beeinträchtigen.

  Das in Webflow integrierte Animationstool erleichtert Anfängern die Erstellung einer guten Website mit zahlreichen Interaktionen. Wenn wir jedoch über fortgeschrittene Entwicklungsmethoden sprechen, ist es wichtig zu beachten, dass CSS-Animationen extrem leicht sind und die Seite durch ihre Präsenz nicht verlangsamen. Im Gegensatz dazu arbeiten Webflow-Animationen, die im Wesentlichen nur darauf abzielen, die CSS-Eigenschaften von Elementen zu ändern, über JS und verlangsamen dadurch die Seite. Dies ist bei kleinen Projekten nicht wahrnehmbar, bei großen jedoch schon. In jedem Fall rate ich Ihnen, bei jedem Projekt so viel wie möglich CSS anstelle nativer Webflow-Animationen zu verwenden, auch zum Üben. Denken Sie daran, dass sich nach zahlreichen Wiederholungen eine Gewohnheit einstellt . Lassen Sie uns sie bilden.

• Wenn keine Benutzerinteraktion mit Lottie-Animationen geplant ist, ist es viel besser, MP4-Dateien anstelle von JSON oder sogar optimierte JSON-Dateien zu verwenden. Die Leistung in Safari wird es Ihnen danken.

2.1.3 JavaScript:

Dabei handelt es sich um bewährte Vorgehensweisen, die seit langem als selbstverständlich gelten:

• Befolgen Sie die Best Practices für die Platzierung von JavaScript, einschließlich der Verwendung globaler Einstellungen für globale Projektskripts und Seiteneinstellungen für lokale Skripts.

• Verwenden Sie die Attribute <async> und <defer> für Skripte, die parallel geladen werden können, um die Seitenladezeiten zu optimieren.

  
  

2.2 Webflow-Komponenten

Wie oft stellen Sie sich beim Studium des Designs Ihres Projekts die Frage: Welche wiederkehrenden Elemente im Projekt kann ich als Vorlagen auf verschiedenen Seiten verwenden? Komponenten in Webflow ermöglichen Ihnen die Aufrechterhaltung eines konsistenten, effizienten und skalierbaren Design-Workflows, indem Sie anpassbare Blöcke aus Elementen und untergeordneten Elementen erstellen. Sie können diese Blöcke auf Ihrer gesamten Site wiederverwenden und an einer einzigen Stelle ändern, um zu vermeiden, dass Sie jedes wiederkehrende Layout einzeln überarbeiten müssen (Quelle - https://university.webflow.com/lesson/components?topics=layout-design ).

Dies kann oft sein:

• Navigationsleiste
• Fusszeile
• Schaltfläche – wenn sie nicht standardmäßig ist, ein benutzerdefiniertes Design und benutzerdefinierte Effekte aufweist und/oder eine verzweigte Struktur hat.
• CTA-Banner – eine oder zwei seiner Varianten werden häufig im gesamten Projekt verwendet.
• Und mein am häufigsten verwendetes Symbol ist Abschnitt – es sollte ein leerer Abschnitt mit einem Tag und einer Klasse vorhanden sein, darin alle Standardklassen, einschließlich eines Containers, Überschrift 2, Absatz und mehrerer leerer Div-Blöcke. Dies ist die am häufigsten verwendete Komponente, die Sie verwenden werden, das verspreche ich Ihnen. Fügen Sie sie einfach hinzu, trennen Sie die Verknüpfung und beenden Sie den Entwicklungsteil. Indem Sie sie als Basis hinzufügen, können Sie viel Zeit sparen, anstatt jeden Div-Block einzeln hinzuzufügen.

Mithilfe von Code können Sie die Funktionen von Webflow-Komponenten erweitern und dem Kunden ein unglaublich flexibles Projektmanagementsystem ohne Zugriff auf die HTML-Seitenstruktur bieten. Dies ist ein völlig neuer Ansatz für die Webentwicklung, der es dem Kunden ermöglicht, viele Designaspekte des Projekts zu steuern, nachdem der Entwickler das Projekt abgeschlossen hat. In Zukunft kann der Kunde problemlos selbstständig neue Seiten auf der Grundlage bereits erstellter Komponenten erstellen. Und nur wenn grundlegend neue Elemente entwickelt werden müssen, ist es notwendig, einen Entwickler einzustellen. Bei der Arbeit mit Komponenten haben Kunden praktisch keine Chance, Ihre perfekt vorbereitete HTML-Struktur zu zerstören (unsere Kunden sind jedoch oft sehr fähig).

2.3 Gruppieren von Medienressourcen

Gruppieren Sie Assets, wenn sie dadurch leichter zu finden und zu verwalten sind. Sie haben beispielsweise eine riesige Navigationsleiste und darin viele Links mit Symbolen. Der Designer hat einige davon bereits vorbereitet, versprochen, den anderen Teil in 3 Tagen fertigzustellen, und der letzte Teil wird noch vom Kunden geprüft. Während der Designer neue Optionen zeichnet, der Kunde dann die Hälfte davon prüft, Änderungen vornimmt und die andere Hälfte genehmigt und sie Ihnen schließlich zur Entwicklung sendet, haben Sie höchstwahrscheinlich bereits viele andere Bilder im Asset-Bereich. Symbolbilder werden beschädigt und es wird mühsam, sie in Zukunft zu finden/ersetzen. In diesem Fall macht das Gruppieren von Assets das Leben einfacher. Durch das Gruppieren können Sie alle Medien in Ihrem Projekt übersichtlich und organisiert halten.

2.4 Legen Sie einen Archivordner an, um Folgendes zu speichern:

• statische Versionen dynamischer MS-Seiten . Im Falle von Änderungen oder Bearbeitungen ist es für Sie viel einfacher, dies in einer statischen Version vorzunehmen und es dann auf die MS-Seite zu übertragen. Die Besonderheit von MS-Seiten in Webflow besteht darin, dass Sie, wenn Sie alle erforderlichen Elemente mit den entsprechenden Feldern in der Sammlung verbinden, das Element, in dem diese Verbindung vorhanden ist, nicht kopieren und auf eine statische Seite übertragen können.

• Eine Seite mit ersten Versionen von Elementen. Die häufige Praxis zahlreicher Änderungen zwingt uns, vorsichtig zu sein und nichts aus dem Projekt zu entfernen, was bereits erstellt wurde. Verschieben Sie dies auf die Archivseite und lassen Sie es dort, bis bessere Zeiten kommen.

• Testseite für Experimente.

  
  

Phase 3 – Letzte Änderungen

Was ist am Ende des Projekts vor der Übergabe an den Kunden wichtig zu tun, damit Sie nicht das Gefühl haben, Ihr Projekt hätte jetzt wirklich ein neues Level erreicht:

3.1 Bereinigen des Projekts:

• Entfernen Sie nicht verwendete Klassen und Animationen.

• Entfernen Sie auskommentierten, nicht verwendeten Code.

• Entfernen Sie nicht verwendete Medien. Wenn sich im Panel viel unnötiges Zeug befindet und es nicht möglich ist, es einzeln zu entfernen, schlage ich einen Hack vor: Löschen Sie alle Assets – veröffentlichen Sie das Projekt – laden Sie den Webflow neu – und fügen Sie in das Panel-Asset nur die Medien ein, die im Projekt verwendet werden.

  
  

3.2 Erstellen Sie ein Projektbenutzerhandbuch für den Kunden.

Zusätzlich zur Styleguide-Seite sollte eine Seite vorhanden sein, auf der beschrieben wird, wie das fertige Projekt zu verwenden ist. Ein guter Entwickler ist jemand, der darüber nachdenkt, wie der Kunde das Projekt in Zukunft verwalten wird. Wie einfach es sein wird, Änderungen vorzunehmen und welchen Freiheitsgrad der Kunde bei deren Verwaltung haben wird. Dank Webflow kann dies so perfekt wie möglich sein. Mit CSS-Kenntnissen und einem Verständnis der Funktionsweise von Webflow-Komponenten können Sie ein Projekt zusammenstellen, in dem es einfach ist, aktuelle Seiten zu ändern oder neue zu erstellen.

3.3 Geben Sie Backups eindeutige Namen.

Das Prinzip der Beschreibbarkeit gilt für alles, was Sie als Entwickler benennen. Jeder Teil des Projekts sollte für Sie und Ihre zukünftigen Kollegen intuitiv sein.

Abschluss

Abschließend fassen wir noch einmal kurz die wichtigsten Punkte zusammen, auf die Sie bei der Verbesserung Ihres Entwickleralltags achten sollten.

Phase 1 - Vorbereitung

• Erstellen Sie einen Styleguide, um die Konsistenz und Vorhersehbarkeit der Designelemente sicherzustellen.
• Richten Sie Variablen ein, um die Entwicklung zu optimieren und die Effizienz zu steigern
• Priorisieren Sie die Barrierefreiheit von Anfang an, um integrative und benutzerfreundliche Websites zu erstellen.

Phase 2 – Direkte Entwicklung

• Fügen Sie Programmierkenntnisse als wertvolle Fähigkeit hinzu, um endlose Möglichkeiten in der Webentwicklung zu erschließen.
• Verwenden Sie Webflow-Komponenten als leistungsstarke Tools, um Ihre Projekte zukunftssicher zu machen.
• Organisieren Sie Medienressourcen in Gruppen, um den Zugriff und die Verwaltung zu vereinfachen.
• Pflegen Sie einen Archivordner, um nicht verwendete Elemente für die spätere Verwendung zu speichern.

Etappe 3 - Zielgerade

• Bereinigen Sie nicht verwendete Elemente und Assets, um die Projektleistung zu optimieren.
• Erstellen Sie einen Kundenleitfaden, um eine reibungslose Übergabe und Kundenverwaltung zu ermöglichen.
• Speichern Sie ein aussagekräftiges sogenanntes Backup Ihrer Projekte, um sich vor Datenverlust zu schützen und Kontinuität zu gewährleisten.

Die Übernahme bewährter Methoden ist für die Maximierung der Effizienz und Produktivität bei der Webflow-Entwicklung unerlässlich. Wenn Sie diesem Ansatz folgen, sparen Sie nicht nur Zeit bei sich wiederholenden Aufgaben, sondern setzen auch wertvolle Ressourcen für Entspannung, Selbstentwicklung und die Erstellung innovativer Projekte frei. Lassen Sie uns unsere Arbeitsabläufe transformieren und unserer Kreativität freien Lauf lassen, um noch coolere Dinge zu bauen.

Danke fürs Lesen!

Ich teile gerne meine Gedanken und Erfahrungen, um anderen Entwicklern das Leben zu erleichtern. Indem ich mein Wissen mitteile, hoffe ich, den Entwicklungsprozess reibungsloser zu gestalten und bessere Erfahrungen für alle zu schaffen.