Webseite leicht gemacht

von

Tipps und Tricks für Anfänger oder die, die nicht so viel Zeit haben.

Webdesign mit einem Pagebuilder interessiert mich, sodass ich für meinen Bruder (einen Schweizer Biathleten) eine Webseite erstellt habe. Obwohl ich anfangs keinerlei Vorkenntnisse hatte, konnte ich dabei wertvolle Erfahrungen sammeln. Im Laufe der Zeit habe ich viele Dinge gelernt, von denen ich wünschte, ich hätte sie bereits zu Beginn gewusst, da sie mir viele Stunden erspart hätten. In diesem Beitrag teile ich deshalb die wichtigsten Erkenntnisse, die man bei der Erstellung einer einfachen Webseite beachten sollte.

Zu meiner erstellten Webseite

joschaburkhalter.ch

Erste Schritte

  1. Domain
    • Auswahl und Registrierung eines Domainnamens bei einem Hosting-Anbieter. (z.B. Hosttech)
  2. Hosting-Paket
    • Auswahl eines Hosting-Pakets (z.B. Hosting Special)
  3. Installation WordPress
    • Über das hosttech-Dashboard kann die Installation von WordPress durchgeführt werden. Viele Hosting-Anbieter bieten eine Ein-Klick-Installation für WordPress an, was den Prozess erheblich vereinfacht.
  4. Einstellungen im Control Panel
    • SSL-Zertifikat
    • Datenbank und DatenbanknutzerIn im Control Panel erstellen
      •  Im Bereich „Datenbanken“ auf „MySQL-Datenbanken“ eine neue Datenbank anlegen und ihr einen passenden Namen geben.
      • Einen neuen Benutzer erstellen, dann der zuvor erstellten Datenbank zuweisen, ein sicheres Passwort festlegen und ihm alle Berechtigungen erteilen.
    • Datenbankverbindung unter Dateien im ‘wp-config.php’ File herstellen, indem folgender Abschnitt bearbeitet wird.
      • define(‹DB_NAME›, ‹deine_datenbank_name›);
      • define(‹DB_USER›, ‹dein_datenbank_benutzer›);
      • define(‹DB_PASSWORD›, ‹dein_datenbank_passwort›);
      • define(‹DB_HOST›, ‹localhost›); // oder der spezifische Hostname deines Providers
  5. WordPress-Einstellungen
    • Website-Titel und Untertitel festgelegt.
    • Permalink-Struktur angepasst (empfohlen wird „Beitragsname“).
    • Zeitzone, Datum und Zeitformate usw.
  6. Elementor installieren
  7. Theme auswählen
  8. Seiten erstellen, evtl. Templates benutzen
    • Home, About, Contact usw.
    • Impressum und Datenschutz (Vorlagen im Internet)
  9. Gestalten
    • Elemente und Widgets hinzugefügt (Texte, Bilder, Buttons, Formulare etc.).
    • Design und Layouts festgelegt (Farben, Schriftarten, Abstände etc.)
    • Responsives Design machen
  10. Feinschliff
    • Navigation erstellen (Backend: Design -> Menü)
    • Links, Buttons usw. testen

Good to know

  1. Regelmässige Backups und Updates der Plugins (können automatisch eingestellt werden)
  2. Templates von Elementor nutzen
  3. Elementor auf Englisch einstellen, damit sind einfacher Tutorials auf Youtube zu finden
  4. Responsives Design beachten
  5. Suchmaschinenoptimierung mit Plugin (z.B. Yoast SEO)
  6. Performance verbessern und Ladezeiten verkürzen mit Plugin (z.B. WP Super Cache / W3 Total Cache)
  7. Bilder komprimieren (Smush / ShortPixel) ohne Qualitätsverlust
  8. Sicherheits-Plugins (Wordfence / Sucuri), um vor Hackerangriffen zu schützen
  9. E-Mail erstellen (info@deinedomain.ch)

Logo

  • Erstelle ein simples Logo z.B. aus Buchstaben des Namens und/oder der Unternehmenstätigkeit.

Design

  • Entscheide dich am Anfang bereits für 4-5 Farben, die du nutzen möchtest. Beachte dabei, dass gerade für Buttons und Text der Kontrast klar ist. 
  • Schreibe im Voraus deine Texte, die auf die Webseite müssen. Überlege dir auch aussagekräftige Stichworte, die du evtl. als eigene Elemente und/oder mit Icons einbauen kannst. Beachte dabei unbedingt, dass heutzutage nicht mehr gerne lange gelesen wird.

Struktur

  • Überlege dir eine grobe Struktur der Inhalte. Wie viele Unterseiten möchtest du?
  • Welche Texte können mit Icons oder aufklappbaren Elementen dargestellt werden?
  • Habe Fotos und Bilder bereit, die deine Webseite und Botschaft unterstützen

No Go’s

1. Zu viele Plugins installieren
2. Unsichere Plugins verwenden
3. Designüberladung und unprofessionelle Schriftarten
4. Fehlende Backups
5. Keine Bildoptimierung -> führt zu langer Ladezeit der Webseite
6. Inaktuelle Inhalte
7. Installation von Elementor -> elementor.com -> Abo bestellen -> zip-datei herunterladen -> zip-datei im Plugin-Bereich bei «neu erstellen» hochladen

(pru)

Anfangsphase
Es fing damit an, dass eine Freundin für mich (damals noch im Leistungssport) eine Webseite aufgesetzt hat. Ich begann dann, aus eigenem Interesse, die Webseite zu verwalten, Dinge auszuprobieren und fand schnell Spass daran. Anfangs war ich von der Vielzahl an Informationen und Möglichkeiten überwältigt, aber dank YouTube-Videos und meinen grundlegenden HTML/CSS-Kenntnissen aus der Schule konnte ich mich rasch einarbeiten.
Zur gleichen Zeit hatte mein Bruder bereits eine Webseite bei einem anderen Anbieter, allerdings nicht kostenlos. Ich übernahm den Domaintransfer sowie den Aufbau, die Gestaltung und die Betreuung seiner neuen Webseite. Die ersten Schritte bestanden darin, die positiven Aspekte der alten Webseite zu übernehmen, wie die meisten Texte, und die negativen zu ändern, wie die fehlende Einbindung von Instagram.
Einige der grössten Herausforderungen ergaben sich bei der technischen Umsetzung. Die Einrichtung der Datenbank und das Bearbeiten der wp-config.php-Datei erforderten mehr technisches Wissen, als ich zunächst erwartet hatte. Doch mit Hilfe des Hostings und viel Geduld konnte ich diese Hürde meistern. Der Domaintransfer stellte sich als schwieriger heraus als gedacht, weil ich noch nicht wusste, wie man eine Datenbankverbindung herstellt und dass man eigentlich ausser dieser Verbindung nichts im Code verändern darf. Oft funktionierte nichts mehr, und das letzte Backup war schon zu lange her, so dass ich Einiges mehrmals machen musste. Zum Glück konnte mir das Servicecenter von Hosttech immer wieder helfen.
Ausserdem habe ich viel Zeit in das Ausprobieren von Farben, Schriftarten und Bildern investiert oder auch verloren. Zukünftig überlege ich mir von Beginn an die Farben und Schriften.

Fazit
Rückblickend war der Prozess unglaublich lehrreich und hat Spass gemacht. Da ich keinen grossen Zeitdruck hatte, konnte ich viel ausprobieren und Zeit investieren, obwohl es trotzdem einige Nachtschichten gab. Ich habe viel über Webdesign, SEO und Performance-Optimierung gelernt. Diese Kenntnisse sind nicht nur für die aktuelle Webseite wertvoll, sondern auch für zukünftige Projekte.
Geduld war einer der wichtigsten Aspekte. Nicht alles verlief nach Plan, und es gab zahlreiche frustrierende Momente. Doch mit Ausdauer und dem Willen, Probleme zu lösen, konnte ich meinem Bruder eine tolle Webseite erstellen.