HTML/Tutorials/Hero-Image-Webseite

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Da das Sehen der wichtigste menschliche Sinn ist, sind hochauflösende Hero-Bilder (engl. hero-images) eine der besten Möglichkeiten die Aufmerksamkeit eines Benutzers zu erregen. Dabei können sie aus professionell fotografierten Rastergrafiken, SVG-Bildern oder sogar auch eingebundenen Videos bestehen. Wichtig ist, dass sie nicht einfach nur schön aussehen, sondern einen klaren Bezug zum Thema Ihrer Webseite haben.

Dank der immer besseren Übertragungsraten und der Anwendung responsiver Bilder ist es möglich viewport-füllende Bilder einzusetzen, ohne auf erträgliche Ladezeiten der Seite zu verzichten

Meist finden sich Hero-Bilder auf der Startseite oder einer Splash Page und werden durch Scrollen von Single-Page Webseiten entweder durch Zickzack- oder Kartenstapel mit weiteren Bildern abgelöst.

Inhaltsverzeichnis

[Bearbeiten] Vorüberlegungen

[Bearbeiten] Größen

Während noch vor ein paar Jahren 1920px Breite mehr als ausreichend waren, sollten Sie für 4k-Monitore Rastergrafiken mit 4000px Breite verwenden. Passend dazu sollten Sie kleinere Versionen vorhalten und evtl. mit Art Direction andere Proportionen und Bildausschnitte auswählen.

[Bearbeiten] Kontraste

Da das Hero-Image den Hintergrund für den Text der Webseite bildet, ist es wichtig, dass Sie den Kontrast wiederholt überprüfen. Nichts ist schlimmer als eine elegante graue Schrift auf einem hellen Bild.

Empfehlung:
Überprüfen Sie die Position Ihrer Überschrift in verschiedenen Bildschirmauflösungen, damit diese
  • immer gut erkennbar ist
  • keine inhaltlich wichtigen Stellen der Grafik verdeckt.
Sie können die Grafik auch entsprechend aufhellen oder verdunkeln, um den Kontrast zu erhöhen.

[Bearbeiten] Typographie

Da das Hero-Image die zentrale Aussage der Webseite ist, sollte es nur wenig Text in Form einer kurzen Überschrift und maximal eines Absatzes zur Erläuterung sowie einiger optisch dazu passender Verweise geben.

Die Überschrift sollte groß und auffällig in einer zum Bild passenden Schriftart sein. Im Augenblick sind dünnere Schrifttypen oder nur die Konturen einer Schrift modern. Dies lässt sich mit SVG (siehe: SVG/Anwendung und Praxis/Texteffekte: Randlinien) realisieren.

Navigationselemente und Erläuterung, wenn überhaupt vorhanden, sollten so dezent wie möglich sein, um das Bild wirken zu lassen. Eventuell könnten Ghost-Buttons zum Einsatz kommen.

Auch die Farbwahl sollte vom Bild abhängig sein.

  • Ein farbiges Bild erhält schwarze und weiße Textelemente.
  • Schwarz-weiß-Bilder erhalten Bedienelemente aus einer Farbe oder einer einfachen Farbpalette.
Beachten Sie: Text sollte nie wichtige Bildelemente verdecken. Testen Sie mehrfach in allen Auflösungen!

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] große Header

Grundsätzlich bestehen Hero-Webseiten aus großen header-Elementen mit einem seitenfüllenden Bild oder Hintergrundbild.


Beispiel: Hero-Bilder
html, body, header, h1, img {
  padding: 0;
  margin: 0;
}
 
header {
  position: relative;
  height: 99.5vh; 	
}
Die Innen- und Außenabstände werden auf 0 gesetzt und der header erhält mit height: 99.5vh; die gesamte Höhe des Viewports. Die Längenangabe vh bezieht sich direkt auf die Höhe des Viewports.


Beispiel: Hero-Bilder ansehen …
<header>
  <img src="narzisse-m.jpg" 
       alt="Osterglocke als Zeichen des Frühlings, Quelle: Wikipedia"
       srcset="narzisse-lg.jpg 4140w, 
             narzisse-m.jpg 1920w, 
             narzisse-sm.jpg 1000w">
 
  <h1>
    <svg id="eins" width="270" height="150">
	  <text x="1" y="100">
	    Frohe
	  </text>
	</svg>
    <svg id="zwei" width="270" height="150">
	  <text x="1" y="100">
	    Ostern!
	  </text>
	</svg>    
  </h1>
</header>
Das Bild wird mit dem srcset-Attribut für verschiedene Viewport-Abmessungen in mehreren Größen referenziert - der Browser lädt sich dann das passende aus.
Die Überschrift wird über das Bild gelegt. Innerhalb des h1-Elements sind zwei svg-Elemente eingebunden, die untereinander absolut positioniert sind. Diese Lösung wurde gewählt, da man SVG-Text (noch) keine feste Breite geben kann und er deshalb bei kleinen Viewports nicht umbricht.

[Bearbeiten] Variante 2: SVG-Grafik

Beispiel: Hero-Bilder ansehen …
<main>
  <header>
    <h1>
      <svg>
        <text x="1" y="100">
	  Frohe Ostern!
  	</text>
      </svg>    
    </h1>
  </header>
  <img id="eins" src="ostern-1.svg" 
       alt="Tulpe mit Ostereiern">
  <img id="zwei" src="ostern-2.svg" 
       alt="Bunny mit Ostereiern">       
</main>
In diesem Beispiel besteht das Hero-Image nicht aus einem einzigen Bild, sondern wird aus mehreren Bildern zusammengesetzt, da sich die einzelnen Bildelemente bei einer Veränderung des Seitenverhältnisses sonst nicht responsiv im Raum verteilt hätten.
Die Links sind als Ghost-Buttons ausgelegt, damit sie zum Gesamteindruck des Bildes passen.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML