Sie haben eine Agentur mit einem Design beauftragt. Das wunderschön anzusehende Ergebnis stimmt sie zufrieden. Kollegen, Geschäftspartner und Freunde sind voll des Lobes. Doch manchmal hören Sie, dass einige Besucher nur Teile der Webseite sehen - manche berichten sogar von aufpoppenden Werbebannern, einer viel zu schmalen Ansicht des Textes, pixligen oder gar nicht angezeigten Grafiken.
Dieser Fachbeitrag soll Ihnen Möglichkeiten zeigen wie Sie das Aussehen Ihrer Webseite bei Ihren Besuchern testen können.
Jede Webseite wird mit HTML strukturiert und mittels CSS (den sogenannten Stylesheets) zu ihrem Aussehen verholfen. Das Design stellt sich somit aus den per CSS gestylten HTML-Codes zusammen mit Grafiken und ggfs. Animationen (Flash, Videos) zusammen. Diese Quellcodes werden auf Grundlage der vom World Wide Web Consortium (kurz W3C) festgelegten Standards geschrieben.
Ein Browser lädt nun diese Quellcodes und interpretiert die Stylesheets auf Grundlage des HTML-Codes und der international anerkannten Standards. Dabei nutzt er den ihm auf dem Bildschirm zur Verfügung stehenden Platz und die ihm durch seinen Benutzer eingeräumten Möglichkeiten um die Webseite darzustellen.
Im Internet gibt es dutzende unterschiedliche Webbrowser von ebenso vielen unterschiedlichen Herstellern. Die Meisten von ihnen arbeiten heute auf Grundlage der o.g. W3C-Standards und interpretieren die vorliegenden Quellcodes entsprechend. Jedoch gibt es bei dieser Interpretation ab und an Abweichungen, so dass eine Webseite in einem Browser so wie gewünscht, in einem Anderen jedoch falsch dargestellt wird. Ältere Browser wie der Internet Explorer 6, Opera 8, Firefox 1 oder gar Netscape kennen diese Standards noch nicht oder setzten sie falsch um wodurch eine Webseite in diesen Browsern falsch dargestellt werden würde.
Nicht jeder Internetnutzer verwendet eine aktuelle Version des eigenen Browsers. Prüfen Sie es bei sich selbst: haben Sie eine aktuelle Version Ihres Browsers? Wenn nein, dann holen Sie möglichst zeitnah die aktuellste Version. Diese verhilft Ihnen nicht nur zu einem angenehmeren und sichereren Surfen sondern öffnet Ihnen auch meist viele neue Möglichkeiten in der Arbeit mit dem Internet.
Moderne Browser ermöglichen es dem Benutzer Plugins und Erweiterungen zu installieren. Einige dieser Erweiterungen können auch das Aussehen von Webseiten beeinflussen.
Das Skype-Plugin z.B. ändert im Internet Explorer alle Telefonnummern auf einer Webseite in eine anklickbare und animierte Grafik. Dadurch ändert sich das Design der Webseite da dieses so eine grafische Darstellung der Telefonnummer nicht vorsieht. Wie so etwas aussehen kann sehen Sie in dem nebenstehenden Screenshot.
Das Addon Alexa, welches für nahezu jeden Browser verfügbar ist, verändert die Google-Ergebnisseiten und zeigt in diesen Balkendiagramme an. Etwas ähnliches macht das Firefox-Addon SearchPreview: dort wird neben jedem Suchergebnis bei Google eine Vorschau auf die gefundene Webseite eingeblendet.
Das Tails Export Addon für Firefox ermöglicht es Adressdaten aus einer Webseite heraus zu ziehen. Dadurch werden in der Webseite Symbole angezeigt die der Webdesigner an der Stelle gar nicht vorgesehen hatte.
Und die Erweiterung NoScript für Firefox ermöglicht es JavaScript und Medien-Elemente (Videos, PDFs) auf einer Seite komplett zu unterdrücken. Das Ergebnis davon sehen Sie im untenstehenden Screenshot. Links ist die Ansicht mit aktiviertem NoScript, rechts normal ohne NoScript.
All diese Plugins sollen dem Benutzer helfen Daten aus den Webseiten auszulesen oder sich vor möglicherweise vorhandenen aggressiven Webseiten zu schützen. Sie stören aber auch teilweise gleichzeitig die Darstellung von Webseiten, so dass ein Webseitenbetreiber sich eigentlich nie sicher sein kann wie seine Webseite nun eigentlich beim Besucher aussieht. Dagegenhalten kann man jedoch, dass die meisten der o.g. Plugins nur bei einem Bruchteil der Internetnutzer installiert ist, es hängt auch stark von der Zielgruppe der eigenen Webseite ab.
Sehr häufig zu finden sind Plugins zur Unterdrückung von Werbeanzeigen auf Webseiten, sogenannte Werbeblocker oder Add-Blocker. Diese reagieren automatisch auf gewisse Strukturen und Adressen in den Quellcodes. Steht z.B. im HTML-Code etwas von "Banner" und wird in dem Zusammenhang ein Bild eingebunden, dann unterdrücken diese Programme die Anzeige dieses Bildes. Aus dem Grund muss man als Webseitenbetreiber darauf achten, solche werbewirksamen Begriffe nicht im HTML-Quellcode zu verwenden, denn sonst würde ein Teil der Webseite nicht mehr bei allen Nutzern dargestellt werden können.
Viele Internetnutzer verwenden heute RSS-Feeds von verschiedensten Webseiten um sich schnell über aktuelle Ereignisse oder interessante Angebote informieren zu lassen. Diese RSS-Feeds werden in den meisten Webbrowsern als Sidebar neben der Webseite selbst angezeigt. Dadurch verringert sich der für eine Webseite verwendete Platz. Das kann zur Folge haben, dass die Webseite nicht 100%ig zu sehen ist oder - im schlimmsten Fall - verschoben dargestellt wird. Im Screenshot links sieht man www.viomatrix.de mit geöffneter Sidebar (inkl. RSS-Feed-Einträgen) bei einer Fenstergröße von 1024 Pixeln.
Auch surft nicht jeder mit seinem Browserfenster im Vollbild. Vor allem Besitzer von großen Monitoren ab 24 Zoll verfallen in die Gewohnheit ein Browserfenster nur auf einem Teil des Bildschirm stehen zu lassen. Dadurch verändert sich der Platz den eine Webseite beim Betrachten auf dem Bildschirm des Besuchers einnehmen kann. Das ist abhängig von dem Besucher selbst. Ein Webseitenbetreiber kann diesen Vorgang nicht überprüfen oder umgehen.
Viele Webseiten verwenden Cookies um Daten des Besuchers oder der Webseite für einen reibungslosen Ablauf im Browser des Besuchers zu sichern. Mitarbeiter von stark auf Sicherheit bedachten Unternehmen stellen die Browserssicherheit mitunter so hoch ein, dass Cookies gar nicht oder nur nach Bestätigung angenommen werden. Dadurch könnten sich die Besucher belästigt fühlen, auch wenn sie durch ihre Browser-Einstellungen selbst schuldig sind.
Als Webseitenbetreiber sollte man die Anzahl der zu setzenden Cookies somit auf einen Minimum halten. Und wenn man sie einsetzt sollte man die Ansicht und den Informationsgehalt der Webseite nicht abhängig von einem Cookie machen. Denn wer diesen nicht annimmt, würde dann etwas anderes, weniger oder gar nichts mehr sehen können.
Achten Sie bei der Webseite auf die verwendeten Schriftarten. Nicht jede Schriftart ist auch unter jedem Betriebssystem verfügbar. Und nicht jede ist bei jedem Anwender installiert. Es gibt eine Reihe von Schriftarten die als "websicher" gelten (siehe Fachbeitrag Die Verwendung von Schriftarten im Web). Das Nachladen von Schriftarten, wie es in dem verlinkten Fachbeitrag beschrieben ist, funktioniert hingegeben ebenfalls nur, wenn der Nutzer dies zulässt.
Aber auch die ordnungsgemäß angegebenen und beim Besucher vorhandenen Schriftarten können je nach Betriebssystem und Auflösung anders dargestellt werden. Unter Linux könnten Texte z.B. bei nicht durchdachter Stylesheet-Formatierung größer oder kleiner dargestellt werden als unter Windows, was je nach Aufbau der Webseite zu unschönen Verschiebungen bis hin zur Nichtlesbarkeit des Inhalts führen kann.
Als seriöser Webseitenbetreiber sollte man für seine Webseite einen kostenpflichtigen Webspace verwenden auf dem die eigene Webseite abgelegt und für alle Internetnutzer weltweit bereitgestellt wird. Es gibt zahlreiche Angebote für kostenfreien Webspace, diese bergen jedoch oft das Risiko, dass der Webspace-Hoster Werbung einblendet die man nicht oder nur ungenau kontrollieren kann. Auch ist eine richtige Domain wie www.viomatrix.de weitaus seriöser und angenehmer als eine kostenfreie Subdomain wie example.ab.cd, bei der auch Werbung eingeblendet werden könnte und die für die Einbindung in Suchmaschinen eher von Nachteil ist.
Blendet man auf der eigenen Webseite Werbung ein um z.B. den eigenen Umsatz zu erhöhen, dann sollte man darauf achten, dass dieser durch Ausblendung mittels Werbeblockern (siehe oben) nicht das Design zerschießt. Man sollte bei der Erstellung der Webseite darauf Rücksicht nehmen, dass manche Internetnutzer gewisse Dinge nicht sehen wollen und diese von den Nutzern selbst ausblendet werden.
Lässt man die Webseite durch eine beauftragte Agentur erstellen, dann sollte man auch hier darauf achten, dass diese Agentur mit den HTML- und CSS-Standards arbeitet und die meistverwendeten Browser zusichert. Aus Sicht eines Browsers kann es folgende Ursachen haben, dass eine Webseite anders dargestellt wird als sie eigentlich aussehen sollte:
Für die Anzeige einer Webseite im Browser allein müssen die Daten der Webseite erstmal den Weg über den Computer des Benutzers gehen. Auch hier können diese Daten beeinflusst werden wodurch die Darstellung der Webseite beeinflusst wird.
Im einfachsten Fall verwendet der Besucher eine Firewall um Schädlinge vom eigenen Computer abzuhalten, die jedoch ähnlich wie ein Werbeblocker nach bestimmten Begriffen im Datenstrom sucht. Fällt dort ein vermeintlich schädlicher Begriff auf, wird der Datenstrom unterbrochen oder verändert und dadurch die darzustellende Webseite beeinflusst. Besonders auffällig ist dies wenn die Firewall als Kindersicherung fungiert und z.B. erotische oder sexuelle Begriffe herausfiltern soll.
Auch viele moderne Antivirenprogramme prüfen diesen Datenstrom. Hat die Webseite z.B. eine JavaScript-Anwendung eingebunden die eine bestimmte Signatur hat, dann greift das Virenprogramm ein und behauptet die Webseite wäre verseucht. Ist sie aber nicht. Solche Irrtümer passieren, aber zum Glück sehr selten und werden durch die Hersteller der Antivirensoftware zügig behoben.
Mobile Endgeräte wie Smartphones oder EeePc's haben eine deutlich geringere Auflösung als "normale" Computer. Eine Webseite wird dort zum Einen kleiner dargestellt, zum Anderen aber auch bewusst anders. Die meisten Telefon-Provider bieten UMTS- und HSDPA-Verbindungen an, welche aber die Daten nur komprimiert übertragen. Ein Programm auf dem Endgerät nimmt diese entgegen und versucht daraus die bestmögliche Darstellung für den Webseiten-Besucher zu errechnen. Das Ergebnis ist nie gut genug und führt mitunter zu Nachfragen "wieso denn die Grafiken so schlecht aussehen".
Eine Webseite kann auch ohne Browser aufgerufen werden. Damit muss man bei vielen Branchen rechnen. Screenreader bspw. lesen das aus was ein Webbrowser anzeigt und liest es vor. Das ist für gehändicapte Mitmenschen besonders interessant, hat aber zur Folge, dass eine Webseite nicht wirklich dargestellt werden kann - sie wird lediglich vorgelesen (Stichwort Barrierefreiheit).
Daneben gibt es auch noch Webspider. Das sind Programme die auf einen Schlag dutzende oder hunderte HTML-Seiten herunterladen können. Dies ist z.B. für Internetnutzer mit zeitlich begrenztem Internetzugang interessant. Als Webseitenbetreiber sollte man hierfür darauf achten, dass alle Grafiken die in die Webseite eingebunden sind auf diesem Weg ebenfalls heruntergeladen werden. Wenn nicht, dann sieht die Webseite nach dem Download "zerschossen" aus, weil z.B. die Hintergrundgrafiken fehlen.
Der Begriff "Surfen ohne Browser" ist besonders in den letzten 2 Jahren aufgekommen. Er bezieht sich jedoch primär auf den Umstand, dass Microsoft den Browser Internet Explorer innerhalb der Europäischen Union nicht standardgemäß unter dem eigenen Betriebssystem Windows installieren darf. Dennoch gibt es die Möglichkeit über einen Trick in den Windows-eigenen Programmen in Webseiten zu surfen - ganz ohne Browser im sprichwörtlichen Sinne.
Um selbst mal zu sehen wie die eigene Webseite in bestimmten Browsern aussieht, muss man diese nicht alle einzeln installieren. Es lohnt es sich die folgenden Portale anzuschauen:
Bei den ersten Beiden muss man lediglich die Adresse der eigenen Webseite angeben und dann einige Zeit warten bis alle Screenshots generiert wurden. Es ist manchmal sehr aufschlussreich, aber man darf sich dabei nicht verrückt machen lassen. Die meisten der dort aufgelisteten Browser werden gar nicht oder nur von einzelnen Internetnutzern verwendet. Eine Webseite mit 1000 Besuchern im Monat wird sicher nicht von exotischen Browsern wie dem ELinks oder Flock aufgerufen, es sei denn es geht um mobile Browser.
Reden Sie mit Ihren Kollegen, Geschäftspartnern oder Freunden. Lassen Sie sich auf deren Bildschirm direkt zeigen wie die Webseite bei denen aussieht und wirkt. Hilfreich ist dabei auch ein Fernwartungsprogramm mit dem man direkt auf den Desktop des anderen zugreifen kann. Das geht z.B. mit:
So kommt man auch ins Gespräch und kann ggfs. Backlinks abgreifen die für die eigene Suchmaschinenoptimierung essentiell sind.
Daneben gibt es natürlich auch die Möglichkeit die verschiedenen Browser selbst durchzutesten und verschiedene Konstellationen mit installierter Software auszuprobieren. Sie könnten dies direkt auf Ihrem eigenen Computer machen oder jeweils einen neuen Rechner für jeden Test kaufen. Da dies zugegeben sehr kostenintensiv sein kann, gibt es auch virtuelle Maschinen. Das sind Computer die nur als Datei auf einem Host-Computer existieren und auf diesem laufen können. Einmal gestartet erlauben sie es beliebige Experimente mit der Software, mit Einstellungen und Programmen zu machen ohne, dass der eigentliche Computer davon betroffen ist. Die Software für virtuelle Maschinen gibt es heute kostenfrei, z.B. bei
Die virtuelle Maschine selbst erfordert, gerade bei MS Windows-System, jeweils eine eigene Lizenz. Daneben stehen Ihnen aber auch dutzende Linux-Distributionen zur Verfügung in der man auch ohne Installation die eigene Webseite in verschiedenen Browsern testen kann.