Schriftarten einbinden mit der Google Font Directory

Das Web ist bisher als eine „Typographische Wüste“ bekannt. Denn nur einige wenige Schriftarten (Fonts) können auf nahezu jedem Rechner angezeigt werden. Ein neuer Dienst von Google sorgt jedoch für Abhilfe!

Als Webdesigner hat man die Wahl: Entweder man greift zu den Standard-Fonts fürs Web (Arial, Verdana etc) oder man bindet den gewünschten Font als Grafik ein. Letzteres ist natürlich die schlechtere Variante, da einerseits die Ladezeit der Website negativ beeinflusst wird, und per Grafik eingebundene Textpassagen nicht von Google indexiert werden.

Doch endlich gibt es eine Lösung für dieses Problem.
Diese bietet Google mit dem Dienst „Google Font Directory„.
Von Cantarell über Josefin Standard light bis hin zum Klassiker „Yanone Kaffeesatz“ sind einige Schriftarten zur kostenlosen Nutzung dabei.

Zum Einbinden einmal auf die gewünschte Schriftart klicken, dann folgt ein weiterer Klick auf „Get the Code“.

Den oberen Code, beispielsweise

<link href=‘ http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz‚ rel=’stylesheet‘ type=’text/css‘>
bindet man in den <head> Bereich der Website ein.
Der untere Code
h1 { font-family: ‚Yanone Kaffeesatz‚, arial, serif; }
kommt in das CSS-Stylesheet.
In diesem Beispiel würden dann alle Überschriften, die per <h1></h1> deklariert werden, mit der Schriftart Yanone Kaffeesatz angezeigt.

Fertig sieht das ganze dann so aus:

Ich bin ein Text in Yanone Kaffeesatz!

SEO-Basics: Meta-Tags

Wenn eine Website eine gute Suchmaschinenplatzierung haben soll, dann müssen viele verschiedene Faktoren zusammenspielen. Hier möchte ich einen der grundlegensten Ranking-Faktoren vorstellen: die Meta-Tags.

Zuerst klären wir die Frage, was diese Meta-Tags sind, und was es damit auf sich hat.

Meta-Tags sind kurze Codeschnipsel, die Informationen über deine Website beinhalten. Diese werden im Head-Bereich deines HTML-Dokuments eingefügt, und sind für den Besucher deiner Website nicht sichtbar. Besonders für die Crawler von Google, die automatisiert Websites indexieren, sind diese Tags von hoher Bedeutung.

Die Tags vorgestellt – Welche braucht man, welche nicht?

<meta http-equiv=“language“ content=“deutsch, de“>

Mit diesem Tag teilt man sowohl dem Crawler als auch dem Browser mit, dass die Website Inhalt in deutscher Sprache enthält. Bei .de-Domains muss das nicht angegeben werden, bei ausländischen Domain-Endungen sollte man es auf jeden Fall einfügen. Schaden tut es in keinem Fall.

<meta name=“keywords“ content=“fernreise,reisen,jugendreisen,reiseveranstalter,urlaub“>

Mit diesem Tag teilt man dem Crawler die Suchbegriffe mit, bei denen die Website in den Suchergebnissen erscheinen soll. Die wichtigsten Suchbegriffe sollten in den Anfang, permanente Großschreibung und Widerholungen sollte man vermeiden. Außerdem sollte man höchstens 10 Keywords einfügen, da Google das ganze sonst als „Keyword-Spamming“ gewichtet. Ein unverzichtbares Tag, sollte auf jeden Fall eingefügt werden.

<meta name=“description“ content=“Beschreibung der Website“>

Das wohl wichtigste Tag, mit dem du die Beschreibung, die in den Suchmaschinen angezeigt werden soll, schreiben kannst. Deshalb ist es wichtig, nicht nur Schlüsselwörter (Keywords) zu schreiben, sondern einen zusammenhängenden Text mit maximal 255 Zeichen. Unverzichtbar!

<meta name=“revisit-after“ content=“1 days“>

Mit diesem Tag wird der Crawler angewiesen, deine Website nach einem Tag erneut zu besuchen. Heute nicht mehr so wichtig, da die meisten Crawler automatisch kommen. Aber es schadet nicht, auch diesen Meta-Tag einzufügen.

5 Programme die jeder Webdesigner benötigt – und kostenlose Alternativen

In diesem Artikel möchte ich euch die „Webdesign-Grundausstattung“ zeigen. Es gibt Fünf Programme, ohne die es fast unmöglich ist, zu Designen. Natürlich stelle ich auch kostenlose Alternativen vor.

1. Adobe Photoshop

Eine Website ohne eine einzige Grafik ist langweilig. Um Grafiken zu erstellen gibt es verschiedene Programme, Photoshop ist der Platzhirsch in diesem Bereich. Und das zurecht. Denn das Programm kommt mit mächtigen Werkzeugen zur Erstellung von Grafiken daher. So gibt es fast nichts, was unmöglich ist. Für den Preis von knapp 1000€ überlegt man sich die Anschaffung jedoch noch einmal.

Die kostenlose Alternative ist das OpenSource-Programm „GIMP„. Leider nicht ganz so leicht zu bedienen, jedoch lassen sich auch damit ganz hübsche Grafiken erstellen. Für den professionellen Einsatz jedoch eher ungeeignet.

2. Adobe Dreamweaver

Wer HTML schreiben will, der braucht natürlich einen Editor dafür. Ein weiteres Produkt aus dem Hause Adobe steht dafür als Referenzprodukt in der Branche: Adobe Dreamweaver. Auch hier ist der Anschaffungspreis mitknapp 550€ hoch, und besonders wenn man bedenkt, dass Dreamweaver keine wirklich besonderen Funktionen gegenüber der Konkurrenz bietet, sollte man sich die Anschaffung überlegen.

Die kostenlose Alternative heißt „Weaverslave„. Der Editor hat fast den gleichen Funktionsumfang wie Dreamweaver und kostet keinen Cent. Weitere Alternativen sind „Notepad ++ „ und PSPad, vielen Dank an Chrissie und Renner für den Hinweis.

3. Adobe Flash

Und noch eine Software von Adobe ist in Ihrem Bereich Marktführer. Für das Erstellen von Flash-Animationen eignet sich im Grunde genommen nur Adobe Flash, leider gibt es dazu keine ernstzunehmenden Alternativen. Der Preis ist mit 785€ sehr happig.

4. FileZilla

Eine Website muss natürlich ins Internet übertragen werden. Dazu eignet sich der FTP-Client FileZilla besonders gut. Hierzu benötigt man keine Alternative, da er eh schon kostenlos und OpenSource ist.

5. Microsoft Office Visio

Damit die Reihenfolge und Positionierung der einzelnen Menüpunkte logisch ist (-> Informationsarchitektur, IA), gibt es spezielle Programme, mit denen man die Informationen visualisieren kann. Das heißt, man kann die einzelnen Menüpunkte in dieser Software ordnen. Microsoft Office Visio eignet sich dazu sehr gut, ist mit knapp 700€ jedoch sehr teuer.

Als kostenlose Alternative bietet sich OpenOffice Draw an. Einfach aufgebaut, und etwas abgespeckt.

Alexa Traffic Ranking verbessern

Das Alexa Traffic Ranking sagt einiges über die Popularität einer Website aus. Umso niedriger das der Traffic Rank ist, um so besser. Anfangs missachtet, wird der Traffic Rank heute von vielen Werbeplanern eingesetzt, um zu sehen, wie populär eine Website ist.

Wir zeigen in diesem Artikel, wie Sie ihr Ranking bei alexa.com verbessern können.

Alexa zählt die Besucher unter anderem mit Hilfe der

Alexa Toolbar

Ein Websitebetreiber besucht seine Website sehr oft. Damit diese Besuche in die Wertung miteinfließen, und so ein besseres Ranking erzielt wird, bedarf es nur einer kleinen Toolbar.

Die Alexa Toolbar ist für Mozilla Firefox und den Microsoft Internet Explorer hier zum Download verfügbar. Wenn Sie nach Installation der Toolbar Ihre Website regelmäßig besuchen, dann werden Sie nach einigen Tagen die ersten Erfolge beobachten können.

Alexa Widget

Eine weitere Möglichkeit zum Verbessern des Rankings ist, das Alexa-Widget im eigenen Blog bzw in der eigenen Website zu installieren. Am besten aufgehoben ist es meiner Meinung nach in der Sidebar. Immer wenn ein Besucher auf das Widget klickt, werden diese Daten zum Erfassen von neuen Besuchern durch Alexa verwendet, und können somit das Ranking verbessern. Das ganze sieht dann so aus:

Es gibt auch verbotene Methoden, mit denen sich die gleichen Erfolge erzielen lassen. Jedoch will ich bei den „richtigen“ Methoden bleiben.