CSS einfach erklärt

Wireframe Showcase: Der Vorher-Nachher Vergleich beim Webdesign

Jens Kilgenstein — Wed, 30 Jun 2010 19:50:40 +0000

Plant man ein neues Webprojekt, ist es sinnvoll, als ersten Schritt das Layout grob zu skizzieren. Hierbei legt man fest, welche Elemente die Seite beinhalten soll (Navigation, Logo, Suche, Content, Footer usw.) und wo diese grundsätzlich angeordnet werden sollen (z. B. die Navigation oben links). Webdesigner bezeichnen solch einen frühen Prototypen als Wireframe oder Mock-Up. Da es in diesem ersten Schritt lediglich um eine Festlegung des konzeptionellen Layouts geht, sollten konkrete Designfragen zunächst vollkommen außen vorbleiben. Umsetzen lassen sich solche Skizzen entweder mit Papier und Stift oder computerbasiert mit zahlreichen Werkzeugen.

Obwohl es sehr interessant ist, Wireframes oder Mock-Ups nach der Fertigstellung mit dem endgültigen Ergebnis zu vergleichen, gab es bisher kaum Möglichkeiten diese einzusehen. Schließen will diese Lücke eine Website, die sich Wireframe Showcase nennt. Webdesigner und Agenturen haben hier die Möglichkeit ihre Skizzen hochzuladen und auf das fertige Projekt zu verlinken. Momentan ist die Teilnehmerzahl noch recht spärlich, da das Wireframe Showcase erst seit kurzem online ist. Im Lauf der Zeit wird sich das aber sicherlich ändern, da das Hochladen einer Skizze gleichzeitig eine kostenlose Werbemöglichkeit für den Entwickler darstellt.

CSS3 Demonstration: Unser Sonnensystem

Jens Kilgenstein — Thu, 27 May 2010 11:01:51 +0000

CSS3 wird eine Fülle an progressiven Gestaltungsmöglichkeiten bieten. Wer sich ein wenig Appetit holen möchte, sollte sich unbedingt den gelungenen Versuch von Alex Giron anschauen, unser Sonnensystem unter Zuhilfenahme der CSS3 Features zu visualisieren. Doch Vorsicht: Die Demonstration funktioniert (zur Zeit) nur vollständig in den WebKit-Browsern Chrome und Safari!

Standard-Browser-Stylesheets einsehen

Jens Kilgenstein — Thu, 27 May 2010 10:57:39 +0000

Jeder Browser verfügt zunächst einmal über ein eigenes Standard-Browser-Stylesheet. Darin stehen bestimmte Regeln, die sich zum größten Teil an den Initialwerten der CSS-Empfehlung anlehnen. Das W3C macht hierfür einen Vorschlag, der allerdings nicht normativ ist. Beim Firefox kann man sich diese Datei auch anschauen. Sie heißt html.css und liegt im Programmordner von Firefox im Unterordner “/res” (also z. B. “C:\Programme\Mozilla Firefox\res”). Alternativ kann man in der Adressleiste von Firefox auch “resource:///res/html.css”eintippen. Im Buch bin ich Seite 126 ausführlich auf diese Standard-Stylesheets eingegangen, da sie ein wichtiger Baustein der CSS Kaskade sind. Nur wenn man die Interpretation innerhalb der CSS Kaskade verstanden hat, kann man sich im nächsten Schritt daran wagen, das Zusammenspiel zwischen Kaskade, Vererbung und Initialwerten zu verstehen. Das Verständnis dieser Zusammenhänge ist das Fundament jedes CSS-Designers. Ansonsten wird man immer wieder vor scheinbar unlösbaren Problemen bei der Darstellung stehen.

Leider ist das Browser-Stylesheet, beispielsweise beim Internet Explorer, nicht direkt einsehbar. Eine schöne Zusammenstellung über die CSS-Standardeinstellungen (sog. User Agent Styles) von

Internet Explorer
Opera
Webkit (Safari, Chrome)
und Firefox

findet sich bei IECSS.com. Neben der tabellarischen Übersicht können die jeweiligen Stylesheets auch direkt geöffnet und betrachtet werden. Mit Sicherheit eine lohnende Lektüre für jeden Webdesigner. Wenn Sie mal wieder vor scheinbar unlösbaren Problemen stehen, dann denken Sie daran, dass die Kaskade den Cascading Style Sheets ihren Namen verdankt!

Die goldenen CSS-Regeln für Anfänger

Jens Kilgenstein — Sat, 08 May 2010 09:50:12 +0000

Beim stöbern im Netz bin ich auf eine Zusammenfassung der wichtigsten CSS-Grundregeln gestoßen, die ich gerne mit Euch teilen möchte. Konkret geht es um folgende acht Punkte, die ich mal als Gebote zusammenfasse:

Verschwende keine Gedanken an CSS 3, bevor Du nicht die aktuelle CSS 2.1 Spezifikation im Schlaf beherrscht.
Verstehe die Kaskade, dann kannst Du mit Divs geizen.
Verstehe, was der Unterschied zwischen einem ID- und einem Klassen Selektor ist.
Nutze von Beginn an CSS-Kurzschreibweisen.
Mache Dir nicht zu viele Gedanken über den Doctype.
Nutze relative Maßangaben für die Darstellung am Bildschirm, absolute hingegen für ein Druck Layout.
Wer floatet, muss auch clearen.
Halte Dich penibel an die HTML- und CSS-Grammatik und überprüfe diese mithilfe von Validatoren.

Insbesondere Anfänger, die diese Regeln beherzen, werden schnell Fortschritte machen und schöne, standardkonforme Ergebnisse erzielen. Versprochen!

Software Paket für den lokalen Cross-Browser-Test

Jens Kilgenstein — Mon, 19 Apr 2010 08:33:55 +0000

Wer regelmäßig die Darstellung seiner erstellten Websites auf verschiedenen Betriebssystem- und Browserversionen abtesten muss, landet früher oder später bei einem kostenpflichtigen Online-Dienst wie etwa BrowserCam. Aus Anwendersicht überzeugt bei diesen Anbietern nicht nur die Wartungsfreiheit, sondern auch die Vielzahl an Möglichkeiten. So ermöglichen die “besseren” Dienste sowohl das automatisierte Erstellen von Screenshot-Serien, wie auch den fallweisen Remote-Access. Dennoch sind diese Dienste nicht ohne Fehl und Tadel. Wer häufiger mit ihnen arbeitet, wird zumindest temporär immer mal wieder Zugangs- und Performanceprobleme feststellen. Und zumindest bei sensiblen Kundenprojekten steht man immer wieder vor der Frage, ob das Übermitteln der Inhalte an einen Dritten in der Entwicklungsphase vom Kunden überhaupt akzeptiert wird.

Eine Alternative stellen Programme für den heimischen PC dar, die vorkonfigurierte Testumgebungen Out-of-the-Box feilbieten. Um es gleich vorwegzunehmen: Die Auswahl ist nicht annähernd so groß wie bei den bereits erwähnten Online-Diensten. Wer nicht selbst Hand anlegen möchte, und einen ähnlichen Komfort- und Funktionsumfang wie etwa bei BrowserCam sucht, findet z. Z. nur in dem Multi-Browser Viewer einen gleichwertigen Ersatz, der lokal installierbar ist.

Die Software liefert sämtliche Funktionalitäten, die für einen sinnvollen Cross-Browser-Test notwendig sind. Eine Möglichkeit stellen zahlreiche Browser dar, die als Standalone-Applikationen in einer Sandbox ausgeführt werden. Enthalten sind alle gängigen Browser in aktuellen und teilweise zurückliegen Versionen. So können Sie beispielsweise den Internet Explorer in der Version 6, 7 and 8 parallel auf Ihrem Rechner betreiben. Das Aufrufen ist kinderleicht. Im Tab “Standalone Browsers” erscheint eine Liste mit vorhandenen Browsern, und ein Klick auf das jeweilige Symbol startet ihn.

Eine andere Fähigkeit der Software ist das automatisierte Anfertigen von Screenshots. Voraussetzung hierzu ist, dass die Website über eine öffentliche URL erreichbar ist. Das Anfertigen der Screenshots erfolgt nicht auf lokaler Ebene, sondern über das Netzwerk des Herstellers. Das hat den Vorteil, dass zusätzlich noch auf unterschiedliche Betriebssysteme (Windows, Mac, Linux)) zurückgegriffen werden kann. Die Bedienung ist auch in diesem Punkt sehr einfach. Im Programm wählt man aus einer Liste die gewünschten Browserversionen und Betriebssysteme aus, gibt die gewünschte URL ein und klickt auf “Go”. Im mittleren Fenster erscheinen nach kurzer Zeit die angeforderten Screenshots, die sich mit einem Doppelklick vergrößern lassen.

Platzhalter-Grafiken ohne Photoshop

Jens Kilgenstein — Wed, 07 Apr 2010 18:27:12 +0000

Während der Entwicklungsphase einer Homepage konzentriert sich der Entwickler im Regelfall ausschließlich auf die Umsetzung des Layouts. Erst wenn dieser Prozess abgeschlossen ist, erfolgt das Einpflegen von Texten und Bildern, die nicht zum Grundlayout gehören. Da die Fläche aber trotzdem reserviert werden soll, arbeitet man temporär mit Platzhaltern. Im Textbereich greift man hierzu auf sogenannte Blindtexte zurück, für die ich sinnvolle Generatoren bereits in einem früheren Artikel vorgestellt hatte.

Äquivalent dazu ermöglicht es der Dynamic Dummy Image Generator, Platzhaltergrafiken beliebiger Größe zu erstellen. Am einfachsten ist die Einbindung, wenn Sie über einen permanenten Zugriff auf das Internet verfügen. In diesem Fall ist es ausreichend, einfach auf die URL http://dummyimage.com/ zu referenzieren. Zusätzlich müssen Sie hinter dem Slash eine Höhen- und Breitenangabe übergeben. Die Maßeinheit ist Pixel, wird aber in der URL nicht mit angegeben. Hier ein Beispiel für eine Grafik, die 600 Pixel breit und 400 Pixel hoch ist:

http://dummyimage.com/600×400

Als Standardtext wird automatisch die Größenangabe ins Bild eingetragen. Auf der Homepage des Anbieters steht zusätzlich ein Generator zu Verfügung, mit dem sich die Platzhaltergrafik weiter individualisieren lässt. So können Sie dort einen abweichenden Text eingeben, die Farbe des Hintergrundes und des Textes definieren, und eine Vorauswahl bezüglich des Grafikformates (JPEG, GIF, PNG) treffen.

Zusätzlich stellt der Autor Russell Heimlich die PHP-Dateien des Projekts zum Download bereit, sodass Sie den Generator auch auf einem eigenen Server betreiben können.

Internet Explorer Testen und Debugging

Jens Kilgenstein — Mon, 29 Mar 2010 16:41:05 +0000

Trotz validem HTML und CSS kommt es immer wieder Abweichungen bei der Darstellung der eigenen Homepage. Das Hauptaugenmerk sollte insbesondere auf die verschiedenen Versionen des Internet Explorers liegen, der erfahrungsgemäß am weitesten von den Vorgaben des W3C abweicht. Unter Windows ist der Aufbau einer Testumgebung mit Bordmitteln nicht möglich, da es das Betriebssystem nicht gestattet, mehrere Versionen des Internet Explorers parallel zu installieren. Insofern muss man in die Trickkiste greifen, etwa mit dem IETester oder Spoon.

Eine weitere Alternative ist der Rückgriff auf die Internet Explorer Collection. Die Software ermöglicht es, von der ersten bis zur aktuellen Version, alle Internet Explorer als eigene Standalone-Applikationen zu installieren und parallel zu betreiben. Sie müssen sich lediglich von der Homepage des Anbieters ein Installationsprogramm herunterladen. Bei der Installation wird Ihnen dann eine Auflistung aller Versionen des Internet Explorers angezeigt, die mit Ihrem Betriebssystem kompatibel sind. Als sinnvolle Zugabe ist bei allen Installationen die Internet Explorer Developer Toolbar enthalten. Hierbei handelt es sich um ein Debugging- und Entwicklungstool, das an vielen stellen an Firebug erinnert.