CSS einfach erklärt

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.

Mehr lesen … »

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.

Mehr lesen … »

Das Layout von HTML Fließtext ist auf den meisten Websites eine recht langweilige Angelegenheit. Gerne würde mancher Webdesigner auf die aus dem Printbereich bekanten Layoutmöglichkeiten zurückgreifen. So ist es beim Desktop-Publishing kein Problem, etwa runden Text um ein rundes Bild herumfließen zu lassen. Bei Verwendung der CSS-Eigenschaft float fließt der Text zwar um das Bild herum, allerdings wieder in eckiger Form. Das verwundert nicht, denn Websites bestehen nun mal aus viereckigen Kästen, die übereinander, nebeneinander oder ineinander gestapelt werden.

Mehr lesen … »

Das Design einer Website bei einem kommerziellen Projekt wird häufig zunächst als grafischer Entwurf (z. B. in Photoshop) entwickelt. Ist der Auftraggeber mit dem Design zufrieden, wünscht er oftmals eine pixelgenaue Umsetzung in HTML und CSS. Um zu überprüfen, ob diese Vorgabe auch tatsächlich erfüllt wurde, gibt es ein Firebug-Plugin namens Pixel Perfect. Das geniale Tool ermöglicht es, den Entwurf direkt über die Website zu legen, wobei die Position und der Transparenzgrad angepasst werden kann.

Mehr lesen … »

Die tatsächliche Größe für die Anzeige eine Website im Browserfenster variiert beträchtlich. Das hängt zunächst mit der verwendeten Bildschirmauflösung zusammen. Je größer die Bildschirmauflösung des Betrachters ist, desto größer ist die zur Verfügung stehende Fläche. Mehr lesen … »