Name des Produktes

Mauris pharetra mollis diam sed semper. Nullam scelerisque ac dolor vel rutrum. Ut pulvinar dolor vel efficitur sodales. In et lorem ac sapien sollicitudin porttitor. Donec dui nisi, condimentum vitae consequat vel, pretium eget nisl. Aliquam aliquet turpis non magna imperdiet, non blandit lectus finibus. Maecenas eu odio sagittis, pharetra nunc in, rutrum velit. Duis ullamcorper viverra quam, vitae rhoncus tellus dapibus ac. Fusce mattis augue ac magna dignissim molestie eu sit amet odio.

Praesent lobortis vestibulum posuere. Nullam ante orci, ullamcorper eu sapien ac, vestibulum fringilla urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In et auctor sem, id dictum sem. Sed libero purus, varius hendrerit aliquam ac, dignissim nec mi. Nullam tincidunt rhoncus diam at egestas. Fusce bibendum justo a arcu mattis luctus. Nunc condimentum rhoncus tortor, ut vehicula mauris. Pellentesque tristique sapien at pharetra placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Ein Produktseite (PDS) hat immer eine Bühne vom Typ "Big".

Bilder

In dieser müssen für die verschiedenen Viewports drei Bilder angelegt werden, wobei der Fokus des Bildes in den Varianten XL und LM immer rechts liegen muss. In der SXS kann der Fokus mittig sein, da das Bild in der mobilen Ansicht über der Headline steht und nicht "daneben".

• XL = 2560 x 1600px, für hohe Auflösung auf Desktop-PCs und größeren Laptops/Notebooks
• LM = 1400 x 1440px, für kleinere Auflöung auf älkteren Systemen oder Laptops/Notebooks und auch Tablets
• SXS = 640 x 640px, für Smartphones und kleinere Tablets

Der Verlauf auf den Bildern wird in alle drei Größen automatisch vom CMS generiert und darf nicht im Bild selbst enthalten sein.

Für die Desktop-Ansicht kann in die Bühne auch ein Video eingefügt werden. Dies muss im Format MP4 und einer Auflösung von 1680 x 1050px angelegt werden und sollte eine Größe von 500 KB nicht überschreiten. Das Video wird nur in der XL-Variante der Bühne angezeigt und automatisch abgespielt.

Texte

Der Subtitle über der eigentlichen Überschrift gibt die Kategorie der Seite vor. Hierbei wird zwischen "Produkte" oder "Services" unterschieden. Andere Kategorien sollten möglichst nicht genutzt werden, damit die Seiten einer einheitlichen Darstellung und Kategorisierung folgen (max. 40 Zeichen, optional, Darstellung als H5)

Die Headline ist der Produkt- oder Service-Name und ist auch aus SEO-Sicht ein sehr wichtiger Bestandteil der Seite. Bei Produktnamen wird immer der vollständige Name verwendet, also inkl. vorangestelltem "Postbank", so es sich um ein Postbank Produkt handelt. Um ungünstige Zeilenumbrüche im Produktnamen zu vermeiden, müssen an passender Stelle geschützte Leerzeichen verwenden werden. Diese verhindern, dass der Browser zwischen zwei Worten umbricht. Ein geschütztes Leerzeichen kann in HTML-Modus eingefügt werden (  anstelle eines normalen Leerzeichens) oder in der regulären Editor-Ansicht mit der Tatstenkombination Alt + 0160. Die Headline darf max. 60 Zeichen lang sein und wird als H1 dargestellt.

Die optionale Subheadline bietet Platz für einen Anreißer zum Produkt oder einen Claim (max. 80 Zeichen).

Der Headline (und Subheadline) kann ein Fließtext oder eine Vorteilsauflistung folgen. Die Kombination beider Elemente ist nicht erwünscht.
Ein Fließtext sollte nicht länger als 120 Zeichen sein. Die Anzahl der Vorteile darf 4 nicht überschreiten. Sind die Texte in den Vorteilen länger, müssen die Vorteile reduziert werden.
Im besten Fall ist ein Vorteilstext maximal 40 Zeichen lang (einzeilig). Wird dieser zweizeilig, darf die Zeichenanzahl von 80 nicht überschritten werden. Die maximal Anzahl der Vorteil reduziert sich dann entsprechend.

Button

Jede Bühne sollte einen Abschluss-Button (CTA) haben. Der CTA in der Bühne ist immer dunkelblau, vom Typ "big" und muss ein Icon enthalten. Der Typ "big" hat per default ein Pfeil-Icon. Wird zu externen Seiten verlinkt, ist das Pfeil-Icon korrekt. Bei Verlinkungen zum Online-Banking muss das Login-Icon genutzt werden. Das Warenkorb-Icon kennzeichnet Verlinkungen in Antragsstrecken oder Abschlussprozesse der Postbank.

Dem Abschluss-Button kann ein kurzer, optionaler Text folgen, der bspw. auf die Verlinkung auf eine externe Seite hinweist oder andere rechtliche relevante Informationen enthält. Produktspezifischer Content sollte hier nicht untergebracht werden. Diese folgen im Content-Bereich der Seite.