Gegen den „em statt px“ Wahn

Vor ein oder zwei Jahren wäre ich absolut dafür gewesen, möglichst flexible oder „fluid“ Designs zu erstellen. Die Idee dahinter ist, dass man sämtliche Pixelwerte im CSS in relativen Größen (z.B. em) angibt, damit sehbehinderte Mitbürger mit der Textzoomfunktion, die sich auf alle em-Werte bezieht, die Webseite vergrößern können. Mitunter begehen manche Webdesigner einen ziemlichen Krampf, um alles bis hin zu Videos und Bildern in relativen Größen zu übertragen, wie man z.B. hier sieht (macht einfach mal das Browserfenster kleiner). Schön, wenn man dafür Zeit hat.

Aber vor besagten ein bis zwei Jahren waren die Browser noch älter und der IE6 ein ziemlicher Platzhirsch. Und dieser Browser ist der einzige, für den man solche Verrenkungen noch braucht. Alle modernen Browser haben standardmäßig einen Zoom aktiviert, der die ganze Seite größer rendert. Der klassische Textzoom ist nur noch eine Sonderfunktion.

Darüberhinaus erscheint es mir total widersinnig, bei einem Medium was vom ersten Photoshop Layout bis zur fertigen Seite auf Pixel ausgelegt ist, beim CSS Code relative Werte zu benutzen. Die Geräte, die sowas darstellen, die sollen aus den Pixeln das Beste machen. Und das tun sie auch, wie bereits gennante moderne Browser oder z.B. das iPhone, dass sich die Seiten in die richtige Größe rendert.

Jemand anderer Meinung? Schreibt mir gerne einen Kommentar

Eine ganz simple Methode Bilder mit Ladegrafik zu versehen

Einfacher gehts nicht. Man braucht kein Javascript oder ähnliches. Es reicht eine simple CSS Angabe. Man braucht nur eine Ladegrafik, die kann man sich hier generieren lassen. Und dann ins CSS:


.klasse img
{
background: white url(’Images/Loading.gif’) no-repeat center;
}


Mit .klasse sollte man vorher das Ganze auf einen Bereich, wie z.B. Thumbnails einer Galerie, beschränken. (via)

Bessere Webtypografie: Font Stacks

Font Stacks, also ein „Stapel Fonts“, ist die Idee, anstatt der Standardwebschrift eine Reihe von Fonts aufzurufen, beginnend mit dem schönsten und an letzter Stelle steht der Webfont, in der Hoffnung, der Besucher hat möglichst schöne Fonts installiert.

Vorteile an dieser Sache sind, dass man neben allerlei schönen Schriften auch alle Systemschriften aller Systeme der Reihe nach abklappern kann.

Beginnen könnte man z.B. in dem man den teuren und edlen Font „Frutiger“ einbindet, dann folgt „Segoe“, die Neueintwicklung von Microsoft für Vista, welcher bekanntlich ein billiger Abklatsch von Frutiger ist, aber immer noch gut aussieht. Dann könnten Fonts nach eigenem Geschmack folgen, die den vorangenannten leider nur ähnlich sehen, aber immer noch besser sind als Systemfonts. Und zu guter Letzt folgen die Systemfonts, z.B. Arial und Helvetica. Und selbst hier kann man was verbessern, indem man erst schöne Versionen von Helvetica nimmt und später die Arial. Besitzer eines Macs oder einer Creative Suite haben meist schöne Helvetica Versionen dabei. Übrigens, Arial ist auch nur wieder eine schamlose Microsoftkopie von der Helvetica. Die machen sowas scheinbar öfter.

Wenn man möchte, kann man dann noch seltenere Systemfonts einbinden, wie das Linux Pendant für die Arial, die Liberation. Ganz zum Schluss folgt noch die font-family, für den unwarscheinlichen Fall, dass niemand die genannten Schriften installiert hat.

So könnte das ganze aussehen:

[Webseiten Tuning] #2 Sauberer Code

Hier nun der Beginn meiner kleinen Zusammenfassung über das Tuning von Webseiten.

Am wichtigsten an Webseiten ist sauberer Code und intelligentes Design. Nur durch eine saubere Arbeit ist der Grundstein gelegt, für weniger Serverbelastung, schnellere Ladezeiten und schnelleren Aufbau. Ich spreche hier nicht über die Programmierung, PHP oder andere Programmiersprachen. Diese Anleitung ist für Leute die zumindest Codetechnisch ihr Glück in die Hände der Entwickler von Systemen wie Wordpress legen und nur ihr Template perfektionieren wollen

Must-Have-Tools

Zu den Must-Have-Tools zählt zu allererst der Firefox Browser. Mit seinem Reichtum an Plugins ist er zu einem mächtigen Tool für Webentwickler geworden. Da wundert es nicht, dass die meisten Profis mit Firefox entwickeln, obwohl der Großteil der Kunden noch den Internet Explorer nutzt.

Zunächst bestücken wir unseren Browser mit den Plugins Web Developer Toolbar, Firebug und HTML Validator. Dann ein Browserneustart. Wir sehen nun oben die Toolbar die man sich in Ruhe mal ansehen sollte. Sie bietet viele nützliche Funktionen wie z.B. verbotenes inline-css oder Bilder abzuschalten.

Im Browserfuß sehen wir nun einen kleinen gelben Käfer, dies ist der Firebug. Daneben die Anzeige vom HTML Validator, der anzeigt, ob die Seite HTML Fehler enthält.

Nun sollte man Schritt für Schritt die Fehler des Validators durchgehen und die Fehler bereinigen, wo es geht. Perfekte Webseiten gibt es kaum und ist bei dynamischen Seiten selten lange Zeit perfekt. Aber ein gewisses Maß kann man erreichen.
weiterlesen

[Webseiten Tuning] #1 Einleitung

Nach langer Zeit hab ich noch mal an den Grundfesten meines Blogs gerüttelt und ordentlich aufgeräumt. Viel zu lange nichts getan. Ich werde meine Erfahrung für das Tunen von Webseiten in verschiedenen Bereichen in den nächsten Tagen in einer Reihe veröffentlichen. Bleibt dran, wenn es euch interessiert