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.
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.
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:
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.
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).]
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.
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.
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:
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.
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.
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:
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.
div
im Zusammenspiel mit aussagekräftigen IDs wie zum Beispiel <div id="#content">
h1
, h2
, h3
, h4
, h5
, h6
p
a(:link)
, a:visited
, a:focus
, a:hover
, a:active
. em
, strong
abbr
, acronym
ul
, li
ol
, li
dl
, dt
, dd
q
, blockquote
, cite
del
, ins
table
, caption
, thead
, tfoot
, tbody
, tr
, th
, td
code
, pre
*, var
, kbd
.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 <a>
-Element ausgezeichnet werden müssen. Da XHTML 2 bisher nur als Entwurf fungiert, können sich selbst hier noch Änderungen ergeben.
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.
Inzwischen benutzt man Frames und ein Flash-Menü, der Eingangstest ist als Grafik hinterlegt und das ohne Alternativtext.