Bitte besuchen Sie auch die Sponsoren:


→ Made on a PC. → Kampagne "Any Browser" → Startseite
Symbol

Was ist Any Browser?

Diese Seite ist eine Kampagne, die sich sowohl an Webdesigner, als auch an die Benutzer von Browsern richtet. Any Browser ist kein Browser im eigentlichen Sinne, sondern soll als Aufforderung an Webentwickler verstanden werden, Websites so zu gestalten, dass sie in einem beliebigen (englisch: any) Browser funktionieren. Durch die Einhaltung von Webstandards tragen Entwickler dazu bei, dass Websites in gängigen Browsern korrekt angezeigt werden müssen und Besucher, die einen selteneren Browser verwenden, nicht von einer Seite ausgeschlossen werden.

Auch als "Surfer" der Sie nur Websites aufrufen aber nicht entwickeln, können Sie dazu beitragen, dass mehr Websites nach Standards entwickelt werden. Durch die Verwendung eines modernen Webbrowsers zwingen immer mehr Websitebesucher die Entwickler, nach Standards zu arbeiten - Websites werden besser, können in mehr Browsern (darunter sogar Browser für Menschen mit Sehschwächen) besser dargestellt werden.
→Weiter zu den Empfehlungen

Diese Website soll Ihnen zeigen, dass auch Websites mit besonderen Funktionen in gültigem (X)HTML umgesetzt werden können, als kleine Spielerei finden Sie hier auch den Browser im Browser, mit dem Sie sogar externe Websites aufrufen können.

Kampagne "Any Browser"

Nachdem ich in meinem Weblog in letzter Zeit kampagneartig gegen die Betreiber von Websites (beziehungsweise ihre Festlegungen) mit Sprüchen wie 'Optimiert für...' gewettert habe und meine Wertlegung auf Einhaltung von gültigen Auszeichnungssprachen mit der Entwicklung meines Content Managemt Systems MCS4 gefestigt habe, möchte ich mit dieser Website in erster Linie beweisen, dass man auch Design-Websites erstellen kann, die nach geltenden Standards für XHTML/CSS gestaltet wurden.
→Prüfen Sie diese Seite auf gültiges XHTML.

Steigen Sie jetzt um auf Any Browser

Websitebesucher sollen den Browser ihrer Wahl verwenden dürfen, um eine Website betrachten zu können. Viele Webdesigner legen dieser Idee aufgrund ihrer miserablen Einhaltung von Webstandards noch Steine in den Weg und zwingen Besuchern einen Browser auf (siehe Link).

Entscheiden Sie sich für einen Browser, der all Ihre Bedürfnisse erfüllen kann, den Sie leicht bedienen können und der Ihren Anforderungen gerecht wird. Lassen Sie sich keinen Browser aufzwingen - zwingen Webdesigner, ihre Website kompatibel zu gestalten.

Proof Of Concept

Technischer Hintergrund

Diese Website setzt XHTML in seiner gewollten Form um: Alle Formatierungen und Designeinstellungen wurden unter Zuhilfenahme von CSS 2.1 realisiert. Damit ist es zum Beispiel möglich, den DIV-Container, in dem dieser Text steht, so zu platzieren, dass

  1. er in präziser Distanz zum Rahmen des übergeordneten Containers angeordnet ist
  2. der darin enthaltene Text mit einstellbaren Abständen zum Außenrand angezeigt wird
  3. der Text nicht aus dem Container bricht, sondern scrollbar ist

Die Bedeutung positionierbarer Container wird besonders bei den oben im Fenster angeordneten Objekten deutlich: Beim Hover-Effekt müssen die Hintergrundgrafiken dieser Container für die Vor-/Zurück-Schatlflächen pixelgenau über der Hintergrundgrafik des umliegenden Containers liegen. Auch hier orientiert sich der Browser mit den CSS-Angaben am Abstand zum (unsichtbaren) Rahmen des umliegenden Containers. ähnlich wichtig war es, das Sucheingabefeld (rechts oben) genau so zu platzieren, dass es das vom abfotografierten Fenster unsichtbar verdeckt. Auf die Schaltfläche "Suchen" habe ich hier verzichtet, da das Submit-Event auch durch Drücken der Eingabetaste ausgelöst werden kann.

Verwendung von Grafiken

Diese Website setzt voraus, dass Sie einen Browser verwenden, der transparente Grafiken (wie GIFs oder PNGs) korrekt anzeigen kann. Der schon vor längerer Zeit abgelöste Internet Explorer 6 hat das nicht mehr gelernt. Sie sollten diesen Browser generell, nicht zuletzt wegen seiner Sicherheitsprobleme, ersetzen.
Alle anderen, neueren Browser zeigen transparente Grafiken korrekt an. Damit wird einer der wahrscheinlich schönsten Effekte dieser Website sichtbar: Das von Vista abfotografierte und etwas veränderte Fenster (damit sich Microsoft nicht beschwert) wurde teilweise transparent gemacht, sodass der Hintergrund dadurch sichtbar wird. Um den Qualitätsverlust zu vermeiden, wurden übrigens PNG-Grafikdateien verwendet.

Sie haben also gesehen, was designtechnisch unter Einhaltung der Standards möglich ist. Falls Sie es noch nicht gemerkt haben (und JavaScript aktiviert ist), versuchen Sie mal, das Fenster zu verschieben. - Auch Java-Spielereien sind nicht verboten, solange sie gültig sind und keinen zu großen (und oft lästigen) Anteil der Website in beschlag nehmen. Gehen Sie mit JavaScript sparsam um. Auch hier verursacht JavaScript ein kleines Problem, nämlich dass Sie den Text nur durch Doppelklick markieren können.

Weitere Regeln

Die Floskel "Optimiert für..." wurde ja schon behandelt. Eine andere, auch häufig verwendete dieser Floskeln ist "1280*1024 Pixel vorausgesetzt", je nach Willkür des Webmasters mit unterschiedlichen und teilweise nicht gängigen Werten (wie zum Beispiel 1152*864 Bildpunkten). Auch hier sollten Sie zwar einerseits bedenken, dass es Besucher geben könnte, die mit einer niedrigen Bildschirmauflösung im Internet unterwegs sind, andererseits aber auch, dass Werte wie 1280*1024 Bildpunkte inzwischen zu einem gängigen Wert geworden sind. Falls möglich, passen Sie die Ausmaße Ihre Website so an, dass sie auf einem Bildschirm mit 1024 Bildpunkten Breite gut sichtbar ist. Auf der Made on a PC.-Website habe ich extra ein Modul eingebaut, das es dem Besucher unter anderem erlaubt, die Seite an eine bestimmte Bildschirmbreite anzupassen. Es genügt übrigens, den Besucher gegebenenfalls (und wenn überhaupt, dann versteckt) auf eine zu niedrige Bildschirmbreite, aber nicht -höhe hinzuweisen. Fast alle Websites scrollt man nach unten und nicht zur Seite.

Hover- und andere Effekte nur als Hinweis

Der Hover-Effekt wird meistens dann sichtbar, wenn Sie den Mauszeiger über einen Hyperlink bewegen; im designtechnisch revolutionären Web 2.0 auch gerne bei Schaltflächen, die eine Aktion auslösen. Auf dieser Beispielseite werden Benutzer beim überfahren der Vor-/Zurückschaltflächen durch diesen Effekt darauf hingewiesen, dass sich darauf eine Funktion befinden könnte.

Kein leeres Ziel

Eine der ersten Beschwerden, die Webdesigner gegen die XHTML 1.0-Spezifikation einzuwenden haben ist, dass das Anker-Attribut target="_blank" nicht mehr erlaubt ist. Die schlichte Begründung lautet: Moderne Webbrowser haben Registerkarten, in denen man Websites zum Beispiel durch Drücken von STRG und gleichzeitigem Klicken auf einen Link in einem solchen Register öffnen kann. Verwendet man diese Tastenkombination nicht, so öffnet der Browser eine verlinkte Website einfach im selben Register wie die verlinkende. Eine Website soll nicht bestimmen dürfen, ob ein Link in einem neuen Fenster oder einer neuen Registerkarte geöffnet werden darf - die Entscheidung soll beim benutzer liegen.

Die Umsetzung in der Realität

Schätzungsweise wurden derzeit 3% aller Websites nach den Vorgaben des W3C gestaltet. Das bedeutet auch, dass 97% aller Websites nicht nach Standards entworfen wurden und nicht in allen Browsern optimal dargestellt werden können. Genau genommen grenzen Webmaster, die nicht nach Standards arbeiten, Besucher aus. Wer sich also mehr Besucher auf seiner Website wünscht und nebenbei die Durchsuchbarkeit für Suchmaschinen verbessern will, sollte sich ernsthaft mit diesem Thema befassen. Letzendlich bringt es nur Vorteile.
übrigens: Mit Internet Explorer 8 will Microsoft einen Browser auf den Markt bringen, der (X)HTML-Code in der Normaleinstellung nach den geltenden Standards interpretiert - Websites, die schlampig gecodet wurden, haben dann keine Chance mehr, in einem der am weitesten verbreiteten Browser korrekt dargestellt zu werden.

© 2008- Made on a PC.
Any Browser vOS 0.2.3