Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Postbank mit neuem Gesicht im Web

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Postbank mit neuem Gesicht im Web

Die Deutsche Postbank AG hat ihren Internetauftritt überarbeitet. Stefan Nitzsche stellt die Stärken und Schwächen des Redesigns vor.

Beim Betreten der Postbank-Startseite kurz nach dem Relaunch fallen zunächst zwei Dinge auf, die zwar wenig mit Webstandards zu tun haben, trotzdem aber Best Practice gewesen wären:

  • Seitentitel: „Postbank: TOP-Angebote und Happy Hour“ – hier wird einer der semantisch bedeutendsten und für Suchmaschinen wichtigsten Teile des Markups missbraucht, um völlig irrelevante Keywords zu platzieren. Vermutlich wird niemand unter Google auf der Suche nach der Postbank die Worte „TOP-Angebote“ oder „Happy Hour“ verwenden.
  • Ein absolut positioniertes div-Element wird eingeblendet, um auf den Relaunch der Postbank hinzuweisen. Dabei überdeckt es natürlich die übrigen Inhalte und zwingt den Besucher, die glücklicherweise vorhandene Schließen-Schaltfläche zu benutzen. Das JavaScript, das für das Verhalten dieses Pop-Ups nötig ist, ist unaufdringlich und entfernt per DOM-Scripting das div-Element vollständig aus dem Markup, anstelle es einfach nur auszublenden. Allerdings ist die Schließen-Schaltfläche lediglich mit einem JavaScript belegt und bietet kein Fallback.

Screenshot der Webseite der Postbank, verkleinert

Das Markup ist in XHTML 1.0 Transitional verfasst und vollständig valide – lediglich das CSS enthält einen kleinen Fehler. Grund für diesen Fehler ist Petr Pisars „Underscore Hack“ – hier wäre man mit der Verwendung von Conditional Comments besser beraten gewesen, als mit der Verwendung eines Hacks, der zu invalidem CSS führt.

Semantisch ist das Dokument gehobene Qualität, auch wenn ab und an noch ein inhaltsloses div-Element präsentationsbezogen missbraucht wird, oder die Überschriften der sekundären Menüs in semantisch unbedeutenden span-Elementen anstelle in h-Elementen zu finden sind.

Um der prinzipiellen Semantik genüge zu tun, wurden Teaser-Bilder in h-Elemente gehüllt – was natürlich Suchmaschinen auf die Wichtigkeit der enthaltenen Informationen hinweist – mehr aber auch nicht. Einzig auf die alt-Attribute könnte diese Semantik eine Auswirkung haben, Bilder bleiben nach wie vor sowohl von Screenreadern, als auch von Suchmaschinen unlesbar.

Das JavaScript ist nur an manchen Stellen unaufdringlich, auch die Konstruktion <a onclick=“function();“ /> findet man.

Eine Skip-Navigation ist ebenso enthalten wie alt-Attribute in den wichtigen img-Elementen. Auf Image Replacement wurde verzichtet, wohl der eleganten Vergrößerung der Seite zuliebe.

Die Schriftgrößen im fixen Layout sind generell klein gehalten, allerdings ist die Schriftskalierung vorbildlich. Sie ist über die Schaltflächen „+“ und „-“ erreichbar und sorgt dafür, dass sich die komplette Seite vergrößert, inklusive des Bildmaterials – was bei Verwendung von Hintergrundbildern (IR) zu unschönen Effekten geführt hätte. Die Dimensionen der verwendeten Bilder werden in em per CSS zugewiesen, was natürlich eine aufwändige CSS-Datei, zumindest aber sehr restriktive Richtlinien in der Pflege des Inhalts nach sich zieht. Sollen Bilder über den Kontext formatierbar bleiben, so muss den Redakteuren vorgeschrieben werden, an welchen Stellen sie welche Bildformate verwenden dürfen – ansonsten würde das Layout stark leiden.

Tabellen scheinen ausschließlich dort aufzutreten, wo sie zur Strukturierung von tabellarischen Daten auch angemessen erscheinen.

Auf die Auszeichnung von Adressdaten oder Geo-Informationen mittels Mikroformaten wurde vollständig verzichtet, was aber wegen der geringen Verbreitung dieser Art von Informationen auf der Webseite nicht negativ auffällt.

Fazit: technisch ist der neue Auftritt der Postbank von hoher Qualität, ein paar kleine Unschönheiten trüben das Bild, über die man allerdings leicht hinwegschauen kann.

Einen gestalterischen Blick auf den Relaunch der Postbank wirft das Designtagebuch von Achim Schaffrinna: Relaunch – Postbank

Kommentare

Elmar
am 11.10.2007 - 22:35

Der Code validiert tatsächlich überdurchschnittlich gut. Der Validator, den ich benutze (validome.org), zeigt noch einen Fehler.

Permanenter Link

Sylke
am 14.10.2007 - 17:05

Was mir (vorerst) negativ auffällt ist, dass es bei der Navi keine Hover-Effekte gibt. Dürfte für Sehbehinderte schwierig werden. Außerdem ist die tab-Reihenfolge zum Navigieren recht... ungewöhnlich. Man muss erst durch die gesamte Seite tabben, um zur Navi zu gelangen. Aber das ist möglicherweise auch Geschmackssache.

Permanenter Link

Dörte
am 14.10.2007 - 18:02

Ich bin ja ein Fan der Postbank-Online-Banking-Seite und ich hoffe, sie bleibt noch eine Weile so - was ich bei diesem Relaunch hier ganz ungüstig finde: die Schriftvergrößerung ist im IE nicht per STRG + möglich, zum Plus- und Minusbutton hinzutabben ist umständlich und die Button sollten, wenn aktiv, deuticher hervorgehoben sein. Auf die Bildvergrößerung analog zur Schriftvergrößerung hätte man, finde ich, verzichten können (Überschriften, die teilweise mit im Bild stehen werden verzerrt). Was mir dann gleich noch ins Auge sticht, sind diese leeren divs: <div class="clearFix"> </div>. Und bei dem (zu kleinen) Fenster, das sich öffnet, wenn ich auf "Rückrufservice" klicke, kann man die Formularfelder nicht per Tab erreichen.

Permanenter Link

Claudia
am 15.10.2007 - 11:29

was ich bei diesem Relaunch hier ganz ungüstig finde: die Schriftvergrößerung ist im IE nicht per STRG + möglich

Hallo Dörte,

wie bekommst Du es hin, daß sich die Schrift im IE per "STRG +" vergrößert? Kann es sein, das Du Dich da vertan hast? Bei der Postbank skaliert die Schrift jedenfalls auch im IE über das Menu(Ansicht/Schriftgrad.

Permanenter Link

Dörte
am 15.10.2007 - 15:03

Ja, Claudia, du hast natürlich recht, hatte ich völlig vergesssen oder verdrängt, danke, dass du es bemerkt hast! Das mit der Schriftvergrößerung bei der Postbank ist verwirrend: wenn man im FF (und im IE, seh ich gerad) die Schrift per +Button vergrößert, kann man sie per Ansicht > Schriftgrad > Normal nicht wieder verkleinern(?). Aber das ist eher nebensächlich. Immerhin bemüht diese Bank sich sehr um moderne, standardkonforme und zugängliche Webseiten, da könnten sich andere eine Scheibe abschneiden...

Permanenter Link

Suptra Webdesign
am 23.10.2007 - 22:56

Dass die Postbank keine Stümper ranlässt, hab ich mir schon gedacht :-) Das Ergebnis gefällt mir auch recht gut. Design und Programmierung sind definitiv hochwertig. Besonders gut gefällt mir die konsequent eingehaltene Linienführung.

Permanenter Link

Michael
am 05.11.2007 - 14:03

Also ich bin selber Postbank Kunde und war gleich überrascht über den neuen Auftritt. Jedoch kam ich gleich sehr gut zurecht, was bei vielen anderen Relaunches oftmals nicht der Fall ist. Die Agentur hat bestimmt ein schönes Sümmchen damit verdient.

Permanenter Link

Doris
am 17.11.2007 - 23:13

Vom Design her wirkt das Ganze doch jetzt schon deutlich freundlicher und auch die Navigation lässt den Blick aufs Wesentliche zu. Wenn die Abwicklung von Bankgeschäften nun auch noch am Schalter so unkompliziert wäre....

Permanenter Link

Reik
am 19.12.2007 - 12:36

Von Design und Programmierung her vielleicht ganz nett. Von der Useability (und als Postbank Kunde) finde ich nicht so gut, dass man die einzelnen Konten erst in tiefen Ebenen findet.

Permanenter Link

Die Kommentare sind geschlossen.