So gestalten Sie eine WordPress-Website neu: die ultimative Checkliste

Aaah, das Redesign einer WordPress-Website…

Wenn Sie an die verschiedenen Probleme denken, die diese Mission mit sich bringt, neigen Sie normalerweise dazu, etwas zu stressen.

Wer träumt in diesem entscheidenden Moment nicht davon, auf seinem Server einen einfachen Befehl + Option + Escape oder Strg + Alt + Entf auszuführen und einfach von vorne zu beginnen?

Leider ist die Neugestaltung Ihrer Website immer etwas komplexer . Und ein Versehen, ein Fehler, ein Fehler passiert so schnell…

WPMarmite wollte seine Best Practices mit Ihnen teilen, um dieses große Projekt beruhigt anzugehen.

Sind Sie bereit? In diesem Beitrag beschreibe ich alle Elemente, an die Sie denken müssen, um Ihre WordPress-Website neu zu gestalten , von der Upstream-Strategie bis zum Online-Launch.

Ihre besten WordPress-Projekte brauchen den besten Host!

WPMarmite empfiehlt Bluehost: großartige Leistung, großartiger Support. Alles, was Sie für einen guten Start brauchen.

Versuchen Sie es mit Bluehost

Um zu erfahren, wie man eine WordPress-Website von Grund auf neu erstellt, lesen Sie unseren vollständigen Leitfaden .

Die 4 Schritte vor dem Redesign Ihrer WordPress-Website

Bevor Sie WordPress überhaupt in die Hände bekommen, um Ihre Website neu zu gestalten, müssen Sie an verschiedenen Strukturelementen arbeiten.

Richtig: Sie hätten nicht gedacht, dass Sie loslegen würden, ohne zu wissen, worauf Sie sich einlassen?

1. Legen Sie die Ziele Ihres Redesigns fest

Wie bei jedem Projekt braucht es auch bei der Neugestaltung einer WordPress-Website Ziele, die genau definiert werden müssen (egal ob Freelancer, Webagentur oder nicht professioneller Webmaster).
Es sind diese klaren und prägnanten Ziele, die Ihre nächsten Schritte leiten werden .

Es kommt darauf an, sich folgende Frage zu stellen: Warum möchten Sie Ihre Website neu gestalten? Dafür kann es viele Gründe geben:

• Ändern Sie das Design Ihrer Website , indem Sie ein neues Design auswählen oder sich für einen Seitenersteller entscheiden.
• Aktualisieren Sie die Verwaltung Ihrer Website . Dies kann der Fall sein, wenn Ihre Plugins oder Ihre Version des WordPress-CMS noch nie aktualisiert wurden, wenn es Konflikte zwischen verschiedenen Plugins gibt oder wenn Ihr Design unregelmäßig geändert wurde. All dies sind Bedenken, die sich auf die Leistung Ihrer Website und ihre tägliche Verwaltung auswirken können.
• Optimieren Sie Ihr SEO . Ein Ziel, das Sie sich stellen sollten, insbesondere wenn Ihr Traffic zurückgegangen ist oder nicht abnimmt, wenn Ihre Benutzererfahrung derzeit wackelig ist oder wenn Ihr HTML-Code nicht für die Roboter von Google optimiert ist.
• Fügen Sie Ihrer Website neue Funktionen hinzu, die Ihr aktuelles Design nicht aufnehmen kann. Vielleicht möchten Sie es auch intuitiver und benutzerfreundlicher für Ihre Besucher gestalten.
• Verbessern Sie die technische Struktur Ihrer Website (oder Ihres E-Commerce) , um ihre Sicherheit zu erhöhen, ihre Ladegeschwindigkeit zu verbessern und ihre Baumstruktur zu ändern.
• Migrieren Sie Ihre Website auf einen anderen Webhosting-Server .
• Machen Sie mehr Umsatz , besonders wenn Sie einen WooCommerce-Shop haben.
• Bringen Sie Ihre Website mit der Konkurrenz auf den neuesten Stand , die aktuellere Websites anbietet. Sie werden es nutzen, um Ihr Markenimage und Ihren Ruf zu verbessern.

Schreiben Sie diese unterschiedlichen Ziele in einem gut strukturierten Dokument auf. Sie werden sehen, dass sie strukturierende Elemente darstellen, um Ihr Website-Redesign zu organisieren.

2. Strukturieren Sie Ihr Redesign-Projekt

Nachdem Sie nun eine klare Vorstellung vom Zweck Ihres Redesigns haben, lassen Sie uns über die verschiedenen Schritte sprechen, die die Hauptlinien Ihres Projekts bestimmen.

Erstellen Sie Ihre Wireframes

Kommt Ihnen der Begriff Wireframes bekannt vor?

Eine schnelle Wiederholung des Themas ist notwendig, da dieser Schritt entscheidend ist.

Wireframes sind strukturelle Modelle, mit denen Sie die verschiedenen Elemente Ihrer Webseiten in einem einzigen Dokument anordnen können.

Die Idee ist wirklich, den Rahmen für die verschiedenen Seiten Ihrer Website festzulegen, um eine klare Vorstellung von der Benutzererfahrung zu haben, die Sie erstellen werden.

Ich habe Ihnen in diesem Artikel ein Beispiel gegeben, und hier ist es noch einmal, um meinen Standpunkt zu veranschaulichen:

Wenn die Millenium Paper + Pencil-Methode für eine leichte Neugestaltung ausreichen kann, empfehle ich Ihnen dennoch, ein digitales Tool zum Entwerfen Ihrer Wireframes zu verwenden.

Auf diese Weise können Sie sie bei Bedarf nicht nur einfach ändern, sondern diese Wireframes auch mit Ihrem Team (oder mit Ihrem Cousin, der im Webmarketing arbeitet) teilen.

Ich kann nur einige Tools empfehlen, um dies zu tun :

• Balsamiq Wireframes : Es ist eine kostenpflichtige Software, aber die kostenlose 30-Tage-Testversion gibt Ihnen viel Zeit, um gut ausgearbeitete Wireframes zu entwerfen.
• MockFlow : Dies ist ein praktisches Freemium-Online-Tool. Mit der kostenlosen Version können Sie zunächst bis zu 3 Seiten erstellen.
• Sketch : Eine sehr leistungsstarke kollaborative Webdesign-Plattform, vorausgesetzt, Sie wissen, wie man sie richtig verwendet. Es bietet eine kostenlose 30-Tage-Testversion und dann ein kostenpflichtiges Angebot ab 9 $/Monat.
• Canva : Es ist kein Tool für Wireframing, aber dank seiner zahlreichen Funktionen können Sie sich ihm nähern. Und vor allem hat es eine kostenlose Version mit vielen Funktionen.

Und an diesem Punkt haben Sie eine klarere Vorstellung davon, was Sie von der Neugestaltung Ihrer WordPress-Website erwarten können.

Entwerfen Sie Ihre Mockups

Während Wireframes Ihnen eine Vorstellung von der Struktur Ihrer neu gestalteten Seiten geben, integrieren Mockups das Design selbst.

Das Layout Ihrer Webseiten, das über eine Seitenlayout-Software (wie InDesign) erstellt wurde, kann eine gewisse Technik erfordern und ist ein ziemlich zeitaufwändiger Schritt.

Die Frage ist also: Müssen Sie wirklich grafische Mockups für Ihr Redesign erstellen? Die Antwort ist einfach:

• Ja, wenn Sie Ihr eigenes Design erstellen möchten . In diesem Fall müssen Sie Ihre neu gestaltete Website von Grund auf neu gestalten und können so alle grafischen Elemente einfach visualisieren.
• Nein, wenn Sie nur ein vorhandenes Design verwenden und neu gestalten möchten . Eine einfachere Lösung. Achten Sie in diesem Fall jedoch darauf, Ihr neues Thema entsprechend Ihren Zielen auszuwählen.
  Um Ihnen zu helfen, hat WPMarmite die Ressource, die Sie brauchen: eine Liste der besten kostenlosen Themen. Genießen!
  

Schließen Sie sich den WPMarmite-Abonnenten an

Holen Sie sich die letzten WPMarmite-Beiträge (und auch exklusive Ressourcen).

ABONNIERE JETZT

Denken Sie über Ihre neue Baumstruktur nach

Ja, ich versichere Ihnen, wir sprechen immer noch über Website-Redesign, nicht über Gartenbau!

Das Entwerfen Ihrer Baumstruktur bedeutet, sich die Verbindungen vorzustellen, die zwischen den verschiedenen Seiten bestehen werden, und darüber nachzudenken, wie ein Besucher sich auf der Website zurechtfinden kann.

Kurz gesagt: Beim Erstellen Ihrer Baumstruktur denken Sie an die unterschiedlichen Navigationspfade Ihrer Benutzer.

Wie geht das?

Entwerfen Sie eine Baumstruktur und denken Sie daran, Folgendes einzuschließen:

• Ihr Hauptnavigationsmenü sowie Ihre möglichen sekundären Menüs.
• Ihre Fußzeile und die darin möglicherweise enthaltenen Links.
• Ihre möglichen Seitenleisten, insbesondere in Ihrem Blog.
• Die verschiedenen Kategorien Ihres Blogs etc.

Mit einem solchen Diagramm können Sie auf keinen Fall vergessen, ein gut ausgearbeitetes Netz zwischen Ihren verschiedenen Seiten zu erstellen, das eine reibungslose Benutzererfahrung gewährleistet.

Genau wie Wireframes können Sie dieses Diagramm auf einem Blatt Papier erstellen oder ein Online-Tool wie GlooMaps oder Octopus verwenden.

Entwerfen Ihrer Spezifikation

Nun, in dieser Phase sind Sie mit strukturierenden Elementen bestens versorgt. Es ist nun an der Zeit, all dies in einem zentralen Dokument zusammenzufassen: einer Spezifikation.

Die Spezifikation Ihres Website-Redesigns ist ein sehr umfangreiches Dokument, das es Ihnen ermöglicht, die unterschiedlichen Erwartungen, die Sie an ein Redesign Ihrer Website haben, gezielt zu berücksichtigen.

Im Internet finden Sie viele Vorlagen für Spezifikationen. Ihre muss jedoch unbedingt enthalten:

• Eine Beschreibung Ihres Webprojekts und Ihres Unternehmens sowie die Rolle, die Ihre Website in diesem Projekt spielt.
• Die Zielgruppe Ihrer neuen Website , möglichst genau beschrieben.
• Die Ziele Ihres Redesigns , so gut wie möglich mit Zahlen illustriert. Wenn eines Ihrer Ziele beispielsweise darin besteht, Ihren Traffic zu erhöhen, denken Sie daran, den Traffic Ihrer aktuellen Website anzugeben.
• Die Elemente, die von Ihrer aktuellen Website wiederhergestellt werden sollen : der Inhalt Ihrer Seiten, die möglichen Bilder usw.
• Die grafischen Pfade, denen Sie folgen möchten . Integrieren Sie dazu Ihre Wireframes und Mock-ups in Ihre Spezifikationen sowie Ihren Styleguide (der Ihre visuelle Identität definiert).
• Die neuen funktionalen Elemente Ihrer neu gestalteten Website, wie z. B. die Hinzufügung eines E-Commerce-Shops, eines Blogs, eines Opt-in-Moduls, einer neuen Verwaltung (Backoffice) usw.
• Die wichtigsten Meilensteine ​​Ihres Redesign-Projekts : Wann möchten Sie eine Vorschau Ihrer Website haben? Wann soll es live gehen?

Es ist jetzt viel klarer, nicht wahr?

3. Denken Sie an die Ressourcen, die Ihnen zur Verfügung stehen

Jetzt ist es an der Zeit, zur Sache zu kommen.

Ihre Herausforderung, wenn Sie sie annehmen, besteht nun darin, die Ressourcen aufzulisten, die Ihnen in Bezug auf Folgendes zur Verfügung stehen :

• Budget : Wie viel möchten Sie in Ihr Redesign investieren?
• Zeit : Wie viel Zeit haben Sie zur Verfügung, um Ihre WordPress-Website neu zu gestalten?
• Fähigkeiten : Haben Sie die Fähigkeit, alle Ihre Ziele selbst zu erreichen?
• Tools : Plugins, Themes, Seitenersteller … Können diese Arten von Tools Ihnen helfen, Ihre Ziele zu erreichen, selbst wenn Sie nur über begrenzte technische Webkenntnisse verfügen?

Anhand dieser Liste können Sie feststellen, ob Sie auf einen externen Anbieter zurückgreifen müssen oder ob Sie das Gefühl haben, unabhängig, mit Ihren Teammitgliedern oder mit eigenen Mitteln arbeiten zu können.

Finden Sie die besten WordPress-Experten

Codeable ist bestrebt, Sie mit Experten zusammenzubringen, die Ihnen bei allem helfen können, vom Design oder der Installation von WordPress-Themen bis hin zur Entwicklung benutzerdefinierter Plugins.

Versuchen Sie Codeable

4. Erstellen Sie einen Umleitungsplan

"Okay, los geht's, das ist es!"

Leicht! Ein letzter Schritt wird bei der Neugestaltung Ihrer Website zu oft vernachlässigt: die Erstellung Ihres Weiterleitungsplans .

Lassen Sie mich erklären.

Häufig kommt es bei der Neugestaltung einer Website zu URL-Änderungen. Dies gilt insbesondere dann, wenn Sie neue Seiten erstellen.

Aber was passiert, wenn Sie Ihre neue Website online stellen, ohne an die Weiterleitung zu denken? 404-Fehler in Hülle und Fülle, die sich auf Ihre SEO und die Navigation Ihrer Besucher auswirken.

Nichts könnte einfacher sein, um Ihren Umleitungsplan zu entwerfen. Öffnen Sie Excel oder Google Sheets und erstellen Sie wie folgt eine Tabelle:

Sobald Ihre Website online ist, können Sie das Umleitungs-Plugin einrichten und diese Tabelle direkt importieren.

Clever, nicht wahr?

Okay: Atmen Sie tief durch und lassen Sie uns über das Redesign selbst sprechen.

Beschleunigen Sie Ihre Website mit WP Rocket

Verwandeln Sie Ihre Website in eine Rakete mit dem leistungsstärksten Caching-Plugin, das von WordPress-Experten anerkannt wird.

Probieren Sie WP Rocket aus

Die 3 Schritte, um Ihr Redesign zu starten

Wie gehen Sie nun vor, nachdem Ihr Projekt gut strukturiert und organisiert ist? Diese 3 wesentlichen Schritte führen Sie.

1. Wählen Sie, ob Sie lokal oder direkt auf Ihrer aktuellen Website arbeiten möchten

Bevor Sie sich mit dem technischen Aspekt befassen, beginnen Sie damit, zu arbeiten:

• Entweder direkt auf Ihrer aktuellen Seite , und integrieren Sie die Änderungen „live“.
• Oder auf Entwicklungs- und Vorproduktionsservern , um Ihre neue Website zu testen, bevor Sie sie Ihrem Publikum zur Verfügung stellen.

Was beinhalten diese beiden Optionen?

Online direkt auf Ihrer Website zu arbeiten ist barbarisch.

In diesem Fall sehen alle Ihre Besucher die Änderungen live und fungieren als „Versuchskaninchen“ Ihrer neuen Funktionen … mit all den Fehlern, die dies hervorrufen kann.

Beachten Sie auch, dass sich ein Fehler während der Änderungen auf die Website auswirkt, bis Sie das Problem erkannt und behoben haben. Website nicht verfügbar, Funktionalität funktioniert nicht…

Um all diese Probleme zu vermeiden, können Sie Ihre Website lokal umgestalten.

Die Vorteile der Arbeit vor Ort sind zahlreich:

• Nehmen Sie Ihre Änderungen sicher vor.
• Testen Sie Ihre Plugins ohne Risiko.
• Sehen Sie sich eine Vorschau des endgültigen Renderings an, bevor Sie online gehen.

Es ist auch die ideale Lösung, wenn Sie die Verwaltung von WP so beibehalten möchten, wie Sie sie derzeit konfiguriert haben. Mit anderen Worten, Sie können eine WordPress-Website ändern, ohne die vorhandene zu löschen.

Wenn Sie jedoch bei Null anfangen möchten, in einer komplett neuen Verwaltung, schauen Sie sich an, wie Sie vorgehen sollten, um WordPress lokal zu installieren.

Tipp von WPMarmite : „Natürlich können Sie dank eines Plugins wie UpdraftPlus oder Duplicator Elemente von Ihrer alten Website abrufen. Mit diesen Plugins können Sie das, was Sie wollen, wieder in Ihren Admin importieren: Ihre Inhalte, Ihre Themen, Ihre Plugins, Ihre Medien usw.

2. Erwerben Sie die Werkzeuge, die Sie für die Neugestaltung benötigen

Jetzt ist es an der Zeit, dass Sie alles auflisten und besorgen, was Sie brauchen, um die Neugestaltung Ihrer WordPress-Website zu übernehmen.

Denken Sie daran: Sie haben sie in Ihren Spezifikationen aufgeführt.

Dies kann beinhalten :

• Ein neues Thema , wenn eines der vielen verfügbaren im offiziellen Verzeichnis Ihre Aufmerksamkeit erregt (wie der sehr beliebte Astra).
• Ein Seitenersteller wie Elementor oder Beaver Builder, wenn Sie vermeiden möchten, dass Sie den Code in die Hände bekommen.
• Neue Plugins , um erstaunliche Funktionen zu integrieren.

Sie sind sich nicht sicher, welche Plugins Sie verwenden sollen? Vielleicht werden Sie in unserer Must-Have-Liste fündig.

Ist Ihr Werkzeugkasten bereit? Lassen Sie uns alles einrichten und mit dem letzten entscheidenden Schritt Ihres Redesigns fortfahren: dem Inhalt.

3. Bereiten Sie den Inhalt Ihrer neuen Website vor

Zunächst einmal ein entscheidender Punkt, den man nicht vergessen sollte.

Bei einem Website-Redesign gibt es zwangsläufig Inhalte der vorherigen Website, die wiederhergestellt werden können.

Bilder, Texte, Plugin-Konfiguration: Denken Sie darüber nach!

Erstellen Sie also ein Backup Ihrer aktuellen WordPress-Website und halten Sie alles, was Sie in Ihr Redesign einbauen möchten, unter Verschluss.

Ich kann mir jedoch vorstellen, dass Sie bei einem Redesign auch den Inhalt Ihrer Website ändern, um sie relevanter und attraktiver für Ihre Zielgruppen zu machen … und natürlich für Suchmaschinen!

Denken Sie also über Ihre SEO-Strategie nach, die so wichtig ist, um Ihre neue (tolle) Website gut zu platzieren.

Wenn es komplex ist, die zu befolgenden Schritte zusammenzufassen, kann ich Ihnen hier jedoch die Hauptlinien geben:

• Definieren Sie zum einen die Keywords, zu denen Sie ranken möchten . Dies sind die Ausdrücke, die Ihre Zielgruppen spontan bei Google eingeben, um die gesuchten Informationen zu finden.
• Legen Sie andererseits fest, wo Sie sie integrieren müssen, auf jeder Seite . Ihre Title-Tags (hn) , oder der Alternativtext der Bilder, müssen zum Beispiel SEO-optimiert sein: Google mag sie, da wird es zuerst versuchen, Ihre Seite zu verstehen!
• Sobald diese neuen Inhalte in die neu gestaltete Website integriert sind, können Sie überprüfen, ob alles in Ordnung ist . Denken Sie insbesondere an Bildnamen, Titel und Meta-Beschreibungen von Seiten, die allzu oft vernachlässigt werden.

Um Sie bei der On-Page-SEO Ihrer Website (Content-Optimierung) zu unterstützen, verlassen Sie sich auf ein dediziertes SEO-Plugin.

WPMarmite verwendet das bekannteste von ihnen, Yoast SEO, aber es ist nicht das einzige, das auf dem Markt effektiv ist. Entdecken Sie in diesem Artikel unseren ausführlichen Vergleich der Mitbewerber.

Eins führt zum anderen, auf Ihrem Entwicklungsserver, lokal und mit allen notwendigen WordPress-Tools können Sie sehen, wie Ihr Projekt voranschreitet … und Ihr Online-Start rückt näher.

Die 3 Schritte zum erfolgreichen Launch Ihrer Website

Ich kann fühlen, wie Sie sich darauf freuen, Ihre neue WordPress-Website der Welt vorzustellen.

Nehmen Sie sich die Zeit, sich diese 3 Schritte anzusehen, und befolgen Sie sie sorgfältig: Sie werden es nicht bereuen, das verspreche ich.

1. Wählen Sie einen direkten Produktions- oder Vorproduktionsserver aus

Sagt Ihnen der Begriff „Vorproduktionsserver“ nichts? Keine Sorge, machen wir eine kurze Pause für eine Definition.

Ein Vorproduktionsserver teilt sich denselben Server wie der, auf dem sich Ihre Website befinden wird, sobald sie live geht . Wenn WPMarmite es umgestalten würde, könnte Alex beispielsweise wählen, seine Vorproduktion unter preprod.wpmarmite.com zu platzieren: Dies wäre die gleiche Umgebung wie wpmarmite.com .

Warum sollten Sie diesen Preprod-Server verwenden?

• Um Ihr Redesign mit Ihrem Kunden zu validieren, wenn Sie ein WordPress-Entwickler sind.
• Um auf Fehler zu testen, bevor die Website live geht.
• Um Ihre SEO-Strategie anzupassen, stellen Sie sicher, dass alle Ihre Keywords auf jeder Seite enthalten sind.

Sobald all dies validiert ist, können Sie erst dann live gehen und Ihre neue Website bereitstellen. Wenn Sie sich sicher sind, können Sie natürlich direkt in die Produktion gehen.

2. Testen Sie Ihre neue Website auf mögliche Probleme

Von Ihrem Vorproduktionsserver (oder live, wenn Sie ein WordPress-Abenteurer sind) müssen Sie Ihre neue Website testen.

Der Schlüssel zum erfolgreichen Testen auf Probleme besteht darin , sich in die Lage eines durchschnittlichen Besuchers zu versetzen , herumzuklicken und alle Probleme zu notieren, auf die Sie stoßen …

Sie werden wahrscheinlich Design- und Strukturprobleme sehen. Aber vergessen Sie nicht, auch zu überprüfen:

• Weiterleitungen , die nicht durchgeführt wurden, erzeugen tote Links oder weiße Seiten.
• Die Leistung der Website , indem Sie sie auf GTMetrix, Pingdom oder dem PageSpeed ​​Insights-Test von Google testen.
• Die Opt-in-Punkte , indem Sie überprüfen, ob sie gut funktionieren.
• Kontaktformulare , Angebotsformulare…
• Zahlung , wenn Sie eine E-Commerce-Site haben (einschließlich Bestätigungs-E-Mails, Zugriff auf die Mitglieder-Site …).

Alles ist schön, funktional, gut verbunden und gut zusammengestellt? Herzliche Glückwünsche! Der letzte Schritt wird das breite Lächeln verstärken, das ich von hier aus auf euren Gesichtern sehe.

3. Reaktivieren und verbinden Sie alle Dienste von Drittanbietern erneut

Komm schon, du hast es fast geschafft!

Sie können nun alle mit Ihrer WordPress-Website verknüpften Dienste und Plugins wieder aktivieren . Denken Sie insbesondere an:

• Ihr Cache-Plugin.
• Plugins, die Google Analytics verwenden, wie MonsterInsights.
• Plugins, die soziale Netzwerke wie Facebook oder Instagram verwenden.
• Die verschiedenen Lizenzschlüssel für Ihre Plugins und Ihr Design.

Und da Sicherheit jeden etwas angeht (und insbesondere Sie selbst), denken Sie daran, alle Elemente, die Ihre Website sichern, wieder zu aktivieren .

Bereit zu gehen? Beginnen Sie dann mit der Indizierung Ihrer neuen Website in der Google Search Console. Diese Manipulation zwingt die Roboter von Google, Ihr neues Baby zu besuchen und es so in seiner neuen Version schneller zu indizieren.

Tadam! Neu gestaltet, leistungsstärker, auffälliger, besser strukturiert, Ihre neue Website ist bereit, den Verkehr zu erhalten, den sie verdient. Es war harte Arbeit, aber es hat sich gelohnt, nicht wahr?

Was ist mit Ihnen, haben Sie kürzlich ein Redesign einer WordPress-Website durchgeführt?

Auf welche Probleme sind Sie gestoßen oder wie stolz waren Sie darauf?

Erzählen Sie uns alles in den Kommentaren: Das WPMarmite-Team liest sie alle sorgfältig durch.