procedo-personalservice.de Formate-test Medienelemente

MEDIENELEMENTE

Überschrift erster Ordnung – h1

Galerie Elemente

Damit man auch mal große Bilder sehen kann

Beide Galerie-Elemente (PhotoGallery und PhotoSwipe) dienen dazu, mehrere Bilder darzustellen. So können User selbst entscheiden, ob sie das alles ansehen möchten, ohne über eine Unmenge an für sie uninteressante Bilder hinwegscrollen zu müssen.

Jedes Bild muss in einer ausreichenden Größe (950*469px exakt für die große Galerie) vorliegen und mit Metadaten versehen sein. Es hat wenig Sinn, die Bilder in einem winzigen Format in eine Bildergalerie zu pflegen, da User diese dann ohnehin nicht besser erkennen können als in einem Text mit Bild-Element.

Sie können frei wählen, ob auf Ihrer Seite eine große Bildgalerie (PhotoGallery) oder ein Bilderslider (PhotoSwipe) passender sind.

Einschränkungen: Auf Grund des Formates der Seite und der Endgeräte ist insbesondere die große Galerie auf Fotos im Querformat beschränkt. Die exakte Größe der Bilder für die große Galerie muss 950 x 469px betragen, damit diese ohne Verzerrung im Frontend angezeigt werden können. Bilder, die im Hochformat aufgenommen sind, können in der großen Galerie nicht sinnvoll dargestellt werden (schwarze Balken links oder rechts werden nicht angeboten, da das dem Sinn einer Darstellung eines großen Bildes widerspricht, wenn der halbe Bildschirm schwarz ist. Speziell auf kleineren Bildschirmen kann man ein Bild im Hochformat ohnehin nicht mehr erkennen.)

Wenn sie Bilder haben, die im Hochformat aufgenommen sind, verwenden Sie bitte ausschließlich den Bilderslider (PhotoSwipe). Achten Sie auch bei Bildern für das PhotoSwipe-Element auf eine ausreichende Größe der Bilder.

Achten Sie generell darauf, genügend Bilder in einem Galerieelement einzupflegen (5 Bilder und mehr).

GALERIE (GROß)

Galeriebild Beschreibung hier ...

GALERIE (KLEIN)

VIDEO

Bitte Beschreibungstext „Um was geht es in dem Video“ lesen für Erklärungen.

Dieses Video ist extern gehostet (YouTube, Vimeo, bbw-Videobackend) und sendet nur Daten, wenn Sie das Vorschaubild anklicken.

Um was geht es in diesem Video?

SINGLE IMAGE

Nur in Ausnahmefällen verwenden. Keine kleinteiligen Ablaufpläne hier einbauen, kann keiner mehr lesen. Bilder mit Text darauf sind zudem nicht barrierefrei. [Fun Fact: Diese Zusatzzeile ist viel zu lang]

Der alternative Text der Bilder MUSS gepflegt sein — Die Bildbeschreibung wird als Bildunterschrift ausgegeben. Bitte pflegen Sie Bilder maximal bis zu einer Größe von 950px ein, alles darüber wird ohnehin zusammengezogen und verbraucht nur unnötig Datenvolumen

Medien

Das Container-Element „Medien“ besteht aus einer übergreifenden Überschrift (h2) und einem oder mehreren Unterelementen. Ein Unterelement wiederum besteht aus einem linksseitigen Bild, einer Überschrift (h3), einem erklärenden Text und einem oder mehreren Download-Links. Dabei zeigt das eingesetzte Bild den zu erwartenden Download an und ist auf eine Breite von 368px zugeschnitten. Es bietet sich daher generell für diese Bilder das (News-)Teaserformat an (368*225px).

Das Container-Element „Medien“ ist dafür gedacht Bild-/Pressematerial zum Download anzubieten.

Es kann so oft wie nötig auf einer Seite eingesetzt werden. Es besitzt aber einen hohen Aufmerksamkeitswert.

Verwenden Sie das Element nicht, wenn Sie damit keine entsprechenden Downloads anbieten.

MEDIEN ÜBERSCHRIFT

Ein Element um Medien zum Download anzubieten

Ein Beispieleintrag

Laden Sie sich ein Dummybild herunter

Ein Medienelement ist dazu gedacht, diverse Medien zum Download anzubieten. Es kann sich hier z. B. um Bildmaterial für eine Pressemittelung handeln oder um PDFs. Wichtig ist, dass immer zwingend ein Vorschaubild eingepflegt wird, das genau 368px breit sein muss. Für ein einheitliches Erscheinungsbild ist es sinnvoll, hier immer dasselbe Format z. B. 368*225px zu wählen (wie beispielsweise die Größe des Newsteaserbilds).

Ein Beispieleintrag

Laden Sie sich ein Dummybild herunter