Home / Blog / WordPress / Die ultimative Relaunch-Checkliste für deine Website – hier findest du wirklich alles (inkl. SEO-Checkliste)

Die ultimative Relaunch-Checkliste für deine Website – hier findest du wirklich alles (inkl. SEO-Checkliste)

28.06.2019·von Gerrit Noppel zum Thema WordPress

Wir sind stolz darauf, dir den ausführlichsten Relaunch-Guide zu präsentieren, den das Internet je gesehen hat. Mit unserer ultimativen Relaunch-Checkliste kannst du Schritt für Schritt deinen Relaunch planen. Wir haben wirklich an alles gedacht damit dein Relaunch ein Erfolg wird!

Monatelange Arbeit liegt hinter dir, nur noch wenige Mausklicks bis zum Go-live der neuen Website. Wenn du jetzt Schweißperlen auf der Stirn hast und dich fragst, ob alle URLs richtig weitergeleitet wurden, dann hättest du vorher lieber diesen Relaunch-Guide studieren sollen. Denn ein Relaunch ist immer ein Großprojekt, an dem viele Experten aus verschiedenen Fachbereichen zusammenarbeiten, die perfekt koordiniert werden müssen.

Gerade aus SEO-Sicht gibt es einige wichtige und umsatzrelevante Dinge zu beachten. Sogar große Player wie MediaMarktSaturn haben es mit dem Relaunch von Redcoon 2017 fertig gebracht, so einiges falsch zu machen. Denn nach dem Relaunch sind die wichtigsten Rankings in den Keller gerutscht. Die Sichtbarkeit auf Google war dahin und die Folge ein wirtschaftliches Desaster (nachvollziehbar anhand des Sichtbarkeitsindex von Sistrix).

Damit dich nicht dasselbe Schicksal ereilt, haben wir unseren kompletten Relaunch-Prozess für dich strukturiert und zusammengefasst. Und mit „komplett“ meinen wir wirklich jeden einzelnen Arbeitsschritt! Betrachte diesen Artikel als Relaunch-Anleitung oder Projektplan, der dich Schritt für Schritt zum Ziel führt. Mit zahlreichen Tipps und SEO-Checkliste – damit deine Relaunch-Strategie aufgeht!  

 

1. Was ist ein Relaunch?

Als Relaunch bezeichnet man die Wieder- oder Neueinführung eines Produktes. Ziel ist es, ein verbessertes Produkt auf den Markt zu bringen. Im Falle einer Internetpräsenz wollen wir dem Benutzer eine verbesserte Website präsentieren, die noch genauer auf seine Bedürfnisse eingeht und ihm ein angenehmeres Surferlebnis bietet. 

Alexander Holl definiert den Website-Relaunch wie folgt:

“Eine signifikante Veränderung der User-Experience und Funktionsweise einer Website im Sinne des Unternehmensziels” (Quelle). 

Wir mögen die Definition, weil sie explizit die Unternehmensziele berücksichtigt. Denn Webdesign, Programmierung und SEO sind nichts wert, wenn sie nicht der Zielerreichung dienen. Ein Relaunch sollte niemals Selbstzweck sein.

Aber Relaunch ist nicht gleich Relaunch. Es gibt verschiedene Möglichkeiten, die eigene Website attraktiver für den Kunden zu machen.

 

1.1 Design-Relaunch

Beim Website-Redesign behalten wir das technische Grundgerüst deiner Website bei. Content-Management-System (CMS), Informationsarchitektur und redaktionelle Inhalte bleiben bestehen. Nur das Webdesign bekommt einen optischen Facelift verpasst. 

Wir überarbeiten hierbei das komplette Design mit Bildern, Icons, Navigation, Buttons und Schriften. Auf Wunsch designen wir auch das Logo neu und bauen diverse Microinteractions auf der Website (z. B. Hover-Effekte) ein. 

Bei WordPress bedeutet das zum Beispiel, dass ein neues Theme entwickelt wird, während Inhalte wie Beiträge und Seiten erhalten bleiben. Sie erscheinen nach dem Redesign nur in einem neuen Gewand. 

 

1.2 Technik-Relaunch

Beim Technik-Relaunch bleiben Inhalte und Design bestehen, während das technische Framework im Hintergrund neu aufgesetzt wird. Die Website sieht also nach dem Technik-Relaunch genauso aus wie vorher, lässt sich aber hinter den Kulissen besser bearbeiten, ist performanter oder sicherer. 

Häufig stellen wir hierbei auf ein Content-Management-System (CMS) wie WordPress oder TYPO3 um, damit du nach dem Relaunch deine Inhalte selbst ändern und pflegen kannst. 

 

1.3 Komplett-Relaunch

Beim Komplett-Relaunch überarbeiten wir sowohl das Design als auch die Technik deiner Website. Außerdem konzipieren wir deine Website anhand deines Unternehmensmodells wenn nötig völlig neu. Dabei entwickeln wir eine optimale Informationsarchitektur für User und Suchmaschinen und setzen ggf. dynamische Webanwendungen wie Tarifrechner oder Buchungssysteme um.

Wenn wir im Folgenden von “Relaunch” sprechen, dann meinen wir immer den Komplett-Relaunch der Website, weil das die häufigste Art des Relaunchs ist.

 

2. Wann solltest du relaunchen?

Die Antwort lautet: Es kommt darauf an. Wir halten nicht viel von Faustregeln à la “Website-Relaunch alle 4 Jahre”. Jede Website ist unterschiedlich und hat ihre eigenen Pain-Points. Die eigene Website zu relaunchen, nur weil sie dir nicht mehr “gefällt”, könnte ebenfalls eine schlechte Idee sein.

Persönliche Meinungen und Geschmäcker sollten niemals Entscheidungs­kriterien für einen Website-Relaunch sein.

Deine Website muss deine Kunden zufriedenstellen nicht dich. 

Chefs neigen häufig dazu, der eigenen Website überdrüssig zu werden. Es tönt vom Chefsessel: “Die Startseite ist total langweilig.” Aber womöglich finden sich die Besucher wunderbar auf der Startseite zurecht und schätzen das schnörkellose Design, weil es schnell zum Ziel führt. 

Auch wenn dein Wettbewerber gerade eine schicke neue Website gelauncht hat, ist das kein Grund zur Panik. Oftmals herrscht ein diffuses Gefühl vor, dass mal wieder “etwas Neues her muss”. Widerstehe diesem Aktionismus und begründe deinen Relaunch lieber auf Fakten

 

2.1 Schlechte Nutzersignale

Daumen hoch oder Daumen runter was im alten Rom über Leben und Tod entschied, wird auch im Internet praktiziert. Die Nutzer stimmen jederzeit (indirekt) über die Qualität deiner Website ab. Du musst die Signale nur richtig deuten.

Umsatzrückgang allein ist z. B. kein ausreichender Indikator, da hier ganz unterschiedliche Gründe eine Rolle spielen können. Besser geeignet sind spezielle Website-Indikatoren:

  • Deine Website verliert stetig an Nutzern. Nutzerflucht ist ein schlechtes Zeichen für deinen Webauftritt. Überprüfe die Zahlen regelmäßig in Google Analytics und trenne saisonale Tiefs von einem generellen Abwärtstrend.
  • Du rutschst in den Google-Rankings immer weiter nach hinten. Mit fallenden Rankings geht dir meist auch Umsatz verloren. Auch hier solltest du regelmäßig mithilfe der Google Search Console die wichtigsten Rankings kontrollieren.
  • Die Conversion-Rates sinken stetig. Eine moderne Website muss den User zu einer Handlung animieren. Wenn deine Kontaktanfragen, Bestellzahlen oder Leads sinken, musst du dir Gedanken über deine Nutzerführung machen.
  • Kunden beschweren sich über Mängel wie fehlende Übersichtlichkeit, mangelnde Funktionalität oder schlechten Content. Die Tatsache, dass sich jemand die Mühe macht, dir die Mängel deiner Website mitzuteilen, sollte dich hellhörig für Veränderungen machen. 

 

2.2 Die Kraut-und-Rüben-Website

Eine Website, an der verschiedene Dienstleister gewerkelt haben, kann sich schnell zu einem Code-Ungeheuer entwickeln. Niemand weiß mehr genau, was der Vorgänger wo und wie implementiert hat. Die Website ist häufig fehlerhaft und der dahinterliegende Code gleicht eher einem Dschungel. Wir nennen dieses Phänomen die Kraut-und-Rüben-Website

Bei diesen zerschossenen Websites werden permanent nur Brände gelöscht und Anzeigefehler behoben. Sie gleichen einem Haus mit morschem Fundament, das durch seitliche Stützen gerettet werden soll. Eigentlich hilft nur noch der Neubau – also der Relaunch –, da die ständigen Reparaturarbeiten zu einem immer größeren Kostenfaktor werden. 

Häufig sind Baukastensysteme wie der Visual Composer ein Grund für derartige Website-Ungeheuer. Das Verschieben der Drag-&-Drop-Elemente des Visual Composers erzeugt jedes Mal automatisch Code. Das führt auf Dauer zu Code-Chaos. Das Ergebnis im Frontend sind Anzeigefehler wie abgeschnittene Texte, falsche responsive Stufen oder nicht mehr kontrollierbare Abstände. 

Das Hauptproblem: Der unsaubere Code bleibt oft auch dann bestehen, wenn z. B.  Plugins deaktiviert werden. Eine Bereinigung des Codes ist nur noch mit großem manuellen Aufwand möglich. Es bleibt nur der Website-Relaunch, der aber auf Dauer Geld einsparen wird.

 

2.3 Website-Relaunch-Checkliste

Natürlich haben wir auch ein paar harte Fakten für dich: 

Relaunch Checkliste

Natürlich kann auch eine neue unternehmensinterne Ausrichtung für einen Relaunch sprechen. Ein neuer Name, eine neue Philosophie, ein neues Corporate Design oder neue Produkte mit neuen Zielgruppen sprechen manchmal für eine komplett neue Websitearchitektur.

 

3. Relaunch-Strategie

3.1 Ziele des Website-Relaunchs

Ein Relaunch kann viele Ziele haben. Häufig wird als einziges Ziel “mehr Umsatz” genannt. Das ist aber viel zu allgemein. Je enger du deine Ziele definierst, desto besser kannst du den Erfolg im Nachhinein messen. Ziele können sein:

  • höhere Sichtbarkeit im Web
  • mehr Traffic durch höhere Suchmaschinenplatzierung 
  • mehr Anfragen/Verkäufe über den digitalen Vertriebsweg
  • die eigene Positionierung schärfen  
  • die Kundenbindung stärken
  • die Conversion-Rate erhöhen
  • Leads generieren 
  • Employer-Branding stärken

Bevor die erste Zeile Code geschrieben ist, müssen diese Ziele klar benannt werden. Das schafft Klarheit für alle Beteiligten. Jede Maßnahme, jede Idee und jedes Testing wird von nun an an diesen Zielen gemessen. Bringt uns eine Maßnahme dem gemeinsam definierten Ziel nicht näher, verwerfen wir sie.

 

3.2 Status Quo

Bevor in deinem Kopf ein Bild deiner neuen Website entsteht, steht eine Bestandsaufnahme der alten Website an. Die einzelnen Unterseiten der Website müssen auf ihre Leistung geprüft werden. Gerade bei einem Onlineshop sind diese Infos für die neue Website Gold wert. Wichtige KPIs (Key Performance Indicator) sind:

  • Traffic (Seitenaufrufe, Nutzer, Sitzungen)
  • Durchschnittliche Sitzungsdauer
  • Rankings in den Top 10
  • Conversion-Rates

Durch diese Faktoren lässt sich einschätzen, welche die Top-Einstiegsseiten und welche Seiten für einen Großteil des Umsatzes verantwortlich sind. Mit diesen Erkenntnissen können dann Schwerpunkte gesetzt werden: Seiten mit guten Leistungsdaten können ausgebaut, veraltete und leistungsschwache eventuell gelöscht werden. 

 

3.3 Wettbewerbsanalyse

Natürlich sollte deine neue Website dein Alleinstellungsmerkmal (USP) präsentieren und damit unverwechselbar sein. Dennoch lohnt es sich immer, einen Blick auf die Konkurrenz zu werfen, wenn der Website-Relaunch ansteht. Gerade die Konkurrenten, die für die wichtigsten Suchbegriffe ganz vorne im Google-Ranking stehen, scheinen mit ihrem Webauftritt irgendetwas richtig zu machen. Diese 5 Fragen solltest du dir stellen:

  1. Wie positionieren sich die Konkurrenten?
  2. Welches Design nutzen sie?
  3. Wie kommunizieren sie mit der gemeinsamen Zielgruppe?
  4. Wie ist die Websitearchitektur mit Unterseiten und Navigation aufgebaut? 
  5. Auf welche Keywords und Themen ist die Seite optimiert?

 

3.4 Zielgruppe definieren

“Der Köder muss dem Fisch schmecken, nicht dem Angler.” Dieser etwas abgedroschene Marketingspruch hat einen wahren Kern. Deine neue Website soll nicht vorrangig dir gefallen, sondern deiner Zielgruppe. 

Dafür musst du deine gesamte Kommunikation, dein Erscheinungsbild und deinen Content an deine Zielgruppe anpassen. Im B2C lohnt es sich, eigene Personas zu erstellen, die exemplarisch für den Kunden stehen. Aber auch im B2B-Geschäft entscheiden letztendlich Menschen über den Kauf oder eine Buchung, keine abstrakten Unternehmen. 

Persona Beispiel
Ohne die Definition der passenden Zielgruppe, ihrer Wünsche und Probleme tappst du mit deiner Website (und im gesamten Marketing) im Dunkeln. Schaffe echten Nutzen für deine Website-Besucher und löse ihre Probleme und Informationsdefizite, damit dein Webauftritt nicht zur digitalen Werbebroschüre verkommt.

 

4. Website-Relaunch Konzept  

4.1 Website-Relaunch Projektplan

Eine gute Planung ist das A und O eines gelungenen Webprojekts. Den Überblick über das Webprojekt behält bei uns stets das Projektmanagement die Speerspitze unserer Agentur. Ob Zeitpläne, Deadlines oder Wasserstandsmeldungen, unser Projektmanagement weiß stets über den aktuellen Projektstand Bescheid.

Einen Fehler in der Planung zu beheben, kostet 1 Euro, in der Konzeption 10 Euro, in der Umsetzung 100 Euro und nach dem Launch 1.000 Euro. 

Wir setzen auf eine ehrliche Kommunikation auf Augenhöhe. Niemand hat etwas davon, wenn um den heißen Brei herum geredet wird, oder wenn falsche Erwartungen entstehen. Als Freunde offener Worte hören wir genau zu und geben stets ehrliches Feedback zu Ideen und Vorschlägen.   

In der Planungsphase erstellen wir zusammen einen Zeitplan mit Meilensteinen für Webdesign und Webentwicklung. Dieser Zeitplan muss für beide Seiten realistisch ein. Ein Relaunch einer sehr komplexen Website mit vielen Funktionen und zig verschiedenen Seiten  in nur zwei Monaten, bei dem wir Abstriche bei der Qualität machen müssten, ist mit uns nicht zu machen. Unser Qualitätsanspruch ist uns dabei wichtiger – denn nur so profitieren am Ende Kunde und User gleichermaßen.

 

4.2 Relaunch-Kosten

Die Anforderungen an eine moderne Unternehmenswebsite sind in den letzten Jahren stark gestiegen. Für die perfekte Seite ist eine intensive, interdisziplinäre Zusammenarbeit zwischen Konzeptern, Projektmanagern, Designern und Entwicklern nötig.

Wenn du noch genauer wissen möchtest, mit wie viel Budget du für eine Website rechnen musst, empfehlen wir dir unseren Blogbeitrag: Was kostet eine Website? 6 Gründe, warum es mehr als 1.000 Euro sind. Wir planen in der Regel mit einem Mindestbudget von 10.000 Euro für einen Komplett-Relaunch einer Website.

Damit auch Kunden mit kleinem Budget in den Genuss einer leistungsstarken Website kommen, bieten wir eine lukrative Fördermöglichkeit über das Bundesministerium für Wirtschaft und Energie (BMWi) an. 

Mit go-digital können wir dir eine Förderhöhe von 50 Prozent der anfallenden Kosten gewähren – bis zu 11.000 Euro. Die Hürden für den Erhalt der Förderung sind relativ niedrig und den Papierkram übernehmen wir ebenfalls. Mehr dazu erfährst du in unserem ausführlichen Blogbeitrag: go-digital BMWi: Bis zu 11.000 Euro Zuschuss mit Friendventure.

 

4.3 Content-Management-System

Die Wahl des optimalen Content-Management-Systems (CMS) hängt stark von deinem Webprojekt ab. Gerne sprechen wir hierzu über alle Vor- und Nachteile.

Bei contentstarken Seiten, bei einem großen Team aus Entwicklern und Content-Managern oder einer SAP-Anbindung bietet sich TYPO3 als CMS an. Hat dein Webprojekt ein Budget von unter 20.000 Euro, ist dir eine intuitive Bedienung wichtig oder setzt du auf einfache Erweiterbarkeit, dann bist du mit WordPress meist besser bedient. 

Wordpress vs TYPO3
Wenn du mehr Infos darüber haben möchtest, welches CMS am besten zu deinem Website-Relaunch passt, wirf gerne einen Blick in unseren ausführlichen Blogartikel: WordPress vs. TYPO3 – welches CMS ist das richtige für dein Unternehmen? 

 

4.4 Informationsarchitektur

Die Architektur einer Website ist wie die Bauskizze eines Hauses. Beim Hausbau stellt sich der Architekt die Fragen: Wie groß soll das Haus sein? Wo platziere ich Bad und Küche? Wo ist die Treppe zum Keller? 

Analog fragt sich der Website-Konzepter, wo er Produktinformationen platziert, wo der Besucher eine Kontaktanfrage stellen kann oder auf welcher Hierarchieebene die Referenzen zu finden sind.

Zu Beginn erstellt unser Konzepter eine Sitemap, die anzeigt, auf welcher Hierarchieebene sich welche Unterseite befindet und wie die Seiten untereinander verlinkt sind. Ziel ist es, dem Nutzer eine intuitive Navigation zu ermöglichen. 

Sitemap strukturell Friendventure
Deshalb versuchen unsere Konzepter, die Inhalte auf einer möglichst flachen Seitenhierarchie unterzubringen. Flache Hierarchien ermöglichen dem User, Inhalte mit wenigen Mausklicks zu erreichen. Onlineshops mit vielen Kategorie- und Produktseiten gehen zwangsweise tiefer in der Hierarchie, aber auch hier muss eine klare Struktur herrschen.

Wir plädieren außerdem für schlanke Websites mit schlanken URL-Strukturen. Wenige contentstarke Seiten mit guten Rankings sind besser als viele Seiten mit mittleren Rankings. Wenige Seiten haben außerdem folgende Vorteile:

  • Deine Seite ist in der Navigation übersichtlicher für den User.
  • Der Google-Crawler hat es einfacher, (neue) Inhalte zu indexieren.
  • Du hast weniger Arbeit bei der Contentpflege und die Möglichkeit, dich auf die wichtigen Seiten zu fokussieren.
  • Bessere Verteilung von Link-Juice für die einzelnen Seiten
  • Weniger Potenzial für Duplicate Content (doppelter Inhalt), den Google als schlechtes Signal wertet.
  • Keine Seiten mit sehr wenig oder unbrauchbarem Content (Thin Content). Diesen wertet Google ebenfalls als schlechtes Signal für deine Website.
  • Weniger Aufwand beim nächsten Relaunch 🙂

 

4.5 Navigation und interne Verlinkung

Die Menünavigation ist nicht nur für Besucher relevant, sondern auch für den Google-Bot. Dieser crawlt deine Website, um Inhalte zu indexieren und zu bewerten. Deine Verlinkung in der Navigation bestimmt, wie viel Link-Juice die einzelnen Unterseiten erhalten. Wichtige Seiten sollten prominent in der Hauptnavigation und an weiteren Stellen verlinkt werden. Damit erhalten sie viel Ranking-Power auf Google. 

Linkjuice Friendventure Website
Der Ankertext, also der verlinkte Begriff, ist ebenfalls ein wichtiges Signal für die Suchmaschine. Er signalisiert, welcher Suchbegriff für die Zielseite relevant ist. Eine Verlinkung mit dem Ankertext “hier” ist deshalb keine gute Idee.

Bei tieferen Website-Strukturen ist es sinnvoll, eine Breadcrumb-Navigation einzubauen. Bei der Breadcrumb-Navigation wird der hierarchische Pfad zur Seite ganz oben auf der Seite eingeblendet. Dieses Navigationselement verbessert die User Experience, da der User jederzeit weiß, auf welcher Hierarchieebene er sich befindet. 

Zalando Breadcrumb
 

4.6 Seitentypen

Für das Konzept deiner Website ist es wichtig, die Seitentypen zu kennen, die für dich relevant sind. Jede Website hat eine Startseite, aber darüber hinaus gibt es ganz unterschiedliche Seitentypen mit unterschiedlichen Zwecken und Zielen:

  • Die Startseite muss in wenigen Hundertstelsekunden optisch überzeugen, aber auch sofort zeigen, worum es bei deinem Unternehmen geht. Eine sinnvolle Verlinkung auf die wichtigsten Inhalte leitet den User entsprechend weiter. 
  • Info- und Ratgeberseiten bieten ausführliche Inhalte mit Mehrwert für den User. Der Verkauf von Produkten oder Dienstleistungen steht hier eher im Hintergrund. Wenn du zum Beispiel ökologische Teppiche verkaufst, kannst du Infoseiten zu verwendeten Materialien, Produktionsbedingungen und Allergikerverträglichkeit produzieren. 
  • Formularseiten geben dem User die Möglichkeit, dein Unternehmen schnell und problemlos zu kontaktieren. Wichtig ist hier, so viele Formularfelder wie nötig und so wenige wie möglich zu verwenden, um Interessenten nicht abzuschrecken. Bei einer Kontaktanfrage sind Titel, Adresszusatz und Faxnummer uninteressant.
  • Blogartikel behandeln ein bestimmtes (aktuelles) Thema und sind wie ein journalistischer Artikel aufgebaut. Auch hier stehen Verkauf und Produkt eher im Hintergrund. Eher sollen die Probleme des Users gelöst werden.
  • Die Über-uns-Seite bietet die einzigartige Möglichkeit, dein Unternehmen dem Besucher vorzustellen. Gerade bei Dienstleistungen oder höherpreisigen Produkten sind die Werte des Unternehmens relevant für die Kaufentscheidung.
  • Die Karriereseite richtet sich explizit an Bewerber. Ein sympathischer Auftritt mit authentischen Einblicken ins Unternehmen ist in Zeiten des Fachkräftemangels Gold wert. Mehr zum Thema Karriereseite erfährst du in unserem Blogartikel Die perfekte Karriereseite: Mit diesen Tipps erhältst du mehr und bessere Bewerber.
  • Produktseiten stellen das Produkt oder eine bestimmte Dienstleistung ausführlich dar und sollen aus Besuchern Käufer machen. Dazu müssen alle Fragen rund um das Produkt und zur Lieferung beantwortet werden.
  • Kategorieseiten strukturieren dein Angebot im Onlineshop. Sie lassen den User vergleichen, filtern oder nach Infos suchen. Sie sollten mehr als nur Durchgangsseiten zu den Produktseiten sein.

Im gemeinsamen Gespräch klären wir, welche Seitentypen für die Erreichung der vorher definierten Ziele des Relaunchs wichtig sind.

 

4.7 API-Schnittstellen

Die Application-Programming-Interface (API) ist eine Programmierschnittstelle, die eine Anbindung an andere Softwaresysteme bereitstellt. Die Verknüpfung von Datenbanken oder externer Systeme über API-Schnittstellen bietet zahlreiche Möglichkeiten, die Experience deiner User zu verbessern. Möglich sind folgende Verknüpfungen mit deiner Website:

  • Anbindung eines ERP-Systems (Enterprise-Resource-Planning) wie Sage, SAP oder DATEV
  • Anbindung eines CRM-Systems (Customer-Relationship-Management) wie Salesforce, Pipedrive oder Zoho
  • Anbindung an externe Plattformen wie ImmoScout24, eBay und Amazon   
  • Anbindung an Newsletter-Tools wie MailChimp, Newsletter2Go oder CleverReach
  • Einbindung von Social-Media-Inhalten z. B. von Facebook, Twitter, LinkedIn, Pinterest oder Reddit
  • Einbettung von Videos – z. B. von YouTube oder Vimeo
  • Einbindung von Bewertungen von Google Maps, TripAdvisor, Jameda und ähnlichen Bewertungsplattformen

 

4.8 Modularer Aufbau mit Advanced Custom Fields

Bei Friendventure arbeiten wir mit dem WordPress-Plugin Advanced Custom Fields (ACF). Wir definieren mithilfe des Plugins vorgefertigte Module, die von UX-Designern entworfen und anschließend von Entwicklern programmiert werden. Das spart Ressourcen, da sich Grundelemente auf der Websites wiederholen.

Diese Module sind z. B. vorgefertigte Text-Bild-Anordnungen, ausklappbare FAQ-Inhalte, Kontaktformulare, Slideshows, Google-Maps-Integrationen, Listen mit Symbolen oder alle erdenklichen Design-Kombinationen, die vom Content-Manager mit Inhalt befüllt werden können.

Durch diesen modularen Aufbau wird sichergestellt, dass der Content-Manager sich nicht mit dem Design der Website beschäftigen muss und es dabei womöglich zerschießt. Die Aufgaben von Designern, Programmierern und Content-Managern grenzen wir hierdurch klar voneinander ab. Jeder macht das, was er am besten kann.

 

5. Layout & Webdesign

5.1 Corporate Design

Das Webdesign muss zum Gesamtbild der Marke passen und die Zielgruppe ansprechen. Im Optimalfall existiert bereits ein Corporate Design, an dem wir uns orientieren können. Vorgegeben sind dabei:

  • Farbwelten 
  • Schriftarten 
  • Bildsprache & Look
  • Logos, Bilder, Illustrationen und Icons
  • Grafische Elemente wie Verläufe und Muster

Um Missverständnisse zwischen Designern und Entwicklern zu vermeiden, sollten diese Elemente in einem Styleguide festgehalten werden. Hiermit kannst du sicher sein, dass alle Veröffentlichungen, Dokumente und Medien ein einheitliches Design haben.

Gerne übernehmen wir auch das Logo-/Corporate-Design für dein Unternehmen. In unserem Blogartikel zum Logo Redesign für das Hotel Barbarossa Classic zeigen wir den kompletten Entwicklungsprozess.

 

5.2 Responsive Webdesign

Alle unsere Webprojekte setzen wir selbstverständlich mit modernem Responsive Webdesign um. 

Responsive ist aber nicht gleich responsive. Eine vollautomatische responsive Anpassung (wie z. B. beim Visual Composer) neigt zur Fehleranfälligkeit. Willkürliche Abstände, abgeschnittene Texte und fehlerhafte Bilddarstellungen sind häufig die Folge. 

Deshalb setzen wir bei Friendventure auf ein individuelles Responsive Webdesign. Für ein perfektes mobiles Surferlebnis nehmen wir jedes Modul deiner Website genau unter die Lupe und passen die Darstellung aller Websiteinhalte individuell für Smartphones und Tablets an.

adidas projektvorschau
Eine ausgezeichnete mobile User Experience ist in Zeiten von zunehmender mobiler Internetnutzung nicht mehr nur “nice to have”, sondern ein “must have”. Google crawlt Seiten mittlerweile zuerst in der mobilen Ansicht (siehe Mobile First Index), weshalb Mobile Friendliness ein wichtiger Rankingfaktor ist. 

 

5.3 User Experience Design (UX)

Egal ob du Wasserpumpen, persische Teppiche oder Finanzdienstleistungen anbietest. Wir sind überzeugt, dass wir jedes Produkt, Unternehmen oder jede Dienstleistung – so trocken sie auf den ersten Blick erscheinen mögen – als spannendes Nutzererlebnis in Szene setzen können. Denn nur mit einem spannenden und funktionalen UX-Design kann eine vertrauensvolle Beziehung zum Besucher aufgebaut werden.

Wir entwickeln die User Experience (UX) deiner Website auf Basis von drei Faktoren:

  • Zugänglichkeit: Ist die Website von allen Endgeräten gleichermaßen zugänglich? Lädt sie in einer angemessenen Zeit?
  • Usability: Ist die Bedienung intuitiv? Sind alle Funktionen einwandfrei durchführbar und alle Inhalte einfach erreichbar? Ist die Website selbsterklärend? 
  • Ästhetik und Schönheit: Ist die Website optisch ansprechend? Unterstützt das Design die Marke und die Unternehmenskommunikation? 

Natürlich bleibt die Nutzererfahrung immer subjektiv. Ein Ü60-Senior mit wenig Erfahrung im Web wird eine ganz andere Nutzererfahrung haben als eine U20-Jugendliche. Auch wenn sie exakt auf der gleichen Website surfen.

Natürlich orientieren wir uns beim Design immer an der Zielgruppe, versuchen aber stets einen Mittelweg zu schaffen, der junge sowie ältere User gleichermaßen anspricht.

 

5.4 Bildmaterial

Im gemeinsamen Gespräch klären wir mit dir, welches Bildmaterial wir für die neue Website nutzen. Ist bereits Bildmaterial vorhanden, entspricht dieses Material den Anforderungen der neuen Website oder setzen wir lieber auf komplett neue Bilder? Für das Bildmaterial gibt es verschiedene Möglichkeiten:

  • Hochwertige Stockbilder: Wir sagen bewusst “hochwertig”, denn es gibt zu viele Seiten im Web mit immer gleichen, nichtssagenden Klischeefotos. Wir nutzen kostenpflichtige Bilddatenbanken und recherchieren hier nach dem passenden Material. Dabei achten wir stets darauf, dass alle Rechte für die Nutzung im Web vorhanden sind.
  • Selbsterstellte Fotos: Das Bildmaterial von einem professionellen Fotografen erstellen zu lassen, ist deutlich teurer, aber der Aufwand lohnt sich meist. Nur durch ein Shooting kann garantiert werden, dass alle Fotos den gleichen Look haben. Erst dadurch wird die Bildsprache zu einer runden Sache, was auch dem User bewusst oder unterbewusst auffällt. Gerade wenn es um Produktfotografie geht, sind gestochen scharfe und perfekt ausgeleuchtete Produktbilder ein Verkaufsargument.
  • Illustrationen & Icons: Wer mehr Wert auf einen künstlerischen Webauftritt legt, kann Illustrationen auch von professionellen Designern erstellen lassen. Die Website des Filehosting-Dienstes Dropbox verzichtet z. B. fast komplett auf Fotos und setzt auf Illustrationen.  

Die Bilderwelt sollte dein Unternehmen authentisch darstellen und für Atmosphäre sorgen. Verzichte aber darauf, übertrieben glückliche Menschen auf Stockfotos zu zeigen, die in die Kamera grinsen. Das wirkt einfach unnatürlich. 

Wie du Bilder für die Suchmaschine optimierst, erfährst du unter 8.6 Bilder-SEO.

 

5.5 Wireframes

Unsere Designer skizzieren den Aufbau der Website zuerst mithilfe von Wireframes. Wireframes sind schematische Entwürfe einer Website mit lediglich den grundlegenden Elementen. 

Die grafische Ausgestaltung spielt hier noch keine Rolle. Deshalb kommen Wireframes auch ohne Farben und Bilder aus. Sie zeigen lediglich, an welcher Position sich wichtige Website-Bausteine wie Bilder, Texte oder das Unternehmenslogo befinden. 

Diese Grobstruktur dient als Grundlage für das Webdesign. Außerdem geben Wireframes dir als Kunde einen ersten Einblick in den Seitenaufbau und die Möglichkeit, Änderungswünsche zu äußern. 

Wireframes Relaunch
 

5.6 Finales Webdesign

Wenn der grobe Seitenaufbau abgestimmt ist, starten wir mit dem eigentlichen Webdesign. Dabei berücksichtigen wir alle Learnings aus den Wireframes sowie die Designvorgaben des Corporate Design. 

Zuerst gestalten wir die Startseite, wobei alle Module einzeln designt und verwendbar sind. Das Design für Desktop und Mobile entwickeln wir parallel. Wenn das finale Design steht, dann durchläuft es in der Regel ein bis zwei Feedbackschleifen mit dem Kunden.

 

5.7 Prototyping

Das ausgearbeitete User Interface des finalen Designs stellen wir dir mithilfe eines klickbaren Prototyps in InVision vor. Diese Prototypen (auch Clickdummys genannt) zeigen den Webdesignentwurf und simulieren außerdem die möglichen Interaktionen auf der Website. Du kannst dich also fröhlich durch die Seite durchklicken. Hier ein deutlich abgespeckter, mobiler Beispiel-Clickdummy eines Prototype-Tools.  

Invision Logo
Außerdem bekommst du als Kunde möglichst früh einen Einblick in das Produkt und den Entwicklungsprozess. Durch dein frühes Feedback und den ständigen Austausch können wir viel flexibler und agiler arbeiten. Letztendlich optimieren wir durch das Prototyping alle weiteren Prozesse, weil später weniger aufwändige Korrekturschleifen nötig sein werden.

 

6. Webentwicklung & technische Umsetzung

6.1 Agile Webentwicklung

Beim klassischen Wasserfall-Modell wird der Relaunch in klar aufeinander aufbauende Einzelschritte unterteilt – wir entwickeln die Website jedoch in einem fortlaufenden Prozess. Die agile Webentwicklung steht für hohe Flexibilität und stetigen Austausch zwischen allen Projektbeteiligten, inklusive dem Kunden.

Das zentrale Element in der agilen Webentwicklung ist der Sprint. Der Sprint ist ein zeitlich begrenzter Entwicklungszyklus, an dessen Ende immer ein vorzeigbarer Prototyp steht. Die Vorteile der agilen Webentwicklung sind:

  • konstanter Feedback-Flow mit Kunden
  • kein “Diskussionsstau”
  • Probleme und Fehler können schnell gelöst werden
  • hohe Flexibilität
  • maximale Transparenz
  • keine ärgerlichen Missverständnisse, die erst am Ende des Projekts auftauchen

 

6.2 Programmierung

Nachdem bereits viel geplant, konzipiert und gestaltet wurde, beginnt das Herzstück der Webentwicklung. Versteht man das Webdesign als die Baupläne eines Hauses, werden in der Programmierung nun endlich Steine aufeinander gesetzt, Rohre verlegt und Wände gestrichen.  

Unsere Webentwickler setzen das abgenommene Webdesign mithilfe von verschiedenen Codesprachen wie HTML, CSS, JavaScript und PHP um und verknüpfen es mit dem gewählten Content-Management-System wie WordPress oder TYPO3. Die Programmierung ist dabei von Website zu Website genauso unterschiedlich wie das Webdesign.

Konkret setzen unsere Entwickler die definierten und designten Module z. B. mit Advanced Custom Fields um. Hierzu gehören beispielsweise folgende Website-Bausteine:

  • Text-Bild-Anordnungen 
  • Formulare
  • Slideshows
  • Bildergalerien
  • Akkordeons
  • Videos
  • Animationen

In den meisten Fällen programmieren wir dabei das komplette Theme und ergänzen es mit verfügbaren oder eigens programmierten Plugins.

Für dynamische, individuelle Webanwendungen, die sich nicht optimal durch ein Standard-CMS umsetzen lassen, nutzen wir das PHP-Framework Laravel. Dynamische Webanwendungen erlauben eine individuelle und kundenzentrierte Ansprache des Websitebesuchers. So kann der User z. B. über einen Rechner seinen persönlichen Bedarf ermitteln oder eine Buchungsanfrage im Kalender eintragen.

Dynamische Webanwendungen können außerdem genutzt werden bei

  • Ticket- und Bestellsystemen,
  • firmeneigenen Intranets oder
  • Portallösungen.

Mit Laravel haben wir zum Beispiel einen dynamischen Gas- und Stromtarifrechner für das Energieunternehmen Mark-E umgesetzt. Der Rechner greift auf Echtzeit-Preise zurück und gibt anhand der Postleitzahl den passenden Stromtarif aus.

6.3 Mehrsprachigkeit

Wenn deine Produkte international gefragt sind, kannst du deinen Umsatz mit einer mehrsprachigen Website stark erhöhen. 

Die genauen technischen Lösungen für die Website besprechen wir mit dir im Detail. Häufig bietet sich eine .com-Domain an, auf der die Inhalte konsolidiert werden. Aber auch verschiedene Domains für jede Sprache sind möglich. Mit dem hreflang-Tag teilen wir der Suchmaschine die alternativen Sprach- und Länderversionen mit. Und wir stellen sicher, dass die richtige Sprachversion automatisch anhand der Gerätesprache des Users ausgegeben wird.

In WordPress setzen wir die Mehrsprachigkeit technisch mit einem Plugin um. In TYPO3 ist die Einrichtung von mehrsprachigen Seiten von Haus aus gegeben.

 

6.4 Performance-Optimierung

Der PageSpeed einer Website ist mittlerweile ein wichtiger Rankingfaktor für Google. Vor allem mobil müssen Websites schnell laden, damit der User nicht abspringt. Aufgrund dieser Usability- und SEO-Relevanz ist die Performance-Optimierung ein wichtiger Teil unserer Webentwicklung. 

Unsere erste Prämisse ist immer ein sauber strukturierter Code, denn er ist die Grundlage für eine gute Performance. Weitere wichtige Hebel sind: 

  • optimale Komprimierung des Bildmaterials
  • der richtige Host
  • Caching der Websiteinhalte
  • gzip-Komprimierung
  • Reduzierung des Codes

Einen ausführlichen Blogartikel, in dem wir zeigen, wie wir den PageSpeed deiner Website optimieren, findest du hier: WordPress Ladezeit optimieren: In 8 Schritten zur schnellen Website.

 

6.5 E-Commerce

Bei der Entwicklung eines Onlineshops setzen wir z. B. auf WooCommerce, ein E-Commerce-Plugin für WordPress, oder auf Shopware. Mit beiden Systemen lassen sich vollwertige Webshops bauen, die im Backend intuitiv bedienbar sind und somit eine problemlose Wartung und Contentpflege ermöglichen.

Eine sauber strukturierte Seitenarchitektur ist das A und O eines guten Onlineshops. Die User sollen mit möglichst wenigen Klicks zum Zielprodukt navigieren können. Wir sorgen für eine logisch durchdachte Struktur, mit der du später weitere Angebote und Produktkategorien ergänzen kannst.

Zu Beginn legen wir die wichtigsten Produktseiten als Vorlagen an und finalisieren sie, bis alles perfekt funktioniert. Darauf aufbauend legen wir dann alle weiteren Produktseiten an oder lassen sie automatisch durch importierte Daten erstellen. 

Neben der Verknüpfung von Zahlungsmethoden (wie PayPal, Kreditkarten, Klarna, Amazon Pay usw.) implementieren wir Preise und Versandkosten ins System. Auch auf die Programmierung eines übersichtlichen Warenkorbs und Bestellprozesses legen wir großen Wert.

 

6.6 Staging

Bevor die neue Seite auf der Wunschdomain online geht, nutzen wir eine sogenannte Staging-Version auf unserem Server zum Testen, Vorbereiten und als Feedbackgrundlage. Auf dieser passwortgeschützten (und vor Suchmaschinen verborgenen) Testseite setzen wir alle Änderungen Stück für Stück und völlig ohne Risiko um. Bis zum Go-live der neuen ist die alte Website also noch ganz normal zu erreichen. 

Auf der Staging-Seite testen wir alle Funktionen der Website, bis sie reibungslos funktioniert und alle Texte und Bilder eingesetzt wurden. Erst wenn alles fertig ist, veröffentlichen wir sie zu einem gemeinsam festgelegten Termin auf der Domain. 

 

6.7 Sicherheit durch Backup

Auch bei perfekter Planung und Berücksichtigung aller Eventualitäten kann es beim Relaunch zu technischen Problemen kommen. Aus diesem Grund erstellen wir grundsätzlich immer ein Backup, also eine Datensicherung der alten Website, um notfalls darauf zurückgreifen zu können. Vorsicht ist besser als Nachsicht.

 

6.8 Hosting und eventueller Domainumzug

Bei der Wahl des Hosting-Anbieters solltest du auf keinen Fall sparen. Es geht immerhin um die Performance und Ladezeit deiner Website. Die jährlichen Kosten sind ohnehin überschaubar. Aber worauf solltest du bei der Auswahl des richtigen Providers genau achten? Wichtig sind:

  • ein durchgängig erreichbarer Kundenservice für mögliche Störungsfälle
  • aktuelle Server-Infrastruktur und Technologien (z. B. Unterstützung von PHP 7)
  • ausreichende Server-Ressourcen 
  • geringe Ausfallzeiten

Wenn du mit deiner Website bisher bei einem Anbieter wie 1&1 oder Strato bist, ist ggf. der Domainumzug zu einem leistungsstärkeren Anbieter für unsere Zusammenarbeit notwendig. Die oben genannten Anbieter haben sicherlich ihre Daseinsberechtigung für persönliche Webprojekte und Blogs. Da Performance-Optimierung bei unseren Webprojekten höchste Priorität hat, sind diese kostengünstigen Anbieter allerdings keine Option für uns.

Aber keine Angst: Bei einem Providerwechsel übernehmen wir natürlich die Sicherung der Datenbank und die Übertragung aller Daten und Domains.

 

7. SEO-Relaunch-Checkliste

Suchmaschinenrankings sind wertvolle Unternehmenswerte. Wir sorgen dafür, dass deine Rankings, die sich über Jahre etabliert haben, auch nach dem Website-Relaunch erhalten bleiben und sich noch verbessern. Denn mit einer professionell designten und programmierten Website hast du die Chance, deutlich höhere Rankings zu erhalten. Und damit auch mehr Traffic, Conversions und Umsatz. 

Beim Relaunch wird häufig auf eine neue URL-Struktur umgestellt, sodass es aus SEO-Sicht einiges zu beachten gilt. Auch hinsichtlich der OnPage-Optimierung bietet der Relaunch die Möglichkeit, die eigene Website für Nutzer und Suchmaschinen zu optimieren. 

 

7.1 URL-Struktur und 301-Redirects

Wir versuchen URL-Änderungen nach dem Relaunch soweit es geht zu verhindern. Wenn die Website neu strukturiert werden muss, lässt sich das jedoch häufig nicht komplett vermeiden.

Alle alten URLs, die nicht weiter bestehen, werden per 301-Redirect auf eine neue, passende URL weitergeleitet. 

Somit werden auch alle Signale der Suchmaschine weitergeleitet und die Rankings bleiben erhalten. Außerdem bekommen Nutzer über externe Verlinkungen keine 404-Fehlerseite zu sehen, sondern werden zum entsprechenden Inhalt auf der neuen Website weitergeleitet. 

Bei großen Websites legen wir einen Weiterleitungsplan (URL-Mapping) an, damit nichts übersehen wird. Hierzu stellen wir die alten URLs den neuen gegenüber und ordnen die 301-Redirects entsprechend zu.

 

7.2 Domainwechsel

Ein Domainwechsel ist aus SEO-Sicht nur in wenigen Fällen sinnvoll. Google braucht trotz Redirect mehrere Wochen, um alle Signale und Rankings auf die neue Domain zu übernehmen.

Folgende Gründe können dennoch für einen Domainwechsel sprechen:

  • Die Erschließung internationaler Märkte
  • Ein neuer Firmenname
  • Eine Erweiterung des Angebots, das ein Rebranding benötigt

Der Umzug aufgrund einer sogenannten Keyword-Domain (z. B. www.kronleuchter.de) ist heutzutage nicht mehr sinnvoll, da dies nur noch marginalen Einfluss auf das Ranking hat.

 

7.3 Content und Contentmigration

Contentmigration meint den Umzug der Website-Inhalte auf ein neues System. Wir übertragen also die redaktionellen Inhalte der alten Website in das Backend der neuen Website. 

Natürlich bietet sich bei einem SEO-Relaunch eine Aktualisierung der Inhalte an, wenn diese veraltet sind oder optimiert werden müssen. Wir können dabei helfen, die Website-Texte neu zu strukturieren und mit den passenden Keywords zu optimieren.

Hierbei nutzen wir den Google-Keyword-Planer für die Identifikation der wichtigen Suchbegriffe und Themen.

Google Ads Keywords
 

7.4 Überschriften H1-H6

Überschriften geben dem Leser nicht nur einen Überblick, sondern strukturieren den Inhalt einer Seite auch für Suchmaschinen. In HTML kannst du sechs Überschriften verwenden (<h1> bis <h6>), welche die Schriftgröße und Hierarchieebene festlegen. 

Die <h1> ist die Hauptüberschrift und wird von uns nur einmal pro Seite vergeben. Sie sollte im Optimalfall das Hauptkeyword enthalten. <h2> bis <h6> sind Zwischenüberschriften, welche die Hierarchie abbilden. Im Sinne einer sinnvollen Hierarchie  sollte also z. B. niemals eine <h3> direkt auf eine <h1> folgen.

Auch in den Zwischenüberschriften kann es sinnvoll sein, wichtige Keywords und deren Synonyme unterzubringen – aber nicht auf Biegen und Brechen. Wir gehen beim Texten der Überschriften weder dogmatisch noch nach Schema F vor. Google erkennt Spam-Versuche und straft sie rigoros ab. Im Zweifelsfall gewichten wir daher lieber Lesbarkeit vor SEO, weil auch für die Suchmaschine der User an erster Stelle steht. 

 

7.5 Duplicate Content verhindern

Gedoppelte Inhalte sind ein schlechtes Signal für Google. Zwei unterschiedliche Seiten sollten niemals den gleichen Content haben. Das gilt für externe, aber auch für interne Inhalte. Im Bestfall bietet jede Seite einzigartigen Content, genau auf den Nutzer zugeschnitten.

Manchmal lässt es sich nicht verhindern, dass gleicher Content auf mehreren Seiten vorkommt. In diesem Fall nutzen wir Canonical-Tags, um Google mitzuteilen, welcher der primäre Inhalt für den Index ist.

 

7.6 Meta-Title und Meta-Description

Der Meta-Title (auch Title-Tag oder Title) ist die klickbare Überschrift der URL in den Suchmaschinen und muss die Seite daher möglichst präzise beschreiben und dem User gleichzeitig einen Klickanreiz liefern. 

Wir versuchen immer das Hauptkeyword im Title-Tag unterzubringen, da es immer noch eine hohe SEO-Relevanz hat. Hier zum Beispiel das Snippet unserer eigenen Startseite mit dem Hauptkeyword “digitalagentur”:

Friendventure Digitalagentur Snippet
Die Meta-Description (Text in schwarz) zeigt eine erweiterte Beschreibung der Seite. Mit einer optimierten Meta-Description können wir deine Durchklickrate (CTR) deutlich steigern.

Wir legen Wert darauf, dem User einen spannenden Einblick zu ermöglichen, ohne falsche Versprechungen zu machen – denn falsche Versprechungen führen letztlich zu einer höheren Absprungrate und damit wieder zu einem schlechteren Ranking. 

Wir prüfen stets die Länge von Title-Tag und Meta-Description mit Yoast SEO oder dem Serp Snippet Generator von Sistrix, damit sie nicht abgeschnitten werden. Im Folgenden ein Negativbeispiel, in dem Meta-Title und Meta-Description abgeschnitten sind.

Klempner Snippet
 

7.7 Bilder-SEO-Checkliste

Bilder-SEO ist eine häufig unterschätzte Disziplin. Denn auch Bilder können für Traffic auf deiner Seite sorgen. Google ist zwar immer noch eine hauptsächlich textbasierte Suchmaschine, aber mit ein wenig Optimierung helfen wir ihr, deine Bilder besser zu indexieren.

Dateiname: Das wichtigste Attribut im Bilder-SEO ist der Dateiname. Mit einer Dateibezeichnung wie wbbehke-0667922.jpg kann Google nichts anfangen, weshalb wir deine Bilder immer lesbar für die Suchmaschine benennen. Wichtig sind:

  • ausschließlich Kleinbuchstaben im Dateinamen 
  • keine Sonderzeichen oder Umlaute 
  • Trennung der Wörter mit Bindestrich (kein Unterstrich!)

Wir achten außerdem darauf, wichtige Keywords im Dateinamen zu platzieren. Ein guter Dateiname wäre demnach:

rote-schuhe-frauen.jpg

rote Schuhe

Title-Attribut: Das Title-Attribut eines Bildes teilt dem User ergänzende Informationen über das Bild mit. Wenn er mit dem Mauszeiger über das Bild fährt, bekommt er es angezeigt. Auch die Suchmaschine kann das Title-Attribut auslesen, weshalb es sich lohnt, wichtige Keywords unterzubringen. Primär hat der Meta-Title aber eine Verbesserung der Usability zum Ziel.

Alt-Attribut: Das Alt-Attribut beschreibt klassischerweise das Bild, falls es vom Browser nicht angezeigt werden kann oder auch für eingeschränkte Benutzer, die das Bild nicht sehen können. Deshalb sollte das Alt-Attribut den Bildinhalt möglichst präzise beschreiben. Für die Suchmaschine ist das Alt-Attribut wichtig, da der Crawler dadurch den Inhalt des Bildes zuordnen kann. Deshalb setzen wir wenn möglich auch hier relevante Keywords ein.

Dateiformat: Im Web bieten sich vor allem JPG, PNG,GIF und SVG als Dateiformate für Bilder und Grafiken an. Das gängigste Dateiformat für fotorealistische Bilder ist JPG. Bei Grafiken und Logos mit transparentem Hintergrund nutzen wir hauptsächlich PNG- und SVG-Dateien. 

Dateigröße: Um den PageSpeed deiner Website zu verbessern, passen wir die Maße der Bilder vor dem Hochladen an und komprimieren alle Dateien mit Tools wie TinyJPG, um einen guten Kompromiss zwischen Auflösung und Dateigröße zu finden.

 

7.8 Search Console einrichten

Die Google Search Console (ehemals Google Webmaster Tools) ist ein mächtiges Instrument für jeden Webmaster und SEO. Hier können nicht nur Rankings und Statistiken eingesehen werden, sondern Google warnt auch bei Fehlern im Code, in der Sitemap oder in der URL-Struktur.  

Wir richten die Search Console für dich ein und laden die XML-Sitemap hoch, damit deine Website möglichst schnell indexiert wird. 

 

7.9 Tracking über Google Tag Manager

Um Erfolge messen zu können, braucht es ein funktionierendes Tracking-System. Gerade Auswertungs-Tools wie Google Analytics sind unerlässlich für Onlineshops und moderne Unternehmenswebsites

Über den Google Tag Manager implementieren wir Tracking-Pixel und -Skripte für alle gewünschten Tracking-Tools wie

  • Google Analytics 
  • Facebook 
  • Hotjar 
  • Mouseflow

Der Vorteil des Google Tag Managers ist die einfache Implementierung von Tracking-Codes, ohne aktiv in den Quellcode einzugreifen. Damit hast du alle Tags an einem Ort. Änderungen im Tracking und der Einbau zusätzlicher Conversionpixel sind somit auch ohne die IT-Abteilung möglich.

 

8. Testing

Bevor die Website online geht, prüfen wir sie gründlich auf Herz und Nieren. Hierzu haben wir eine Checkliste erstellt, die alle Punkte enthält, die wir vor dem Go-live testen. 

 

8.1 Cross-Browser-Kompatibilität überprüfen

Bereits bei der Programmierung achten wir darauf, möglichst alle Standards einzuhalten, damit der Code in allen wichtigen Browsern fehlerfreie Ergebnisse produziert. Dennoch kommt es vor, dass einzelne Browser diesen Code fehlerhaft interpretieren.

Daher hilft nur, die Cross-Browser-Kompatibilität der Website für jeden wichtigen Browser zu überprüfen und ggf. Bugs zu fixen und Workarounds einzubauen. 

Beim Testing überprüfen wir alle gängigen Browser wie 

  • Android Browser 4
  • Internet Explorer 11+
  • Edge 15+
  • Firefox 57+
  • Chrome 61+
  • Safari 9+

Außerdem testen wir die Website natürlich nicht nur mit Desktop-Browsern, sondern auch mit verschiedenen Smartphones und Tablets, sowohl unter iOS als auch unter Android

 

8.2 Interne Verlinkung überprüfen

Mithilfe von internen Verlinkungen kann der User durch die Website navigieren. Damit er aber nicht in einer Sackgasse landet, prüfen wir diese internen Links vor dem Go-live z. B. mit dem Plugin Broken Link Checker.

 

8.3 Weiterleitungen prüfen (301-Redirects)

Auch die 301-Weiterleitungen überprüfen wir final noch einmal. Damit verhindern wir umständliche Weiterleitungen über mehrere URLs, welche die Ladezeiten negativ beeinflussen, oder decken mögliche Endlosschleifen auf.

 

8.4 Rechtschreibung prüfen

Wenn wir inhaltlich an der Website gearbeitet haben, überprüfen wir final noch einmal 

  • Rechtschreibung
  • Grammatik und
  • Zeichensetzung.

Die Rechtschreibprüfung übernehmen bei uns erfahrene Lektoren.

 

8.5 Bestell- und Kontaktformulare prüfen

Nichts ist schlimmer als die perfekte Seite, auf der aber das Kontaktformular oder der Bestellvorgang nicht funktionieren. Denn das Ziel ist immer eine Conversion, also die Umwandlung von Besuchern in Interessenten oder Käufer. Deshalb prüfen wir alle Bestell- und Kontaktformulare vor dem Go-live noch einmal auf Funktionalität.

 

8.6 DSGVO-Checkliste überprüfen

Seit dem 25. Mai 2018 muss die Datenschutzgrundverordnung (DSGVO) von allen Unternehmen in Europa eingehalten werden. Anfangs gab es große Unsicherheit darüber, was noch erlaubt ist und was möglicherweise zu einer Abmahnung führt.

Wir als Digitalexperten machen deine Website zu 100 % DSGVO-konform. Unsere DSGVO-Checkliste für den Relaunch enthält folgende Maßnahmen:

  • SSL-Verschlüsselung (URL mit https)
  • Cookie-Hinweis für Websitebesucher
  • Impressum und Datenschutzhinweise gemäß DSGVO über das Premium-Tool von erecht24.de
  • Hinweistext im Kontakformular zur Datenspeicherung (mit Opt-in-Checkbox)
  • Hinweistext in Newsletteranmeldung zur Datenspeicherung (mit Opt-in-Checkbox)
  • Google Analytics: Elektronischer Datenverarbeitungsvertrag wird geschlossen
  • Google Analytics: Opt-out in Datenschutzbestimmung integrieren
  • Google Analytics: IP-Anonymisierung einrichten

 

8.7 Überprüfung des Responsive Design

Gerade das Responsive Design ist anfällig für Fehler, da es sich in mehreren Stufen, sogenannte Breakpoints, an verschiedene Bildschirmgrößen anpasst. Diese Breakpoints testen wir im Hinblick auf das umbrechende Design. Dabei achten wir auf abgeschnittene Texte und Bilder sowie auf die richtigen Abstände der verschiedenen Elemente.

 

8.8 Überprüfung der robots.txt

Wir überprüfen, ob alle wichtigen Verzeichnisse für den Google-Bot crawlbar sind. Außerdem überprüfen wir, ob einzelne Seiten fälschlicherweise noch mit dem Noindex-Parameter oder disallows ausgeschlossen oder passwortgeschützt sind. 

 

9. Go-live

Jeder Go-live ist ein ganz besonderer Moment. Monatelang haben viele Spezialisten gemeinsam an einem Webprojekt geplant, designt und programmiert. Nun sollen alle dafür mit einer neuen, ansprechenden und funktionalen Website entlohnt werden!

“No Deploy Friday”: Der Livegang findet bei uns niemals Freitags statt, sondern immer Anfang oder Mitte der Woche, damit zur schnellen Behebung eventueller Fehler noch genug Zeit vor dem Wochenende bleibt.

Mit dem Upload der neuen Website-Dateien auf den Webserver und der Einrichtung der notwendigen Weiterleitungen ist die Live-Schaltung eingeleitet. 

Beim Launch versuchen wir, Downtimes so weit wie möglich zu verhindern. Falls die Website doch einmal nicht erreichbar sein sollte, richten wir einen HTTP-Code 503 (“Service Unavailable”) ein. Der Code signalisiert der Suchmaschine, dass die Website temporär nicht verfügbar ist. Das vermindert die Folgen einer Downtime für die Rankings.

Viel Zeit zum Anstoßen gibt es für uns aber nicht, da wir unmittelbar nach Livegang die wichtigsten Funktionen der Website überprüfen:

  • Erreichbarkeit testen: Können Nutzer und Suchmaschine problemlos auf die Website zugreifen? Sind alle Seiten erreichbar?
  • PageSpeed testen: Der PageSpeed ist mittlerweile ein entscheidender Ranking-Faktor. Wir überprüfen, wie schnell deine Website tatsächlich lädt und ob hier eventuell noch Optimierungsbedarf besteht. Hierzu nutzen wir PageSpeed Insights von Google.

Mit deinem Zugang zur Google Search Console und zu Google Analytics solltest auch du nach dem Relaunch einige Dinge überprüfen:

  • Rankings überwachen: Bei einem Relaunch ist ein temporärer Abfall in den Google-Rankings völlig normal. Nach 2-4 Wochen sollten sich die Platzierungen aber wieder erholt haben. Nutze die Google Search Console zum Controlling der wichtigsten Rankings.
  • Search Console im Auge behalten: Auf Fehler aller Art sollte ebenfalls in der Search Console geachtet werden. Gerade Crawling-Fehler können hier schnell ausgemacht werden. 
  • Google Analytics: Auch in Google Analytics solltest du das Verhalten deiner Besucher nach dem Relaunch überprüfen. Ändern sich die Verweildauer, Seiten pro Sitzung oder die Top-Channels für Zugriffe auf deine Seite?

Nach dem Relaunch ist vor dem Relaunch! Eine größere Unternehmenswebsite und vor allem ein Onlineshop sind fortlaufende Projekte, die einer konstanten Optimierung bedürfen.

Wir würden uns freuen, dich langfristig zu begleiten, um eine sinnvolle Digitalstrategie für dein Unternehmen auszuarbeiten und umzusetzen. Gerne stehen wir dir auch nach dem Go-live für die technische Wartung und weitere Optimierungs-, SEO– oder Social-Media-Maßnahmen zur Verfügung.

Über den Autor

Gerrit brennt für Content Marketing. Leidenschaftlich gern schreibt er zu Themen wie New Work, Mitarbeiterbeteiligung und Entrepreneurship. Sein Interesse gilt außerdem der Europa- und Netzpolitik. Bei Fragen und Anregungen zum Blog kontaktiert ihn gerne per E-Mail: gerrit(at)friendventure.de

Das könnte noch andere interessieren?
Dann teile es mit der Welt!

Klingt spannend? Gerne sprechen wir mit dir auch über dein Projekt!

Projektanfrage