Popup-Fenster richtig gemacht

Böse Popups - gute Popups

Es gibt Webseiten, die einen zur Begrüßung erst einmal mit einem Popup-Gewitter empfangen. Etliche neue Fenster öffnen sich ungefragt und werben für eBay & Co und bei jedem Seitenwechsel geht der Trubel wieder von vorne los. Das sind die bösen Popups - besser kann man die Mißachtung seiner Besucher und ein gescheitertes Business-Modell nicht darstellen.

Doch nicht alle Popups sind dumm. Manchmal kann es sinnvoll sein, mit Hilfe von JavaScript zusätzliche Informationen in einem kleinen neuen Fenster anzubieten. Bildergalerien, wo erst ein Klick auf ein Thumbnail das Bild in voller Größe präsentiert, sind dafür ein Beispiel. Auf meiner Seite zeige ich z.B. Screenshots auf diese Weise an. Andere Webseiten liefern zusätzliche Informationen oder Hilfestellungen in sinnvollen Popup-Fenstern. Gute Popups haben auf jeden Fall eines gemeinsam: sie öffnen sich nur auf ausdrücklichen Klick des Besuchers, niemals ungefragt.

Popup-Blocker als sinnvolle Waffe gegen die Quälgeister

Moderne Browser wie Mozilla, Firefox und Opera haben den Wunsch der Surfer angenommen und intelligente Popup-Blocker eingebaut. Man kann detailliert angeben, was man sehen will, etwa selbst angeforderte Fenster, und wovon man verschont bleiben will. Doch noch immer benutzt die große Mehrheit der Surfer den veralteten Internet Explorer von Microsoft und der kennt dieses sinnvolle Feature bisher noch nicht.

Wer dennoch nicht auf diesen Browser verzichten will, kann sich mit einigen Zusatztools die Plagegeister vom Hals halten. Webwasher und die Google Toolbar sind nur zwei von vielen Beispielen dafür. Das geplante Service Pack 2 zu Windows XP will sich dem Popup-Problem endlich auch annehmen.

Gute Popups gestalten in Zeiten von Popup-Blockern

Die folgenden Tipps gelten natürlich nur für sinnvolle Popups, die sich auf ausdrücklichen Klick der Besucher öffnen. Für ungefragte neue Fenster sind sie nicht geeignet. Wer will (oder die folgenden Informationen nicht versteht), kann sich mein JavaScript popupwindow.js herunter laden und beliebig verwenden. Es eignet sich für Bilder, Textdateien und auch für ganze HTML-Seiten, ist einfach anzuwenden, deckt mögliche Fehlerquellen ab und funktioniert in allen Browsern.

Informationen aus Popup-Fenstern müssen immer auch bei abgeschaltetem JavaScript zugänglich sein. In vielen Firmen und Internet-Cafés ist diese Option aus Gründen der Sicherheit deaktiviert. Darum darf man Popups nicht aufrufen via <a href="javascript:popup(..)"> oder <a href="#" onclick="popup(..)"> sondern sollte immer als Alternative den Popup-Inhalt im href angeben: <a href="html-oder.jpg" onclick="popup('html-oder.jpg',..)"> Benutzer ohne Javascript bekommen dann ebenfalls alles zu sehen, allerdings nicht in einem Popup sondern im Hauptfenster.
OnClick-Ereignisse bei Links müssen immer ein return false zurück liefern, sonst wird die im href angegebene Seite zusätzlich aufgerufen. Bei Einsatz von Popup-Blockern kann das aber dazu führen, dass weder das Popup erscheint noch die Information im Hauptfenster dargestellt wird, da das return false ja durchgelassen wird. Darum darf dieses nicht im onClick erscheinen <a href="html.jpg" onclick="popup('html.jpg',...);return false"> sondern sollte im Erfolgsfall als Rückgabewert der Popup-Funktion im Script definiert und im HTML-Code weiter gereicht werden: <a href="html.jpg" onclick="return popup('html.jpg',...)"> Die Popup-Funktion im JavaScript überprüft dann, ob das Popup wirklich geöffnet wird. Im Erfolgsfall wird ein false und sonst ein true zurück gegeben: function popup(url,...) { ok = window.open(url,...) if (ok) return false; else return true; } Nur wenn das Popup abgeblockt, also nicht erstellt wurde, wird der href-Teil des HTML-Aufrufs verwendet und der Popup-Inhalt im Browser-Hauptfenster geöffnet.
Popups sollten automatisch wieder geschlossen werden, wenn die Webseite verlassen oder ein neues Popup aufgerufen wird. Mein Script popupwindow.js hat dafür eine Funktion popdown(), die sowohl in popup(...) als auch bei onUnload und onFocus aufgerufen wird. Sie wirkt sich nur auf ein geöffnete Popup aus, nicht auf das Browser-Hauptfenster. Wem es nicht gefällt, dass das Fenster auch dann beendet wird, wenn die Hauptseite erneut angeklickt (fokussiert) wird, muss die letzte Zeile im Script löschen oder auskommentieren.
Der Besucher muss informiert werden, wenn ein Klick ein neues Fenster oder Popup öffnet. Das ist eine Grundforderung von Usibility und Zugänglichkeit für alle. Dieses kann entweder durch ein kleines Symbol vor dem Link verdeutlicht werden oder duch die Benutzung des title-Attributs im Link: <a href="..." onclick="..." title="Großbild im Popup-Fenster"> Am Besten ist es natürlich, beide Hinweise zu kombinieren.
Popups müssen besucherfreundlich sein. Wie oft hat man nicht schon erlebt, dass die aufpoppenden Fenster zu klein sind für den Inhalt und sich auch nicht vergrößern lassen? Dabei gibt es überhaupt keinen Grund (außer der Faulheit des Seitengestalters) die Größenänderung zu unterbinden, da sie keine Auswirkungen aufs Design hat. Allerdings muss man diese Eigenschaft explizit im Popup-Aufruf angeben: function popup(url,...) { args = 'width=123,height=345,resizable'; ok = window.open(url,'',args) if ... } In manchen Fällen, besonders wenn das Popup einen längeren Text zum Inhalt hat, ist es sinnvoll, ihm auch Scrollbars zu geben. Denn man weiss ja nie, welche Browsereinstellungen der Besucher hat, etwa hinsichtlich der Textgröße und der verwendeten Fonts. args = 'width=123,height=345,resizable,scrollbars'; In diesem Fall muss man dem Fenster allerdings in Breite und Höhe jeweils 20 Pixel mehr geben, denn Scrollbars nehmen jedenfalls im Internet Explorer auch dann Platz ein, wenn sie nicht sichtbar sind.
Schließlich sollten Popups auch designerfreundlich, ihr Aufruf also einfach sein. Mein Script ist dieses in dreifacher Weise. Zu einen braucht die im href aufgerufene Seite nicht erneut angegeben zu werden, wenn man das this-Argument verwendet. Das erleichtert auch den Einsatz in Scripten und CMS-Templates. Weiterhin kann man bei Bildern die reale Bildgröße angeben, denn das Script erweitert die Breite automatisch um 20 Pixel und die Höhe um 25 Pixel, was bei allen gängigen Browsern eine ziemlich genaue Zentrierung im Popup bewirkt, da die Fenster als Standard einen Rand haben. (Bei Scrollbars muss man jeweils noch 20 Pixel hinzu geben). Und drittens kann man, wenn die Popups eine festgelegte Göße haben sollen, ganz auf Breiten- und Höhenangaben verzichten. Die genaue Umsetzung ist meinem Script popupwindow.js zu entnehmen. Der Aufruf ist damit folgender: <a href="html.jpg" onclick="return popup(this,123,345)" title="..."> oder, wenn das Popup die im Script angegebene Standardgröße haben soll: <a href="html.jpg" onclick="return popup(this)" title="..."> Einfacher gehts nicht.