Ein Http-Request ist, vereinfacht ausgedrückt, die Anfrage eines Browser an einen Webserver. So wird für jede Webseite erst ein Http-Request für die eigentliche Seite erzeugt, danach für jede einzelne Komponente, die zur Darstellung der betreffenden Seite benötigt wird, also z.B. Grafiken, externe CSS- und Javascript-Dateien. Jeder Http-Request benötigt Zeit, im Schnitt vergehen 50-200 Millisekunden von der Anfrage des Browsers bis zur Antwort des Webservers.

Da praktisch alle Browser parallele Anfragen mehr oder weniger begrenzen, entsteht hier schnell ein Flaschenhals, der für unnötige Verzögerung beim Laden einer Webseite verantwortlich ist. Besonders gravierend wirkt sich das bei vielen kleinen Dateien aus. Bei den heute üblichen Bandbreiten liegt die eigentliche Übertragungszeit für eine kleine Datei (bis einige Kilobyte) meist um ein Vielfaches unter der Zeit, den der Http-Request für diese Datei benötigt. Darum empfiehlt es sich, die Menge der externen Elemente auf ein sinnvolles Minimum zu beschränken.
(mehr …)

Im Regelfall bestehen Webseiten aus HTML-Quellcode und CSS (Cascading StyleSheets), oft wird auch Java-Script eingesetzt. Aus Performancegründen empfiehlt es sich CSS und Java-Script in externe Dateien auszulagern, da diese im Browsercache abgelegt werden können und dann jeweils nur einmal für eine Website geladen werden müssen, egal wie viel Unterseiten aufgerufen werden. Dies hat darüber hinaus noch den Vorteil, Änderungen müssen nur in den externen Dateien durchgeführt werden und nicht auf jeder betroffenen Webseite. Da für jede nachzuladende Datei ein http-Request durchgeführt werden muss, empfiehlt es sich, nicht zu viele kleine CSS- oder Java-Script-Dateien einzubinden, denn jeder Request kostet wiederum Zeit, meist mehr als das eigentliche Laden der betreffenden Dateien. Auf das Thema http-Request wird in einem späteren Beitrag noch einmal genau eingegangen.

(mehr …)

Der Schriftformatierung kommt bei der Webseitenerstellung eine große Bedeutung zu. Zu kleine oder schlecht lesbare Schriften können den Nutzen einer Webseite stark einschränken. Darüber hinaus kann die Wahl einer Schriftart erhebliche Probleme hervorrufen, wenn diese auf dem Computer ders Nutzers nicht installiert ist. Ist dann keine ähnliche Ersatzschrift angegeben, benutzt der Browser eine Standardschrift, welche unter Umständen das Layout beeinträchtigt und die Bedienung der Seite erschwert. Mit dem Schrift Generator können durch die eine Zweiteilung schnell und einfach zwei Schriften miteinander verglichen werden. Darüber hinaus kann mit einem Klick der entsprechende CSS-Code erzeugt werden.

Derzeit befindet sich der Generator im Betatest. Wer möchte kann sich den Schrift Generator gerne mal ansehen und ausprobieren. Rüchmeldungen bei Fehlern oder Änderungs- bzw. Erweiterungswünsche können per Mail oder hier geäußert werden.

Die Idee, abgerundete Ecken mit Hilfe von grafischen Elementen zu gestalten, ist so alt wie das Webdesign selbst. Auch heute noch greifen viele Webdesigner zu ihrem Grafikprogramm und zeichnen sich entsprechende Ecken selber. Dabei gibt es für Rahmen von div-Containern auch eine reine CSS-Lösung, die völlig ohne Bilder und Grafiken zurecht kommt.

Hintergrund dieser Technik ist eine optische Täuschung. So werden mehrere direkt nebeneinander liegende Rahmen über margin gekürzt und damit der visuelle Effekt abgerundeter Ecken erreicht. Mittels farblicher Abstimmung kann man auch räumliche Effekte wie z.B. höher oder tiefer gestellte Flächen gestalten.
(mehr …)

Einen div-Container auf einer Seite in der Mitte vertikal zu positionieren ist mit text-align: center; problemlos zu realisieren. Anders sieht es aus, wenn man ein div horizontal in der Mitte positionieren möchte. Eine etwas umständlich anmutende Methode mit zwei in einander verschachtelten div bringt gute Ergebnisse z.B. kann man dann ganz normal scrollen, wenn der Inhalt größer ist als der div-Container.
(mehr …)

Um einen div-Container mit beliebigen Inhalt mittig auf dem Bildschirm zu zentrieren (horizontal und vertikal), gibt es verschiedene Möglichkeiten. Eine davon ist Zentrierung durch negative margins. Hierzu ist es allerdings erforderlich, die Größe unseres Containers zu kennen und explizit fest zu legen.
(mehr …)

Überall im Internet ließt man von CSS und CSS Layouts. Ware Wunderkräfte werden Webseiten zugeschrieben, die anstelle der bewährten Tabellen zur Positionierung von Designelementen CSS einsetzen. Webseiten sollen schneller geladen werden, einfacher zu gestalten sein und Suchmaschinen sollen sie besser ranken. Doch was ist wirklich dran?

CSS hat eindeutig Vorteile. Der benötigte HTML-Code einer Webseite mit CSS Layout kann unter Umständen nur einen Bruchteil von einer Seite mit Tabellenlayout betragen. Der Vorteil wirkt sich allerdings erst so richtig aus, wenn die CSS Befehle in eine externe Datei ausgelagert werden. Dadurch wird diese im Browsercache abgelegt und muss nicht bei jeder Unterseite mit eingelesen werden.

(mehr …)

Textlinks sind schnell geladen und voll suchmaschinentauglich. Für Navigationsmenüs wünschen sich die meisten Webmaster zwar diese Vorteile, möchten aber auf ein schickes Aussehen nicht verzichten. Leider sehen Textlinks im Originalzustand recht spartanisch aus. Mit CSS lassen sie sich aber richtig aufpeppen.
(mehr …)