Der Kampf mit den Webriesen

Die mobile Umsetzung von engadget läd zwar schneller, ist jedoch stark reduziert.

Mit Webriesen sind hier allerdings nicht unbedingt die großen Firmen gemeint, sondern eher die Websites, welche wohl davon ausgehen, dass jeder eine 6000er Leitung oder mehr hat. Seiten wie engadget sind zwar vorbildlich ohne unnötigen Einsatz von Flash entwickelt worden, doch leider hat die Website im unkomprimierten Zustand eine Dateigröße von 2015KB oder auch 2MB. Im komprimierten Zustand sind es immernoch 1241KB also etwas mehr als einen MB.

Dies macht nicht nur im mobilen Web eine schlechte Figur, sondern auch am PC oder Laptop. Zwar hat auch engadget eine mobile Website (endlich), doch hat diese nicht alle Funktionen, wie der große Bruder. Somit warte ich ganze gerne mal etwas länger als eine Minute, bis die Website geladen ist. Zum Glück surfe ich engadget nur selten mal an, doch denke ich, dass es da andere Punkte gibt.

Es gibt natürlich auch noch andere Beispiele, wie eBay. Hier wird zwar auch eine mobile Variante angeboten, doch ist diese kaum wert angesehen zu werden, da sie laut der Adresse noch zu WAP-Zeiten entwickelt wurde. Die vollständige Version von eBay schlägt unkomprimiert mit 845KB zu Buche.

Umsetzung per Stylesheet oder Umleitung?

Jetzt gibt es zwei Möglichkeiten das Ganze umzusetzen. Einmal kann man die einfache und schnelle Möglichkeit nehmen, welche einem CSS bietet oder man nimmt die etwas schwierigere Variante, welche eine Umleitung zu einer speziell angepassten mobilen Website führt

Umsetzung per CSS

CSS bietet glücklicherweise Möglichkeiten um von Gerät zu Gerät verschiedene Stylesheets auszuliefern. Hierbei gibt es verschiedene Medientypen. Darunter auch der Medientyp handheld. Durch diesen kann man gezielt mobile Geräte wie Smartphones, Organizer oder auch Spiele-Handhelds wie die PSP ansprechen.

Damit ist es einem erlaubt zumindest das Erscheinungsbild von Websites gezielt für das mobile Internet anzupassen. Dies kann unter anderem davor schützen, dass man allzu viel horizontal scrollen muss. Dies ist man als Nutzer des mobilen Internets zwar gewohnt, doch ist es immer angenehmer nur vertikal scrollen zu müssen.

Somit lässt sich schnell ein passendes Ergebnis erzielen. Die Site sieht gut aus, Background-Grafiken kann man leicht anpassen, sodass die Ladezeit kürzer wird – aber Moment, was ist mit dem Rest?

Genau! Bilder, welche auf der Website eingebunden sind werden nicht komprimiert. Ebenso der HTML-Code kann bei nicht optimierten Websites zum Flaschenhals werden.
Aus diesem Grund ist es nicht selten, dass eine Umleitung zu einer speziell angepassten mobilen Website wesentlich mehr Sinn macht.

Umsetzung per Umleitung

Bei der Umleitung auf eine speziell angepasste mobile Website hat man viel mehr Möglichkeiten die Ladezeit zu reduzieren. Hier kann man per PHP die Bilder herunterechnen lassen, sodass Abmessungen und/oder Qualität zugunsten der Ladezeit reduziert werden.

Ebenso kann man komplette Teile von HTML und JavaScript weglassen, welche auf der mobilen Variante keinen Sinn machen würden und somit nur unnötig Ladezeit in Anspruch nehmen würden. Hierbei hat man also wesentlich mehr Optimierungspotential, welches man ausschöpfen kann.

Hier gibt es die Möglichkeiten allgemein zwischen mobilen und nicht-mobilen Geräten zu unterscheiden oder direkt nach Gerät/Browser. Ich würde wahrscheinlich die einfache Variante nehmen und würde abfragen ob es sich um ein mobiles Endgerät handelt. Hierbei muss man dann zwar allgmein optimieren, hat allerdings auch weniger Arbeit.

Wenn man allerdings nur zum Beispiel ROMs für Android anbietet, macht es keinen Sinn dies auch für das iPhone zu optimieren und kann sich so auf die verschiedenen Android-Browser und -Auflösungen konzentrieren.

Portrait oder Landscape?

Bei Communitys macht die Landscape-Ansicht mehr Sinn als die Portrait-Ansicht

Zudem sollte man überlegen, wie die Präsentation am besten gelingt. Für einen Blog würde es keinen Sinn machen für die Landscape-Ansicht (Wenn man das Phone um 90° nach links dreht – horizontal) zu optimieren, sondern sollte dem Nutzer die Freiheit lassen ob er nun die kurzen Zeilen in der Portrait-Ansicht (So wie man ein Phone für gewöhnlich hält – vertikal) bevorzugt oder lieber alle Bilder im Beitrag sehen kann.

Dann ist mir durch meine Frau allerdings auch ein konkretes Beispiel begegnet, bei welchem es Sinn macht ausschließlich die Landscape-Ansicht zur Verfügung zu stellen. Bei Communitys! Bisher haben wenige Communitys gemerkt, dass das mobile Web immer weiter wächst und bieten deswegen nur sehr rudimentäre mobile Websites an. (Siehe schülerVZ/meinVZ und Facebook)
Eine Jugendcommunity aus Deutschland hingegen macht es richtig. Gemeint ist die kleine Plüschcommunity Jappy. Man mag über diese Plattform denken wie man will (ich bevorzuge es, davon gar nicht erst zu wissen), doch die mobile Website von Jappy ist die beste, die ich bei einer Community je gesehen habe.

Wenn ich mein Gedächtnis abrufe, dann würde ich Jappys mobilen Internetauftritt allgemein als beste mobile Umsetzung einer Website betiteln. Hier wurde alles durchdacht, keine Funktion fehlt (was sehr oft bei mobilen Umsetzungen gemacht wird) und es sieht einfach schick aus (zumindest nicht der 90er-Jahre-Stil, welcher im mobilen Web oft zu finden ist).

Ok, aber ich schweife ab. Auf jeden Fall sollte man sich überlegen, ob man wirklich auf die Portrait-Ansicht optimieren sollte oder ob es bei manchen Auftritten nicht mehr Sinn macht etwas mehr Platz zu nutzen und somit die Landscape-Ansicht vorauszusetzen.

Fazit

Es gibt also einiges zu beachten im mobilen Internet. Viele meinen vielleicht, dass es keinen großen Sinn macht ihre Website für das mobile Web anzupassen (und das sieht man leider auch noch oft), doch der Trend geht in die richtige Richtung.

Auch im mobilen Web oder gerade dort, sind Ladezeiten sehr wichtig. Die Nutzer von Smartphones oder ähnlichem sind es zwar gewohnt etwas länger auf ihre Inhalte zu warten, doch kann ich aus eigener Erfahrung sagen, dass eine gute mobile Umsetzung zum wiederkommen einläd.

Auf jeden Fall kann ich schon mal sagen, dass ich vor habe in Zukunft öfters auch über das mobile Web zu schreiben.

Was haltet ihr davon? Habt ihr noch Tipps zum Thema? Und surft ihr mit euren mobilen Endgeräten lieber auf mobilen Websites oder auf den Versionen, welche man auch auf dem Rechner zu Gesicht bekommt?

Das war es dann auch schon wieder!
Euer Wishu

Die Eigenschaft background ist eine Allround-Eigenschaft, welche alle anderen Eigenschaften enthalten kann um somit Code zu sparen und erneut die Ladezeiten zu verringern.

Wie bereits erwähnt, gibt es fünf Eigenschaften im CSS, welche zu background gehören. Allerdings können diese fünf ohne Probleme in die zusätzliche sechste Eigenschaft eingebunden werden.  Hier noch einmal die 5 Eigenschaften im Überblick:

• background-attachment – Bestimmt ob das Hintergrundbild beim scrollen mitwandert.
• background-color – Bestimmt die Hintergrundfarbe.
  
• background-image – Bestimmt das Hintergrundbild
• background-position – Bestimmt die Position des Hintegrundbildes
• background-repeat – Bestimmt ob und in welche Richtung der Hintergrund wiederholt werden soll.

Allein die Eigenschaftsnamen verbrauchen schon mehr – bei background-attachment ist es sogar mehr als das doppelte, als bei background. Das kann man ganz einfach umgehen. Denn mit der Eigenschaft background kann man sich diesen Code sparen und alle in eine Zeile tun.

Hier mal wieder ein Vergleich, wie es aussehen kann, wenn man alle 5 Eigenschaften benutzt:

background-attachment:fixed;
background-color:#123456;
background-image:url(images/bg.gif);
background-position:bottom right;
background-repeat:no-repeat;

Allein diese Angaben verbrauchen 158Byte. Das geht eindeutig platzsparender. Mit der Eigenschaft background sieht das Ganze so aus:

background:#123456 url(images/bg.gif) bottom right fixed no-repeat;

Die Zeile ist natürlich länger, dafür werden aber nur 67Byte verbraucht, Das ist eine Ersparnis von 91 Byte oder auch 57,59% (sollte ich mich nicht schon wieder verrechnet haben). Das sind sogar noch 10% mehr als bei den Richtungen von margin, padding und den border-Eigenschaften.

Die Reihenfolge, welche ich hier gewählt habe, hat nichts zu bedeuten, das ist einfach die Reihenfolge, an die ich mich gewöhnt habe.

Ich hoffe ich konnte euch erneut helfen euren Code etwas zu entschlacken um Ladezeiten einzusparen.

Das war es dann auch schon wieder!
Euer Wishu

Heute möchte ich mich mit dem Thema Richtungen befassen. Gemeint sind hiermit die Richtungen von margin, padding und den diversen border-Eigenschaften.

Dass man jeder Richtung einen unterschiedlichen Wert von margin oder padding zuweisen kann ist schon lange kein Geheimnis mehr. Dass es dafür unterschiedliche Eigenschaften im CSS gibt auch nicht, doch muss man für diese viel mehr Code einsetzen, als wenn man etwas mehr wüsste. Man kann den Code drastisch reduzieren, wenn man bei jedem Element statt 4 Eigenschaften nur noch eine benutzt.

Wie das funktionieren soll? Ganz einfach: Die Eigenschaft margin hat nicht nur die Möglichkeit einen einzigen Wert aufzunehmen, welche in alle 4 Richtungen geht, sondern auch für alle 4 Richtungen separat. Das ist für viele von euch sicherlich nichts neues mehr, doch das geht auch mir 2 Werten oder auch mit 3 Werten. Und hier liegt weiteres Potential zum sparen.

Durchschnittlich benutzen Anfänger folgenden Code um jeder Richtung von margin einen anderen Wert zuzuweisen:

margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;

Dass das auch kürzer geht, ist nicht jedem bekannt. Selbst fortgeschrittene Webdesigner benutzen diese Variante noch häufig – oder wie ich selbst mal erfahren musste, Lehrer von HTML/CSS-Seminaren, bei welchen ich mal unfreiwillig mitmachen musste.

Wie bereits erwähnt gibt es noch die Kurzschreibweise, mit welcher man allen 4 Richtungen einen anderen Wert zuweisen kann. Die Richtungen sind dabei wie folgt hinterlegt: oben, rechts, unten, links. Also so, wie ich es bereits oben im Beispiel verwendet habe. Leichter zu merken ist es vielleicht, wenn man erwähnt, dass es der Uhrzeigersinn ist, welcher oben beginnt.

Dementsprechend würde die Kurzschreibweise so aussehen:

margin:5px 10px 15px 20px;

Es wird nur eine Zeile benötigt und trotzdem hat man die gleichen Angaben gemacht. Nur mal zum Vergleich, die erste Schreibweise hat 75 Bytes verbraucht, die zweite hingegen nur 26 Bytes. Sollte ich mich nicht verrechnet haben, sind das 65,33% Codeinsparung. Dass man diese Technik nicht überall anwenden kann, ist natürlich klar, doch an einigen Stellen kann man damit gut sparen.

Jetzt gibt es aber noch 2 und 3 Angaben. Hierzu 2 kurze Erklärungen, welche ich treffen bereits im wfi gepostet hatte:

Zwei Angaben bedeuten, dass die erste Angabe für oben und unten zählt und die zweite für links und rechts. Also bedeutet margin:10px 5px; dass nach oben und unten 10px angewendet werden und nach links und rechts 5px.

Weiteres gibt es noch 3 Angaben. Dort heißt es, dass die erste für oben gilt, die zweite für links und rechts und die dritte für unten. Also bedeutet margin:10px 5px 20px; dass der Abstand nach oben 10px ist, nach links und rechts 5px und nach unten 20px.

Ich hoffe ich konnte euch damit etwas helfen Code zu sparen. Es lohnt sich auf jeden Fall und gerade das mit den zwei oder 3 Angaben ist eher weniger verbreitet.

Das war es dann auch schon wieder!
Euer Wishu

Durch einen Beitrag bei Dr. Web inspiriert, möchte ich hier mal eine etwas sinnvollere Lösung bieten um Variablen in CSS zu benutzen als dort erwähnt wird. Dort findet man folgenden Satz:

Das Problem ist dabei nur, dass das Stylesheet unübersichtlicher wird, weil es nun nicht mehr abgekoppelt ist und zuerst durch einen Preprocessor “laufen” soll.

Das ist aber nicht wirklich verständlich, denn die CSS-Datei kann nach wie vor einzeln darstellen. Man muss ihr lediglich beibringen PHP zu verstehen. Das sollte auf so ziemlich jedem Paid-Webspace möglich sein und sogar einige Freehoster lassen dies zu. Mit Hilfe einer htaccess-Datei kann man dem Server sagen, wie er bestimmte Dateien lesen soll.

Also brauchen wir dem Server nur zu sagen, dass er neben Dateien mit der Endung .php auch Dateien mit der Endung .css als PHP-Datei erkennen soll, bzw. dass er auch in dieser Datei das PHP parsen soll, damit man Variablen in der CSS-Datei benutzen kann. In der gleichen Anweisung kann man auch HTML-Dateien mit einschließen. Diese Anweisung würde dann so aussehen:

AddType application/x-httpd-php php php5 php4 php3 html htm css

Somit werden alle Dateien mit den Endungen .php, .php5, .php4, .php3, .html, .htm und mit der Endung .css auf die Liste der Dateien gesetzt, welche der Server parsen soll.

Jetzt sollte man sich aber nicht wundern, denn wenn man die Seite jetzt aufruft, wird kein Stylesheet geladen. Man muss der CSS-Datei nun erst wieder sagen, dass sie eine solche Datei ist und das tut man mit PHP. Dazu muss man lediglich folgendes in die CSS-Datei eintragen:

<?php
header('Content-Type:text/css');
?>

Damit weiß die CSS-Datei nun wieder, dass sie eine ist und kann es dem Browser auch so mitteilen. Darunter folgt dann ganz normal das CSS. Dieses muss nicht unbedingt in einer echo-Anweisung von PHP stehen, doch es ist platzsparender. Denn wenn das CSS einzeln steht, muss man immer wieder PHP mit <?php öffnen, eine echo-Anweisung einleiten, die Variable eintragen und mit ?> wieder PHP schließen.

Wenn man die kompletten CSS-Anweisungen in einer echo-Anweisung mit Doppelquotes macht, braucht man an die Stellen, an die die Variable soll lediglich die Variable eintragen. Somit wird sie ausgeführt und man spart sich eine Menge Code.

Sobald das erledigt ist, muss man eigentlich nur noch unter dem header-Befehl die Variablen definieren. Wie das geht, sollte man bereits wissen, ansonsten findet man auch sicherlich noch eine Seite, auf der das nochmal genau beschrieben wird

Wenn man das alles gemacht hat und seine Variablen bestimmt hat, fallen zukünftige Änderungen wesentlich leichter. Denn man muss erstens nicht mehr suchen, wo sich eine Anweisung versteckt, da sie alle oben sind und zweitens muss man nur noch eine Stelle im Code ändern.

Das war es dann auch schon wieder!
Euer Wishu

Bildquelle: Wikipedia

Zumindest für Menschen, welche sich etwas mit distem Webdesignen auskennen, denn man muss sich zumindest ein bisschen mit CSS auskennen. Denn diese Sprache gibt den heutigen Webseiten ihr Aussehen. Stylish kann direkt auf diese Eigenschaften via Browser-Stylesheet (Das Stylesheet, welches jeder Browser von Haus aus mitliefert) zugreifen.

Für Menschen, welche sich nicht mit CSS auskennen, gibt es natürlich auch noch eine Alternative. Auf Userstyles.org kann man sich bereits vorgefertigte Styles herunterladen, welche das Aussehen einer Seite vollautomatisch und in Echtzeit verändern. Nach einem Klick auf “Site styles” bekommt man eine kleine Übersicht über die populärsten Seiten – bzw. diejenigen, welche am häufigsten gesucht wurden.

Denn eine Suche bringt diese Seite natürlich auch mit. Über diese kann man gezielt nach Seiten suchen, welche nicht in dieser kleinen Liste aufgeführt sind. Wie zum Beispiel google.de, denn dort ist nur google.com aufgeführt, doch auch diese kann man leicht ändern, was SemperVideo in einem zweiteiligen Videotutorial sehr schön zeigt. Die Links zu diesem Tutorial sind am Ende des Beitragen zu finden.

In diesem Tutorial wird auch sehr gut erklärt, wie man Styles von Userstyles.org installiert, deaktiviert und wieder aktiviert. Für unerfahrene User ist es auf jeden Fall ein Blick wert.

Ein Beispielcode für ein eigens von mir verändertes Stylesheet möchte ich hier auch einmal zeigen. Dieser Code ist für mein Stammforum dem Homepage-Forum. Dieses passt sich von der Breite her immer dem Browserfenster an und das ist manchmal sehr belastend, wenn man einen Widescreen hat und längere Texte lesen muss. Ich habe das Fenster zwar nicht maximiert, doch auch 1280 Pixel sind zu viel.

Aus diesem Grund habe ich den Zeilenabstand erhöht und die Textabschnitte schmaler gemacht. Das ganze sieht dann in Stylish so aus:

@-moz-document domain(homepage-forum.de) {
  div[id^=post_message_] {
    width:35em !important;
    line-height:1.5 !important;
    margin-left:5px !important
  }
  div[id^="post_message_"] div[class="smallfont"]+table {
    width:45em !important;
    line-height:1.5 !important;
    margin-left:-10px !important
  }
  td.alt2 {
    line-height:1.5 !important
  }
}

Für die meisten wird das ganze jetzt nach Fachchinesisch aussehen, doch ich nehme mir mal die Freiheit das ganze ein wenig zu erklären:

Der Teil @-moz-document domain(homepage-forum.de) ist so ziemlich der wichtigste Teil. Dieser sagt Firefox, dass diese Anweisungen nur für die Seite “homepage-forum.de” gelten sollen. Das ganze wird in geschweifte Klammern gefasst, damit der Browser weiß, wo es anfängt und wo es aufhört, eine typische CSS-Syntax.

Die weiteren Teile sind eher den Profis unter den Webdesigner bekannt, denn ein Code wie div[id^=post_message_] ist schon sehr speziell und wird nur von modernen Browsern unterstützt. Also noch keiner Version des Internet Explorers. Der Anfang – also div – steuert das Element an, welches formatiert werden soll, doch würden wir dies alleine stehen lassen, dann wären alle dieser Elemente betroffen.

Aus diesem Grund fügen wir den Teil hinzu, welcher in den eckigen Klammern steht. Dieser besagt folgendes: Ein Element, welches eine ID besitzt die mit der Zeichenreihenfolge post_message_ beginnt. Das trifft im Homepage-Forum auf alle Posts zu. Das Zeichen ^ ist das wichtigste an dieser Stelle, da ohne dieses alle Elemente mit der ID post_message_ angewählt werden würden und diese gibt es nicht – so werden alle angewählt, welche damit beginnen.

Ein weiteres Mal folgen geschweifte Klammern, welche Anweisungen für dieses Element fassen. Die Eigenschaft width gibt die Breite an. Ich habe diese mit 35em gesetzt, was in diesem Fall knapp 500 Pixel sind. Em habe ich gewählt, da sich dies auch bei Schriftvergrößerung mit vergrößert. Das !important hinter der Anweisung ist sehr wichtig, da die meisten Angaben sonst nicht übernommen werden. Es besagt, dass diese Regel auf jeden Fall benutzt werden soll, egal was irgendwo anders angegeben wurde.

Das dürfte dann auch als kleinen Exkurs reichen, da dieser Beitrag sonst zu lang wird.

Kurz möchte ich aber noch die Frage beantworten, wie man herausfindet, welches Element wie benannt ist. Entweder man streicht es an und benutzt die Firefox-Funktion “Auswahlquelltext anzeigen” oder man benutzt das Add-On Web Developer, welches jeder Webdesigner so oder so installiert haben sollte. Bei diesem geht man dann auf die Option “Informationen” und dann auf den Punkt “Elementinformationen einblenden”. Dann kann man mit der Maus über die einzelnen Bereiche fahren und bekommt angezeigt, wie diese verschachtelt sind. Nach einem Klick auf dieses Element bekommt man noch nähere Informationen.

Das war es dann auch schon wieder!
Euer Wishu

Links zum Thema:

• Stylish-Download
• Userstyles.org
• SemperVideo Tutorial Teil 1 – Teil 2
• Web Developer-Download

Dieser Beitrag ist zwar schon älter doch wohl immernoch aktuell unter Webdesignern. Der Beitrag, mit dem übrigens sehr schön gewählten Namen “Befreiung aus der Geiselhaft des IE6“, welchen ein Bloggerkollege namens Gerald Brozek letztes Jahr im Juli verfasst, ist sehr schön und auffordernd geschrieben.

Hauptsächlich geht es in diesem Beitrag darum, dass man sich als Webdesigner nicht mehr von dem IE schikanieren lassen soll und dass man als IE-Nutzer einen besseren, standardkonformen Browser benutzen soll. Somit hat Herr Brozek schon meine Symphatie gewonnen. Denn jeder Feind des IE, ist mein Freund.

Sehr schön finde ich auch die im Beitrag erwähnte Seite von Andy Clarke. Wer seine Seite, Stuff and Nonsense, mit einem standardkonformen Browser (oder dem IE7) ansieht, der bekommt die volle Pracht seines Designs zu sehen. Mit dem IE6 oder niedringer, bekommt man jedoch nur eine schwarz-weiße Seite angezeigt. Auch die Grafik mit dem Motorad ändert sich. Bekommt man bei dem IE 6 und tiefer nur ein einfaches Motorad angezeigt, sieht man bei standardkonformen Seiten ein Motorad mit etlichen Zusatzausstattungen.

Dies soll wohl versinnbildichen, dass man mit einem standardkonformen Browser wesentlich mehr Möglichkeiten hat. Das ist auch so. Liebe IE-Nutzer glaubt es ruhig. Ihr werdet mit einem vernünftigen Browser nur glücklicher. Ihr könnt die volle Pracht des Internets benutzen. Ihr könnt euren Browser mit Plugins ausstatten um ihn an eure Bedürfnisse anzupassen uvm.

Was hält einem beim IE? Diese Frage hätte ich auch gerne in dem Comments geklärt.

Ich kann schonmal ankündigen, dass ich es bei meinen Seiten demnächst ähnlich machen werde. Die IE-Nutzer bekommen nur eine abgespeckte Version in schwarz-weiß angezeigt und alle Nutzer eines standardkonformen Browsers bekommen das gewohnte Design angezeigt. Dies wird zwar ebenfalls mehr Arbeit für einen alten Browser, wie das Anpassen an diesen, doch dann lohnt es sich auch. So bekommen die Nutzer des IE wenigstens mit, dass der Browser schlecht ist und denken nicht, dass alles in Ordnung ist.

Von mir noch einmal ein Aufruf: Wechselt euren Browser, sofern ihr den IE benutzt. Ein standardkonformer Browser bietet für alle nur Vorteile.
Die Links zu den Downloadseiten findet ihr nach wie vor in meinem ersten Beitrag zu diesem Thema.

Das war es auch schon.
Euer Wishu

Dass die Sicherheit und die Nutzerfreundlichenkeit des Internet Explorer zu wünschen übrig lässt kann jeder beurteilen, der ihn schon einmal benutzt hat. Doch die meisten nutzen ihn immernoch. Die genauen Zahlen kenne ich nicht, doch ich lasse mich gerne von Euch in den Comments beraten.

Doch nicht nur in den oben genannten Punkten liegt der Internet Explorer weit zurück. Er hat Probleme damit CSS zu interpretieren. Mit CSS wird das Internet gestaltet, diese komplette Seite hat ihr aussehen durch CSS erlangt. Einige mögen meinen, dass (X)HTML dafür zuständig ist. Dem ist jedoch nicht so, denn (X)HTML dient nur dazu den Text logisch auszuzeichnen und das interpretiert jeder Browser so ziemlich gleich.

Wie schon gesagt, CSS ist für das Aussehen zuständig und 3 der 4 namhaften Browser interpretieren dies auch richtig. Der Internet Explorer in der Version 6 ist der schlimmste von den heutigen Browsern, wenn es darum geht eine Seite zu designen. Vieles kennt dieser Browser nicht, weswegen man es nicht verwenden kann, wenn man es für alle zugänglich machen möchte und das was er kennt – kann er nicht richtig.

Es gibt zwar Dinge, die auch der IE6 hinbekommt, doch diese sind begrenzt. Für vieles muss man zusätzliche Angaben machen oder sogar ein komplett eigenes Stylesheet für diesen Browser erstellen. Das ist aufwändig und kostet viel Zeit extra. Außerdem muss man auf einige Dinge verzichten. Ein Dropdown-Menü zum Beispiel, welches beim Überfahren mit der Maus weitere Links zur Anzeige bringt, ist nahezu Tabu wenn man eine Seite für alle zugänglich machen will.

Auch hier mögen einige denken, dass ich Schwachsinn erzähle, doch es ist Tatsache. Der IE6 schafft ein solches Menü nur, wenn man ihm als kleine Hilfe ein JavaScript zur Verfügung stellt oder extrem unsauberen Code schreibt. Man sollte einfach mal versuchen mit dem IE6 eine Seite mit Dropdown-Menü zu öffnen, wenn man JavaScript deaktiviert hat. Es wird nicht funktionieren dieses Menü zu verwenden. Wenn sie die Seite mit dem IE7 öffnen, dann hat man damit weniger Probleme.

Dies ist natürlich nur ein Punkt den ich hier aufgezählt habe, doch es gibt sehr viele mehr. Auch gibt es nicht nur Dinge die der IE6 nicht kann, sondern auch Dinge die er komplett falsch darstellt. Das sind die allseits (un)beliebten IE-Bugs. Diese kommen sowohl im IE6 als auch im IE7 vor – obwohl der IE7 dort wesentlich angenehmer ist. Diese Bugs verursachen unmengen an Zusatzarbeit. Wenn man zum Beispiel an einem Design 3 Stunden gearbeitet hat und es in einem standardkonformen Browser richtig aussieht, kann man sich darauf einstellen noch mindestens eine halbe Stunde für den IE zu verschwenden.

Es gibt zwar etliche Hacks und Tricks, wie man diese Fehler beseitigen kann, doch sind diese nirgends alle aufgelistet und man muss manchmal das komplette Googlenetwerk durchsuchen, um Lösungen zu gerade diesen Fehler zu finden, welcher gerade auftritt. Man kann diese Kniffe zwar auch auswendig lernen, doch das wäre noch aufwändiger als (X)HTML und CSS zusammen.

Ich könnte noch stundenlang so über diesen Browser schreiben, doch will ich diesen Eintrag nicht zu lang machen, aus diesem Grund starte ich jetzt einen Aufruf:

Ich bitte hiermit alle IE-Benutzer, ob in der Version 6, 7 oder noch niedriger, einen standardkonformen und modernen Browser zu benutzen. Und wenn ihr nicht vom Internet Explorer weichen wollt, dann nehmt doch wenigstens die Version 7.

Als kleine Hilfe werde ich hier Links zu den Downloadseiten der 3 namhafen Browser zur Verfügung stellen. Man kann also frei wählen, welchen man nimmt.

1. Mozilla Firefox – Benutzerfreundlicher Browser mit endlos vielen Add-ons um sich den Internet-Alltag zu erleichtern
2. Opera – Sehr Benutzerfreundlicher Browser mit vielen Funktionen, welche man noch bei Firefox nachrüsten müsste
3. Apple Safari – Dieser Browser ist zwar noch in der Beta-Version, doch hat derzeit die beste Umsetzung in CSS

Ich persönlich benutze den Mozilla Firefox, da es für diesen viele Entwickler-Add-Ons gibt, welche man als Webdesigner sehr gut gebrauchen kann. Opera finde ich sehr schick, da er vieles von Haus aus hat was man bei Firefox noch nachrüsten muss, doch so richtig anfreunden konnte ich mich noch nicht mit ihm. Obwohl Safari von denn CSS-Unterstützung eigentlich allermans Liebling sein sollte, kann ich mich gar nicht mit ihm anfreunden. Es gibt aber sicherlich auch Fans von diesem Browser.

Auch wenn ich nur eine Person dazu gebracht habe einen standardkonformen Browser zu benutzen, reicht mir dies schon. Schöner wäre natürlich, wenn ich damit alle erreichen könnte, doch das wäre utopisch.

Soviel von mir und ich hoffe ihr trefft die richtige Entscheidung.

Hier geht es zu Teil 2

Ingo Turski, welcher in Webdesignkreisen gerne liebevoll als Homepage-Guru oder Webseiten-Guru bezeichnet wird, hat darüber einen sehr interessanten und lesenswerten Artikel verfasst. Dieser erklärt ziemlich genau, warum man die Pixel außen vor lassen sollte. Ich könnte den kompletten Artikel jetzt auch noch einmal umformuliert abtippen, doch das wäre Schwachsinn. Besonders, weil ich bei meinem Blog nicht zu 100% darauf achte. Meine Schriftgrößen haben ihre Größe durch die Angabe von em, doch das Layout hat seine Breite durch Pixel bekommen.

Ich kann nur empfehlen, sich diesen Artikel mal zu Gemüte zu führen und es in Zukunft besser zu machen.