Der vierte und letzte Teil meiner Webdesign-Artikel umfasst nun einige kurze Tipps und Hinweise, um die Kompatibilität zu erhöhen und die Seite auch für Suchmaschinen zu optimieren.
Es gibt eine ganze Reihe von Generatoren, welche einem die Arbeit abnehmen den Code der Meta-Tags selbst zu erstellen. Ich liste hier mal die wichtigsten Angaben auf, insbesonders im Hinblick auf die Suchmaschinen Optimierung.
<meta name=”description” content=”Hier muss die Beschreibung rein” />
<meta name=”keywords” content=”schlüsselwörter,mit,komma,trennen” />
<meta name=”robots” content=”index,follow” />
<meta name=”robots” content=”noodp” />
<meta name=”revisit-after” content=”2 days” />
<meta name=”author” content=”Autor” />
Generatoren:
http://www.homepage-buttons.de/tools/meta-tag-generator.html
http://www.dfdsjumbo.com/seo-tools/meta_tag_generator.html
Hinweis:
Um bei Suchmaschinen alle Seiten für die Indizierung zu optimieren, sollte jede Seite einen eigenen eindeutigen Titel-Tag und Keywords/Description verwenden. Wordpress und viele andere Script-Plattformen unterstützen dies bereits.
Zum einen sollte man bei der Einbindung der CSS-Datei das Attribut media=”screen” mit einsetzen. Hiermit werden alle Browserspezifischen CSS Formatierungen, welche allein bei der Anzeige verwendet werden, durch das eigene CSS überschrieben. Das kann schonmal für manche Kompatibilität hilfreich sein.
Da der InternetExplorer 7 noch sehr weit verbreitet ist muss man als Entwickler hierauf noch rücksicht nehmen, auch wenn Firefox bzw. Opera alles auch schön anzeigen können.
Es entstehen immer Unterschiede bei CSS formatierten Elementen zwischen den Browsern. Z.B. wenn man eine Unordered List (ul-Tag) als horizontales Menü einsetzt. Oder wenn man viele Elemente mit Padding zu positionieren versucht. Hier sollte man darauf achten, dass es hilfreich sein könnte bei der Positionierung auf ein zusätzliches DIV-Element zurückzugreifen.
Horizontales zentrieren:
Horizontales zentrieren mit Position absolute:
#box{
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px; /* halbe Breite der Box */
}>
Horizontal und Vertikal zentrieren mit fester Größe:
#box {
position:absolute;
height:400px;
width:500px;
margin:-200px 0px 0px -250px; /* Halbe Höhe, Breite, nach Oben u. Links */
top: 50%;
left: 50%;
overflow: auto;
}
Beispiel für einen Footerbereich immer am Browserboden:
http://ryanfait.com/sticky-footer/
Es gibt im Netz eine unzahl an CSS Layout Beispielen. Nicht alle sind Gut und nicht alle sind für das gewünschte Layout in der Beispiel-Variante einsetzbar. Hier hilft es häufig einfach mal zu experimentieren.
Einen Kommentar schreiben