1 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
![eBook-Project by AboutWebDesign.de [LOGO]](logo.jpg){kind=logo}
|
|||
5.10 Browserkompatibiltät |
|||
|
|||
5.10.1 EinführungBrowserkompatibles Design ist eine der Haupt-Zielsetzungen beim Web-Design überhaupt: da die Browser die Schnittstelle des Surfers zu den Inhalten des World Wide Web darstellen, ist es zwingend nötig, die Browser mit in den Design-Prozess einzubeziehen - denn wem nützt eine schöne Site, wenn niemand sie fehlerfrei angezeigt bekommt?Browserkompatibilität besteht aus zwei Haupt-Aspekten: am wichtigsten ist die sinngemäße Kompatibilität. Darunter verstehen wir, dass eine Site, wenn auch nicht perfekt, doch zumindest so angezeigt wird, dass ihre wesentlichen Inhalte und Strukturen zugänglich sind. Weiterhin umfasst die sinngemäße Kompatibilität eine funktionierende Navigation. Den anderen Aspekt nennen wie die "exakte Kompatibilität", die sich im wesentlichen auf die pixelgenaue Darstellung von Internet-Seiten bezieht. Inwiefern eine pixelgenaue Gestaltung überhaupt sinnvoll ist, darüber lässt sich sicher streiten. Wir beschäftigen uns auch mit dieser - recht kontrovers geführten - Diskussion. |
|||
|
|||
5.10.2 Grundsätzliche ÜberlegungenEs ist wichtig, sich eines vor Augen zu halten: absolute Kompatibilität ist derzeit nicht erreichbar. Auch dann nicht, wenn eine Site auf den Pixel genau von allen wichtigen PC-Browsern interpretiert wird - denn dann hat man immer noch Probleme mit PDA-Browsern.Seiten mit wirklich großen Budgets erstellen angepasste Layout-Versionen für die verschiedenen Browser. Obwohl diese Methode sicherlich zu den besten Ergebnissen führt, ist sie doch nicht optimal: kann es denn Sinn der Sache sein, für jeden Browser eine eigene Site-Version zu programmieren? Glücklicherweise ist hier Besserung in Sicht: CSS (besonders auch medienspezifische Stylesheets) werden Web-Design einfacher und kompatibler machen. Das Problem ist nur, dass CSS bei weitem noch nicht so umfassend unterstützt werden, wie es eigentlich wünschenswert wäre. Derzeit ist der vernünftigste Ansatz, auf eine möglichst breite, sinngemäße Kompatibilität hinzuarbeiten: Web-Surfer werden von Inhalten angezogen, nicht von schönen Designs. Wenn also in irgendeinem Browser eine auseinandergeschnittene Grafik nicht perfekt zusammenpasst, ist das zwar ärgerlich, aber meist nicht weiter tragisch. |
|||
|
|||
5.10.3 Sinngemäße KompatibilitätWie in den vorangegangenen Texten bereits angedeutet, hat die sinngemäße Kompatibilität eine weitaus höhere Bedeutung als die exakte. Glücklicherweise jedoch ist es nicht viel Arbeit, für eine "ungefähr gleich aussehende Anzeige" auf ziemlich vielen Browsern zu sorgen.PC-Browser sind in dieser Hinsicht sowieso recht unproblematisch: wer sich hier an HTML-Standards hält und auf proprietäre Tags und Effekte (so z.B. <blink>, u.U. auch Flash) verzichtet, ist schon beinahe am Ziel - solange nicht gerade endlos verschachtelte Tabellen verwendet werden. Mit denen haben manche Browser nämlich immer noch ihre Probleme.Weiterhin problematisch könnte die Verwendung bestimmter neuer, standardisierter Technologien sein. CSS zählen dazu: Browser der 3er-Generation werden mit absoluten Positionsangaben nichts anfangen können, aber auch die modernere 4er-Browsergeneration ist hier ziemlich fehleranfällig. Sie können als Alternative versuchen, auf Tabellen zu setzen. Letztendlich kommen Designer aber nicht um eine Grundsatzentscheidung herum: soll die Site überhaupt für so alte Browser optimiert werden, oder konzentriert man sich voll auf die moderneren Versionen? Als Restproblem bleibt dann noch die Bildschirmauflösung. Optimal ist es, überhaupt nicht auf feste Auflösungen zu optimieren, möglich wird das beispielsweise mit relativen Größenangaben. Wenn das nicht geht, sollte man die Mindestvoraussetzungen so weit wie möglich zurückschrauben. 640x480 ist fast so gut wie eine völlig auflösungsunabhängige Gestaltung, 800x600 als Minimal-Auflösung ist ebenfalls akzeptabel. Wer keine Surfer vergraulen will, setzt nicht mehr voraus. Wenn es jedoch um die Einbeziehung anderer Ausgabemedien geht, wird das eigentlich recht einfache Problem schnell unlösbar. Neben diversen PDAs und Smartphones bieten inzwischen auch Spielkonsolen einen Internet-Zugang, natürlich über viele verschiedene Browser. Aus Erfahrung wissen wir, dass sich dadurch zwei Hauptprobleme ergeben:
Patentlösungen für diese Probleme gibt es leider nicht. Wer z.B. eine Site über Dreamcast-Spiele (die Dreamcast ist eine Spielkonsole von Sega) betreibt, wird ein gesteigertes Interesse daran haben, dass mit dem Dreamcast-Browser surfende Besucher nicht ausgeschlossen werden. In diesem Falle werden aufwändige Optimierungen nötig, eventuell sogar die Gestaltung von zwei verschiedenen Layout-Versionen - die Unterschiede in Bildschirmauflösung zwischen PC und Fernseher sind einfach zu groß. Ähnliches gilt (erst recht) für diejenigen, die auf PDA-Anwender setzen. Trotz all dieser Probleme gibt es eine Erfolg versprechende Strategie, auch wenn die nicht mit allen Web-Seiten funktionieren kann: moderne Web-Sites setzen sehr stark auf Tabellen, um ihre Layouts aufzubauen. Gerade die sind mit ihren absoluten Größenangaben ein Problem für kleinere Bildschirme. "Normaler" HTML-Code dagegen ist es nicht, denn der wird einigermaßen unproblematisch dargestellt. Ein möglicher Ansatz ist nun, ausschließlich auf solch simplen Code zu setzen. Die Site wird dann von allen Browsern problemlos dargestellt. Problematisch ist, dass auf einem PC, dessen Möglichkeiten damit ja bei weitem nicht ausgeschöpft sind, ein recht spartanischer und freudloser Eindruck von der Seite entsteht. Das lässt sich durch ausschließlichen Einsatz von CSS kompensieren: absolute Positionierungen und ähnliches können tabellenartige Strukturen imitieren, ohne dabei wirklich Tabellen zu verwenden. Natürlich funktioniert das nur, solange die Browser entsprechender Ausgabemedien CSS noch ignorieren. |
|||
|
|||
5.10.4 Exakte KompatibilitätExakte Kompatibilität ist etwas für die Perfektionisten unter den Web-Designern: sobald ein Element auch nur einige Pixel nach rechts verschoben ist, gilt der Versuch einer exakten Kompatibilität als gescheitert. Fairerweise muss an dieser Stelle festgehalten werden, dass ein guter Web-Designer sich durch ein gesundes Maß an Perfektionismus auszeichnet. Doch ist es wirklich sinnvoll, auf Pixelgenauigkeit zu optimieren?5.10.4.1 Für und wider Pixelgenauigkeit5.10.4.1.1 ProDas Bedürfnis nach Pixelgenauigkeit entsteht durch den Wunsch der Designer, das Aussehen ihrer Web-Site im Vorhinein genau festlegen zu können. Wem das gelingt, kann anschließend wirklich aufwändige Layouts konstruieren - ein Designer kann damit in ganz neue Dimensionen vorstoßen. Dabei ist es gar nicht mal so schwer, ein einigermaßen pixelgenaues Layout zu konstruieren: unter Einbeziehung der 4er-Browsergeneration nehmen die erforderlichen Optimierungsarbeiten oft nur einige Stunden in Anspruch.5.10.4.1.2 ContraDem entgegenhalten kann man das Argument, dass pixelgenaues Design im Web völlig unnötig ist, da Surfer gute Inhalte wollen, auf das Design - sofern es denn zweckmäßig ist - aber keinen allzu großen Wert legen. Der Arbeitsaufwand für Pixelgenauigkeit wäre damit vertane Zeit. Weiterhin muss man sich darüber im Klaren sein, dass die Standard-Konformität des Quellcodes beim Versuch eines pixelgenauen Designs fast zwangsläufig sehr leidet - Benutzer von weniger populären Browsern werden so mit der Site mehr Probleme haben.5.10.4.1.3 Die goldene MitteUnsere Empfehlung bewegt sich irgendwo in der Mitte zwischen den beiden Extrempositionen: pixelgenaues Design ist eine schöne Sache, sollte jedoch nicht auf Kosten der Standards erzwungen werden. Denn langfristig sind die wichtiger als alles andere. Daher: versuchen Sie ruhig, ein möglichst gleiches Aussehen im Internet Explorer und Netscape Navigator zu erreichen - nur ist der dadurch entstehende Mehrwert einen großen Arbeitsaufwand nicht wert. Setzen Sie sich also selbst einen zeitlichen Rahmen für die Optimierungen - wenn es nicht klappt, ist das auch nicht so schlimm. Wichtig ist dagegen, dass Ihre Navigation und Inhalte in so vielen Browsern wie möglich korrekt funktionieren.5.10.4.2 Verschiedene AnsätzePixelgenauigkeit bedeutet, dass alle wesentlichen Design-Elemente von den unterschiedlichen Browser gleich interpretiert werden, denn daraus resultiert automatisch eine gleiche Darstellung. Ganz besonders betrifft das Eigenschaften wie Abstände und Abmessungen.Es gibt drei verschiedene Ansätze, ein Grundgerüst für ein anspruchsvolles Design zu schaffen: Frames, Tabellen und CSS. Jeder Ansatz verlangt, sofern er denn pixelgenau werden soll, nach verschiedenen Vorgehensweisen. 5.10.4.2.1 FramesFrames sind wohl die unpopulärste Lösung, wenn auch im Grunde mit Tabellen gleichwertig: ein Beispiel sehen Sie unter http://www.cheatmania.de, das dortige Design wurde mit Frames realisiert.Probleme beim Einsatz von Frames ergeben sich vor allem aus den verschiedenen Standard-Werten für Abstände und Linienbreiten. Beugen Sie dem vor, indem Sie alle verfügbaren Attribute auch tatsächlich definieren: 5.10.4.2.2 TabellenTabellen sind wesentlich populärer als Frames. Pixelgenaue Angelegenheiten lassen sich mit ihnen wunderbar regeln, vorausgesetzt, man kennt die Regeln. Aber zunächst wieder ein Beispiel: AboutWebDesign wurde unter Einsatz von Tabellen realisiert. Dass das Layout pixelgenau ist, können Sie z.B. daran erkennen, dass die kleinen, abgerundeten Ecken-Grafiken genau an den Außenkanten der farbigen Boxen liegen (sollten ;-).Wer Tabellen verwenden will, stößt schnell wieder auf unterschiedliche Standardwerte für verschiedene Attribute. Auch hier sollten Sie vorbeugen und die Attribute cellpadding, cellspacing, width und border generell definieren.Trotzdem kommt es auch bei Angabe dieser Attribute immer wieder zu Problemen. Wer damit zu kämpfen hat, dass der Browser die Angaben für Breite oder Höhe nicht akzeptieren will, kann ein sogenanntes "Blindgif" verwenden. Was es damit auf sich hat, erfahren Sie im Kapitel Designpraxis - Tabellen, Abschnitt Layout-Aufbau 5.10.4.2.3 CSSStyle Sheets sind die ultimative Lösung für jeden zukunftsorientierten Web-Designern, denn sie sehen explizit absolute Positionierungen vor. Interpretationsprobleme sollten in diesem Bereich auch nicht auftreten, denn eine Angabe "Pixel-Abstand bis zum linken Seitenrand" ist sehr eindeutig. Wie man CSS zur Positionierung von Elementen einsetzt, steht im Abschnitt "Positionierung" des Kapitels CSS.Leider sind auch CSS nicht übergreifend kompatibel: ältere Browser, inbesondere die Netscapes der 4er-Generation, haben massive Probleme mit absoluten Positionsangaben. |
|||
|
