Weltklasse Blindtextgenerator: Samuel L Ipsum

Blindtextgeneratoren sind eine praktische Sache, wenn man im Designprozess schnell mal ein bisschen Beispieltext braucht um dem Kunden zu zeigen, wie die Seite mit Text, Überschriften, etc aussieht. Hier kann man auf nette, harmlose Tools wie den http://www.blindtextgenerator.de/ zurückgreifen, bei dem man aus verschiednen Texten auswählen, sowie deren Länge beeinflussen kann.

Wenn man häufig mit solchen Texten arbeitet, kann das schnell langweilig werden. Abhilfe schafft hier der neue Blindtextgenerator “Samuel L. Ipsum”: http://slipsum.com, der Texte aus Filmzitaten á la Pulp Fiction von Samuel L. Jackson generiert! Da wird der Blindtext gleich etwas würziger! Zuerst wählt man aus, wie viele Absätze man gerne hätte, ob man auch Überschriften generieren möchte und ob man p-Tags haben will. Danach klicke man auf “Generate it Bitch” und schon erählt man seinen original Samuel L. Jackson Blindtext. Falls man einen neuen Text generieren möchte, kann man den alten mit dem Button “Clear that shit” löschen.

Slipsum Blindtextgenerator

Relaunch mit HTML5, CSS3 und responsive Layout

Endlich habe ich es geschafft meinem Blog ein neues Design zu verpassen! Natürlich sollten bei diesem Relaunch die modernsten Techniken zum Einsatz kommen. Das Ganze muss ja schließlich auch auf den diversen mobilen Geräten ordentlich aussehen!

Unter der Haube hat sich einiges getan, so basiert mein neues Theme zwar auf dem Wodpress Standard Theme “Twentyeleven“, allerdings in stark abgewandelter Form. Der Vorteil von Twenty Eleven ist, dass dieses schon von Haus aus massiv auf HTML5 setzt, was man an den vielen neuen, semantischen Tags erkennen kann. Außerdem bietet Twentyeleven ein responive Layout, also ein Layout das sich an die Bildschirmauflösung des Betrachters anpasst, damit auch Leute die die Website mit mobilen Geräten wie Smartphones oder Tablets ansurfen ein optimiertes Design erhalten. Optimiert heißt in diesem Fall, dass Elemente wie z.B. die Randspalte (Sidebar) eine komplett andere Position einnehmen.

Ich habe mir erlaubt das Theme fast ausschließlich mit CSS3 zu stylen. Das hat den Vorteil, dass ich so gut wie keine Grafiken einsetzen musste. Farbverläufe, runde Ecken, Schatten, Transparenz, eingebettete Schriften, und sogar das Muster im Hintergrund  lassen sich ganz ohne lästiges Zusammenschnipseln von zig Grafiken realisieren. Dadurch nimmt natürlich auch die Performance der Website enorm zu. Der Browser muss schließlich wesentlich weniger Requests ausführen, sprich weniger Dateien laden.

Natürlich hat das Ganze auch Nachteile, so wird ein Großteil der CSS3 Funktionen nicht von älteren Internet Explorer Versionen unterstützt und mit älter meine ich IE7 und IE8! Allerdings bin ich der Meinung, dass es völlig in Ordnung ist, wenn die Website in diesen Browsern halt ein bisschen anders aussieht. So lange keine ernsthaften Darstellungsfehler auftreten ist es doch völlig ok, wenn gewisse Elemente halt dann keine runden Ecken haben, oder Ähnliches.

Eine konzeptionelle Änderung meines neuen Layouts ist der Austausch der Kategorienavigation durch die Tagcloud als  zentrale Hauptnavigation. Ich denke, so gelangen meine Besucher schneller und intuitiver zu den Artikeln, die sie interessieren.

Desweiteren habe ich neue Plugins installiert, wie z.B. die “ähnlichen Artikel”. Dieses Plugin bietet dem Leser anhand der vergebenen Tags am Ende des Artikels eine Auswahl von Links zu Artikeln aus dem selben Themengebiet an.

Natürlich mussten auch sämtliche sozialen Netzwerke wieder mit eingebunden werden. Deshalb ist alles total connected mit Google +, Facebook, Twitter und diversen anderen Social Media Plattformen wie Tumblr oder Delicious.

Also, ich hoffe mein neues Design gefällt euch! So long and thanks for all the shoes!

Schriften kostenlos mit Google Webfonts einbetten

Wordle: google webfonts

Lange haben Webdesigner davon geträumt, nun ist es endlich wirklich möglich: Mit CSS3 können nun tatsächlich beliebige Schriftarten in die eigene Website eingebettet werden, ohne dass man auf Grafiken zurückgreifen muss. Die neue CSS Eigenschaft font-face erlaubt die Nutzung von Schriftarten selbst für Fließtext. Die Datei, bzw. die Dateien werden direkt auf dem Server abgelegt.

Allerdings gibt es natürlich wieder einige Hasenfüße: Zum einen unterstützen die verschiedenen Browser jeweils unterschiedliche Formate (ttf, otf, eot), zum anderen handelt es sich bei einem Großteil von Schriften um kommerzielle Schriften, die je nachdem wie weit sie verbreitet werden, auch entsprechend viel kosten (Zahlung bspw. nach Pageviews der Website).

Eine sehr günstige, weil kostenlose Alternative sind dagegen die Google Webfonts. Bei Google Webfonts handelt es sich um eine riesige Sammlung von kostenlosen Schriftarten, die mit intelligenten Filtern durchsucht werden können.

 

Google Webfonts

Google Webfonts

Der Schriftenkatalog lässt sich bspw. nach Serifen, nach Dicke, Zeichensatz oder einfach nach Stichwörtern durchsuchen. Die gefundenen Schriften können dann zu Kollektionen zusammengefasst und heruntergeladen werden, oder mittels “Quick use” über einen Link direkt von Google in die eigene Website geladen werden.

Google Webfonts Suche

Google Webfonts Suche

Die Einbettung läuft in 4 Schritten ab:

  1. Style auswählen: normal, fett, kursiv, etc.
  2. Zeichensatz auswählen: latin
  3. Link zur Schrift in den HTML Code der eigenen Website kopieren
  4. Die Schriftart im eigenen Stylesheet nutzen
Google Webfonts Embed

Google Webfonts Embed

 <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'> 
 font-family: 'Rochester', cursive; 

An meinem Blog seht ihr das Resultat. Titel und Fließtext sind beide von Google Webfonts eingebettet. Viel Spaß mit dem neuen Font Embedding!

Mountcrow in neuem Kleid mit WordPress 3, HTML5 und CSS3

Alles neu macht der Oktober! Und so habe ich mich mal daran gemacht das Design meines Blogs ein bisschen aufzupeppen. Dabei bin ich dann immer weiter in die neuesten Trends eingetaucht und bin zu dem Schluss gekommen, dass ich mein neues Theme am besten gleich mit HTML5 und CSS3 gestalten sollte. Wer jetzt behauptet, dass sei Blödsinn, weil noch nicht alle Browser diese neuen Technologien unterstützen, dem sei folgendes gesagt: Erstens gibt es Frameworks die es möglich machen, zweitens gibt es Browserweichen und drittens kann man geringe optische Abweichungen in Kauf nehmen. Um der Entwicklergemeinde den Rücken zu stärken unterstütze ich konsequenterweise den Internet Explorer 6 nicht mehr. Wenn sich selbst so Giganten wie Youtube leisten können ihn nicht mehr zu unterstützen, dann können wir das auch! Aber nun zum Eingemachten: Was habe ich alles eingebaut und wo habe ich es her?

Continue reading