Projekt WordPress Theme Entwicklung Teil2

Wordpress Theme Header Version 7

WordPress Theme Header Versionen

Allgemeines

Ich habe mich nun hingesetzt und gefragt welche WordPress Theme Header Versionen es gibt für den Typ Theme den wir im letzten Artikel ausgewählt haben. Eine weitere Frage war wie man den Webseiten Header vereinfachen. Hierfür wurden wieder über 100 Webseiten analysiert und geprüft wie man diese auf wenige Versionen kürzen kann. Die nachfolgend 7 Header Varianten sind schwarz umrissen, dies bedeutet nicht, dass es hierbei um eine feste Größe geht. Es wurden Webseiten mit voller Breite, sowie auch mit festgelegter Breite zusammen-gefasst. Später kann dies als Auswahl im Theme durch den CSS Code festgelegt werden.

WordPress Theme Header Version 1

Version 1 Header
Version 1 Header

Die Version 1 hat die klassische Header Struktur meiner aktuellen 16ten Version meiner Webseite unter www.andre-winkelmann.de.  Links oben sind die Landingpages der Hauptbereiche welche die meisten Besuche auf meiner Webseite erhalten verlinkt. Rechts daneben sind Social Media Icons von mir im Web. Darunter befindet sich ein Logo Links und ein Slogan rechts. Darunter ein horizontales Menü mit einzelnen und Pulldown Menü Buttons.

WordPress Theme Header Version 2

Header Version 2
Header Version 2

Auch diesen Header habe ich auf meinem alten 15ten Webdesign Version meiner Homepage schon verwendet. Ich wollte damals lokal bekannt werden und habe meine Adresse, Rufnummer und E-Mail-Adresse oder Kontaktformular im Header eingefügt. Dies würde ich heute für einen Blog nicht mehr nutzen, aber ein Link zu einem Kontaktformular lässt sich durch Variante 1 ja umsetzen. Für Firmen wiederrum gehört die schnelle Kontaktaufnahme Ihrer Kunden dazu und die Adresse, Rufnummern und Kontaktformular gehören zu den wichtigsten Kontaktmitteln.

WordPress Theme Header Version 3

Header Version 3
Header Version 3

Bei dieser dritten Version unterscheidet sich nur die Navigation. Als primäres Element wurde eine Suche hinzugefügt und für die Navigation das bekannte mobile Menü Icon mit drei horizontalen Stichen. Diese Variante hatte ich eine Zeit lang selbst für eine meiner Firmen verwendet. Aber auch im Internet bei der Suche nach Beispielen bin ich bereits mehrfach auf diese Menü Art gestoßen. Das Menü Slide bei der mobilen und bei der Desktop Version von der linken Seite ins Bild ohne eine Aktion des Kunden wird das Menü auf der Home nicht angezeigt. Bei einem zweiten klick fährt es wieder ein. Der Vorteil ist das diese Art des Menüs dazu führt das die Webseite nicht überladen aussieht. Der Kunde kann sich damit auf die primären Inhalte konzentrieren. Bei Landingpages für nur ein Produkt sehen wir im Web immer wieder das Landingpages kein Menü haben, dies ist eine etwas abgewandte Variante für eine normale Webseite.

WordPress Theme Header Version 4

Header Version 4
Header Version 4

In der vierten Variante fällt das Navigationsmenü in den Bereich neben dem Logo der Slogan muss dafür weichen.

WordPress Theme Header Version 5

Header Version 5
Header Version 5

Die Variante fünf ist für meine Bedürfnisse zu überladen. Speziell hört man auch von Experten immer wieder das es hierbei bei einem Kunden zu einer Reizüberflutung kommen kann. Es ist aber eine Variante die ich bei vielen Webseiten gefunden habe. Daher wird diese hier auch aufgeführt.

WordPress Theme Header Version 6

Wordpress Theme Header Version 6
WordPress Theme Header Version 6

Bei dem sechsten Header fallen die Adresszeile und die Zeile mit zusätzlichen Links und Social Media Menü weg.

WordPress Theme Header Version 7

Header Version 7
Header Version 7

Variante sieben findet man bei vielen One Page Webseiten dessen Menüs auf Web Anker verlinken, die auf derselben Seite verlinkt sind. Im Header, der viel schmaler ausfällt als bei allen anderen Versionen, ist auf der linken Seite das Logo in der Mitte die primäre Navigation der Webseite und rechts die Social Media Links der Webseite. Darunter ist ein Bild das die gesamte Sicht des Webbrowsers einnimmt mit einem Werbeslogan oder einem Response.

Schlusswort:

Mir ist klar das es jede dieser Variante auch mit einem Logo auf der rechten Seite gibt. Die gemessene Zahl der Varianten hatte das Logo allerdings links. Für eine Umsetzung werde ich daher in den ersten Versionen des Headers das Logo auch links einbauen. Eine eventuelle Anpassung der Webseite kann schnell erledigt werden und wird nach der Fertigstellung der Theme in einer Child-Theme oder in späteren geplanten Themen-Themes* als mögliche Option umgesetzt.

Umsetzung:

Ich bin mir bislang noch nicht sicher wie ich die einzelnen Varianten umsetze. Ich bin bislang noch kein WordPress Experte dazu aber später mehr. Bei Lazarus und Freepascal meinen primären Experten Wissen nennt man ähnliches Systemweiche. Benötigt man den Adressteil kann man ihn als Widget aktivieren. Ist er das nicht wird er nicht angezeigt. Meine Sorge das diese Programmierung zwar praktisch aber nicht gut für die Anzeigegeschwindigkeit ist dürfte auch klar sein. Aus SEO Sicht sollte das auch noch geprüft werden. Wir reden hier im Bereich der Webprogrammierung um Millisekunden, daher meine Vermutung es werden alles eigene Templates angeboten. Hier werden natürlich Wartung und Weiterentwicklung komplizierter. Das muss durch Geschwindigkeitstest mit verschiedenen Themes ausprobiert werden und angepasst werden.

*Themen-Themes: Fertige Themes zu Themen wie Handwerker Webseiten (Elektro, Schreiner, Schlosser, Maler, Klempner oder Dienstleistung Webseiten für Friseure, IT Dienstleister usw.)

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.