< E05-S17

Jan (webGefährte für SEO)

E05-S17

17. Juli 2025

Verwenden Sie grafische Elemente auf Ihrer Webseite konsistent? Mit anderen Worten, haben die Überschriften der gleichen Ebene eine einheitliche Größe, erscheinen Zitate im gleiche Layout oder sind Schaltflächen in wiedererkennbaren Farben dargestellt? Wiedererkennung im Sinne von gleichen Muster sind für eine intuitive Bedienung der Seite unabdingbar. Zusätzlich wird die Ladezeit damit positiv beeinflusst, da weniger Formatvorlagen (engl. Stylesheets) geladen werden müssen. In diesem Etappenstop treffen wir grundlegende Entscheidungen für das Aussehen unserer Webseite und bedienen uns auch diesmal hilfreicher Werkzeuge bzw. Vorlagen.

Unser Ziel: Blaupause für die Umsetzung eines konsistenten und Ladezeit-optimierten Layouts der Webseite festlegen.

Video-Anleitung zu Etappenstopp „Layout, Farbe & Schrift“ (Spieldauer ca. 13 min)
Transkript zur Video-Anleitung
  • Dieser Spickzettel besteht aus zwei Teilen.
  • Im oberen Teil können Sie eine Layout-Vorlage auswählen, wenn Sie sich für den „Einzug“ ins Gruppensystem entschieden haben. Wollen Sie Ihre Webseite an bestehender Stelle optimieren, dann erhalten Sie von der beschriebenen Vorgehensweise ebenfalls nützlich Hinweise.
    • Um eine geeignete Vorlage auszuwählen, orientieren wir uns am geschäftlichen Zweck bzw. dem Ziel, welches wir mit dem Betrieb der Webseite erreichen wollen.
      • Option A steht hierbei für Anfragen-optimierte Vorlagen und V für solche, die den Verkauf einer Dienstleistung ermöglichen.
      • Wie Sie sehen, gibt die gewählte Vorlage damit sowohl optische als auch strukturelle und inhaltliche Aspekte der Webseite vor. Wenn Sie mehr über Typen von Webseiten und jeweils zugehörige Ziele erfahren möchten, dann empfehle ich Ihnen einen Blick in meinen Beitrag „So wird Ihre Webseite zum Profit Center“ und insbesondere den Abschnitt zur Umsetzung zu werfen.
      • Sehen wir uns die Option für eine Anfragen-optimierte Seite nun genauer an.
        • In drei Schritten definieren Sie hier das gewünschte Layout.
        • Jetzt kommt der Spaß-Teil. Öffnen Sie über den Link die Galerie an Premium-Vorlagen und wählen zunächst den Filter „Business“ aus.
        • Aus den knapp 30 Vorlagen können Sie jetzt gezielt das passende auswählen, indem Sie gedanklich folgende Einschränkungen vornehmen…
          • Fragen Sie sich, beispielsweise, ob eine Gemeinsamkeit zwischen dem Namen der Vorlage und dem Typ Ihrer Dienstleistung besteht.
          • Ebenfalls hilfreich ist eine gedankliche Brücke zu den inhaltlichen Themen. Ist hierzu bereits eine verwandte Vorlage vorhanden, dann sehen Sie sich diese unbedingt zuerst an, indem Sie über diese Schaltfläche in den Vorschaumodus wechseln.
          • Hier können Sie auf der Webseite mit der Brille eines Besuchers betrachten. Bitte vergessen Sie nicht, einen Blick auf die mobilen Ansichten der Webseite zu werfen. Die Ansicht wechseln Sie, indem Sie in der Kopfzeile das entsprechende Symbol für den Tablet- bzw. Smartphone-Modus auswählen.
          • Sie sind ein visueller Typ und lassen sich daher bei der Auswahl eher von Formen, Farben oder Animationen leiten? Eine Auswahl allein darüber zu treffen, davon rate ich ab. Der Grund hierfür; nach der Auswahl einer Vorlage können wir Farben, Schriftarten oder Symbole ohnehin abweichend von der Vorlage bestimmen. Finden Sie also zusätzliche Merkmale wie Animationen, Bildformen oder Übergänge zwischen Elementen, dann lassen dies jedoch unbedingt bei der Auswahl einfließen.
          • Sehen wir uns ein konkretes Beispiel hierzu an. Angenommen, Sie wählen die Vorlage namens ZEAL aus. Diese übernehmen wir aus der Galerie wie folgt…Scroll
          • Nach der Übertragung Ihrer gewünschten Farbschemas würde die Seite zum Vergleich dann in etwas so aussehen.
        • Haben Sie eine Vorlage in die engere Auswahl genommen, dann folgt der zweite Schritt.
          • Hier gebe ich Ihnen eine Checkliste von 4 Punkten an die Hand, um Ihre Vorauswahl zu bestätigen. Gehen Sie diese gedanklich durch und wählen auf Basis dieser Punkte die für Sie passende Vorlage aus.
          • Schwanken Sie zwischen zwei Vorlagen und möchten eine bestimmte Funktion von anderen Vorlagen unbedingt in Ihre präferierte Vorlage übernehmen, dann tragen Sie Ihren Wunsch gern in die am rechten Bildrand befindlichen Kommentarfeld ein. Gern prüfe ich im Anschluss, ob und wenn ja, wie wir diesen Wunsch erfüllen können.
        • Im dritten Schritt teilen Sie mir bitte den Namen Ihrer Vorlage mit, indem Sie diesen in das dafür vorgesehen Feld eintragen.
    • Der Abschnitt zur Auswahl von Verkaufs-optimierten Vorlagen ist übrigens analog aufgebaut. Sprechen Sie mich gern direkt an, falls Sie hierzu bzw. zur nötigen Erweiterung des SEO Share Abos Fragen haben.
  • Im unteren Teil des Spickzettels stellen wir einen Bezug zu Ihrem vorhandenen Firmenauftritt und, damit verbunden, zu anderen Marketingunterlagen her. Schließlich wollen wir Ihren Online-Vertriebsmitarbeiter im gleichen Gewand präsentieren, wie das, was Kunden von Ihnen bereits kennen und lieben.
    • Sie können also schonmal eine Visitenkarte, die zuletzt gedruckte Broschüre oder ähnliches parat legen, um im Folgenden die Abschnitte zum Farbschema, zur Schriftart bzw. zu den von Ihnen verwendeten Symbole, mit den richtigen Details zu befüllen.
      • Im Abschnitt zum Farbschema kennen Sie idealerweise die Farbcodes und tragen den entsprechenden HEX-Wert in das gelbe Feld in Spalte E ein. Können Sie diese nicht selbst in Erfahrung bringen, dann sprechen Sie mich hierzu bitte direkt an oder wählen in der Spalte C die gewünschten Farben über die Schaltfläche „Füllfarbe“ aus. Löschen Sie anschließend bitte den HEX-Wert in Spalte E.
      • Wenn Sie bereits eine konkrete Vorstellung darüber haben, an welcher Stelle die Farbe verwendet werden soll, dann nutzen Sie gern die Felder neben dem Farbcode in Spalte G, um Ihre Gedanken für mich festzuhalten.
      • Die Schriftart ist als Nächstes an der Reihe. Können Sie die auf Ihrer Visitenkarte oder im Logo verwendete Schriftart nicht selbst herausfinden, dann lassen Sie mir einfach ein Foto davon über Ihr Smartphone zukommen. Gern lese ich die verwendete Schriftart dann für Sie aus.
      • Grundsätzlich empfehle ich, eine Schriftart als primären Standard für die gesamte Webseite zu definieren. Um emotionale Akzente zu setzen, ist eine sekundäre Schriftart wünschenswert.
      • Anregungen zu Schriftarten können Sie sich über diesen Link in Spalte I aus der entsprechenden Bibliothek von Google holen. Tragen Sie bitte den Namen ihrer gewünschten Schriftarten in Spalte C ein.
      • Emotionen werden jedoch nicht nur über Schriften, sondern auch über Symbole ausgedrückt. An dieser Stelle ist mit Symbol jedoch nicht Ihr Firmenlogo gemeint. Vielmehr sollten Sie hier an Ihre in Spickzettel 3 definierten Alleinstellungsmerkmale denken.
      • Sehen wir uns hierzu noch kurz die Startseite von WebGefährte an. Diese ist auf Geschäftsführer bzw. Einzelunternehmer ausgerichtet, die schnell relevante Botschaften erfassen wollen. Hierfür werden gleich im oberen Bildschirmbereich passende Symbole als Bildsprache verwendet.
      • Überlegen Sie also, welche Symbole Ihre Botschaften verständlich transportieren und tragen diese in der Spalte C entsprechend ein. Wenn Sie auf keine vorhandenen Symbole zurückgreifen können, dann gebe ich Ihnen in der Spalte I über diesen Link eine Inspirationsquelle an die Hand.

Voilà. Damit können Sie nun Ihr konsistentes und Ladezeit-optimiertes Layout festhalten. Halten Sie Ihre Entscheidungen in den gelben Feldern entsprechend fest und zögern Sie nicht bei Fragen den Videoassistenten um Rat zu fragen. Ich helfe Ihnen sehr gern weiter :-).

Article by Jan (webGefährte für SEO)

Lorem ipsum amet elit morbi dolor tortor. Vivamus eget mollis nostra ullam corper. Natoque tellus semper taciti nostra primis lectus donec tortor fusce morbi risus curae. Semper pharetra montes habitant congue integer nisi.