Artikel
Projekt Homepage erstellen: Responsives Design und Content Management

Heute möchte ich Ihnen eines unserer spannenden abgeschlossenen Projekte vorstellen. Ein Kunde wünschte die Überarbeitung seiner bestehenden und in die Jahre gekommenen Internetseite. Wir haben nicht nur die Gestaltung optisch umgesetzt, sondern auch SEO Maßnahmen unternommen, um die bereits gute Positionierung der Seite bei Google Suchanfragen noch weiter zu verbesser.

Ausgangssituation neue Homepage erstellen

Ausgangspunkt Ur-Seite

Neue Homepage erstellen. Ausgangsseite

Oben sehen Sie die alte Internetseite, die relauncht werden sollte. Es handelte sich dabei um eine klassische statische Seite.

Das Briefing des Kunden

  • Konkrete Vorgaben bestanden hinsichtlich des Logos und der Farben.
  • Die Seite sollte die Möglichkeit beinhalten, dass auf der Startseite in einem Bereich „Aktuelles“ die Inhalte selbst verändert werden können
  • Der Kunde wollte lieber Bilder als Texte sprechen lassen.

Unser Konzept

  • Statt nur einen Bereich veränderbar zu gestalten, wurde die gesamte Webseite als Content Management System angelegt. So kann der Kunde alle Inhalte und Bilder selbst ändern und pflegen
  • Rubriken und Inhalte wurden neu sortiert und überarbeitet
  • Satt wie bisher eine statische Seite zu erstellen, wurde eine responsive Seite kreiert. Das heißt, das Layout der Seite passt sich automatisch an das Gerät und dessen Auflösung an. So wird die Homepage auch auf Smart-Phones und Tablets korrekt dargestellt.
  • Bilder, die bisher selbst mittels einer eigenen Kamera geschossen wurden, wurden komplett überarbeitet und für die Webseite optimiert.
  • Ein spezielles Modul, das vorher- nachher Fotos übereinander legt und via Schieber die Unterschiede zeigt, wurde angepasst und in das Projekt eingebunden.

  • Bestehende Bilder wurden durch Korrektur der Perspektive und Farbanpassungen so berabeitet, dass sie nahezu deckungsgleich übereinander liegen
  • Zusätzlich wurde eine Fotografin beauftragt, neue / professionellere Fotos zu machen

Arbeiten, die man nicht im Layout sieht

  • Obwohl die Seite bereits vorher bei den Suchergebnissen via Google sehr gute Positionen erhielt, konnte das Ranking nochmals gesteigert und die Positionierung noch weiter auf die ersten Plätze verbessert werden. Dabei wurden gleich mehrere Suchbegriffe und Kombinationen optimiert
  • Eine Recherche hatte ergeben, dass die bisherige Seite eines der wichtigsten Suchbegriffe zu diesem Thema gar nicht berücksichtigte. Dieser Suchbegriff lag bereits nach 1 Woche auf der ersten Seite.
    Google Suche

    Google+ Profil und Erste Plätze bei Suche…

  • Die komplette Seite wurde hinsichtlich Google optimiert und entsprechend programmiert
  • Zur Steigerung der Suchergebnisse wurde ein Google+ Profil angelegt, mit der Seite verbunden. Ebenso wurde Google Analytics zur Auswertung eingebunden sowie Google Web-Fonts. Alle Maßnahmen wirken sich positiv auf das Ranking aus.

Das Content Management System

Als Content Management System wurde eine sehr komfortable und Nutzerfreundliche Variante gewählt. Nach Anmeldung mit einem Passwort sind alle veränderbaren Bereiche (Texte, Bilder, vorher-nachher-Show) markiert. Mit einem Klick auf das Symbol öffnet sich ein Fenster und die Inhalte können aktualisiert werden.

Normale Browser Ansicht

Normale Browser Ansicht

Browser Anzeige nach Anmeldung in Content Management

Browser Anzeige nach Anmeldung in Content Management

Editor nach Aktivieung eines Textelementes

Einfacher Editor nach Aktivieung eines Textelementes

Der Vorteil dieses Systems liegt in seiner Übersichtlichkeit: Kein Frontend / Backend, keine abstrakte Trennung von Inhalt und Design. Die Inhalte werden einfach dort angepasst, wo sie stehen: auf der Webseite.

 

Passende Visitenkarten

Passend zum Design der neuen Webseite wurden neue Visitenkarten kreiert

Editor nach Aktivieung eines Textelementes

Visitenkarten im neuen Look

Webdesign

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Copyright: 2004 – 2017 | KRquadrat.com