Archiv der '(X)HTML/ CSS'-Kategorie:

Einige Gedanken zu Webfonts

4. Januar 2010

Lange haben Webdesigner davon geträumt, nicht nur auf die paar Standardfonts zurückgreifen zu können – also Schriftarten, die auf fast allen System verfügbar sind – sondern eigene Schriftarten benutzen zu können. Mit @font-face ist es möglich, Schriftarten per CSS zu definieren, wobei ein Ort (src: url()...) angegeben wird, von wo es der Browser bei Bedarf runterladen kann. Das war im (praktisch unbedeutenden) CSS2 schonmal vorgesehen, ist in CSS2.1 aber leider wieder verschwunden. CSS3 wird diese Möglichkeit nun wieder enthalten. Neuere Browser-Versionen (Firefox 3.5, Opera 10 und Safari 3.1) unterstützen das Einbinden von Webfonts schon heute – andere Browser ignorieren das Stück CSS einfach.

Probleme

Wie auch viele andere benutzen auch wir vom Trash-Log bereits Webfonts. Leider birgt die Nutzung von Webfonts einige Probleme. So ist es zwar völlig legal, etwa Calibri als Schriftart per font-family: Calibri, Sans-Serif; zu benutzen. Calibri ersetzt Verdana in vielen neueren Microsoft-Programmen als Standardschriftart und wird somit automatisch „kostenlos“ auf vielen Systemen mitinstalliert. Einbinden darf man die Font-Datei aber nicht einzeln, denn Microsoft verkauft sie nebenher noch für $120! Ob nur der Seitenbetreiber haftet, oder auch der Besucher, dessen Browser unlizensierte Software runterläd, ist nicht geklärt.

Weitere Probleme ergeben sich aus dem Aufbau der font-Eigenschaft. Diese erlaubt es, mehrere Schriftarten anzugeben – ist eine auf dem System nicht vorhanden, wird die nächste probiert. Webfonts lassen da der Kreativität freien Lauf. Der CSS-Quelltext sieht dabei etwa so aus:

font: 2em Yanone, Verdana, Sans-Serif;

Besucht man die Seite mit einem Browser, der Webfonts nicht unterstützt, wird „Yanone“ vermutlich nicht gefunden, der Browser wird also Verdana benutzen. Obwohl wir mehrere Schriftarten angeben können, müssen wir uns aber für eine Schriftgröße (2em) entscheiden! Das führt zu drei Möglichkeiten, die alle nicht zufriedenstellen können:

  • Schriftgröße wählen, bei der Yanone gut aussieht
  • Schriftgröße wählen, bei der Verdana (als Standard-Schrift) gut aussieht
  • Ein Mittelmaß, bei dem beide ok, aber nicht toll aussehen

Fazit

Webfonts ermöglicht es Designern endlich aus dem alten Raster der immer gleichen Schriftarten im Web auszubrechen und die Schrift zu wählen, die am besten zur Seite passt. Es bestehen aber noch einige Probleme, die hoffentlich (teilweise) noch in der bisher nicht veröffentlichten CSS3-Recommendation gelöst werden. Eine Zuordnung von einer Schriftgröße zur einer Schriftart würde die Vorteile von Webfonts stark verbessern!

mit dem Biene-Wettbewerb 2009…

5. Dezember 2009

kann ich mich irgendwie überhaupt nicht anfreunden.

Meinen persönlichen Hauptgewinn bekommen:

  • www.credit-suisse.com

    Ihr Browser unterstützt keine Cookies
    Um unsere Website zu besuchen, aktivieren Sie bitte in den Browsereinstellungen die Option Cookies und laden Sie die Seite neu. Wir freuen uns auf Ihren Besuch auf www.credit-suisse.com

  • www.buergerhaushalt-trier.de

    Umleitungsschleife
    Limit für Umleitungen dieser URL überschritten.  Die angeforderte Seite konnte nicht geladen werden. Dies könnte von blockierten Cookies verursacht werden.

Etwa 50% der Seiten der Preisträger skaliert (bei nur-text-zoom) nicht fluid, sondern rechts aus dem Browserfenster hinaus (Extra-scrollbalken, jippie).
Desweiteren verwenden mehrere der Preisträger feste Höhen für diverse Elemente, so dass Text überläuft, teilweise auch weisse Schrift in weissen Hintergrund hinein. Bspw. bei www.bund.de, aber da ist man nach dem Skalieren eh schon verloren.
Das Selbe gilt für browserseitig eingestellte minimale Schriftgrössen.

www.dhl.de beglückt mich mit einem inlineframe, www.weisse-liste.de, was eigentlich am brauchbarsten ist hat da rechts einen „Ihre-meinung-button“, auf den man sich tot-klicken kann, Zeit-online bekommt für ihr altbekanntes interaktives Ratespiel „wo zur Hölle ist mein Fokus?“ eine Biene in Bronze, alles in allem kristallisiert sich bei den Preisträgern die Frage heraus, was man eigentlich noch alles falsch machen muss um KEINE Biene zu bekommen.

Goldgewinner Manufactum glänzt neben anderen Schwächen mit:
h1, h2, h3, h4, h5, h6 { font-size: 1em;}
Das muss ich nicht verstehen…

Link: BIENE 2009: Manufactum hat die schönste Blüte (einfach-fuer-alle.de)

Typo3 4.3 – jetzt mit Frontend-editing

30. November 2009

Frontend-editing? Schöne Sache.
Ich allerdings freu mich auf 2020 wenn Typo3 40.3 rauskommt, wo man dann endlich sogar auch im Backend Editieren kann. 😮
Wär das was?

Geht mir von mit Eurem Dreck. Grad sitz ich mal wieder an so ’nem System dran, und ich kann nur sagen, was ich immer gesagt hab: Sooooooooooo einen Hals!!111eins

Link: Typo3 4.3 ebnet Übergang zu Typo3 v5 (golem.de)

WordPress: Seiten und Artikel im Menü mischen

27. November 2009

hc_037Demletzt hab ich mich mal ganz dezent drüber ausgelassen, dass es in WordPress im Gegensatz zu jedem anderen ordinären Wald- und WiesenCMS nicht möglich ist, Seitenkategorien mit Artikelkategorien zu mischen UND zu sortieren.
Das ändert sich nun, Konrad hat ein Plugin namens Page-Cat-list geschrieben, welches das ganz komfortabel tut.
Version 0.1.1 macht schon alles, was das Herz so begehrt, bis Version 1.0 kommen noch paar schöne Sachen hinzu, bspw. HinzuMischen und Sortieren von Tags, Seitenauswahl per Titel statt ID, Klickibunti, welche Kategorien man haben will etc.
Ab Version 2.0 kann man sich den ganzen Spass dann im Frontend zurechtschieben.

Ok, das mit dem 1.0 und 2.0 hab ich mir jetzt ausgedacht, aber wer weiss 😮

Link zum Widget/Plugin: WordPress: Seiten und Kategorien in einer Liste darstellen (ja-nee.net)
Update: Es gibt eine Überarbeitung: Kleines Update zum Widget (ja-nee.net)

Firebug in Seamonkey 2.x

4. November 2009

firebug-seamonkey-2

AFAICS adding this to chrome.manifest is all that is needed to make Firebug 1.5X.0b1
work in SM 2.0:
overlay chrome://navigator/content/navigator.xul
chrome://firebug/content/browserOverlay.xul

(von hier)
Kurze Übersetzung auf Deutsch: Weiterlesen »

WCAG 2.0 auf Deutsch erschienen

29. Oktober 2009

Die Web Content Accessibility Guidelines (WCAG) 2.0 sind ab heute auch in einer autorisierten deutschen Übersetzung online. Eine kurze Beschreibung, was die WCAG 2.0 sind, liefert das Dokument selber: Weiterlesen »

Spass mit der Bahn – mal wieder

19. Oktober 2009

Heute morgen stand ich mal wieder vor dem Lieblingsgerät aller Bahnkunden und meinem ganz besonders: einem Fahrkartenautomaten. Bzw. vor 3 Automaten, wovon 2 ausser Betrieb waren.

Aus Neugierde mal geschaut, was für ein OS auf den „kaputten“ Automaten läuft, das war nicht ersichtlich, da die Dinger vor dem Booten schon hängengeblieben sind, wo man Bios-version etc usw. sehen konnte.

Cpu-clock:100Mhz

machte dann meinen Tag. Was zur Hölle?

XAJ-Theme für WordPress

8. Juli 2009

Gestern hab ich mich mal hingesetzt und zu Test-/ Demonstrationszwecken, wie auch aus sportlichem Ehrgeiz ein Theme gebastelt, welches komplett ohne: Weiterlesen »

Die Grünen und Web Zwo Null

27. März 2009

dum? Greg hatte hier schon ein paar inhaltliche Sachen zum Relaunch der Webseite der Grünen angesprochen, die technische Betrachtung kommt dort aber etwas zu kurz, je länger ich mir die Seite so anschaue. Hier isse etwas ausführlicher.

Nee, wenn ich ehrlich bin, schreib ich das nur wegen der Pointe noch einmal ausführlich, deswegen kommt die auch ausnahmsweise mal zuerst:

„Europa grüner machen!“
Rebecca Harms, europäische Spitzenkandidatin von BÜNDNIS 90/DIE GRÜNEN, über Botschaften und Ziele der grünen Europakampagne
Flash ist Pflicht!

(von hier)
Tada!

Ursache: hier ist der Wäppdisaigner mal wieder in die dämliche SWF-Object-Falle getappt, wenn man mich fragen würde, ich würde den Scheiss schlichtweg verbieten. Wozu braucht man das? Weil’s alle toll finden? Murx!

Weitere Probleme in Kurzform:

  • wenn man Javascript deaktiviert, hat man in der Headernavigation
    • nur 2 Teaser
    • lustige blätterbuttons, die nicht funktionieren
  • deaktiviert man Grafiken, bekommt man
    • eine grosse grüne Fläche mit vereinzelt ein paar Textbröckchen
    • zwei Links im leeren Raum, wovon der eine „back“ und der andere „next“ heisst. Was muss man sich – vorausgesetzt, man ist des englischen mächtig – auf einer Startseite unter „back“ vorstellen?
  • bei Skalierung ist es egal, ob man eine temporäre Textskalierung verwendet, oder sich wegen Einschränkungen der Sehfähigkeit eine minimale Schriftgrösse im Browser engestellt hat, je nach Skalierung verschwinden hier schon gern ab 25% im Nirvana.

Zusätzlich muss man noch anmerken, dass im Textmodus – der einzige Modus, in dem man sich die Seite halbwegs vernünftig anschauen kann – es keinen Menü-“überspringen“-Link gibt. Auf Deutsch: bei jedem Thema, was man sich anschauen möchte, darf man erst einmal Dillionen Zeilen Menü überscrollen.

Setzen, 5.

Spass mit Webforen (Homepage basteln)

6. März 2009

im Verlauf einer Diskussion:

ich weiß ja nicht in wie weit ich das basteln interpretieren soll aber www.hompage-baukasten.de ist sehr wahrscheinlich nicht die richtige Wahl.

Antwort des Delinquenten:

ja ja das weiss ich schon ich mach mit frontpage editor

Ich hab nicht gelacht 😀

Aus: Kompass Thema (board. gulli. com)

Pages:  1 2 3 4 ... 15 16