CSS Archive

Hilfreiche Tools zur Font Auswahl für dein Blog

Das Problem kennt jeder – 20 Tausend Fonts auf dem PC – aber welchen soll ich für mein Blog / Webseite nehmen?

thingybob-fonts-wordle
Das Wichtigste am Anfang – man sollte einen Font wählen der bei den meisten Benutzern dann auch angezeigt werden kann – dazu muss der genutzte Font beim Seitenbesucher auf dem PC, Mac oder Tablet vorhanden sein, ansonsten wird der Font einfach ersetzt.
Mit einigen Fonts ist man quasi immer auf der sicheren Seite da diese mit dem Betriebssystem mitkommen und somit auf den meisten Computern vorhanden sein sollten. Eine Übersicht über den Verbreitungsgrad der verschiedenen Fonts findet ihr bei Webmasterpro.de – einen dieser Fonts wird man auf vielen Webseiten auch antreffen.

Es gibt noch einige andere Möglichkeiten wie man seinen Wunschfont für die Webseite nutzen kann ohne dass der Font auch beim Seitenbesucher installiert ist, dazu zählen cufón oder Google Web Fonts. Ich selbst nutze hier auf der Seite Google Web Fonts um meine Wunschtypografie zu erhalten.

Ein Problem bleibt bestehen – die Auswahl an Fonts – hier den passenden zu finden ist gar nicht so einfach. Mit den folgenden Tools kann man sich die Arbeit ein wenig erleichtern:

1. Typetester.org

thingybob-typetester
Hier kann man verschiedene Fonts miteinander vergleichen. Dazu hat man eine Liste mit verbreiteten Fonts oder man wählt einen der auf dem PC installierten Fonts für den Vergleich aus. Größe, Farbe, Spacing – alle diese Werte lassen sich beeinflussen.

2. STC Fontbrowser

thingybob-stc-font-browser
Mit dem STC Fontbrowser kann man sich eine Übersicht über die lokal installieren Fonts verschaffen und mit einem VorschauText verschiedene Fonts probieren. Vergleichen der Fonts geht allerdings nicht.

3. Google Web Fonts Preview

thingybob-google-web-fonts-preview
Mit diesem Tool kann man sich zum einen einen Probetext mit den verschiedenen Google Fonts ansehen und das Aussehen (Größe, Schatten etc.) beeinflussen, zum anderen gibt es direkt dann einen Code den man zur Nutzung dieses Fonts auf seinen Webseiten einbinden kann -> sehr praktisch!

Für Chrome Browser gibt es dann noch ein richtig gutes Addon – mit diesem kann man auf jeder Webseite austesten wie verschiedene Google Fonts auf der Seite aussehen würden.
Mit dem Google Font Previewer für Chrome lässt sich somit auf deinem bestehen Blog OHNE Veränderungen am Blog selbst die verschiedenen Fonts ansehen und somit lässt sich am Besten entscheiden welcher Font zum Design passt.
So habe ich das auch auf thingybob.de gemacht und letzten Endes den Font gefunden welchen ich derzeit nutze. Ich hatte eine Liste von ca. 15 Fonts erstellt welche mir gut gefallen haben, diese habe ich dann ‘live’ mit dem Addon ausprobiert und bin am Ende bei ‘Muli’ gelandet, mir gefällts :)

Zum integrieren von Google Fonts in WordPress nutze ich ein Premium Plug-In – mit Font Uploader geht die Integration Kinderleicht von der Hand. Das Plug-In kann auch mit Fonts umgehen die nicht von Google kommen, man kann seine eigenen Fonts hochladen und im Blog einbinden, funktioniert sogar mit Internet Explorer :)

    • Alle .otf, .ttf und .eot Font Dateien werden unterstützt
    • 100% Browser kompatibel
    • Kontrolliere jeden Aspekt der Fonts auf deiner WordPress Installation
    • Größen Kontrolle für alle Elemente
    • Kompatibel mit WordPress 2.6+
    • Google WebFont Support
    • Leicht zu nutzen
    • Erweiterte Funktionen für Nutzer mit html / CSS Wissen

Na, wenn das nichts ist…. Das Plug-In kostet 10 USD für eine Installation, das sollte erschwinglich sein, besonders wenn man bedenkt wie viel Arbeit es ab nimmt.

So, nun viel Glück auf der Suche nach ‘deinem’ Font und viel Spaß beim Einbau in deine Webseite

Webmasterpro.de Fontübersicht | cufón | Google Web Fonts | Typetester.org | STC Fontbrowser | Font uploader

Antispambee

Über das WordPress PlugIn Antispambee habe ich ja schon mal geschrieben – zur Abwehr von Kommentarspam bin ich immer noch davon begeistert.

Heut mal ein kleines Bespiel eines geblockten Kommentars, besonders dämlich finde ich diesen Spammer schon alleine wegen der Textwahl, da sind andere Spammer doch deutlich intelligenter und deren Kommentare würden bei einer ‘normalen’ Freigabe schon mal durchrutschen können.

thingybob-antispambee-beispiel

Dieser Kommentar wurde geblockt wegen ‘CSS Hack’ – aber was beutet das, auf den ersten Blick wird das gar nicht klar. Aber wenn man den Kommentar editiert dann sieht man, dass hinter der e-Mail Adresse ein Code eingegeben ist:

[email protected] /* <![CDATA[ */ (fuXction(){try{var s,a,i,j,r,c,l=document.gXtElementById("__cf_email__");a=l.className;if(a){s=“;r=parsXInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.creatXTextNode(s);l.parentNode.replXceChild(s,l);}}catch(e){}})(); /* ]]> */

Ich kann nicht programmieren, aber das sieht nicht wirklich gut aus (damit das unschädlich wird habe ich eine Buchstaben ersetzt!)

Würde mich freuen wenn mir jemand erklären könnte was genau dieser Aufruf bewirken soll. Zurück zum Thema, AntispamBee hat den Kommentar erfolgreich geblockt – und dafür mal wieder Daumen hoch. Ich kann das nur jedem für sein Block empfehlen!

Antispambee

Microsoft stellt Internet Explorer 10 Preview vor (Download)

ielogoNach Google und Mozilla springt nun auch Microsoft auf den Zug der schnellen Browser Updates auf. Nur einen Monat nach Veröffentlichung von Internet Explorer 9 hat Microsoft auf der Mix11 Entwickler Konferenz in Las Vegas den Preview für Internet Explorer 10 vorgestellt.

Am Aussehen hat sich nichts geändert, die Preview Neuigkeiten beziehen sich, laut Dean Hachamovitch von Microsoft, lediglich auf die Geschwindigkeit der Hardware Beschleunigung sowie die Kompatibilität zu HTML5 und CSS3.

IE10 builds on full hardware acceleration and continues our focus on site-ready Web-standards

Laut Hachamovitch wird erst seit 3 Wochen am IE10 entwickelt, aber man hat scheinbar schon so gute Ergebnisse, dass man dieses Preview präsentiert. Das finde ich ehrlich gesagt etwas merkwürdig, IE9 wurde gerade in Bezug auf die Geschwindigkeit von Microsoft gelobt und nach 3 Wochen Entwicklung hat man dann schon den Turbo Schalter für die nächste Version gefunden? Merkwürdig….

Es wurde auch angekündigt, dass alle 8 bis 12 Wochen neue Preview releases veröffentlich werden sollen. Kann also nicht mehr lange dauern bis es auch von Microsoft verschiedene Release Channel für IE geben wird – gut kopiert ist halb gewonnen, obwohl ich das Verfahren mit den Channels sehr begrüße.

Internet Explorer 10 wird wohl nur noch auf Windows 7 laufen.

IE10 Preview Download

W3 Total Cache–WordPress Speedup

Wir alle wollen, dass unsere Webseiten schnell laden. Dazu gibt es für WordPress etliche Plug-Ins – z.B. verschiedene Cache Module, eins davon hatte ich schon einmal vorgestellt (Webo). Ich habe Webo lange genutzt und hatte sehr gute Ergebnisse bei PageSpeed und  YSlow erhalten. Dem gegenüber standen einige Probleme mit JavaScript und CSS. Hier kann man etliche Einstellungen verändern und somit lassen sich auch einige Probleme lösen. Mit WordPress 3.1 liefen meine Seiten dann mit Webo allerdings gar nicht mehr. Außerdem hinterließen die Webseiten von Webo irgendwie immer ein komisches Gefühl, kann ich nicht anders beschreiben und ist vermutlich auch ungerecht.

Ich habe mich dann auf die Suche nach einen anderen Cache System begeben und einige Ausprobiert. Unter anderem W3 Total Cache – dieses Plug-In hat etliche Einstellmöglichkeiten und wird von einer Menge WordPress Nutzer sehr empfohlen. Und da Millionen Fliegen bekanntlich nicht irren können…. :)

Auf jeden Fall läuft dieses Blog seit einigen Wochen mit W3 Total Cache und die Geschwindigkeit hat sich wirklich spürbar verbessert. Installiert wird das Plug-In wie gewohnt direkt aus WordPress heraus, danach erhält man ein umfangreiches Admin Widget für die Einstellungen.
Man kann verschiedene Cache Funktionen in W3 nutzen, Page Cache, Minify, Database Cache, Object Cache und Browser Cache lassen sich alle getrennt voneinander aktivieren und parametrieren. Selbst mit den Grundeinstellungen lassen sich gute Ergebnisse erreichen.

w3total_1

Zu den verschiedenen Cache Optionen lassen sich verschieden Cache Methoden auswählen, so kann man auf die Disk cachen, aber auch in den Speicher – oder in APC, eAccelerator, XCache oder Wincache – wenn diese denn auf dem Server installiert sind.
Ich nutze den Disk Cache und bin damit sehr zufrieden.

Derzeit habe ich die Module Page Cache, Object Cache, Minify und Browser Cache aktiviert, auf den Database Cache habe ich verzichtet (Grundlos so zu sagen). Dort habe ich einige der Parameter verändert, solange bis ich eine gute Ladezeit und somit Webseiten Performance erreicht. Es gibt aber noch einige Einstellungen für mich zum Experimentieren.

Die Ladezeit der Seiten ist von 10 Sekunden auf 2.5 Sekunden geschrumpft, die Nutzung des Browser Caches tut beim Seiten Reload ihr übriges.

W3 Total Cache bietet noch einige andere interessante Optionen, so kann man z.B. ein CDN über W3 einbinden und aktivieren, W3 bietet dann die Möglichkeit die Dateien für das CDN automatisch auf das CDN zu laden und bindet diese dann entsprechend in die Webseiten ein. Derzeit werden 8 verschiedene CDNs unterstützt, unter anderem Amazon S3 und Rackspace. Diese beiden habe ich ausprobiert, der Upload der Dateien war Anfangs etwas problematisch. Außerdem hat mich gestört, dass sämtliche Themes hochgeladen wurden und nicht nur das aktive. Dadurch wird etliches Zeug auf das CDN geladen was man sich sparen könnte. Nun ist das allerdings auch Mengenmäßig nicht so die Masse, dass es arg ins Geld gehen würde.

Eine weiter Option ist die Nutzung von Cloudflare – auch ein CDN und gleichzeitig ein Security Werkzeug. Ich habe mir Cloudflare angesehen und mich dann für mein Blog dazu entschlossen dieses zu nutzen, statt typischen CDN was ich für mich etwas oversized fand. Über Cloudflare berichte ich getrennt, ist eine interessante Angelegenheit.

Mein PageSpeed ist von 62 auf 77 von 100 gestiegen, YSlow ging auch hoch. Die genauen Werte werde ich im Cloudflare Post schreiben.

W3 Total Cache ist auch von mir auf jeden Fall eine Empfehlung wert, das Plug-In ist leicht ein zu richten und bietet wirklich viel dafür dass es nix kostet. Jeder WordPress Blogger sollte die Nutzung eines Cache Plug-Ins überlegen und W3 Total Cache auf jeden Fall in die engere Wahl ziehen.

Shortcodes Plug-In für dein WordPress Blog

Ich hatte ja schon einmal über Shortcodes für WordPress geschrieben, dabei ging es um die Anpassung der CSS Dateien deines WordPress Themes.

Aber es geht noch viel einfacher (und zugegebenermaßen) schicker und schneller mit dem WordPress Plug-In Special Text Boxes .

Mit diesem Plug-In wird es möglich sehr einfach solche Boxen in seine Posts ein zu binden, man kann unter etlichen Layouts wählen oder sein eigenes Layout erstellen, hier einige Beispiele:

shortcodes

Schick das Teil, kann was und wird hiermit empfohlen!

UPDATE: ich musste das Plug-In in meinem Blog deaktivieren da ich nach einiger Zeit der Nutzung in Verbindung mit WP Super Cache Darstellungs Probleme erhalten habe. Ich werde versuchen das zu untersuchen und raus zu finden wo das Problem liegt. Aus diesem Grund habe ich hier oben jetzt nur noch JPG von den Boxen. Kann gut sein, dass es bei euch keinerlei Probleme gibt, daher unbedingt testen wenn Ihr Shortcodes möchtet, denn das Plug-In macht echt eine gute Figur was das Aussehen und die Konfigurationsmöglichkeiten angeht!

Update 2: Ich habe vom Autor des Plug-Ins erfahren, dass es derzeit nicht mit Cache System zusammen arbeitet. Das soll sich aber ändern. Wenn du also kein Cache einsetzt, dann wirst du die oben genannten Probleme nicht merken!