So erstellen Sie zum ersten Mal eine beeindruckende Website

OK, Sie wissen also, dass Sie eine Website erstellen möchten. Sie haben eine Idee, wie es aussehen soll und welche Inhalte angezeigt werden sollen. Sie sind sicher, dass es schnell und ansprechend sein, viel Halt finden und viele Besucher anziehen sollte. Aber wie schafft man das? Welche Trends gibt es heutzutage beim Erstellen von Websites? Wie bauen andere erfolgreiche Websites und wo sollten SIE anfangen? Verschaffen Sie sich einen Vorsprung!

Bevor Sie loslegen, ist es wichtig zu verstehen, was Sie bauen. Bei einer großen Unternehmenswebsite ist der Ansatz anders als bei einer Website für das Geschäft Ihrer Eltern oder für das Blog Ihres Hundes. Überlegen Sie sich zunächst, was Sie mit der Website erreichen möchten.

In dieser Artikelserie werde ich alle Schritte mit Ihnen verfolgen. Lassen Sie mich mit dem ersten beginnen.

Ich werde meine persönliche Website erstellen. Ich hatte noch nie eine persönliche Website, da ich mich nie der Außenwelt präsentieren musste. Aber heutzutage glaube ich, dass es schön sein wird, einen einzigen Ort zu haben, an dem ich alle meine Blogs (oder Links) und andere Informationen zusammenfassen kann. Es wird auch jedem leicht gemacht, mit mir in Kontakt zu treten. So können Sie sehen, was meine Ziele sind:

  • Schön aussehende Website, um mich selbst darzustellen
  • Listen Sie alle meine Blogs und andere Informationen auf
  • Ermöglichen Sie einfachen Kontakt

Ihre Ziele könnten sehr ähnlich sein, aber auch Dinge wie "Anzahl der Besucher" oder "Conversion-Verhältnis" umfassen. Notieren Sie diese, damit Sie später noch einmal nachsehen können, wie erfolgreich Ihre Website ist.

Beginnen Sie mit der Website-Struktur

Bevor wir alle verfügbaren Technologien vergleichen und versuchen, die für unser Szenario am besten geeigneten auszuwählen, beginnen wir mit dem Aussehen. Ich beginne mit meiner Website auf einer grünen Wiese. Das heißt, ich habe eine Vorstellung davon, was ich will, aber noch keinen Inhalt und keine Grafikvorlagen.

Inhalte vorbereiten

Zunächst ist es wichtig, zumindest eine grundlegende Vorstellung davon zu haben, was Sie auf Ihrer Website präsentieren möchten. Wenn Sie mit der Definition von Inhalten beginnen, beginnen Sie zu visualisieren, wie die Website-Struktur aussehen wird. Das ist der Schlüssel zu gutem Design. Mal sehen, welchen Inhalt ich auf meiner Website präsentieren möchte:

  • Einige Absätze von Text über mich
  • Liste meiner neuesten Blog-Beiträge
  • Liste meiner neuesten Tweets (optional)

Website design

Als Nächstes müssen Sie das Design der Website festlegen.

Sie können sich entweder an ein lokales Grafikdesignerstudio wenden und das Website-Design erstellen lassen, das Ihren Wünschen und Zielen entspricht, oder Sie können online nach einer Vorlage suchen. Wenn Sie Ziele festlegen, die die Conversion Ratio oder andere wichtige Aspekte der Nutzererfahrung in direktem Zusammenhang mit dem Website-Design beinhalten, sind Sie mit einem Grafikdesigner besser dran. Sie können ein spezielles Design für Sie erstellen, das auf Ihren Anforderungen und Zielen basiert.

Auf der anderen Seite baue ich eine einfache Profil-Website. Es sollte zwar modern und attraktiv aussehen, muss aber keine Einnahmen generieren. So kann ich diese Website-Design-Entscheidung auf mein persönliches Gefühl stützen. Deshalb bin ich zu HTML5UP.net gegangen und habe ein paar Designvorlagen geöffnet. Alle diese Designs sprechen an, sind cool und einfach anzupassen. Nachdem ich verschiedene Optionen geprüft hatte, entschied ich mich für die Solid State-Vorlage. Nehmen Sie sich Zeit und suchen Sie sich eine aus, die Ihnen Gänsehaut verleiht :-).

Wenn Sie die Liste der Inhalte kennen, bevor Sie mit dem Anzeigen von Vorlagen beginnen, können Sie viele Vorlagen entfernen, die nicht Ihren Zielen entsprechen, z. B. Vorlagen für persönliche Karten oder Fotogalerien.

Besucherreise durch Ihre Website

Die Auswahl eines Website-Designs ist ein aufregender Schritt bei der Erstellung Ihrer Website, da Sie endlich wissen, wie Ihr Meisterwerk aussehen wird! Bevor wir jedoch weitermachen, ist es eine sehr gute Idee, den zuvor angegebenen Inhalt mit der Entwurfsvorlage zusammenzustellen. Alle Vorlagen enthalten in der Regel Listen verwendbarer Elemente wie Raster, Tabellen, Absätze, Seitenrahmen usw. Diese Elemente bilden zusammen mit Ihrem Inhalt Ihre Website.

Ich habe mich für 3 einfache Seiten entschieden. In Ihrem Fall erhalten Sie möglicherweise auch eine Website mit nur einer Seite.

  • Homepage - Hauptzielseite, die ein kurzes Intro über mich, einige meiner letzten Artikel und ein Kontaktformular in der Fußzeile enthält
  • Info - Seite mit meiner vollständigen Lebensgeschichte
  • Blog - Liste aller von mir veröffentlichten Blog-Beiträge
Definierte Struktur meiner persönlichen Website

Auf diese Weise kann ich die HTML-Vorlagen in ihre endgültige Form vorbereiten. Im Laufe der Zeit habe ich gelernt, dass mehr Zeit hier verbracht und alle meine Seiten und deren erwarteten Inhalte festgehalten werden. Dies spart viel Zeit bei der tatsächlichen Implementierung.

Haben Sie eine HTML-Website-Vorlage heruntergeladen? Dann machen Sie Ihre Vorlagen fertig!

Website-Struktur kombiniert mit der gewählten Vorlage

Website-Technologie

Jetzt haben wir die Struktur unserer neuen Websites vorbereitet und die ausgewählte HTML-Vorlage in mehrere Seiten aufgeteilt. Gut gemacht! Das gibt uns eine ziemlich gute Vorstellung von Inhalt und Design der Website. Wenn Sie mich vor 15 Jahren gefragt hätten, hätte ich Ihnen gesagt, dass ich mich in diesem Stadium als erledigt betrachte und mit dem Einsatz fortfahren würde. Ich kannte damals keine Programmiersprache. Als ich der Website eine neue Seite hinzufügte, musste ich alle meine anderen Seiten ändern, um darauf zu verweisen. Klingt nach viel Handarbeit, oder? Nun, das war es. Aber ich hatte zu viel Angst zu lernen und hatte keine Ahnung, wo ich anfangen sollte. Jedes Tutorial schien einfach zu lang und kompliziert.

Zum Glück ist diese Zeit lange vorbei. Es ist heutzutage so einfach, Ihre Website dynamisch zu gestalten! Lassen Sie sich also von mir zeigen, welche Optionen Sie haben, und wählen Sie eine davon aus.

1. Benutzerdefinierte Logik

Bei einem benutzerdefinierten Logikansatz müssen Sie die gesamte Logik selbst implementieren. Zunächst müssten Sie einen Webserver (wie Apache oder IIS) auf Ihrem Computer installieren. Sie müssen eine Programmiersprache wie PHP auswählen und auf dem Server - Ihrem Computer - installieren. Und schließlich kommt die Datenbank wie MySQL mit ihrem Laufzeit-Connector. Natürlich können all diese Schritte mit einem der vorbereiteten Pakete automatisiert werden, die all das automatisch installieren, wie XAMPP oder WAMP.

In der Vergangenheit habe ich diesen Ansatz immer bevorzugt. Die Sprache (in meinem Fall PHP) war einfach, zumindest die Grundlagen, und ich mochte es, den gesamten Code zu besitzen. Die Ersteinrichtung nimmt jedoch viel Zeit in Anspruch und Sie müssen alles selbst implementieren. Es gibt Frameworks (wie Nette), die Ihnen dabei helfen können, aber Sie müssen darüber hinaus noch die Sprache und das Framework lernen. Wenn Sie eine so erstellte Website hochladen möchten, müssen alle diese Komponenten (Webserver, Laufzeit, Datenbank) von Ihrem Hosting-Partner bereitgestellt werden.

2. All-in-One-Lösung

Aber Sie sind nicht der einzige, der eine Website erstellt, oder? Es muss viele andere geben, die dasselbe tun. Ja, das gibt es. Um dies zu beschleunigen, können Sie das Content Management System (CMS) verwenden. Im Allgemeinen laufen sie auf demselben Stapel von Technologien wie oben beschrieben, sodass Sie diese Voraussetzungen weiterhin auf Ihrem Computer installieren müssen und weiterhin denselben Hosting-Speicherplatz benötigen. Dies sind beispielsweise Wordpress, Drupal und andere, die unter PHP und MySQL ausgeführt werden, oder Kentico EMS, das unter .NET Framework ausgeführt wird.

Wenn Sie sie installieren, wird Ihnen eine Administrationsoberfläche für Ihre (leere) Website angezeigt. Über diese Oberfläche können Sie entweder eine Vorlage für Ihre Site auswählen oder Ihre Vorlagen mit dynamischen Funktionen erweitern.

Auf diese Weise können Sie sich zwar schnell einarbeiten, diese Systeme beschränken Sie jedoch in der Regel auf verschiedene Arten, z. B. wie das Ausgabe-HTML aussehen wird, wie Komponenten erstellt werden und welche Technologien Sie verwenden können. Sie müssen auch lernen, wie Sie mit dem System selbst arbeiten.

3. Microservice-Architektur

Die beiden genannten Ansätze sind zwar robust und eine Art Standard in der Branche, das wirkt ihnen jedoch manchmal entgegen. Schauen Sie sich den Technologie-Stack an, den Sie auf Ihrem Computer installieren müssen, bevor Sie einen einzelnen Codeblock schreiben können. Ihre Robustheit bedeutet auch, dass Ihr Hosting-Bereich mit einer angemessenen Leistung ausgestattet werden muss, um alle unterstützenden Bibliotheken und Tools zu unterstützen, die die Funktionalität sicherstellen. Und mit Standard-CMS-Systemen nutzen Sie in der Regel nicht einmal den größten Teil ihrer Funktionen (für die Sie möglicherweise auch viel Geld bezahlen).

Selbst gehostete Standard-All-in-One-Lösung

Die Microservice-Architektur hilft bei diesen Unannehmlichkeiten. Es ist eine gute Möglichkeit, mehr Zeit mit Bier in der Hand zu verbringen, als die Nächte mit dem Debuggen des Codes eines anderen zu verbringen. Wie funktioniert das?

Schauen wir uns an, wie wir alle einkaufen. Wenn ich einkaufen gehe - ähm, wenn meine Freundin auf dem Heimweg einkaufen geht, landet sie in einem großen Supermarkt in der Nähe unseres Wohnortes. Sie verbrachte immer so viel Zeit dort und kaufte eine Menge Dinge, die sie nicht wirklich brauchte, nur weil sie irgendwie auf ihrem Weg waren. Nachdem ihr Wagen voll war, verbrachte sie eine weitere Viertelstunde an der Kasse und fuhr mit beiden Händen nach Hause.

Noch vor wenigen Monaten gab es einen Brand und der Markt musste für etwa zwei Wochen geschlossen werden. Das war ein Problem für uns, da wir an ihre Produkte und Angebote gewöhnt waren und obwohl andere Märkte nicht so weit entfernt waren, fühlten wir uns unwohl, woanders hinzugehen.

In diesen Tagen machen wir es anders. Wir kaufen immer noch auf dem großen Markt ein, aber den Rest bekommen wir in der Stadt auf dem Weg nach Hause. Wir beziehen Obst und Gemüse vom Bauernmarkt, Fleisch vom örtlichen Metzger und kaufen online Hygieneartikel und Hundefutter. Wir haben herausgefunden, dass wir dadurch die Qualität und Verfügbarkeit besser kontrollieren können. Wenn ein Lieferant nicht liefert, können wir problemlos zu einem anderen wechseln.

Die Microservice-Architektur ist sehr ähnlich. Anstatt ein einziges großes System oder Programm (wie ein herkömmliches CMS) zu verwenden, können Sie mehrere Systeme verbinden, die sich nicht nur auf ein bestimmtes Problem konzentrieren.

Microservice-Architektur, die hauptsächlich aus SaaS-Diensten besteht

In meinem Fall sieht es aus wie auf dem Bild oben. Meine Website ist das Zentrum aller Systeme. Ich werde weiterhin meinen Hosting-Anbieter verwenden, um statische Dateien meiner Website mit Ausnahme von Bildern bereitzustellen. Bilder und Inhalte werden von einem Content-Service (API First Content Hub wie Kentico Cloud) in der Mitte bereitgestellt. Eine Liste meiner letzten Blog-Beiträge kann entweder anhand von Daten aus dem Inhaltsdienst oder durch Abrufen meiner neuesten Tweets über den Twitter-Dienst erstellt werden. Last but not least handelt es sich um Front-End-Ressourcen, die über das Content Delivery Network verfügbar sind. Aber wir werden später darauf zurückkommen.

Sie sehen, die Funktionalität ist nicht länger ein einziges großes Stück Code. Es ist schön in kleinere Blöcke aufgeteilt. Das heißt, es wird sein:

  • Einfach, schnell und macht Spaß, sie alle zusammenzusetzen
  • leicht zu debuggen mögliche Probleme
  • kostengünstig, da die Dienste häufig kostenlose Tarife anbieten

Wenn ein Dienstanbieter keine Ergebnisse liefert, ist es kein Problem, zu einem anderen zu wechseln. Na außer bei Twitter :-).

Erinnern Sie sich, wie es war, als Sie an einem großen Code, den Sie ein Jahr lang nicht berührt haben, etwas ändern mussten? Das haben wir alle schon durchgemacht. Mit microservices können Sie schnell eine Ursache für ein Problem finden und es sofort beheben.

Die richtige Architektur auswählen

Ich bekomme oft Fragen von Entwicklern, welche Vorgehensweise ich verwenden soll. Nun, es gibt kein endgültiges Rezept, es hängt immer von jedem Projekt und seinen Anforderungen ab. Meine Website eignet sich hervorragend für eine Microservice-Architektur, weil:

  • Ich möchte nicht viel Zeit damit verbringen, die lokale und entfernte Umgebung für eine so kleine Site einzurichten
  • Es gibt nicht viele benutzerdefinierte Funktionen
  • Es gibt kein Budget, ich muss so kostengünstig wie möglich sein (keine Lizenz, keine überlegene Hardware usw.)
  • Ich möchte Spaß daran haben, es zu bauen

Finden Sie sich irgendwie mit diesen Punkten ausgerichtet? Dann ist microservice architecture auch für Sie die richtige Wahl.

Bleiben Sie auf dem Laufenden. Im nächsten Artikel werde ich Ihnen zeigen, wie Sie Ihre vorbereiteten HTML-Vorlagen einschalten, JavaScript-Frameworks vergleichen und die beste Methode zum Erstellen von Microservice-basierten Websites erläutern, auch wenn Sie noch keine Vorkenntnisse haben.

Weitere Artikel der Reihe:

  1. So erstellen Sie zum ersten Mal eine beeindruckende Website
  2. Wie können Sie die beste Technologie für Ihre Website auswählen?
  3. So schalten Sie Ihre Website mit Vue.js mit minimalem Aufwand ein
  4. Mischen von Headless CMS mit einer Vue.js-Website und Pay Zero
  5. So sichern Sie Formularübermittlungen auf einer API-Website
  6. Das Erstellen einer superschnellen und sicheren Website mit einem CMS ist keine große Sache. Oder ist es?
  7. So generieren Sie mit Vue.js in kürzester Zeit eine statische Website
  8. So richten Sie schnell einen Erstellungsprozess für eine statische Site ein