Der ideale Aufbau einer Webseite für Google und deine Leser

http://www.car-service-point.de/team.htm

Die Leerzeichen auf allen Seiten sorgen dafür, dass die Website sauber und aufgeräumt aussieht. Das Portfolio an Grafikdesign- und Illustrationsbeispielen ist leicht zugänglich. Spannend sind die dezenten Animationen auf den Karten, verknüpft mit Arbeitsproben. Kräftige Farben, hochauflösende Fotos und beschreibender Text machen das Portfolio leicht verständlich und optisch ansprechend. Janaes Grafikdesign- und Illustrationsportfolio vereint Kreativität, Funktionalität und moderne Webdesign-Prinzipien. Die Navigationsleiste folgt einem vereinfachten Ansatz und enthält als Menüs nur die Optionen „Home“ und „Portfolio“.
Umgesetzt wurde dies durch verschiedene Header, die den Webseiten-Besucher an das  jeweilige Fotografie-Thema heranführen. Suchmaschinenoptimierung, Texte und Hosting wurde über „Die ideale Webseite“ realisiert. Mit meiner Erfahrung als Werbetexter formuliere ich Ihnen die passenden seo-konformen Texte für Ihre Webseite. In diesem Abschnitt dreht sich alles um kreative Navigationskonzepte und spielerische Designansätze.
Für Logos nimmst du am besten PNG, wenn sie keinen Farbverlauf haben. Für alle anderen Bilder JPG oder PNG, wenn sie einen transparenten Hintergrund haben sollen. Wenn du Dateigröße sparen willst, solltest du deine JPG und PNG-Dateien in WebP umwandeln, oder noch besser in AVIF. Letzteres wird noch nicht von allen Browsern unterstützt, zur Zeit dieses Artikels.
Hier kannst du einfach auf "Datei", "Exportieren" und "Für Web speichern" klicken. Anschließend kannst du im Menü das Dateiformat und die Bildgröße in Pixeln auswählen. Google verwendet eine Vielzahl von Metriken, um zu bestimmen, welche Webseiten an der Spitze der Suchergebnisse stehen. Die Qualität der Bilder (oder genauer gesagt, die verbesserte Nutzererfahrung, die sie erzeugen) ist ein wahrscheinlicher Faktor in Googles Algorithmus. Im Beitrag erfährst du, welche Bildgrößen du auf deinen Websites brauchst und worauf du bei der Optimierung achten solltest.
Es geht an dieser Stelle noch nicht um einen festgelegten Zeitplan, sondern um Regeln für die Text- und Bildproduktion. Das mag sich im ersten Moment sehr bürokratisch anhören, erleichtert aber später allen Beteiligten die Arbeit. Das gilt umso mehr, wenn verschiedene Mitarbeiterinnen/Mitarbeiter oder unterschiedliche Teams an der Content-Produktion beteiligt sind. Sobald genaue Vorgaben vorhanden sind, können sich alle orientieren. Du wirst sehen, die Content-Produktion verläuft dann deutlich effizienter. Zugleich sorgt eine Guideline dafür, dass Deine Contentproduktion ein einheitliches Gesamtbild liefert.
Diese Zielseiten bilden eine car-service-point.de Ausnahme vom hierarchischen Website Aufbau und liegen neben deiner Website Struktur. Es kann vorkommen, dass du für eine Werbeanzeigenkampagne eine spezielle Landing Page erstellen möchtest. Wie die optimale Landing Page aussieht, haben wir dir in einem eigenen Artikel schon beschrieben. Ganz oben in der Pyramide steht die Startseite, die Verweise zu den wichtigsten Unterbereichen, also Kategorien enthält. In unserem Beispiel verweist die Startseite auf die Fahrzeugarten Limousine, Kombi, SUV und Kleinwagen. Die einzelnen Modelle werden jetzt unterhalb dieser Hauptkategorien im Detail beschrieben.
Große Fotos und ein paar Scrolleffekte – so einfach kann man eine der schönsten deutschen Webseiten entwickeln. Mit ausgewogener Hover-Animation und feiner Typo buhlt diese Website um die Aufmerksamkeit des Wald-und-Wiesen Surfers. Das Thema Heizung ist natürlich weder spannend noch besonders ästhetisch.
Somit erkennst Du schnell, wonach potentielle Website-Besucher suchen und kannst somit schon bei der Konzeption Deiner Website darauf achten, welche Bereiche Du auch mit abbilden solltest. Achte darauf, nicht nur nach relevanten / oft gesuchten Kategorien zu suchen sondern auch Longtail-Keywords mit aufzunehmen, wie bspw. Fragestellungen, die Du dann auf Deiner Website direkt mit beantworten kannst.
Es kann sehr hilfreich sein, deine Navigationsstruktur mit echten Nutzern zu testen, um sicherzustellen, dass sie intuitiv und leicht verständlich ist. Eine überfüllte Navigation ist wie ein überkomplizierter Wegweiser – sie verwirrt mehr, als dass sie hilft. Oft sehen wir Websites mit zu vielen Menüpunkten in der Hauptnavigation oder unlogisch angeordneten Elementen. Besonders problematisch sind tief verschachtelte Untermenüs, die Besucher schnell überfordern können. Erstelle eine visuelle Darstellung deiner Sitemap, so wie du es weiter oben schon gesehen hast. Du kannst dafür einfache Tools wie Draw.io, MindMeister oder sogar Stift und Papier verwenden.
Da die meistens Webseiten-Layouts mit einer maximalen Breite eingestellt sind, kommst du in der Regel mit Bildgrößen von 1280x720px unproblematisch hin. Hyer bietet seinen Nutzern geteilte Flüge und personalisierte Buchungen an, und dieser transparente, schnörkellose Service spiegelt sich im Design wider​. Ein einprägsamer Slogan, eine leicht verständliche Navigationsleiste und ein klarer Call-to-Action-Button runden die Startseite ab​. Statt mit Reizen zu überfluten, setzt Hyer auf Qualität der Bilder und Typografie. Diese reduzierte Ästhetik mit Fokus auf Benutzerführung wurde auch von Designjurys honoriert (u.a. Website of the Month bei den CSS Design Awards)​. Hyer steht sinnbildlich für die Eleganz der Einfachheit im Webdesign.