Seht euch um und schaut euch unsere Beiträge an, für euch ist sicher was dabei,
für Themenanregungen und Ideen stehe ich gerne unter info@css-roots.de zur Verfügung.
Die Registrierung wurde gesperrt, möchtest du dich registrieren schreibe bitte eine E-Mail an info@css-roots.de
Verfasst am Juli 10, 2009 von admin in Kategorie News
Auf meiner suche nach einer neuen Inspiration zu einem neuen Header für CSS-Roots habe ich diese “kleine” Liste von schönen Headern auf sixrevisions.com gefunden, welche sehr kreativ und vor allem auch sehr aufwändig sind, aber auf jeden Fall durch Ihre einzigartigkeit überzeugen.
Des weiteren habe ich auf meinem Designblog auch noch einen Artikel um Thema Website Header Showcase veröffentlicht
Hier zwei kleine Beispiele:
Verfasst am November 15, 2008 von admin in Kategorie Das Grundgerüst
Der Start jeder Webseite sollte ein gut optimierter Header sein, jetzt fragt sich der eine oder andere vielleicht was ein Header ist. Ein Header ist eine Art Unsichtbare Kopfzeile im Kopf der Webseite. Im Header übergebt ihr dem Browser und den Suchmaschinen wichtige Informationen über eure Webseite. Hier ein Musterbeispiel für den Header aus unserem Code-Bereich:
Jetzt gehen wir einmal den Header Schritt für Schritt durch, zumindest die relevanten Teile.
Hier übergebt ihr den Webseiten den Title eurer Webseite, der Title wird eingeschlossen von einem öffnenden title-Element und einem schließendem /title-Element. Dieser Title wird auch in den Suchergebnissen bei Suchmaschinen wie Google als Überschrift angezeigt.
In diesem Bereich übergebt ihr dem Browser die Sprache die Ihr in eurer Website benutzt und verweist ihn an die entsprechende Zeichenkodierung, dies ist besonders wichtig damit alle Sonderzeichen einer Sprache erkannt werden, wie im Deutschen das ß,ä,ö,ü und viele weitere.
In der Description, was zu deutsch Beschreibung heist, übergebt ihr vorallem Suchmaschinen relevante Informationen über eure eigene Homepage, diese Beschreibung taucht zu meist auch bei den Suchmaschinen als Beschreibender Text unter der Überschrift auf. Ein kleiner Tipp von mir, die Description sollte maximal um die 160 Zeichen lang sein.
Die Keywords (Schlüsselwörter) übergeben an die Suchmaschinen Informationen in welcher Kategorie eure Homepage gehört. Aber Achtung, verwendet nicht mehr als etwa 6 Keywords, ich habe bereits Homepages gesehen die über 300 Keywords aufgewiesen haben und deshalb von den Suchmaschinen aus dem Index(Auflistung aller Webseiten in der jeweiligen Suchmaschine) entfernt wurden, da es sich hierbei um das sogenannte Keyword-stuffing handelt. Zu trennen sind die Keywords jeweils mit einem “;”.
Die restlichen Angaben sind mehr oder weniger freiwillig. Jetzt müsst ihr euren Header nur noch wieder schließen, und zwar mit einem “</head>”
In diesem Bereich bindet ihr euren Stylesheet ein. Kurz zur Erklärung für Einsteiger, ein Stylesheet ist eine externe Datei in der ihr das Aussehen eurer Homepage steuert, im Stylesheet werden Dinge wie Schriftgrößen, Schriftfarben, Textfluss, Größe bestimmter Bereiche und vieles mehr festgelegt. Der Sinn dieser Auslagerung ist einfach, ihr haltet eure Homepage übersichtlich und für Suchmaschinen auslesefreundlicher. Deshalb muss im Head-Bereich der Stylesheet für eure Seite verlinkt werden und zwar mit
Der nächste Schritt ist nun euer Favicon einzubinden, ein Favicon ist ein kleines Symbol was oben links neben der Adresszeile eingeblendet wird, ist zwar nicht zwingend Notwendig aber auf jeden Fall benutzerfreundlicher, da dieses Symbol auch im Lesezeichen oder im jeweiligen Tab eures Browsers abgebildet wird. Das Ganze sieht dann so aus:
Das war der erste Teil eures Grundgerüstes.
Verfasst am Oktober 10, 2008 von admin in Kategorie CSS-Codes
Hier eine kleine Vorlage um euch das einbinden des Headers etwas zu erleichtern:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS-Roots Headervorlage</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="content-language" content="de" /> <meta name="language" content="de" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="robots" content="index,follow" /> <meta name="description" content="Hallo Welt" /> <meta name="keywords" content="Keyword 1, Keyword 2, Keyword 3, Keyword 4" /> <meta name="copyright" content="CSS-Roots 2008" /> <meta name="author" content="CSS-Roots" /> <meta http-equiv="imagetoolbar" content="no" /> </head> <body> </body> </html>
Die funktionen Copyright und Author sind jedoch nicht zwingend notwendig. Der Operator robots hingegen wird gerne von Analyse Tools wie www.Seitwert.de gesehen ist aber für die Programmierung nicht zwingend erforderlich.
Ihr könnt auch noch ein Favicon mit einbinden in dem ihr wie folgt de Quellcode mit im Header einbaut.
<head> <title>CSS-Roots Headervorlage</title> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> <meta http-equiv=”content-language” content=”de” /> <meta name=”language” content=”de” /> <meta http-equiv=”Content-Style-Type” content=”text/css” /> <meta name=”robots” content=”index,follow” /> <meta name=”description” content=”Hallo Welt” /> <meta name=”keywords” content=”Keyword 1; Keyword 2;Keyword 3;Keyword 4;” /> <meta name=”copyright” content=”CSS-Roots 2008″ /> <meta name=”author” content=”CSS-Roots” /> <link href=”/favicon.ico” rel=”icon”/> <!– Favicon einbindung –> </head>
Wenn ihr Ein Favicon einbindet hat dies einige Vorteile für die Benutzer eurer Website. Das Favicon wird nämlich als Symbol in jedem Lesezeichen dass der User von eurer Seite gespeichert hat angezeigt, was es Ihm durch das Favicon erleichtert eure Seite schnell in seinen Ablagen wieder zu finden. Das Favicon kann, wenn ihr zum Beispiel euer Logo verwendet auch einen gewissen Wiedererkennungswert darstellen, was einen User an eure Seite stärker bindet. Desweiteren wird in den neuen Browesergenerationen euer Favicon auch schon in den Tabs angezeigt, was die Navigation für User wesentlicht vereinfacht. Wie ihr seht lohnt es sich ein Favicon einzubinden.
