Die Geschichte vom Internet Explorer 7 und dem PageZoom + PageZoom Detection- und PageZoom Correction-Script von Alexander Farkas
Vorteil des Pagezooms
Ein Pagezoom bzw. Seitenzoom ermöglicht das Vergrössern der gesamten Seite inkl. des Grundlayouts sowie aller Bilder und ist damit ein geniales Feature. Webdesigner stehen immer vor dem Problem, dass Ihnen die weder die relative noch die absolute Auflösung des Benutzers bekannt ist (Zur Bedeutung der Begriffe: Wikipedia: Bildschrimauflösung).
Der Grundsatz "Das Web ist nicht aus Papier gilt heute mehr denn je, denn die Streubreite der Auflösungen hat sich in den letzten Jahren enorm erweitert (Optimierung für Bildschirmauflösungen, Der 72dpi-Mythos). Der Webdesigner kann daher grundsätzlich weder bestimmen wie gross sein Layout physisch auf dem Monitor noch wie das Verhätlnis des Layouts zum Browserfenster sein wird.
Eine der möglichen Semi-Lösungen sind fluide Layouts, also Layouts, welche sich zumindest in der Breite der Grösse des Browserfensters anpassen. Allerdings lassen sich nicht alle Layouts fluide umsetzen und in vielen Fällen sollten fluide Seiten eine maximale Begrenzung haben, um zu verhindern, dass sich die Zeilen nicht soweit vergrösseren, dass die Lesbarkeit unzumutbar erschwert wird.
Eine weitere Lösung könnte hier gerade eben der genannte Seitenzoom sein. Der Designer muss sich nur noch auf die Proportionen seines Designs konzentrieren und der User kann die Seite seiner absoluten, relativen Auflösung sowie seinem Sehvermögen anpassen.
Auch fluide/liquide Seiten können von dieser Funktion deutlich profitieren. Eine fluide Webseite, welche in der maximalen Breite beschränkt ist, kann von Nutzern mit hohen Bildschirmauflösungen weiter vergrössert werden, ohne dass sich die Zeichen pro Zeile erhöhen. Auch kann der User mit kleineren Auflösungen die Schrift sowie die Inhalte weiter vergrössern, ohne dass das Layout über den Viewport hinaus vergrössert wird und ein horizontales Scrollen erfordert. Wir kennen dieses Verhalten von dem fast perfekten Seitenzoom von Opera.1
Revolution durch Seitenzoom
Tatsächlich kann der Seitenzoom die Art wie wir Seiten schreiben "revolutionieren". Man stelle sich beispielsweise folgende Stylesheet Angabe vor:
.wrapper{
width: 900px;
max-width: 99%;
min-width: 35em;
}
Diese Stylesheet-Angabe macht heutztage noch kaum Sinn. Mit intelligentem Seitenzoom dürfte dies jedoch anders werden.
Voraussetzung ist allerdings, dass der Nutzer diesen auch nutzt, er mithin gut funktioniert und gebrauchstauglich ist. Der Nutzer möchte schließlich nicht auf eine Webseite gehen und dann grossartige Anpassungen vornehmen (Opera bietet beispielsweise in seinen erweiterten Einstellungen die Möglichkeit den Seitenzoom generell einzustellen.)
Der IE7 und sein Seitenzoomkonzept
Nun hat Micorsoft in den Internet Explorer 7 ebenfalls einen Seitenzoom eingebaut, welcher alles zuvor genannte auf den Kopf stellt.
Webentwickler auf der ganzen Welt haben sich bereits negativ hierzu geäußert:
oder:Eine der gravierendsten, jedoch bisher am wenigsten bekannten Änderungen ist das neue Zoom-Verhalten. Dabei betrachtet der Browser das Ergebnis des Rendering-Prozesses wie ein beschriebenes Blatt Papier, das anschließend als Ganzes vergrößert oder verkleinert werden kann. Dabei werden nicht mehr nur Schriftgrößen skaliert, sondern das gesamte Layout – einschließlich aller Abstände, Größenangaben, Bildern und Grafiken.
...
Was auf den ersten Blick vorteilhaft und sinnvoll erscheint, erweist sich in der Umsetzung bei näherer Betrachtung als Zeitbombe.
Webkrauts: Seitenzoom - Ärger vorprogrammiert
The lines will not wrap when they get longer, the text and images of the webpage will not adapt to avoid horizontal scrolling, no flexibility, no fluidity, no webdesign. Our concept is a primitive magnifying glass of grandma’s grandma.
Doch was sagt Microsoft:
Today I want to briefly tell you about one of the cool new features we have developed for IE7: Page Zoom. This feature allows the user to effectively zoom in....
The way we zoom in IE7 is a little different than other products, so let me briefly explain how it works and our design goals. The primary goal of the page zoom feature is to maintain the intended design of the webpage (the user shouldn’t notice any change in the layout of the webpage) while improving the readability of the page. This means we do not re-layout the page after we zoom.
Es ist schon ein merkwürdiger Habitus eine Funktion eines anderen Programms schlecht zu kopieren und die Verschlechterungen als Feature zu verkaufen.
Wie es nun so mit ungefixten und unfixbaren Bugs ist, lässt ein Workaround nicht lange auf sich warten. So meldete sich kurz nach Implementierung des Bugs "IE7 Pagezoom" ein weiterer IE Entwickler um von einem weiteren coolen Feature zu berichten:
... I am really excited to tell you about the new horizontal scrolling feature in the Beta2 preview refresh as well as other enhancements we are working on for Page Zoom....
IE Blog: Page Zoom now supports horizontal scrolling with the mouse wheel
Eigentlich kaum zu fassen, was da "very excited" berichtet wird. Ein völlig triviales Feature wie die Möglichkeit nun auch horizontal mit dem Mausrad zu scrollen (mit strg + shift + Mausrad), wird ein eigener Blogeintrag gespendet und zum großartigen Feature erklärt. Dass es sich hierbei nur um einen Workaround handelt, sucht man in dem Eintrag vergebens.
Es bedarf keiner weiteren Auseinandersetzung mit diesem völlig verfehltem Konzept eines Pagezooms. Es entspringt dem oben genannten verfehlten Papierdenken, es widerspricht den Webstandards, da es die Layoutvorlagen des Webdesigners mißachtet und ist ein absolutes Usability Disaster, da kein Nutzer eine Funktion nutzt, welche dazu führt, dass er horizontal scrollen muss.
Warum der IE7 PageZoom trotz weiter Verbreitung bedeutungslos ist und keinen negativen Einfluss auf fluide Webseiten haben muss
- Habe ich ein gut funktionierendes Workaround geschrieben, um den Zoomfaktor zu bestimmen und die Fluidität des Layouts zu erhalten (Es berücksichtigt allerdings nur die Breitenverhältnisse, nicht die Höhe).
- Ist die Zoom-Funktion des IE7 so verbuggt, dass kein Nutzer sie ernsthaft nutzen wird.
Dass die PageZoom-Funktion schlampig integriert zu sein scheint und einige Bugs aufweist, ist den meisten Webdesigner bereits bekannt.
Der wohl bekannteste Bug ist der "body-background-image-zoom"-Bug, welcher bei einigen Webseiten zu Designfehlern bei anderen Webseiten zur Unbenutzbarkeit führt.
Man bedenke hierbei beispielsweise die recht häufig eingesetzte Faux Columns-Technik. Wird hiermit beispielsweise eine Navigation (hell auf dunkel) realisiert, währenddem der Hauptbereich dunkel auf hell umgesetzt wird, ist die Seite bei eingeschaltetem IE7 Zoom schnell unbenutzbar.
Bei meinem Streifzug durch´s Web (google, MSN, SPON etc) mit dem IE7 Pagezoom (am Ende wird das Ergebnis mit dem Zoom von Opera verglichen) musste ich feststellen, dass der Pagezoom auf so gut wie keiner Seite ohne Fehler funktioniert.
So werden beispielweise recht häufig label Elemente über "ihre" radio button oder checkbox Elemente gezogen und die Lesbarkeit sowie Auswahl deutlich erschwert.
Schwerwiegende Fehler treten auch häufig mit Links - vor allem innerhalb der Hauptnavigation - auf. Hierbei werden die Links teilweise bis vollkommen ineinander verschoben, wobei sich die Klickfläche des Links vom Linktext trennt.
Beispiel: Hauptnavigation der jQuery Seite: Eine Auswahl der Links ist nicht mehr möglich.
Daneben findet eine merkwürdige verschiebung von Elementen statt. Eine genaue proportionale Vergrösserung findet nicht statt:
Dieses Beispiel zeigt das Standard-CSS für die Umsetzung eines Suckerfish-Menues von htmldog.
Zum anderen treten recht häufig Probleme mit JavaScript Effekten auf, da einige Style-Eigenschaften - trotz Zoom-Veränderung - die alten, ungezoomten Werte zurückliefern andere Style-Eigenschaften sich dann jedoch auf die neuen, gezoomten Werte beziehen (Beispiel: Die nachgezogene Navigation dieser Seite sowie die Positionierung der Tooltips).
Fazit
Im Web wurde von Webentwicklern die Frage aufgeworfen, ob angesichts des IE7 Zoom-Verhaltens, es noch Sinn macht flexible Weblayouts zu verwenden. Die Antwort dürfte klar sein. Fluide Weblayouts haben immernoch ihre Berechtigung. Der IE7 kann hieran nichts ändern, da er ebenso nicht fluide Webseiten zerhäckselt und völlig unbenutzbar macht.
1 Opera´s Inkonsistenz beim Seitenzoom
Opera leistet sich eine gewisse Inkonsistenz. Währenddem alle Browser inkl. Opera - beispielsweise bei Schriftvergrösserung - dem minimum Wert gegenüber dem maximum Wert eine höhere Priorität einräumen, dreht sich diese Priorität bei Verwendung des Seitenzooms von Opera um.
IE7 Pagezoom Detector / Event + ieZoomFluid - Plugin für jQuery
IE7 PageZoom Detect und Event
Nach Einbinden des Scripts (benötigt jQuery sowie Dimensions-Plugin, kann mit $.ieZoomDetect() der aktuelle Zoom Faktor ausgelesen werden. Zudem wird ein custom Event 'zoomchange' initialisiert, welches auf die übliche "jQuery-Weise" abgefangen werden kann. Die Einbindung sollte grundsätzlich in konditionellen Kommentaren erfolgen. Beispiele:
<!--[if IE 7]>
<script src="jq.iezoomdetect.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//Dein JavaScript PageZoom Script für IE7
});
</script>
<![endif]-->
Der Javascript-Code könnte dann so aussehen:
//Beispiel für einfache Ermittlung des Pagezoomlevels
alert('Your current PageZoom level: '+$.ieZoomDetect());
//Beispiel für ein einfaches Pagezoom-Event
$('p').bind('zoomchange', function(event,currentzFac){
$(this).html('Your ZoomLevel has changed to '+currentzFac);
});
IE7 Zoom Fluid
Daneben kann der IE7 mit der Funktion 'ieZoomFluid' gezwungen werden, fluide Webseite auch weiterhin fluide zu behandeln. Wenn der fluide Wrapper beispielsweise folgendes CSS erhält:
#fluidwrapper {
width: 99%;
max-width: 1200px;
min-width: 40em;
}
Dann müsst ihr dem IE7 folgendes Javascript unterjubeln:
//Beispiel zum Erzwingen eines fluiden Layouts trotz IE7 Seiten Zoom
$('#fluidwrapper').ieZoomFluid({zwidth:99});
- zwidth [number]
- zmaxwidth [number]
- zminwidth [number]