Hinter den Kulissen einer neuen Website
Ein Überblick über das Verfahren. Worum geht es?
Zur Erstellung einer neuen Website gehört mehr als nur die Eingabe eines Codes. Wir hören oft den Kommentar: "Ist es nicht nur eine Frage der Eingabe eines Codes?" Nun, nein. Die Entwicklung einer Website erfordert die Zusammenarbeit zwischen einem Designer und einem Front-End-Entwickler, die beide unterschiedliche Aufgaben haben.
Werfen wir einen Blick hinter (oder in!) die Kulissen und entdecken wir, worum es geht. Zunächst einmal ist es nützlich zu wissen, dass der Webdesigner und der Webentwickler die Arbeit an einer Website erledigen.
Webdesigner konzentrieren sich auf das Design, indem sie die Anforderungen des Kunden in eine funktionelle, klare und benutzerfreundliche Website mit einem angemessenen Design umsetzen.
Webentwickler kümmern sich dann um das Front-End (den sichtbaren Teil) und das Back-End (die Funktionalität) der Website. Sie sorgen dafür, dass das Webdesign tatsächlich gebaut wird und als funktionierende Website funktioniert, indem sie verschiedene Frameworks und Codes verwenden.
Schritt 1: Startschuss
Das Projektteam legt die Ziele und die Strategie für die Website fest. Es werden technische Herausforderungen, der Umfang von Texten und Inhalten, Mehrsprachigkeit, die Einrichtung von Website-Bereichen für künftige Kampagnen und vieles mehr besprochen. Erst nach dieser Feinabstimmung kann das Team wie geplant mit der Arbeit beginnen.
Schritt 2: Struktur der Website
Um die Navigation und den Inhalt festzulegen, wird eine Sitemap und/oder ein Wireframe erstellt. So können wir dem Kunden die Struktur klar aufzeigen.
Die Sitemap, die mit dem Online-Tool Coggle erstellt wird, bietet eine Baumstruktur aller Teile der Website. Man kann sie sich auch als eine Art Mindmap vorstellen.
Der in Figma entworfene Wireframe ist eine visuelle Blaupause, die das Skelett der Website zeigt. Für den Kunden zeigt es auch, wie die Kopfzeile aussehen wird und wo sich die CTA-Schaltflächen (Call-to-Action) befinden werden.
Schritt 3: Start der Website
Nach der Genehmigung des Designs macht sich der Front-End-Entwickler an die Arbeit. Domainname, Webserver mit Datenbank und Umbraco CMS werden eingerichtet. Versionskontrolle (GIT), uSkinned und OTAP sorgen für eine organisierte Entwicklungsumgebung.
- Domänenname, die URL Ihrer Website. Beispiel: ikwileenwebsite.nl. Manchmal haben Sie einen schönen Namen für Ihre Website im Kopf, aber er ist bereits vergeben. Wir können dies überprüfen und, wenn ein Name noch nicht vergeben ist, kaufen wir ihn sofort für Sie.
- Umbraco CMS ist ein Content Management System, mit dem wir eine Webseite bearbeiten und verwalten können. Es ist benutzerfreundlich und gut gesichert. Mit diesem CMS können Sie Ihre Website leicht pflegen: Texte oder Fotos bearbeiten, die Struktur ändern usw.
- GIT ist ein Versionskontrollsystem. Die Versionskontrolle ist ein System, in dem Änderungen an einer Datei oder einer Gruppe von Dateien im Laufe der Zeit verfolgt werden, so dass Sie später bestimmte Versionen abrufen können.
- uSkinned ist ein Theme-Framework mit Komponenten, die wir in Verbindung mit Umbraco verwenden. Denken Sie an Blöcke für Banner, CTAs, Text, Foto-/Videogalerie usw., die voreingestellt sind. uSkinned ist ein Tool für Frontend-Entwickler.
- OTAP steht für Entwicklung, Test, Akzeptanz und Produktion. Stellen Sie sich das wie 4 separate Websites vor. Hier starten wir automatisierte Aufträge und Prozesse zur Aktualisierung der Website-Umgebungen. Die Entwicklungs- und Testserver werden intern betrieben und sind für die Außenwelt nicht sichtbar. Die Abnahmeserver (Testumgebung, nur für den Kunden) und Produktionsserver (Live-Website, für alle sichtbar) laufen bei einem externen Hosting-Anbieter. Haben wir intern Änderungen vorgenommen, die wir Ihnen, dem Kunden, zur Genehmigung vorlegen können? Dann stellen wir diese bereit auf die Testumgebung. Mit dieser OTAP-Straße verfügen wir über ein internes und externes Backup-System und können zum Beispiel einen Fehler auf dem Entwicklungsserver beheben, ohne dass die Live-Website davon betroffen ist.
Sind Sie neugierig, was wir für Sie im Bereich der Webentwicklung tun können?
Schritt 4: Aufbau einer Website
Über GIT wird das grundlegende Umbraco CMS abgerufen. Mit einem angepassten Theme von uSkinned, programmiert in HTML/CSS und Javascript (hauptsächlich in Visual Studio und Visual Studio Code (VS Code), wird die Website erstellt. Der Styleguide wird integriert, einschließlich der Hausstilelemente und aller notwendigen Komponenten entsprechend dem Design.
Der Frontend-Entwickler sorgt dafür, dass der gesamte Styleguide, auch als "Spülbecken" bezeichnet, in die Website integriert wird. Das bedeutet, dass alle Elemente der Corporate Identity, wie Farben, Logos und Schriftarten, integriert werden. Darüber hinaus werden alle erforderlichen Komponenten erstellt, einschließlich Kopfzeilen, Banner, CTAs, Textblöcke und mehr. Kurz gesagt, alles, was der Webdesigner entworfen und eingerichtet hat.
Anschließend werden die Seitenvorlagen entsprechend den Vorgaben in der Sitemap oder dem Wireframe erstellt. Zu diesem Zeitpunkt wird genau das gebaut, was sich der Designer ausgedacht hat und was die Besucher der Website bald erleben werden. Wichtig: Oft enthalten diese Vorlagen noch vorläufige Texte und Bilder. Das hängt davon ab, wer für die Platzierung der endgültigen Texte und Bilder verantwortlich ist: der Kunde oder unser Team.
Ziele & Strategie \ Technische Herausforderungen \ Copy & Content \ Ziele & Strategie \ Technische Herausforderungen \ Copy & Content \ Ziele & Strategie \ Technische Herausforderungen \ Copy & Content \ Ziele & Strategie \ Technische Herausforderungen \ Copy & Content \ Ziele & Strategie \ Technische Herausforderungen \ Copy & Content \ Ziele & Strategie \ Technische Herausforderungen \ Copy & Content \ Ziele & Strategie \ Technische Herausforderungen \ Copy & Content \ Ziele & Strategie \ Technische Herausforderungen \ Copy & Content \
Schritt 5: CMS-Kurs
Optional kann der Kunde vor der Befüllung der Website einen CMS-Kurs belegen. Während des Kurses lernt der Kunde, wie das Umbraco CMS funktioniert, wie man Texte bearbeitet, Bilder und Videos platziert, Seiten erstellt und mehr. Wir können dies für Sie erledigen und pflegen, aber es ist auch möglich, dass Sie dies ganz oder teilweise selbst tun.
Wie viel Spaß macht es, die eigene Website aktiv zu gestalten und auch nach dem Livegang noch selbst Anpassungen vornehmen zu können? Während des Kurses werden wir Ihnen Folgendes beibringen:
- Wie Umbraco CMS funktioniert
- Texte individuell gestalten
- Veröffentlichung von Fotos und Videos
- Links erstellen
- Hinzufügen neuer Seiten
- Veröffentlichung von Nachrichten, Projekten und Fällen
- Anpassen des Menüs
- Kontaktformulare bearbeiten/ansehen
- Implementierung verschiedener Komponenten
- Eine kurze Erklärung, worauf man bei SEO achten sollte
Haben Sie Interesse, an diesem Kurs teilzunehmen? Dann kontaktieren Sie uns, wir helfen Ihnen gerne weiter!
Schritt 6: Inhalt ausfüllen
Der nächste Schritt besteht darin, die Website mit Texten (Copy) und Bildern (Content) zu versehen. Dies wird oft vom Frontend-Entwickler erledigt, aber der Kunde kann dies auch leicht selbst im Umbraco CMS erledigen. Das Befüllen ist an sich nicht besonders komplex, aber es wird oft unterschätzt, dass dieser Aspekt einfach viel Zeit in Anspruch nimmt (natürlich abhängig von der Größe der Website).
Welche Teile der Seite verdienen immer eine "doppelte Kontrolle"?
- Seitenname/Nachrichtentitel
- Überschriften auf der Seite
- Texte
- Bilder (falls zutreffend)
- Call-to-Action-Blöcke (CTA) wie z. B. "Kontaktieren Sie uns" oder "Rufen Sie uns an".
- Links zwischen Seiten
- SEO-Richtlinien und Schlüsselwörter (falls zutreffend)
Schritt 7: Live-Schaltung
Bevor die Website online geht, werden Weiterleitungen eingerichtet und eine gründliche Prüfung vorgenommen. Redirect" steht für Umleitung und ist ein Begriff, der angibt, dass eine Webseite nichts anderes tut, als auf eine andere Seite umzuleiten. Wenn Sie beispielsweise direkt nach einer Seite suchen, die bereits entfernt wurde, erhalten Sie eine Fehlermeldung, es sei denn, es wurde eine Weiterleitung eingerichtet, die eine alte URL auf die aktualisierte Seite weiterleitet.
Anschließend wird die gesamte Website noch einmal anhand einer Checkliste überprüft. Nicht nur die Person, die die Website erstellt hat, sondern auch ein anderer Entwickler prüft zum Beispiel die Funktionalität auf verschiedenen Geräten, unterschiedliche Auflösungen, die Geschwindigkeit, das korrekte Funktionieren der Kontaktformulare, den korrekten Inhalt, Weiterleitungen, Suchfunktionen und mehr. Sobald alles genehmigt ist, geht die Website online. Party!
Nach der Lieferung geht es weiter: Hosting, Überwachung und Wartung sorgen dafür, dass die Website in einem Top-Zustand bleibt. Der Support wird über verschiedene Abonnements angeboten. Lesen Sie hier mehr über unsere Hosting- und SLA-Pakete. Nicht unwichtig ist natürlich, dass wir auch danach Support anbieten, wofür wir verschiedene Abonnements haben. Stoßen Sie auf einen Fehler oder möchten Sie etwas anpassen lassen? Dann finden wir gemeinsam immer die richtige Lösung.
Möchten auch Sie eine neue oder maßgeschneiderte Website? Nehmen Sie Kontakt mit uns auf!
Kontakt
Wir würden uns freuen, von Ihnen zu hören
Arne
Geschäftsführender Direktor