Hochschule für Technik und Wirtschaft Dresden Fakultät Informatik/Mathematik Diplomarbeit Im Studiengang Medieninformatik Strategien zur Entwicklung adaptiver Darstellungen von Websites anhand einer prototypischen Umsetzung für die Lernplattform OPAL Eingereicht von: Jens Schuppe Eingereicht am: 1. März 2013 Betreuer: Prof. Dr. phil. Teresa Merino Hochschule für Technik und Wirtschaft Dresden
Inhaltsverzeichnis Verzeichnis der Abbildungen... IV Verzeichnis der Listings... V 1 Historische Betrachtung der Inhaltsanpassung... 1 1.1 Geräteklassen... 1 1.1.1 Desktop- und Notebook-Rechner... 1 1.1.2 Drucker... 2 1.1.3 Mobiltelefone... 4 1.1.4 Smartphones... 5 1.1.5 Tablet-Computer... 6 1.1.6 Zusammenwirken verschiedener Geräteklassen... 7 1.2 Bisherige Anpassungsstrategien... 8 1.2.1 Anpassung abhängig von der Hardware... 8 1.2.2 Anpassung abhängig von der Zugangssoftware... 10 1.2.3 Mobile Dienste... 12 2 Strategien für adaptive Darstellung... 14 2.1 Gemeinsame statische Version... 14 2.2 Separate Versionen... 15 2.3 Gemeinsame dynamische Version... 18 2.3.1 Desktop First... 18 2.3.2 Mobile First... 19 2.3.3 Content First... 21 3 Technische Umsetzung... 24 3.1 Erkennung der Anzeigeeigenschaften... 24 3.1.1 Bildschirm- und Anzeigebereichsgröße... 25 3.1.2 Seitenverhältnis... 26 I
3.1.3 Farbdarstellung... 28 3.1.4 Auflösung... 29 3.2 Erkennung von Gerätefunktionen... 31 3.2.1 User Agent String... 31 3.2.2 Clientseitige Funktionserkennung... 34 3.2.3 Datenbankunterstützte Geräteerkennung... 36 3.3 Empirisches und implizites Wissen... 37 4 Mediale Umsetzung... 39 4.1 Anordnung... 39 4.1.1 Statisches Layout... 39 4.1.2 Flüssiges Layout... 40 4.1.3 Elastisches Layout... 42 4.2 Ausrichtung... 42 4.3 Farbe... 43 4.4 Typografie... 44 4.5 Medien... 47 4.5.1 Bilder... 47 4.5.2 Videos... 52 5 Projektanalyse und -konzeption... 54 5.1 Inhalts- und Zielgruppenanalyse... 54 5.2 Machbarkeits- und Aufwandsanalyse... 58 5.3 Technische Analyse... 60 5.3.1 Bildschirmgrößen... 60 5.3.2 Leistungseigenschaften von Geräten und Datenverbindungen... 61 5.3.3 Möglichkeiten der Zugangssoftware... 63 5.4 Gestaltungsvorschlag... 64 5.4.1 Startseite... 64 5.4.2 Kurs... 69 II
6 Umsetzung... 75 6.1 Dokumentstruktur... 76 6.2 Stilbeschreibungen... 80 6.3 Skripte... 88 7 Ausblick... 92 7.1 Barrierefreiheit... 92 7.2 Suchmaschinenoptimierung... 94 7.3 Optimierung für gestenbasierte Eingabe... 96 7.4 Weitere Anzeigegeräte... 97 7.5 Behandlung gerätespezifischer Funktionen... 99 Literaturverzeichnis... IX Anhang... XV Selbständigkeitserklärung... XLI III
Verzeichnis der Abbildungen Abbildung 1: Einige Mobiltelefone... 4 Abbildung 2: Einige Smartphones... 5 Abbildung 3: Einige Tablet-Computer... 7 Abbildung 4: Palette websicherer Farben... 10 Abbildung 5: Nutzung mobiler Geräte bei den Umfrageteilnehmern... 55 Abbildung 6: Wichtigste Kriterien für eine mobile Variante von OPAL... 56 Abbildung 7: Variante zwischen 1024 und 1920 Pixeln Breite... 65 Abbildung 8: Variante zwischen 960 und 1024 Pixeln Breite... 66 Abbildung 9: Variante zwischen 640 und 960 Pixeln Breite... 67 Abbildung 10: Varianten zwischen 640 und 480 Pixeln Breite sowie darunter... 68 Abbildung 11: Variante ab 1024 Pixeln Breite... 69 Abbildung 12: Variante ab 960 Pixeln Breite... 70 Abbildung 13: Variante ab 640 Pixeln Breite... 71 Abbildung 14: Adaptive Kartengrafik bei 1920 Pixeln Breite... 72 Abbildung 15: Adaptive Kartengrafik bei 1024 und bei etwa 320 Pixeln Breite... 72 Abbildung 16: Variante für berührungsempfindliche Bildschirme... 73 IV
Verzeichnis der Listings Listing 1: Angabe einer Media Query im link -Tag in einem HTML-Dokument... 24 Listing 2: Angabe einer Media Query für ein zu importierendes CSS-Dokument... 24 Listing 3: Angabe einer Media Query innerhalb eines CSS-Dokuments... 25 Listing 4: Media Query für Schwarz-Weiß-Drucker... 25 Listing 5: Media Query für konkrete Viewport-Abmessungen... 26 Listing 6: Media Query für Bereiche von Viewport-Abmessungen... 26 Listing 7: Media Query für mobile Geräte im Hochformat... 27 Listing 8: Media Query für Seitenverhältnisse von Viewport und Gerät... 27 Listing 9: Media Query für Seitenverhältnisse... 27 Listing 10: Media Query für Farbtiefe... 28 Listing 11: Media Query für Farbtiefen-Bereiche... 28 Listing 12: Media Query für indizierte Farben... 29 Listing 13: Media Query für verschiedene Stylesheets abhängig von der Farbdarstellung... 29 Listing 14: Media Query für hochauflösende Drucker... 30 Listing 15: Media Query für das Retina-Display... 30 Listing 16: Media Query für matrixbasierte Ausgabe... 31 Listing 17: User Agent String eines Webbrowsers... 31 Listing 18: Skriptbasierte Weiche für verschiedene Geräte in PHP... 33 Listing 19: Skriptbasierte Weiche für verschiedene Geräte in JavaScript... 33 Listing 20: Angabe von Vary: User-Agent im Kopf einer http-serveranfrage... 34 Listing 21: Skriptbasierter Test auf die Verfügbarkeit von Touch-Events... 35 V
Listing 22: Formel zur Ermittlung kontextabhängiger relativer Abmessungen... 41 Listing 23: Einbindung einer benutzerdefinierten Schrift als Webfont... 45 Listing 24: Verwendung einer benutzerdefinierten Schrift... 45 Listing 25: Austausch von Hintergrundbildern abhängig von der Viewport-Größe... 49 Listing 26: Skriptbasierte Implementierung von adaptiven Grafiken... 50 Listing 27: Das picture -Element... 51 Listing 28: Einbindung eines Videos per HTML 5 mit Rückfallvariante... 53 Listing 29: Definition der adaptiven Videobreite... 53 Listing 30: Allgemeine Dokumentstruktur... 76 Listing 31: Navigationsstruktur... 77 Listing 32: Auszeichnung eines adaptiven Bildes im Dokument... 77 Listing 33: Auszeichnung der Tabelle für die Einschreibung in Arbeitsgruppen... 78 Listing 34: Auszeichnung für die Definitionsliste als Alternative für die Tabelle der Einschreibung... 79 Listing 35: Auszeichnung eines adaptiven Videos... 79 Listing 36: globale Stilbeschreibungen für das body -Element... 81 Listing 37: globale Stilbeschreibungen für den Kopfbereich... 82 Listing 38: globale Stilbeschreibungen für die Hauptnavigation... 83 Listing 39: globale Stilbeschreibungen für Untermenüs der Hauptnavigation... 83 Listing 40: Stilbeschreibungen für Untermenüs der Hauptnavigationspunkte bei kleineren Anzeigebereichen... 84 Listing 41: Stildefinitionen für "portlets" auf der OPAL-Startseite... 85 Listing 42: Stildefinitionen zum Ein- und Ausblenden der Symbole von "portlets"... 86 Listing 43: Stildefinitionen zum Austausch mit Alternativinhalten... 87 VI
Listing 44: Stildefinitionen für adaptive Video s... 88 Listing 45: Test auf Touch-Ereignisse im Browser... 89 Listing 46: Stilbeschreibungen für Links auf Touchscreen... 90 Listing 47: Skript zur Umsetzung adaptiver Grafiken... 91 Listing 48: startseite-abgemeldet.html... XV Listing 49: startseite-angemeldet.html... XVII Listing 50: kurs.html... XX Listing 51: kurs-einschreibung.html... XXII Listing 52: style.less... XXV Listing 53: script.js... XXXIX VII
VIII
1 Historische Betrachtung der Inhaltsanpassung Die Entwicklung neuer visualisierender Geräte und deren technischer Fortschritt bedingt die Anpassung der zu vermittelnden Inhalte unmittelbar. Die Vielzahl der Geräte, welche in der jüngeren Vergangenheit auf dem Markt erschienen, führte teilweise zur Einführung neuer Paradigmen in der Darstellung von Website-Inhalten. Zumindest erfolgte mit neuen Geräten eine Evolution bereits bekannter und erfolgreich eingesetzter Technologien. Zur einführenden Beschreibung werden im Folgenden die gängigsten Geräteformen klassifiziert und erläutert. Die technische Entwicklung derselben führte bereits in der Vergangenheit zu verschiedenen Techniken der Optimierung von Inhalten, um diese einer möglichst großen Zielgruppe in der gewünschten Form zu präsentieren. Die wichtigsten Schritte auf dem Weg zu heutigen Praktiken adaptiver Visualisierung von Web-Inhalten sind ebenfalls Teil der folgenden Ausführungen. 1.1 Geräteklassen 1.1.1 Desktop- und Notebook-Rechner In diese Kategorie fallen die klassischen Anzeigemedien für Web-Inhalte. Diese sind Röhrenmonitore und deren direkten technischen Nachfolger die LCD-/LED-Bildschirme in einer ähnlichen Größe. In der Vergangenheit veränderten sich diese Geräte vor allem in den technischen Möglichkeiten der Darstellung und behielten ihr äußeres Erscheinungsbild weitestgehend bei. Es handelt sich um Geräte in etwa in der Größe eines Blattes Papier und etwas darüber hinaus. Dies entsprach in der Anfangszeit von Computerbildschirmen den Sehgewohnheiten der Zielgruppe, zumal sich die Verbreitung der Geräte aus universitären Forschungseinrichtungen hinein in Büroumgebungen aller Art fortsetzte und somit den bisherigen Konventionen entsprach, dass Dokumente schlussendlich auf Papier eines bestimmten Formates gedruckt werden. Dies betraf zu Beginn des World Wide Web auch in selbigem verbreitete Dokumente und setzte sich somit bei den folgenden Weiterentwicklungen derselben zu ausgeweiteten Präsentationen oder umfangreichen Anwendungen fort. Heutige Geräte besitzen meist Bildschirme in Abmessungen der Bildschirmdiagonale von 14 bis 19 Zoll. Kleinere Geräte, wie Netbooks, zählen im Rahmen dieser Arbeit nicht in diese Geräteklasse, da die Anzeigeeigenschaften eher denen der Tablet-PCs ähneln. Größere Anzeigegeräte, die in Größen von 20 bis 30 Zoll auf 1
dem Markt erhältlich sind, werden meist zur Bearbeitung von umfangreichen Bildinhalten und weniger zur Anzeige von Webinhalten eingesetzt, weswegen sie allenfalls im Abschnitt 7.4 dieser Arbeit, als Erweiterung des Themas, betrachtet werden. Die technische Entwicklung veränderte die Geräte in ihren grundlegenden Eigenschaften. So waren die zu Beginn als Kathodenstrahlröhrenmonitore ausgeführten Bildschirme technisch bedingt an ein eher quadratisches Format angelehnt und wurden in Seitenverhältnissen von 4:3 standardisiert. Die Entwicklung von Flüssigkristall- und Diodenmonitoren erlaubte schließlich beliebige Formate und führte, durch die Multimedialisierung der Rechengeräte unterstützt, zu kinoähnlichen Formaten wie 16:9 und 16:10. Weiterhin gab es Veränderungen bei der Darstellung von Farben und Formen. Die ersten Computerbildschirme zeigten nur Text an und begnügten sich deshalb mit monochromer Darstellung. Die Darstellung von Grafiken, z.b. in grafischen Betriebssystemen, oder wissenschaftliche Diagramme bedingten die Einführung von Graustufendarstellungen und schließlich vielfarbiger Ausgabe. Diese begann mit einer 16-Farben-Palette (von der zunächst nur vier Farben gleichzeitig verwendet werden konnten) und entwickelte sich in mehreren Stufen zu Konfigurationen mit 32-Bit-Ausgabe und über 16 Millionen darstellbaren Farben. Mittlerweile sind umfangreiche Farbkalibrierungen des Bildschirmes und somit z.b. realitätsgetreue Darstellungen von Fotografien möglich. Eine weitere Entwicklung stellt die Anzahl der darstellbaren Bildpunkte dar, die sich mit der Notwendigkeit, immer detailreichere Grafiken darstellen zu wollen, ergab. Erste gerasterte Röhrenmonitore an Computern konnten z.b. eine Menge von 320 x 200 Bildpunkten wiedergeben, während aktuell hergestellte Bildschirme sich bezüglich der Menge an Bildpunkten meist an Videoformaten, wie HDTV (1280 x 720, bzw. 1920 x 1080 Bildpunkte), orientieren und diese bei entsprechender Gerätegröße oft übertreffen. 1.1.2 Drucker Da Computer zu Beginn ihrer verbreiteten Nutzung kaum mehr waren, als ein fortschrittlicher Ersatz einer Schreibmaschine, wurde der Drucker zusammen mit der Tastatur schnell zum wichtigsten Peripheriegerät und stellte somit, nach dem Bildschirm, das zweitwichtigste Ausgabemedium dar. Die technische Entwicklung der Drucker folgte ungefähr den Ausgabemöglichkeiten der Computer. So waren anfangs typografische Drucker mit dem Letterndruckverfahren die konsequente Weiterentwicklung der Schreibmaschine, ehe Plotter (kontinuierliche Führung eines Druckkopfes zur Erzeugung 2
von vektorgrafischen Elementen) und die heute üblichen Matrixdrucker, welche jede Anordnung von Bildpunkten in einem definiert aufgelösten Raster erlauben, die Möglichkeiten der Darstellung auf bedruckbaren Medien vergrößerte. Neben verschiedenen Klassifizierungen von Druckern ist vor allem die Druckauflösung, also die Anzahl der druckbaren Bildpunkte auf einer Fläche, von erhöhtem Belang für die Druckqualität und die Darstellungsmöglichkeiten. Nadeldrucker konnten zunächst in Auflösungen von acht bis neun Bildpunkten pro Zeichen drucken und bedienten sich des bei Schreibmaschinen eingesetzten Verfahrens des Durchdrückens eines Farbbandes auf das Druckmedium mithilfe eines Stempels, der jedoch anstelle eines Letters mehrere punktförmige Nadelspitzen besaß und somit differenzierte Anordnungen von Farbpunkten erzeugen konnte. Für heutige Ansprüche an den Ausdruck von Websites genügen diese und andere Arten von Druckern, wie z.b. Thermodrucker, nicht. Im Wesentlichen sind Laser- und Tintenstrahldrucker die gängigen Druckertypen für diese Anwendung. Laserdrucker verwenden für die Herstellung des Druckes das Verfahren der Elektrofotografie, benutzen also elektrische Ladungen, um die Druckfarbe (Toner) auf dem Druckmedium zu positionieren. Anschließend erfolgt eine chemische Fixierung. Bei Dokumenten, die hauptsächlich aus Text und einfachen Grafiken bestehen, ist der Laserdrucker das bevorzugte Gerät. Tintenstrahldrucker sprühen kleine Tropfen Tinte auf das Druckmedium und positionieren diese ebenfalls über elektrische Ladungen durch piezoelektrische Schwingungen an der gewünschten Stelle. Dies kann in einer sehr hohen Auflösung erfolgen und durch additive Farbmischungen beim Überlagern von Tinte kann eine hohe Zahl verschiedener Farben und Abstufungen erzeugt werden. Fotodrucker für den Heimbereich sind ausschließlich Tintenstrahldrucker, weshalb diese für den Ausdruck von Websites mit hohem Grafikanteil am geeignetsten sind. Druckauflösungen von 1200 dpi ( dots per inch, Punkte pro Zoll) sind dabei eine gängige Eigenschaft. Das menschliche Auge hat ab ca. 600 dpi bei einem Abstand zum Druckmedium von 25 cm (normaler Leseabstand) Schwierigkeiten, Qualitätsunterschiede auszumachen 1. Bei Fotodrucken ist dieser Abstand ggf. zu groß und höhere Auflösungen werden notwendig. 1 (Spektrum Akademischer Verlag) 3
1.1.3 Mobiltelefone In diese Kategorie werden im Rahmen dieser Arbeit Geräte eingeordnet, die neben dem Telefonieren weitere Dienste und Anwendungen ermöglichen, sich allerdings v.a. von den Smartphones abgrenzen, indem sie keine universellen Plattformen für Anwendungen anderer Herkunft als dem Hersteller des Gerätes aufweisen, sondern nur Funktionen bieten, die das Betriebssystem des Gerätes selbst bereitstellt. Die Fähigkeit zur Anzeige von Online-Inhalten beschränkt sich bei diesen Geräten auf mobile Dienste, wie SMS, WAP und gefilterte Web-Angebote, die die Zugangssoftware auf diesem Gerät erlaubt. Diese Einschränkung war insbesondere in den Anfängen dieser Techniken der beschränkten Leistungsfähigkeit sowie dem Fehlen von passenden Datentarifen geschuldet. Nicht umsonst war die Definition von WAP als Wait and Pay ( Warte und zahle ) 2 weit verbreitet. Abbildung 1: Einige Mobiltelefone 3 Vor allem die Entwicklung von Feature Phones, also Geräten, die neben Mobilfunkdiensten viele weitere (vor allem multimediale) Funktionen aufwiesen, förderte die Verbreitung des Datenaustauschs über klassische Telefonfunktionen hinweg. Zunächst konnten über den MMS-Dienst, der auf der WAP-Technik basiert, Bilder, kurze Videos und Audiodateien, analog zum SMS-Versand, verschickt werden. Der Ausbau dieser Technik wurde vor allem durch neue Gerätefunktionen, wie Fotografie (seit 1999), Tonund Videoaufzeichnung sowie deren Wiedergabe (seit 1998 mit Radio-Funktion, seit 2000 mit Musikabspielfunktion) gefördert 4. Das Telefon war längst nicht mehr nur zum Telefonieren geeignet sondern entwickelte sich mehr und mehr zum tragbaren Multimediagerät mit wachsenden Bildschirmgrößen ständigverbesserter Rechenleistung. 2 (Spiegel, 2001) 3 (Discostu, 2008), (N, 2008), (Tkgd2007, 2009), (Nesnad, 2008) 4 (verschiedene Autoren) 4
Die Bauarten dieser Geräte variieren stark untereinander und weisen unterschiedlichste Anzeigegrößen und -eigenschaften auf. Allein die äußere Form kann sich z.b. in Schokoriegel -, Klapp- und Schiebe-Bauweise sowie Kombinationen mehrerer dieser Formen kategorisieren. Die Anzeigegrößen variieren ebenfalls stark und lassen sich nur schwer sinnvoll kategorisieren. Während z.b. frühe WAP-fähige Telefone, wie das 3330 von Nokia, ein monochromes, 84 mal 48 Bildpunkte messendes, Matrix-Display besaßen 5, welches zur Anzeige von Grafiken nur sehr bedingt geeignet war, weisen Feature Phones der Walkman-Serie von Sony-Ericsson Auflösungen von 240 x 320 Pixel auf 6 und erlauben damit immerhin eine gute Vorschau-Anzeige von Fotos. 1.1.4 Smartphones Die Bezeichnung Smartphones wurde in der Vergangenheit bereits mehrfach für verschiedene Geräte verwendet, beschrieb aber immer Geräte, die mehr Funktionen boten, als übliche Mobiltelefone und Feature Phones. Aktuell werden damit Geräte bezeichnet, die neben Telefonfunktionen eine Plattform für die Entwicklung von Anwendungen (meist Apps Applikationen genannt) aufweisen und somit Aufgaben und Funktionen eines Computers, bzw. anderer Geräte übernehmen können 7. Zusatzfunktionen, wie GPS-Einheit, Rotations- und Beschleunigungssensor und Kompass, ermöglichen weitere Aufgaben eines mobilen Gerätes, wie z.b. Navigationsfunktionen. Abbildung 2: Einige Smartphones 8 5 (verschiedene Autoren) 6 (Sony Ericsson Mobile Communications AB, 2008) 7 (Bibliographisches Institut GmbH, Dudenverlag) 8 (Florianwicher, 2011), (Vega, 2012), (Filnik, 2011), (Lolametro, 2013) 5
Viele moderne Smartphones besitzen keine Tastatur mehr sondern werden fast ausschließlich über einen berührungsempfindlichen Bildschirm bedient. Tasten finden sich bei den meisten Geräten allenfalls für Nebenfunktionen, wie Lautstärkeregelung und das Ein- und Ausschalten des Gerätes. Da das Smartphone durch die Vielzahl von angebotenen Anwendungen in hohem Maße personalisiert und individualisiert werden kann, sind der Touchscreen und die eingebauten Sensoren eine Möglichkeit, die Eingabefunktionen anderer Geräte zu simulieren oder gänzlich neue Arten der Dateneingabe zu ermöglichen. So können z.b. bei Spielen Bewegungen des Gerätes durch den Benutzer (etwa Schütteln) als Eingabe genutzt werden. Die Anzeigegrößen und Gerätefunktionen von aktuellen Smartphones unterscheiden sich traditionell je nach Hersteller und Modell. Sie variieren ungefähr zwischen Auflösungen von Feature Phones bei 240 x 320 Bildpunkten und Größen von 640 x 1136 Pixeln 9, die an Größen von Tablet-PCs und Netbooks heran reichen. 1.1.5 Tablet-Computer Tablets sind Computer in einer flachen Form, meist ohne Klapp- oder Schiebemechanismen und größtenteils wie Smartphones ohne Tasten. Die Eingabe erfolgt über einen berührungsempfindlichen Bildschirm. Die Rechenleistung heutiger Tablet-PCs kann mit denen der Netbooks verglichen werden, ist also meist schwächer als die von Desktop- und Notebook-Rechnern. Dies ist vor allem durch die Einsatzgebiete der Geräte zu erklären. Tablet-Computer sollen als mobile Begleiter vor allem multimediale und unterhaltende Aufgaben übernehmen. Dafür ist der Bildschirm in etwa so groß, wie ein Blatt Papier im DIN-A5-Format und lässt sich sowohl im Quer- als auch im Hochformat benutzen. Die Auflösung der Anzeigen kommt teilweise an die von Notebook- und Desktop- Computern heran. Dadurch sind Bild- und Videowiedergaben in hoher Qualität und auch die Anzeige von Websites weitestgehend analog zu großen Bildschirmen möglich. 9 (verschiedene Autoren) 6
Abbildung 3: Einige Tablet-Computer 10 Die Betriebssysteme der Geräte sind mit denen der Smartphones zu vergleichen und sind teilweise identisch. Es haben sich mit der Zeit die Systeme der großen Unternehmen in diesem Bereich (Apple ios, Google Android, Microsoft Windows) 11 durchgesetzt. Diese bieten die Möglichkeit, das Gerät mit vielen Applikationen zu individualisieren. Aktuelle Bildschirmgrößen bewegen sich bei Tablet-Computern zwischen 800 x 480 und 2560 x 1600 Bildpunkten 12. 1.1.6 Zusammenwirken verschiedener Geräteklassen Da die Ausgabe von Web-Inhalten vorwiegend visueller Art ist, stellen die Größe der jeweiligen Anzeigegeräte sowie deren physikalisches Auflösungsvermögen die wichtigsten Kriterien bei der dynamischen Anpassung von anzuzeigenden Inhalten dar. Die Grenzen der genannten Geräteklassen bezüglich dieser Eigenschaften sind somit fließend und widersprechen sich teilweise (z.b. besitzt das Apple ipad der dritten Generation eine höhere Auflösung als viele Notebook-Bildschirme). Als erste Erkenntnis dieser Arbeit lässt sich also feststellen, dass bei der Adaption von Website-Darstellungen nicht allein die Erkennung und Klassifizierung des Anzeigegerätes von Bedeutung ist, sondern vielmehr eine Fülle von Geräteeigenschaften zu berücksichtigen sein wird. Ob die Ausrichtung an bestimmten Eigenschaften in diesem Zusammenhang sinnvoll ist, wird Gegenstand der Untersuchungen sein.denn wie den Ausführungen über die historische Entwicklung der verschiedenen Gerätekategorien zu ent- 10 (Lolametro, 2012), (Lolametro, 2012), (PaulK, 2012) 11 (Epstein, 2012) 12 (verschiedene Autoren) 7
nehmen ist, verändern sich diese Eigenschaften und Funktionen ständig weiter und bilden in ihrer Gesamtheit immer nur den aktuellen Entwicklungsstand ab. Zukunftsfähige dynamische Websites müssen also weitere Kriterien bei der Adaption einbeziehen. 1.2 Bisherige Anpassungsstrategien Dem weitestgehend entgegen stehend stellen sich bisherige Anpassungsstrategien von Websites dar. Anpassungen von Web-Inhalten erfolgten lange entweder überhaupt nicht oder für wenige Konfigurationen von Hard- und Software. Meist entsprachen diese den Möglichkeiten, die der jeweilige Entwickler der Website zur Verfügung hatte und dementsprechend testen konnte. Optimiert für Internet Explorer ab 5.5 bei 800x600 auf einem 15-Zoll-Monitor mit 256 Farben Sätze wie dieser kursierten deshalb lange Zeit auf vielen Websites. Dabei fand entweder überhaupt keine Anpassung statt oder das Layout wurde statisch auf eine bestimmte Größe festgelegt. 1.2.1 Anpassung abhängig von der Hardware Die wichtigsten Kriterien zur Ausgabeanpassung waren zu Beginn der grafischen Oberflächen und der damit einher gehenden zunehmenden illustrativen Darstellung von Websites anstelle von reinen, bzw. mit wenigen Abbildungen versehenen, Textdokumenten hardwarebezogene Eigenschaften der Anzeigegeräte. Allerdings gestaltete sich die Erkennung und Behandlung von Unterschieden der eingesetzten Bildschirme schwierig, denn bis Ende der ersten Hälfte der 1990er Jahre waren schnelle Clientseitige Technologien, wie z.b. Skriptsprachen, die im Browser eingesetzt werden können, noch nicht sehr verbreitet und unausgereift 13. Deshalb beschränkte sich die Anpassung darauf, eine Kompromissversion einer Website bereitzustellen, um möglichst viele Benutzer zu erreichen. Dabei wurde in Kauf genommen, dass Benutzer, die z.b. einen zu kleinen Bildschirm oder einen solchen mit unzureichender Farbdarstellung besaßen, die Website nur eingeschränkt sehen konnten. Für die Farbdarstellung war es zudem in den 1990er Jahren üblich, so genannte websichere Farben zu verwenden. Durch die Verbreitung von 8-Bit-Grafikkarten konnten nur 256 reine Farben auf dem Bildschirm dargestellt werden. Die von Lynda Weinman vor- 13 (Hauser, 2003) 8
geschlagene Palette von jeweils sechs verschiedenen Farbtönen für jede Grundfarbe wurde zuerst von Netscape standardisiert 14. Alle anderen Farben mussten durch ein Mischverfahren, das Dithering, simuliert werden. Mit den Farbeigenschaften eines Bildes ist auch die Dateigröße desselben verbunden, welche vor allem zu Zeiten der langsamen analogen Wählverbindungen per Modem ein wichtiges Kriterium für die Betrachtung von Websites waren. Grafiken mit mehreren 100 Kilobytes benötigten mit diesen Geräten mehrere Sekunden bis Minuten, um heruntergeladen zu werden. Objekte dieser Größe, welche nur zum Layout beitrugen, ohne selbst Informationsgehalt für die Website zu besitzen, mussten daher vermieden werden. Zur Umgehung dieses Problems wurde oft die Technik des Interlacing oder des progressiven Speichermodus angewandt. Dabei werden die Zeilen des Bildes nicht der Reihe nach abgespeichert und heruntergeladen, sondern dieser Vorgang verläuft in vier Phasen, wobei in Phase eins nur jede achte Zeile aufgebaut wird, in der nächsten Phase jede vierte Zeile, usw 15. Auf diese Art konnte der Betrachter während des Ladevorganges bereits grobe Züge des Bildes erkennen und ggf. entscheiden, ob das Bild relevant ist oder der Ladevorgang abgebrochen werden kann. 14 (Weinman, 2004) 15 (verschiedene Autoren) 9
Abbildung 4: Palette websicherer Farben 16 1.2.2 Anpassung abhängig von der Zugangssoftware Die Anpassungen von Websites bezogen sich vor allem während der Zeit der Browserkriege auf eine spezielle Zugangssoftware einer der beteiligten Browserhersteller. Geschuldet durch eine mangelhafte Standardisierung, bzw. Einhaltung derselben, die Einführung von proprietären Funktionen und die Ausnutzung von hohen Marktanteilen zur Schwächung der Konkurrenz entstanden Websites, die entweder ein relativ nüchternes Erscheinungsbild besaßen, dafür aber in vielen Browsern relativ gleich angezeigt wurden, oder anderenfalls ausschließlich auf die Browser eines Herstellers zugeschnitten waren und dementsprechend nur dort zufriedenstellend betrachtet werden konnten. Der erste Browserkrieg begann 1995 mit der Veröffentlichung der ersten Version des Internet Explorers von Microsoft. Das Unternehmen wollte den Marktanteil des Netscape Communicator verringern, welcher zu dieser Zeit rund 80 % betrug 17. Microsoft befürchtete eine Verbreitung von Netscape-Produkten, da deren Browser mehrere APIs besaß 16 (Nonenmac, 2008) 17 (Peter, 2004) 10
und für verschiedene Betriebssysteme vertrieben wurde 18. Microsoft sah also sein Betriebssystem-Monopol in Gefahr, wenn Software-Hersteller den kostenlosen Netscape Communicator als Middleware betrachten und eine entsprechende Menge Anwendungen auf dieser Basis veröffentlichen sollten. Microsoft brach den Marktanteil von Netscape durch die Integration des Internet Explorers in sein Betriebssystem Windows. Darunter litten vor allem für das World Wide Web formulierte Dokumenten-Standards, denn die Interpretation vorhandener Bestimmungen war oft grundverschieden und die Browser-Hersteller buhlten mit nicht standardisierten Neuerungen um Web-Entwickler und Browser-Nutzer. Ab der 1999 veröffentlichten Version 5 des Internet Explorers sind dies z.b. die Conditional Comments, mit denen eine Art Versionsabfrage in Form von Wenn-dann-Bedingungen möglich ist. Weitere nicht standardisierte Funktionen sind die Nutzung von Schatten und Alpha-Transparenz im Internet Explorer und erweiterte Positionierungs-Attribute im Netscape Communicator. Die Optimierung von Websites für die jeweiligen Browser bestand vor allem in der Nutzung von Browserweichen, z.b. durch JavaScript, mit denen festgestellt wurde, welche Zugangssoftware der Betrachter nutzt und darauf basierend weitere Schritte eingeleitet wurden. Diese konnten eine Umleitung zu einer bestimmten Version der Website für den jeweiligen Browser oder eine Seite sein, auf welcher der Nutzer aufgefordert wurde, einen anderen Browser zu nutzen. Bei Nutzung von CSS zur Beschreibung des Layouts einer Website wurden so genannte Hacks (verschieden interpretierte, teils fehlerhafte, Auszeichnungen der Sprache, welche in einer bestimmten Konstellation einen Browser identifizieren konnten) genutzt, um Browser-spezifische Regeln für die Darstellung zu definieren. Der lang anhaltende Marktanteil des Internet Explorers, verbunden mit einer fehlenden Weiterentwicklung des Microsoft-Browsers von 2001 bis 2006, führte dazu, dass eine Annäherung an Standards für lange Zeit unmöglich wurde. Websites wurden so gestaltet, dass sie im Internet Explorer gut aussahen und wurden teilweise überhaupt nicht in anderen Browsern getestet. Es kam sogar zum Ausschluss von Nutzern anderer Browser bei Anwendungen wie Online-Banking oder Online-Versandhandel, da für die Funktion derselben z.b. nur im Internet Explorer garantiert wurde. 18 (Thomas Penfield Jackson, 1999) 11
Der zweite Browserkrieg begann, als zunehmend Sicherheitslücken im Internet Explorer bekannt wurden und erweiterte Funktionen in neuen Browser-Projekten aufkamen. Besonders hervor zu heben ist der Browser Mozilla Firefox. Das quelloffene Projekt machte durch Sicherheitsvorkehrungen, Funktionen wie Tabbed Browsing und sogar mit spendenfinanzierten Zeitungsanzeigen auf sich aufmerksam und gewinnt seit 2004 kontinuierlich Marktanteile, fast ausschließlich bei bisherigen Nutzern des Internet Explorers. Weitere Projekte, wie die Öffnung des Apple-Browsers Safari für Windows- Betriebssysteme und Googles Entwicklung von Chrome zwingen auch Microsoft, Weiterentwicklungen seines Browsers voranzutreiben. Mit den Versionen 8 und 9 nähert sich auch der Internet Explorer einer hundertprozentigen Umsetzung der W3C-Standards und bietet vergleichbare Funktionen wie andere Browser. Der zweite Browserkrieg dauert bis heute als eine Art kalter Krieg an und geht in einen Zustand des Angebot-und-Nachfrage-Prinzips über, ohne weiterhin oligarchische Züge anzunehmen, wie zu Zeiten des offenen Kampfes zwischen Netscape und Microsoft. Auch das Aufkommen mobiler Geräte mit teils sehr unterschiedlichen Browsern bereichert den Markt der Zugangssoftware und macht die Optimierung auf eine Gruppe von Browsern oder gar auf ein bestimmtes Produkt unmöglich. 1.2.3 Mobile Dienste Eine Sonderform der Inhaltsanpassung sind mobile Dienste, welche vor allem für Mobiltelefone eine Bedeutung errungen haben. Dabei spielten vor allem die gegenüber Computern eingeschränkten technischen Möglichkeiten eine Rolle. Die Geräte haben nicht nur eine geringere Rechenleistung sondern auch sehr kleine Anzeigen und sind weiterhin z.b. in der Übertragungsrate eingeschränkt. Die Mobilfunknetzbetreiber setzten zunächst auf SMS-Abonnements, mit denen die Nutzer z.b. regelmäßig Nachrichten, den Wetterbericht, usw. meist gegen die Zahlung eines Pauschalpreises als SMS-Nachricht erhalten konnten. Die Weiterentwicklung der Geräte, vor allem der Feature Phones, ermöglichte größere Datenpakete und umfangreichere Angebote. Es entstanden Portale der Mobilfunkanbieter, die auf die Bedürfnisse dieser Nutzer zugeschnitten sind und, auf die technischen Gegebenheiten abgestimmt, einen reduzierten Überblick über das Web-Angebot des Anbieters bieten. Diese Portale sind meist kostenlos, um Nutzer auf weitere dann oft kostenpflichtige Angebote aufmerksam zu machen. Der Telegrammstil der SMS-Abonnements ist weiterhin bestimmend für diese Angebote, wenn auch Bilder, Ton und Video integriert werden können. Zum Einsatz kommt hierbei meist WAP und die zugehörige Auszeichnungsspra- 12