Kategorien
Intern

Serverperformance

Ich hab da mal ‘ne Frage an euch: Lädt meine Website in letzter Zeit überdurchschnittlich lang oder hat sie mal Ausfälle?

Mir kommen die Ladezeiten manchmal zu lang vor, vielleicht auch nur Einbildung, aber ich frag mal lieber nach.

Kategorien
Gestaltung und Design Typographie Webdesign/Gestaltung

Tipps zu hellem Text auf dunklem Grund

In Light text on dark background vs. readability von Roger Johansson geht’s mal wieder um die Probleme und Tipps zu weißem/hellen Text auf schwarzen/dunklen Hintergrund. Besonders im Hinblick auf die Lesbarkeit. Oftmals verwischen sich die hellen Buchstaben zu einem nicht lesbaren Brei. Die wichtigsten Regeln einmal zusammengefasst:

Schriftgröße

Als allererstes sollte man eine ausreichende Schriftgröße verwenden. Mini-Texte jenseits der 10px sollten generell vermieden werden, lesbar wird es so ab 12px. Auf eine geeignete Schriftart ist wie immer auch zu achten!

Beispiel zur Schriftgröße ansehen.

Zeilenabstand vergrößern

Um die Lesbarkeit zu steigern und keinen Textbrei zu erhalten, sollte der Zeilenabstand vergrößert werden. Am einfachsten geht dies mit der CSS-Anweisung line-height: Ein Beispiel: line-height: 1.4em;. Dies würde den Zeilenabstand um 40 % der Schriftgröße erhöhen.

Beispiel zum erhöhten Zeilenabstand ansehen.

Wie man sieht, hat die Lesbarkeit enorm zugenommen. [Feed-Abonnenten sollten einfach mal die Original-Seite anschauen und das Stylesheet neu laden (F5 drücken).]

Laufweite erhöhen (sperren)

Zusätzlich zum Zeilenabstand kann man auch noch die Abstände zwischen den Buchstaben vergrößern: letter-spacing: 0.03em;. Hierbei ist es wichtig, das ganze nicht zu übertreiben! Außerdem sollte man hier auch die Wortabstände per word-spacing vergrößern, da es bei hohen Werten sonst schwer werden könnte, Zwischenräume und Leerzeichen auseinanderzuhalten. Dieser Wert sollte über dem Buchstaben-Abstand liegen.

Beispiel zur erhöhten Laufweite ansehen.

Kontrast

Der Kontrast zwischen Hintergrund- und Textfarbe sollte ausreichend genug sein, beide voneinander zu unterscheiden, aber auch nicht zu groß oder auch grob ausfallen, da dies auf Dauer schwer für die Augen werden kann. Wählt man für den Hintergrund die Farbe Schwarz #000 und gibt dem Text ein dunkles grau wie #666, dann ist der Text kaum zu erkennen. Färbt man den Text allerdings weiß (#FFF) wird es wieder besser mit der Lesbarkeit.

Beispiel zum Kontrast ansehen.

Natürlich gelten diese Regeln auch bei dunkel-auf-hell-Webseiten. Vielen Dank nochmal an Christoph für seine Hinweise in den Kommentaren.

Weitere Infos

Kategorien
Software

Feeds komfortabel abonnieren

Die meisten Blogs und Nachrichtenseiten bieten Feeds in den verschiedenen Formaten an um auf dem laufenden zu bleiben. Teilweise ist es aber recht unbequem, diese Feeds in den eingesetzten Feed-Reader zu übernehmen. Mit Mozilla Thunderbird und entsprechend angelegten Links, kann man dies um einiges komfortabler machen.

Thunderbird-Benutzer müssen erstmal einen Haken in den Einstellungen setzen. Ins Einstellungsmenü kommt man über Extras, Einstellungen. Im Register Allgemein setzt man nun einen Haken bei RSS-Feeds:

Screenshot 'Allgemeine Einstellungen'

Damit wurde Thunderbird fit gemacht um auf Feed-URLs zu anzuspringen. Feed-URLs? Nicht anderes als ein dazu gedachtes Internet-»Protokoll«, ähnlich dem von Skype um direkt per Link Personen anzurufen: skype:hansmuellerceo. Nur eben für Feeds: feed:https://pixelscheucher.de/feed/atom/. Der eigentlichen Adresse zum Feed wird also nur feed: vorne dran gestellt.

Öffnet man nun diese Adresse mit dem Browser der Wahl, öffnet sich Thunderbird und zeigt links unten an, dass der Feed gerade heruntergeladen wird und nun im Programm zur Verfügung steht.
Screenshot

Auf diese Art und Weise kann man sehr bequem neue Feeds in Thunderbird aufnehmen. Ich hab das ganze auch mit FeedReader 3.05 ausprobiert, leider klappt es damit nicht.

Kategorien
Netzwelt

Web 2.0 Logo Generator (beta)

Durch’s Netz geistert mal wieder was zum spielen, diesmal der Web 2.0 Logo-Generator (via praegnanz.de). Praktischerweise kann man auch die Farben ändern (siehe FAQ), deswegen ein Beispiel im bewährten Michel-Gold-Rot-Mix:

Michl

Kategorien
Allgemein

CSS-Checkliste

Im Nachhinein und Live-Betrieb meines neuen Layouts ist mir aufgefallen, dass ich für ein paar Elemente das Styling völlig vergessen habe. Dadurch kam ich auf die Idee, eine Liste zu mit den wohl meist gebrauchten Elementen zu schreiben.

Elemente zur Dokumentstrukturierung:
div im Zusammenspiel mit aussagekräftigen IDs wie zum Beispiel <div id="#content">
Überschriften zur Dokumentgliederung
h1, h2, h3, h4, h5, h6
Absätze
p
Links und verschiede Link-Zustände
a(:link), a:visited, a:focus, a:hover, a:active.
Diese Reihenfolge sollte man sich einprägen, beispielsweise durch den Satz Lord Vaders former handle, Anakin. Siehe auch Website in an hour von Andrew Krespanis.
hervorgehobene Textstellen
em, strong
Abkürzungen
abbr, acronym
ungeordnete Listen (Ulli)
ul, li
geordnete Listen (Olli)
ol, li
Definitionslisten
dl, dt, dd
Zitate
q, blockquote, cite
gelöschten und nachträglich eingefügten Text
del, ins
Tabellen
table, caption, thead, tfoot, tbody, tr, th, td
diverse Elemente zum Anzeigen von Code
code, pre*, var, kbd.
==* = mehr oder weniger =
weitere logische Textauszeichnungen
samp, dfn

Ich habe selber noch nicht alle Bestandteile in mein Stylesheet eingebaut, das wird sich aber sicherlich noch ändern, ein entsprechender Aufruf zur Cache-Aktualisierung wird dann auch folgen ;)

Nur, wenn sich kein passendes Element finden lässt, kann man außerdem auf das span-Element zurückgreifen, bei der Wahl eines Klassennamens ist es wichtig, die Funktion des Elements und nicht das Aussehen zu benutzen. Es kann ja immer mal passieren, dass .greenText plötzlich rot sein soll.

Im Hinblick auf XHTML 2 sei drauf hingewiesen, dass dort viele neue Elemente hinzukommen und Links nicht mehr zwingend mit dem &lt;a&gt;-Element ausgezeichnet werden müssen. Da XHTML 2 bisher nur als Entwurf fungiert, können sich selbst hier noch Änderungen ergeben.

Kategorien
Allgemein

Die 10-Millionste .de-Domain (Update)

Am Montag wurde die 1.000.000. .de-Internet-Adresse registriert, Besitzer ist nun eine Hüttenberger Case-Fabrik. Leider zeigt die Domain, dass Webstandards, semantischer Quellcode und Usability noch nicht soweit fortgeschritten sind wie .de-Domains.

Hier wurden Tabellen für’s Layout missbraucht, Überschriften kommen gar nicht zum Einsatz – nicht mal mit <b> gefettet, was allerdings auch kein guter Stil gewesen wäre – und statt des Linktext werden in der Navigation nur die Pfeile verlinkt. Der Validator spuckt 14 Fehler aus, der Großteil sind fehlende Alternativ-Texte für die Grafiken. Die Domain ist außerdem nicht ohne den Zusatz www. erreichbar.

Kuriositäten aus dem Quellcode sind unter anderem <div align="center"><center>, <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> übliche <font>-Elemente und Tabellen.

Das Firmenlogo als Tapete will mir auch nicht so gefallen, die Pfeile in der Navigation waren wohl beim Grafikprogramm dabei und das Logo selber ist auch ein wenig fransig. Dabei fällt mir noch auf, dass die Firma wohl »Hüttenberger Case-Fabrik cases« heißt.

Es mag sein, dass die Kosten für was besseres zu hoch waren. Trotzdem schade, dass bei so einer Jubiläums-Domain nicht was hochwertiges zu finden war. Hierbei geht es mir lediglich um den Stand im Netz und nicht darum eine meines Erachtens schlechte Website auseinander zu nehmen und zu verurteilen.

Update, 7. August 2006

Inzwischen benutzt man Frames und ein Flash-Menü, der Eingangstest ist als Grafik hinterlegt und das ohne Alternativtext.