Tipps zu SEO, Internet Marketing, Webdesign. Magento und IT-Themen

Zur erstellung & Optimierung von Webpages empfehle ich folgende 2 Plugins für den Firefox:

Html Validator- w3c validation

Page Speed (benötigt firebug plugin)

Foxy SEO Tool – some SEO Features

CSS Reloader – CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself.

FireQuery – a Firebug extension for jQuery development

SenSEO – SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

Eventbug – diese Extension erweitert Firebug um ein “Events”-Tab und soll die Arbeit mit Event-Handlers erleichtern.

SeoQuake SEO- SeoQuake ist eine SEO-Extension für Webmasters, die mit Suchmaschinenoptimierung (SEO) und Internet-Promotion von Webseiten zu tun haben. SeoQuake ermöglicht die Erfassung und Analyse vieler wichtigen SEO-Parameter von einem Internet-Projekt

User Agent Switcher – Switch Agent to Mobile, GoogleBot, etc

Um ein Text kursiv zu formatieren gibt es die Tags <i> und <em>. Gerade für die für die Suchmaschinen-Optimierung gibt es hier ein signifikanten Unterschied.

Bei der rein grafischen Ausgabe unterscheiden sich die beiden Tags nicht. Wird die Webseite allerdings maschinell ausgelesen (z.B. Screenreader oder Google-Bot), so wird der Unterschied deutlich. Der Tag <i> formatiert eine Textpassage lediglich kursiv. Bei der Benutzung eines Screenreaders  wird das formatierte Wort normal ausgesprochen. Bei der Verwendung des <em> Tags wird das Wort nicht nur kursiv formatiert, sondern von einem Screenreader auch speziell ausgesprochen.

Vor allem bei der Erstellung barrierefreier Webanwendungen spielt das <em> Tag eine besondere Rolle. Google stuft das <em> Tag besser ein als das <i> Tag. Daher ist die Empfehlung nach Möglichkeit nur <em> Tags innerhalb der Website zu verwenden.

Als Webdesigner und -Entwickler stößt man häufig über die Problematik große CSS-Dateien ordentlich zu strukturieren und zu dokumentieren, ggf. diese sinnvoll auf mehrere Dateien aufzuteilen.

Ohne eine vernünftige Struktur und Dokumentation kommt spätestens bei der Anpassung das böse Erwachen.

Vor allem bei Projekten an denen mehrere Personen arbeiten ist eine sinnvolle Struktur & Dokumentation unerlässlich.

Dieser Artikel soll daher Möglichkeiten der Strukturierung und Dokumentation von CSS Dateien aufzeigen.

Struktur

Für die Strukturierung gibt es mehrere Vorgehensweise, ich selbst habe mich nach jahrelanger Entwicklung dazu entschieden im ersten Schritt die CSS-Datei wie folgt in folgende Bereich zu gliedern:

• #header
  • #header_logo
  • #header_navigation
• #banner
• #main
  • #main_navigation
  • #main _content
  • #main _sidebar
• #footer
  • #footer_navigation
  • #footer_notice

Dokumentation

Im zweiten Schritt erstelle ich zwei Stylesheet-Dateien, welche ich layout.css und content.css nenne. In der layout.css befinden sich alle Definitionen zur Positionierung der einzelnen Elemente. Die Datei content.css enthält alle Definitionen zum gestalten der einzelnen Elemente. Als nächstes lege ich die Grundstruktur der CSS Dateien fest. Dabei schreibe ich die einzelnen Bereiche, welche oben aufgeführt wurden, in die CSS Datei. Die CSS Datei sieht nun wie folgt aus:

/***************************************
Author : Daniel Briegert <info@fly2mars-media.de>
Date : 2010.06.04
File : css/content.css
***************************************/

/* GENERAL ****************************/
/* HEADER *****************************/
/* HEADER_LOGO ************************/
/* HEADER_NAVIGATION ******************/
/* BANNER *****************************/
/* MAIN *******************************/
/* MAIN_CONTENT ***********************/
/* MAIN_NAVIGATION ********************/
/* MAIN _SIDEBAR **********************/
/* FOOTER *****************************/
/* FOOTER_NAVIGATION ******************/
/* FOOTER_NOTICE **********************/

Anschließend werden die einzelnen Bereiche mit den einzelnen Elementen vervollständigt.
Z.B.  für #main_content einen H1-Tag wird wie folgt definiert:

/* MAIN_CONTENT ************************/

#main_content h1 {
border-bottom: 1px solid;
color: blue;
font: 1.4m Verdana, arial;
}

Sinnvoll ist es die Definitionen innerhalb einer Sektion alphabetisch zu sortieren. Das Beispiel oben veranschaulicht diese Vorgehensweise.

Weitere Informationen

Fertige CSS Frameworks erleichtern die Erstellung. Interessant  ist unter anderem das Framework Blueprint CSS, welches ihr unter dem folgenden Link findet.

Link:

• Blueprint CSS

Könnt ihr ganz einfach auf der Webseite html5test.com

Hier eine Liste der kompletten HTML 5 Tags.

• 4* Diese Elemente sind definiert unter 4+
• 5* Diese Elemente sind in HTML 5 definiert
  

Ihr kennt sicher das Problem bei zu langen URLs oder Kommentaren welche bei Tabellen freien CSS-Layouts ggf. über den Rand hinaus gehen. Die Lösung ist folgender CSS-Code:

.break-word {
  word-wrap: break-word;
}

35 wirklich hilfreiche PHP Tutorials and Techniken für Entwickler. Themen sind neben PHP auch JQuery, MySQL, CSS und alles was das Web-Entwickler-Herz begehrt. Hier geht es zum Link.

Bestimmt für den ein oder anderen Einsteiger nützlich, deshalb wollen wir euch die Links nicht vorenthalten.

jQuery Tutorial für Anfänger

22 Handy HTML5 & CSS3 Tools, Resources And Guides

HTML5 & CSS3 werden nach und nach von den Browsern interpretiert. Viele neue Features ermöglichen Webentwicklern interessante Möglichkeiten auf die viele gewartet haben. Welche das sind und wie ihr die nutzen könnt findet ihr in den folgenden Cheat Sheets für CSS3 & HTML5:

CSS-Cheat-Sheet (PDF)

HTML5-Cheat-Sheet (PDF)