Das Hauptaugenmerk legte ich deshalb auf die optimale Suchmaschineneignung von Anfang an, somit also auch auf geeignete Texte und natürlich „sprechende“ URLs, Metatags und das Übliche. Das Design der Webseite interessiert die Suchmaschinen nicht und wird deshalb in diesem Fall erst als zweites erledigt, was problemlos möglich ist, da Inhalt und Design aufgrund der Verwendung der WordPress-Software klar voneinander getrennt sind. Ich gehe also gerade umgekehrt vor, wie man es üblicherweise macht um keinen Tag Platzierung im Suchmaschinenindex zu verlieren. Insofern sieht die Seite 24h nach dem Projektstart noch schrecklich aus, beinhaltet aber schon alles, was hoffentlich Google & Co. gefällt und zu einer schnellen und guten Platzierung führt, wenn jemand nach Veranstaltungsplakaten, Leuchtpapier-Plakate, Plakate Leuchtpapier, Festplakat, Volksfestplakat, plakate drucken oder ähnlichem sucht.

Bin gespannt wie sich die Suchmaschinenplatzierung entwickelt.

Ach ja — erreichbar ist die Seite übrigens unter der Adresse www.festplakate.de. Aber sehen sie sich besser NICHT an, außer Sie sind ein Spider von Google oder Bing. Dann rollen wir Ihnen natürlich durch diesen Link einen roten Teppich aus und freuen uns, wenn Sie jedes Wort von der neuen Seite gierig aufsaugen und indexieren. Menschliche Besucher warten besser noch ein paar Tage, außer sie wollen sich über ein unausgereiftes Design aufregen.

Nach der Deaktivierung des Moduls funktioniert der Dateiupload wieder einwandfrei.

Die Vorhersehbarkeit des Darstellungsergebnisses von Webseiten hängt von zahlreichen Faktoren ab und ist leider nur bedingt vorhersehbar. Darin unterscheiden sich Online-Publikationen ganz erheblich von Drucksachen. In der Druckvorstufe wurden Standardformate und spezielle Workflows entwickelt, um keine bösen Überraschungen in der Produktion zu erleben (siehe PDF/X1a, PDF/X3 etc.). Hält sich der Grafiker bzw. Druckdatenersteller an den vereinbarten Standard, verwendet er normierte, profilierte Farbangaben und berücksichtigt die Papiereigenschaften, kann er sich ziemlich sicher sein, am Ende auch das gewünschte Ergebnis auf Papier in Händen halten zu können. Und — ist die Drucksache erst mal produziert — wird auch wirklich jeder Betrachter das gleiche Druckergebnis in Händen halten können.

Im Onlinebereich verhält es sich (leider) völlig anders.

Einflussfaktoren für die Darstellung von Webseiten

Leider ist es keine Selbstverständlichkeit, dass eine Webseite beim Betrachter X auch nur annähernd so aussieht, wie beim Betrachter Y. Denn nicht jeder Betrachter betrachtet die vom Server ausgelieferte Seite unter gleichen Bedingungen. Einfluss auf das konkrete Darstellungsergebnis haben:

• Bildschirmauflösung des Betrachters
• Betriebssystem und installierte Schriften
• Browser, –version und –einstellungen
• Farbmanagement von Betriebssystem, Browser und nicht zuletzt die Farbtiefe und Bildschirmeinstellungen

Die Einhaltung von Webstandards wie XHTML 1.0 oder HTML 4.x bieten leider nur bedingt eine Gewähr für ein vorhersehbares Ergebnis, denn

• ältere Browser haben mit neueren Standards naturgemäß Probleme
• auch einige aktuelle Browser erfüllen nur teilweise die Standardanforderungen

Typografie im Web — Denkste!

Für professionelle Drucksachengestalter ist es eine Selbstverständlichkeit Elemente durch Tabulatoren oder optimierten Zeichenausgleich bündig auszurichten, den Zeilenumbruch durch eine Worttrennung zu optimieren, „typografische Anführungszeichen“ einzusetzen, zwischen Bindestrich und Halbgeviert zu unterscheiden etc. All dies wurde leider bis heute im www nicht einmal in den aktuellen Standards berücksichtigt. Es gibt zwar erfreuliche Ansätze hierzu, wie z.B. das auf dieser Webseite verwendete WordPress-Plugin wp-typography welches u.a. eine Silbentrennung und zumindest unterschiedliche Anführungs– und Schlusszeichen ermöglicht. (Nachtrag vom 20.8.09: Toll, dass nach dem heutigen Update und der Änderung der Einstellung der Anführungszeichen in „deutsch“ auch „richtige deutsche Anführungszeichen“ verwendet werden. Dieses empfehlenswerte Modul stellt einen Meilenstein für die Web-Typografie dar!). Aber letztlich können solche Hilfsmittel nur durch einen zusätzlichen Implementationsaufwand auf einer Webseite verwendet werden.

Der Weg aus dem Dilemma

Vor einigen Jahren meinten einige Designer, dass der beste Weg um eine einheitliche Darstellung von Webseiten zu gewährleisten darin bestünde die Seiten möglichst komplett als Bilder zu speichern und auszuliefern. Oft wurden die Webseiten aus mehreren Einzelbildern zusammengesetzt, um so z.B. das Bild für den Inhalt unabhängig von Kopf– oder Fußbereich zu wechseln — z.B. durch eine entsprechende Interaktion wie einen Menüklick des Benutzers. Diese zerschnittenen Einzelbilder wurden dann in einer Tabelle wieder zusammen gesetzt.
Diese „Lösung“ welche die Grundidee von Hypertext — und dabei handelt es sich schließlich beim www — ad absurdum führt, erregte die Gemüter nicht nur der Programmierer und derjenigen, die der Meinung waren eine Webseite würde in erster Linie Inhalt — also Texte und Links transportieren und eine Tabelle wäre zur tabellarischen Darstellung von Inhalten da. Auch bei gemäßigterer Interpretation ergaben sich ernsthafte Kritikpunkte:

1. Eine Webseite, die nur aus Bildern besteht ist weder für Suchmaschinen, noch für Menschen mit einem visuellen Handicap „sicht„bar
2. Eine Webseite, die aus Bildern aufgebaut ist, gibt eine fixe Größe in Pixel vor — unabhängig von der Bildschirmauflösung des Betrachters. Ob die Schrift also im Ergebnis 4mm groß auf dem Bildschirm erscheint, oder nur 1mm groß ist eben gerade nicht vorhersehbar, das Ziel der Designer folglich verfehlt.

Solche Pixelseiten sind erfreulicherweise mittlerweile kaum noch anzutreffen. Und auch Webseiten, die kompetente Autoren mit Werkzeugen wie Flash erstellt haben sind nicht mehr zwangsläufig „Pixelseiten“ sondern können durchaus kompatibel, barrierefrei und Suchmaschinenfreundlich sein.

Stattdessen hat sich in den letzten Jahren die Einsicht durchgesetzt, dass eine pixelidentische Darstellung von Webseiten unter allen Bedingungen nicht das Ziel sein sollte. Denn — von den oben bezeichneten Problemen dies zu erreichen einmal abgesehen — eleminiert man die Vorzüge, die man durch die Beteiligung zweier Seiten (dem Server der die Seiten generiert und ausliefert und dem Client mit Browser an dem sie betrachtet werden) an der Darstellung einer Webseite erreichen könnte.
Schließlich ist es doch gut und kein Problem, wenn z.B. ein kurzsichtiger Benutzer oder einer an einem sehr hoch auflösenden Bildschirm, bei dem ein Pixel folglich sehr klein ist, die Möglichkeit haben die Darstellung der Schrift im Browser zu vergrößern. Oder wenn ein Mobiltelefon mit einem sehr schmalen Display Inhalte in einer Spalte darstellt, die man auf dem PC in mehreren Spalten nebeneinander sieht. Das „Problem“ der unterschiedlichen Darstellung ist eigentlich nicht unbedingt eines, sondern kann zu einem Vorteil gereichen, wenn man die Möglichkeiten von XHTML 1.0 bzw. HTML4.x zu nutzen weiß.

Doch der Designer, der naturgemäß alles unter seiner Kontrolle haben möchte, (aber auch der technisch unbedarfte Kunde) hat damit oft ein Problem, schließlich führt z.B. eine Vergrößerung der Schrift zu veränderten Zeilenumbrüchen und einer Verkleinerung der Abstände zwischen der Schrift. Befindet sich die Schrift in einer fixen Spalte, oder vor Hintergrundgrafiken, z.B. im Menü, kann es dazu führen, dass die Schrift über die vorgesehenen Bereiche hinausragt.
Ein Meilenstein zur Lösung dieser Probleme war die Einführung der Skalierung von Bildern, die zunächst Opera, dann auch Firefox und mittlerweile auch der Internet Explorer (ab Version 7) eingeführt hat. Nun vergrößert und verkleinert der Benutzer über entsprechende Interaktion nicht nur den Text, sondern in gleichem Maße auch die Grafiken.

Browserweichen und angepasste Stylesheets einsetzen

Eine Möglichkeit die Darstellung einer Seite unter einer ganz bestimmten Umgebung zu beeinflussen, ist für genau diese Bedingung einen speziell hierfür konzipierten Inhalt auszuliefern. Ein häufig verwendeter Fall ist z.B. bei der Verwendung von PNG-Grafiken mit Alphakanal (für weiche Transparenzen) eine Spezialversion für den Internet-Explorer vor Version 7 auszuliefern, da der IE erst abVersion 7 PNG mit Alphakanal beherrscht.

Das Problem bei solchen Weichen ist, dass zunächst ganz genau ermittelt werden muss unter welchen Bedingungen eine abweichende Version ausgeliefert werden soll. Diese Bedingung muss sauber formuliert und ebenso sauber umgesetzt werden. Hätte man z.B. zu Zeiten, als es noch keinen Internet Explorer 7 gab eine PNG-Weiche programmiert, die für den Internet Explorer eine abweichende Version liefert, so wäre diese Umsetzung mit Einführung des Internet Explorers 7 überholt gewesen.

Man muss sich klar sein, dass jede Browserweiche einen zusätzlichen Implementations– und Testaufwand bedeutet. Folglich sollte man diesen Lösungsansatz nur im Ausnahmefall wählen und auf jeden Fall ausgiebig testen.

Fehler eliminieren

Mit Fehlern im html-Code wird von verschiedenen Browsern unterschiedlich umgegangen. Der eine Browser „rät“, was gemeint sein könnte, der andere ignoriert ein fehlerhaftes Element einfach. Wer eine einheitliche Darstellung von Webseiten erreichen möchte, sollte deshalb auf einen standardkonformen validierten Code wert legen, der möglichst keine Fehler aufweist. Dass dies in der Praxis meist nicht zu 100% erreicht werden kann sollte nicht dazu führen, dass man dieses Ziel aus den Augen verliert.

Moderne Standards nutzen und Workarounds minimieren

Idealerweise stellen alle modernen Browser eine Webseite die fehlerfreien Code enthält identisch dar. Von diesem Ziel ist man gar nicht mehr so weit entfernt. Aktuelle Versionen von Opera, Firefox und Internet Explorer beherrschen weitgehend die aktuellen W3C-Standards. Für welche Browser sich eine individuelle Anpassung und Optimierung lohnt ist immer individuell anhand der Zielgruppe, der Reichweite des Projektes und des damit einhergehenden Budgets sowie der zu erwartenden Quote an Nutzern zu entscheiden. Ob es sich lohnt für einen Browser, den 2% der Webseitenbesucher nutzen zu optimieren und evtl. einen workaround zu erstellen, das muss jeder für sich entscheiden. Heutzutage (Stand August 2009) nutzen bedauerlicherweise immer noch zwischen 5 und 10% der Webseitenbesucher (meiner Webseiten) den Internet Explorer in der Version 6. Diese nicht geringe Anzahl lässt einen Test und eine Anpassung für den IE 6 sinnvoll erscheinen.

Doch wie testet man die Darstellungsergebnisse mit verschiedenen Browsern. Die gängisten Browser und Systeme sollte man selbst auf einem Live-System testen, also z.B. Windows XP, Vista und Windows 7 mit Internet Explorer 7 und 8 sowie Firefox 3. Natürlich sollte man bei der Wahl seiner Testsysteme auch die Zielgruppe im Auge behalten. Eine Webseite, die sich mit OS X-Themen und Druckvorstufe beschäftigt, sollte auch für Mac-User verträglich sein, wohingegen das bei einer Schnäppchenjägerseite für gebrauchte Computerteile evtl. eher keine Rolle spielt. Um nicht einen ganzen Rechnerpark in die Ecke stellen zu müssen, empfiehlt es sich mit virtuellen Maschinen zu arbeiten. So kann z.B. eine Basisinstallation von Windows XP mit Internet Explorer in einer virtuellen Maschine ebenso gute Dienste leisten, wie ein Internet Explorer 5 in einer Windows 2000 VM.

So sieht die Seite blog.agentur-lindner.com in 34 verschiedenen Browsern aus

Doch egal wie viele PCs und VMs man in die Ecke stellt, irgendwann ist Schluss und manchmal ist es auch einfach zu aufwändig für eine schnelle Revalidierung Tests an mehreren Rechnern direkt durchzuführen. Die Alternative hierzu heißt www.browsershots.org. Dieser Webdienst liefert Bildschirmabbildungen der gewünschten Webseite unter fast allen Betriebssystemen und Browsern an. Selbst Exoten können hiermit getestet werden. Interessant ist auch die Möglichkeit eine bestimmte Bildschirmbreite oder Farbtiefe vorzugeben. Browsershots leitet die Anfrage an eine Vielzahl von Systeme mit unterschiedlichsten Browsern und Betriebssystemen weiter und erhält von diesen die jeweiligen Bilder der angefragten Webseite wieder zurück um sie dann an den Anfrager auszuliefern. Die Bilder können als PNG-Grafiken im Browser angesehen oder als ZIP-Archiv heruntergeladen werden. Eine geniale Sache! Jede Webseite sollte vor Abschluss der Arbeiten mit diesem System überprüft werden!

In Webseiten werden Bilder üblicherweise auf 3 Arten platziert:

1. links ausgerichtet mit rechts umfließenden Text
2. rechts ausgerichtet mit links umfließenden Text
3. Bild mittig ohne umfließenden Text

So gut wie nie benötigt man ein links oder rechts ausgerichtetes Bild OHNE umfließenden Text.

Wenn man eine Webseite „per Hand„erstellt, dann legt man am besten drei Styles für diese Zwecke an, also z.B. <img class=„left“ src=… >, <img class=„right“ src=…>, <img class=„center“ src=…>. Die Styles werden dann z.B. folgendermaßen definiert:

img.left{
	float: left;
	margin: 5px 13px 5px 0;
}

entsprechend für die rechts ausgerichteten Bilder:

img.right{
	float: right;
	margin: 5px 0px 5px 13px;
}

So erreicht man, dass zwischen Bild und Text ein Abstand von 13px erhalten bleibt, ein Bild, das am linken Rand ausgerichtet ist, aber nicht vom Rand weg gerückt wird.

In Joomla geht es leider nicht so einfach wie OHNE CMS. Das CMS macht uns das Leben schwer, indem es für Bilder nicht eine Klasse definiert, die man dann bequem in der Stylesheetdatei so formatieren kann, wie man es will, sondern Joomla verwendet statt dessen direkt die Formatierung <img style=„float:right“ …>.

Mir ist leider kein Weg bekannt, wie man Joomla dazu bewegen kann (ohne im Code zu hacken oder Erweiterungen zu installieren, die dann mehr Probleme mitbringen, als sie lösen) eine Möglichkeit zu bieten Bilder bündig am Seitenrand und mit Abstand zum umfließenden Text zu formatieren. Ich kann gar nicht glauben, dass es dafür keine „saubere“ Lösung gibt. Das Problem müsste doch jeder haben, der Joomla einsetzt. Wie kann es sein, dass es nur uns stört — oder haben wir eine ganz banale Lösung für dieses Problem einfach ÜBERSEHEN?

Wie macht ihr das?

• Trennung von Design und Inhalt
• moderne CSS-basierende Templates möglich
• Ãnderbarkeit von Inhalten nach kurzer Einarbeitung auch direkt durch den Kunden
• Einfache Templateerstellung und Anpassung
• Einfache und schnelle Installation
• Einfache Datensicherung
• Suchfunktion, Kontaktformular etc. verfügbar
• Suchmaschinenoptimierte URLs, title etc. ohne großen Aufwand möglich

Für meine kleinen Webprojekte ist ein CMS wie Typo3 viel zu umfangreich um damit effektiv zu arbeiten. Das CMS Joomla erfordert trotz seines gefälligen Backends einen wesentlich größeren Schulungsaufwand beim Kunden. Statische Webseiten sind nur noch selten eine sinnvolle Alternative.

In diesem Artikel geht es um Anpassungen mit denen man aus WordPress ein Mini-CMS zur Verwaltung überwiegend statischer Webseiten macht. Dabei wird besonderes Augenmerk gelegt auf:

1. Deaktivieren der Kommentarfunktion
2. Benutzerneuanmeldung abschalten
3. Einfügen statischer Seiten in ein Menü

1. Auf der Back-End-Seite ‚Einstellungen‘ -> ‚Diskussion’
   „Erlaube Besuchern Beiträge zu kommentieren.“ ausschalten bewirkt, dass unangemeldete Besucher keine Kommentare mehr posten können (nur noch angemeldete). Eins stört uns allerdings noch: Auf der Website steht unter jedem Beitrag „no comment“ oder „die Kommentarfunktion ist deaktiviert“. Also weg damit!Je nachdem welches Template eingesetzt wird, werden diese Bereiche an verschiedenen Stellen in verschiedenen Dateien zu finden sein. Wir finden heraus, mit welchen CSS-Klassen die „auszublendenden“ Elemente verknüpft sind. Dies geht am schnellsten mit dem Firefox-Plugin „Firebug“. Nun durchsuchen wir die CSS-Dateien unseres Templates nach genau diesen Selektoren. Dies geht am einfachsten, wenn wir das Verzeichnis des Templates nach den Selektoren durchsuchen, beispielsweise mit „InfoRapid SE“.
2. Wir blenden die Elemente aus indem wir ihnen ein {display:none;} geben.Ein Nachteil dieser Methode (gegenüber dem Entfernen bzw. Auskommentieren des zuständigen PHP-Code, der für die Ausgabe der Kommentarfunktion zuständig ist) ist, dass der Text zwar nicht mehr für den Benutzer sichtbar ist, es allerdings noch ausgegeben und an den Browser ausgeliefert wird.
   Weiterhin können also (nur noch) angemeldete Benutzer kommentieren. Dies hat allerdings keine Auswirkun,g wenn wir die Möglichkeit zur Anmeldung deaktivieren.Dies erfolgt auf der Back-End-Seite ‚Einstellungen‘ -> ‚Allgemein‘

   Unter dem Stichwort „Mitgliedschaft“ wird „Jeder kann sich registrieren“ AUSgeschalten
   und Benutzer müssen zum Kommentieren registriert und angemeldet sein EINgeschalten.

   => Nun können nur noch registrierte Benutzer kommentieren — und niemand kann sich neu registrieren.

3. Einfügen statischer Seiten in ein Menü
   Statische Seiten können über „Verwalten“ „Seiten“ erzeugt und in ihrer Reihenfolge, aber auch hierarchisch geordnet werden. Damit diese auch irgendwo angezeigt werden , muss im Template eine entsprechender Bereich eingebaut werden.
   Mit der Funktion .….….….… wird eine Liste der Menüspunkte erzeugt.
   Diese formatiert man durch die CSS-Datei .….….……

Interessante Erweiterungen und Plugins

1. Für das Kontaktformular: http://www.douglaskarr.com/projects/wp-contactform/
   siehe Artikel http://www.texto.de/texto/spamsichere-emails-kontaktform-plugin-deutsch/ und Verweis zu http://green-beast.com/blog/?page_id=136 — aber Achtung, darauf achten, dass das Teil kompatibel zur WP-Version ist!
2. WPG für eine Bildergalerie, siehe http://wordpress.org/extend/plugins/wpg2/

1. Mir eine Hilfe dabei sein, mich daran zu erinnern, wie ich etwas gemacht habe, soweit es sich nicht um private oder vertrauliche Informationen handelt.
2. Interessierten Kunden, Geschäftspartnern, Interessenten zu zeigen, was mich so beschäftigt, an welchen Projekten ich gerade arbeite und was schließlich daraus geworden ist.