Zufallszitat:
Der schönste Platz an der Sonne ist im Schatten.

Börseprofi

Eine Bank, die mit dem Wertpapierhandel vertraut machen will, ein Finanzportal, welches hierzu ein Börsespiel mit realen Kursdaten zur Verfügung stellt, ein Wirtschaftsmagazin, dass die Sache bekannt macht: Was in der Liste noch fehlt, ist eine informative Website rund um dieses Börsespiel.

Diese Website zu erstellen, war meine Aufgabe – und zwar gleich dreimal. Denn für die erfolgreichsten Broker gab´s fette Preise und das Spiel kam gut an, weshalb es nach 2010 auch im Jahr 2011 und 2012 wiederholt wurde. Eine ganz normale Website: Texte, Bilder, ein wenig Interaktives.

Website in der Website

Die eigentliche Sache, das Börsespiel, ist eine extern zur Verfügung gestellte Applikation, also eine andere Website, die aber innerhalb einer der Börseprofi-Seiten dargestellt werden soll. Eine Website in der Website also – und damit ein Fall für ein sogenanntes iFrame.

iFrames wurden von Microsoft eingeführt, anfangs von Netscape ignoriert und erst später in den HTML-Standard übernommen. Sie sind uns bis heute erhalten geblieben und werden gerne genutzt, z. B. zur Einbindung von Youtube-Videos oder Facebook-Widgets.

Kurz erklärt: In einer Webseite ist ein rechteckiger Bereich definiert, in den eine andere Webseite hineingeladen wird. Der Nutzer merkt nichts davon, außer die eingebettete Seite ist größer, als vorgesehen. Dann wird der Inhalt abgeschnitten, denn der iFrame-Ausschnitt wächst nämlich nicht mit.

Das Problem mit iFrames:

Der Web Developer weiß oft nicht, wie groß die eingebettete Seite sein wird, weiß nicht, wie viel Raum er dafür definieren soll. Üblicherweise legt er Werte fest, die in der Praxis ungefähr passen – oder eben nicht passen, wie man z. B. bei abgeschnittenen Facebook-Like-Buttons sehen kann.

Die Seiten des Börsespiels haben keine fixe Höhe. Jede Seite ist anders und ergibt sich aus den für den Spieler individuellen Inhalten.

Dazu gibt es zwei gängige Lösungen: Entweder man überdimensioniert den Bereich großzügig – und findet sich mit Leeraum ab – oder man definiert den Bereich eher klein blendet Scrollbalken ein. Beides nicht erstrebenswert. Beides ein Murks.

Für das Börsespiel habe ich mir eine andere Lösung überlegt, die noch kaum verwendet wird: Die eingebettete Seite teilt ihre Größe mittels interner Nachricht ihrer Eltern-Seite mit. Das funktioniert mit der Javascript-Methode postMessage in den meisten Browsern, beim Internet Explorer erst ab Version 8. Die einbettende Seite gleicht dann dynamisch den Ausschnitt an. Passt!