CSS einfach erklärt

Die Bildschirmauflösung entscheidet darüber, welche Bestandteile einer Webseite sichtbar sind, ohne dass der Nutzer mit der Maus scrollen muss. Dieser sog. Betrachtungsausschnitt sollte mit Bedacht gewählt werden. Leider lehrt die Erfahrung, dass viele Besucher “scrollfaul” sind. Sobald man auf einer Website nach unten scrollen muss, verliert man bestimmte Nutzer. Ein interessantes Beispiel für den Einfluss des richtig gewählten Ausschnitts erläuterte kürzlich Bruno Bowden, Senior Software-Entwickler bei Google anhand eines Google-internen Beispiels: Als man bei Google Earth den Download-Button um 100 Pixel nach oben verschob, ist die Zahl der Personen, die sich den Dienst runtergeladen haben, prompt um zehn Prozent gestiegen. Vermutlich hatten diese zehn Prozent zuvor den Button schlichtweg übersehen. Das Beispiel verdeutlicht die Relevanz, alle essenziellen Informationen im Betrachtungsausschnitt möglichst vieler Besucher zu platzieren. Das deckt sich auch mit den Ergebnissen einer Studie, nach der 80 Prozent der Besucher sich primär auf den obersten Bereich einer Website fokussieren. Die Häufigkeit der verwendeten Bildschirmauflösung lässt sich übrigens bei diversen Statistikdiensten nachlesen.

Um das Aussehen einer Website bei verschiedenen Auflösungen auszutesten, greifen viele Webdesigner auf das Firefox-Plugin Web Developer zurück (Siehe Menüpunkt “Größe”). Eine internetbasierte Alternative bietet ViewLike.us an. Einfach rechts oben die URL eingeben und in der Menüleiste eine der sieben gängigsten Bildschirmauflösungen auswählen. Als Besonderheit kann man zusätzlich noch die exotischen Auflösungen des iPhone und des Wii-Browsers testen. Einen ähnlichen Ansatz verfolgt auch Seite resizeMyBrowser. Bedenken sollte man allerdings, dass beide Dienste nicht auf den Nettobereich des Browserfensters widerspiegeln. Auch Besonderheiten der verschiedenen Browserversionen bleiben unberücksichtigt. Für eine grobe Orientierung sind beide Online-Tools aber auf jeden Fall nützlich.

Etwas anders geht der Dienst Google Browser Size an die Problematik heran. Er blendet eine überlagernde Grafik ein, die anzeigt, welcher Bereich der Seite bei gängigen Fenstergrößen sichtbar ist. Grundlage für die Einschätzung, welcher Anteil der Websurfer Seitenelemente in einem bestimmten Bereich ohne zu scrollen findet, sind statistische Auswertungen von google.com. Die Bedienung ist simpel: Einfach die URL der eigenen Webseite oben in das Textfeld eingeben und auf “Go” klicken. Zusätzlich kann man noch durch einen Klick auf “Opacity” der Transparenzgrad der überlagernden Grafik verändern. Leider funktioniert der Dienst im Moment nur bei linksbündigen, nicht zentrierten Seiten.

Einen ähnlichen Ansatz verfolgt schließlich Where Is The Fold?. Auch hier wird eine überlagernde Grafik eingeblendet für gängige Auflösungen bei maximierten Browserfenster. Auch diese Vorgaben sollten nur als grober Richtwert interpretiert werden, da Symbol-, Adress- und Statusleisten je nach Browser-Einstellungen der Besucher unterschiedlich viel Platz einnehmen.

Beim Erstellen oder Verändern des Webdesigns gelangt man immer wieder an einen Punkt, an dem externe Personen die Designvorlage bewerten sollen bzw. ein Diskurs erwünscht ist. Meist betrifft dies kommerzielle Webworker, die sämtliche Schritte stets mit ihrem Auftraggeber abstimmen müssen. Auch bei größeren Projekten mit mehreren Entwicklern besteht die Schwierigkeit, Feedback und Ideen von anderen Teammitgliedern zu bekommen. Schließlich sind auch Hobby-Webdesigner regelmäßig an der Einschätzung Anderer zum eigenen Internetauftritt interessiert.

Realisieren lässt sich ein hierfür notwendiges virtuelles Teammeeting am einfachsten mit für diesen Zweck spezialisierten Online-Tools. Sie erfassen die Seite als Screenshot, erlauben Kommentierungen und das gemeinsame Bearbeiten der Dokumente. Zwei ausgereifte und kostenlose Anbieter dieser Kategorie möchte ich Ihnen nachfolgend vorstellen.

Notable

Eine einfache Möglichkeit das eigene Webdesign bewerten und kommentieren zu lassen bietet der Onlinedienst Notable. Zunächst muss man sich bei dem Dienst registrieren. Der sog. Personal-Account ist komplett kostenlos und sollte in den meisten Fällen vom Leitungsumfang ausreichen. Nach dem Login muss zunächst das gewünschte Webdesign erfasst werden. Hierzu kann man entweder eine existierende URL automatisch erfassen lassen oder einen Screenshot hochladen, für letztere Variante steht sogar ein eigenes Firefox-Plugin zur Verfügung. Nun kann man mit Hilfe von Notizzetteln (”Add Note”) beliebig viele Bereiche der Designvorlage kennzeichnen und mit Anmerkungen versehen. Als Themenstarter (Admin) kann man so die Aufmerksamkeit gleich auf bestimmte Probleme oder Besonderheiten lenken. Um externen Personen eine Kommentierung zu ermöglichen, muss man sie zunächst einladen. An die Kommentare können Screenshots – beispielsweise mit kurzen Designskizzen – angehangen werden.

Bounce

Vom Funktionsumfang rudimentärer ist der Dienst Bounce, der besonders deswegen interessant ist, weil er keine Anmeldung erfordert. Auch hier wird zunächst automatisiert ein Screenshot erzeugt. Leider kann auf den Viewport kein Einfluss genommen werden, wodurch bei Seiten die ein Scrollen erfordern untere Bereiche nicht erfassbar sind. Auf dem Screenshot lassen sich nun Kästen erstellen und diese mit Kommentaren füllen. Der Screenshot ist über einen permanenten Link erreichbar, kann aber auch via Facebook oder Twitter verteilt werden. Nachfolgende Nutzer können bestehende Kommentare nicht mehr verändern, sondern lediglich neue hinzufügen.

Im Buch bin ich recht ausführlich auf die Möglichkeit eingegangen, Text mit CSS zu formatieren (siehe ab Seite 44, Kapitel “Schriftformatierungen”). Relevant sind vor allem folgende CSS-Eigenschaften:

• font-family: Definiert die Schriftart(en).
• font-size: Definiert die Schriftgröße.
• line-height: Definiert die Zeilenhöhe.

Als Ergänzung möchte ich Anfängern einen Artikel von WDL ans Herz legen, in dem die 20 wichtigsten Tipps und Tabubrüche in Bezug auf Web-Typografie zusammengefasst wurden. Anmerken möchte ich aber, dass man verschiedene Fonts bzw. Schriftfamilien durchaus mischen kann, wenn man Sie lediglich als typografisches Stilmittel (begrenzt!) einsetzt. Auf diesem Wege lassen sich z. B. Überschriften oder Infokästen absetzen. Natürlich sollte man sie niemals innerhalb eines Fließtextes mischen, und alle Fließtexte sollten dieselbe serifenlose Schrift verwenden, etwa Verdana. Beachten sollten Sie ferner, dass die von Ihnen verwendeten Fonts auf möglichst vielen Betriebssystem installiert sind. Eine Übersicht über die Standardschriften (Core fonts) und deren Verbreitung finden Sie im Artikel Installierte Schriftarten auf verschiedenen Betriebssystemen.

Das Durchprobieren neuer Farbkombination beim Webdesign ist dank Firebug auch direkt im Browser möglich. Leider bietet Firebug keine Hilfe bei der Auswahl der Farben an, sodass entweder nur auf die englischen Farbnamen zurückgegriffen wird, die man im Kopf hat, oder aber der Hexadezimal-Wert aus einer anderen Quelle wie Photoshop kopiert werden muss. In diese Lücke springt das Add-on Firepicker, welches Firebug um einen Farbwähler erweitert.

Mehr lesen… »

In den letzten Wochen bin ich mehrfach gefragt worden, wann Microsoft denn endlich den Support für den Internet Explorer 6 einstellen würde. Nicht nur aus der Sicht eines Webdesigners ist diese Frage berechtigt, bedenkt man das die Software bereits im Jahre 2001 veröffentlicht wurde. Die Antwort ist leider bitter: Im IEBlog war vor einiger Zeit zu lesen, dass Microsoft den Support für den IE6 analog zum Support des zugehörigen Betriebssystems Windows XP aufrechterhalten wird. Und die Unterstützung für XP wird nach jetzigem Kenntnisstand bis in den April 2014 reichen. Erst danach wird das Betriebssystem verschwinden, und mit ihm der IE6. Im Ergebnis werden sich zumindest kommerzielle Webentwickler noch einige Jahre mit zahlreichen Bugs und mangelhafter CSS-Unterstützung rumärgern dürfen. Die berühmten IE6-Sonderschichten werden uns also noch einige Zeit erhalten bleiben.

Update:

Im Windows-Blog hat Microsoft bekannt gegeben, die Downgrade-Rechte für Windows XP Professional auszudehnen — und zwar auf dem gesamten Produktlebenszyklus von Windows 7. Zwar soll der inkludierte Support wie geplant im Jahre 2014 auslaufen, optional wird aber darüber hinaus die Möglichkeit geben, eine individuelle Support-Vereinbarung abzuschließen. Im Geschäftsbereich ist insofern mit einem Einsatz von XP auf unbestimmte Zeit zu rechnen.