In den letzten beiden Woche gingen zwei Webseiten ins Netz, die ich in Zusammenarbeit mit zwei Grafikern umgesetzt habe. Die beiden Grafiker waren dabei selbst die Kunden und sind nun die Betreiber der jeweiligen Webseite.

Bei beide Seiten arbeitet im Hintergrund WordPress, und wir realisierten die Darstellung der Projekte mit Hilfe der Möglichkeit eigene Post-Types zu definieren, und arbeiten an unterschiedlichen Stellen mit den Artikelbildern und benutzerdefinierten Feldern.

Aus- und Einblenden der Standardwerte

Wie in diesem Bild dargestellt sollte das Ergebnis aussehen. Im inaktiven Status sollte »Dein Name« im Feld stehen, und die Besucher ermutigen ebendiesen in das Feld zu tippen. Klickt die Besucherin dann auf das Feld, soll »Dein Name« verschwinden und der Weg zur Eingabe ihres Namens frei sein. Dieser Effekt wird normalerweise mit »onfocus« einem Bindeglied, das xhtml und Javascript verbindet, umgesetzt. Im Adminbereich des Plugins kann zwar ein Standardwert vergeben werden, Event-Handler jedoch funktionieren nicht, und es gibt auch keine Auswahlbox für diesen Effekt. Will man verhindern, dass die Besucher den Standardwert selbst entfernen müssen um Platz für ihre Angaben zu bekommen, muss eine Lösung gefunden werden.

Da auch an anderen Stellen der Seite jQuery zum Einsatz kam, entschied ich mich zu einer Lösung mit Hilfe dieser Javascript-Bibiliothek. Im Weblog von Matthias Schütz fand ich ein Tutorial, in dem er eine Lösung für das umschriebene Problem erklärte.

Da ich neben den input-Feldern (bspw. Name, E-Mail und Betreff) auch das textarea-Feld (das Eingabefeld für die eigentliche Nachricht) ansprechen wollte, den Button zum abschicken der Nachricht, der auch ein input-Feld ist, jedoch unberührt lassen musste, entschied ich mich dazu, den Feldern, die ich ansprechen wollte eine Klasse zu geben, in meinem Fall »eingabe«. Darauf hin passte ich den Code so an, dass alle Felder innerhalb des Kontaktformulares mit der Klasse »eingabe« angesprochen werden. Schließlich wollte ich auch, dass wenn ein Besucher seinen Namen wieder löscht, der Standardwert wieder erscheint. Dafür existiert der Event-Handler »onblur« und eine jQuery Anweisung ».blur«. Folgender jQuery-Code führt schließlich zum gewünschten Ergebnis:

→ jQuery Code als Text ein-/ausblenden

jQuery('.wpcf7-form .eingabe').each(function() {
var wert = jQuery(this).val();
jQuery(this)
.focus(function(){
if (jQuery(this).val() == wert) {
jQuery(this).val("");
}
})
.blur(function(){
if (jQuery(this).val() == "") {
jQuery(this).val(wert);
}
})
});

Wird in einer Seite sowieso jQuery verwendet, kann durch das Einfügen dieses Codes und das Vergeben einer entsprechenden Klasse, der gewünschte Umgang mit Standardwerten im Contact Form 7 Plugin erziehlt werden.

Wie ebenfalls im letzten Eintrag angedeutet, trägt jedoch auch eine Reduktion der den Text umgebenden Elemente zum besseren Erfassen der Inhalte bei. Aus diesem Grund habe ich in meinem anderen Blog in der Einzelartikelansicht auf die Seitenleisten verzichtet, und auch das Design dieses Blogs betont die Artikelspalte.

Der Reader in Safari 5

Vor einigen Tagen erschien die aktuelle Version des Browsers aus dem Hause Apple – Safari 5 – und eine Funktion des Browsers hat es mir besonders angetan: der Reader. Safari 5 ist der erste Browser, der mit einem besonderen Lesemodus geliefert wird. Sobald der Browser einen Artikel auf einer Seite erkennt (in diesem Blog beispielsweise in der Einzelartikelansicht) bietet der Browser die Möglichkeit den Artikel hervorgehoben darzustellen. Das sieht dann so aus, wie auf dem Bildschirmfoto über diesem Abschnitt.

Der Reader ist sowohl in der Mac- als auch in der Windowsversion enthalten. Er lässt sich entweder durch einen Klick auf das Readersymbol in der Adresszeile aktivieren, oder mit den entsprechenden Shortcuts:

• MAC: Apfel + Shift + R
• WIN: strg + Shift + R

Auf diese Weise aktiviert liegt die Konzentration auf dem Artikel. Die Darstellung erinnert stark an eine Druckversion der Webseite. Seitenleisten und viele andere Quellen der Ablenkungen ausgeblendet. Der Kontrast ist angenehm stark und die Schriftgröße gut zu lesen (diese lässt sich auch einfach anpassen). Darüber hinaus bietet der Reader die Möglichkeit den Artikel zu drucken oder ihn per E-Mail zu versenden.

Einige bevorzugen eine invertierte Darstellung von Text auf ihrem Bildschirm. Dazu gibt es leider keine, eigentlich Apple-typische einfache Oberfläche. Dennoch kann die Darstellung des Artikels im Reader angepasst werden. Dazu ist etwas CSS-Kenntnis notwendig, damit steht einer Anpassung jedoch nichts mehr im Wege.

Den Reader am Mac anpassen

Zunächst muss im Programme-Ordner das Safari-Icon ausgewählt werden. Nach einem Rechts-Klick auf das Symbol wird »Paketinhalt anzeigen« als Auswahlmöglichkeit angeboten. Nachdem der Paketinhalt angezeigt wird, den Ordner »Resources« auswählen und hier die Datei »Reader.html« suchen. Ich habe mir dann erst mal eine Sicherungskopie der Datei in einem anderen Ordner gespeichert, und empfehle dies natürlich auch gerne weiter. Diese Datei in einem Programm öffnen, das zur Bearbeitung von html-Dateien geeignet ist, und die gewünschten Stile verändern.

Wer beispielsweise die Textdarstellung invertieren möchte, der kann in den Zeilen 407 und 408 die Farbwerte für color und background-color austauschen. Aus Sicherheitsgründen werden die Rechte überprüft, und du solltest mit Adminrechten ausgestattet sein um Änderungen durchführen zu können.

Der Pfad zur Datei sieht so aus:
/Programme/Safari.app/Contents/Resources/Reader.html

Um die Änderungen zu betrachten musst du ein neues Safari-Fenster öffnen, den Artikel neu laden und dann den Reader aufrufen.

Den Reader unter Windows anpassen

Nachdem die Anpassung auf dem Mac so einfach war, wollte ich auch sehen wie es unter Windows geht. Und siehe da, hier geht es ähnlich einfach.

Im Explorer steure ich zunächst den Ordner auf der Festplatte an, in dem sich die Programme befinden (bei mir ist das C:). Hier wähle ich den Safari-Ordner aus, klicke auf Safari.resources und finde in diesem Ordner eine Datei mit dem Namen »Reader.html«. Von dieser Datei fertige ich eine Sicherungskopie an, und offne sie dann in einem html-Editor. Nun kann ich mir die Stile ansehen und die gewünschten Änderungen durchführen.

Der Pfad zur Datei sieht so aus:
/Programme/Safari/Safari.resources/Reader.html

Auch unter Windows öffne ich ein neues Fenster, lade den Artikel neu, aktiviere den Reader und sehe mir die Änderungen an.

_

Auf die Möglichkeit den Reader am Mac anzupassen, wurde ich dank dieses Artikels auf macosxhints.com aufmerksam. Dort finden sich, für Interessierte, auch Codeschnipsel.

Mit dem Relaunch im Herbst letzten Jahres setzte Zeit-Online ein deutliches Zeichen in diese Richtung. Während die gesamte Seite in Punkto Lesbarkeit deutlich optimiert wurde, fiel besonders in der Einzelansicht der Artikel das größere Schriftbild auf. Die Änderungen auf die ich mich hier berufe, liegen vor allem in der Verbindung von größerer Schrift und einem höheren Zeilenabstand. Auf einigen Blogs war ähnliches zu bemerken. Das kommende Standardtheme von WordPress, mit dem Namen 2010/Twenty Ten, nimmt diesen Trend ebenfalls auf.

Ein bewusst gewähltes größeres Schriftbild im Inhaltsbereich einer Webseite erhöht die Lesbarkeit der Artikel. Damit unterstreichen wir die Ausrichtung auf den angebotenen Text in unseren Artikeln, und sorgen dabei dafür, dass die Inhalte unserer Webseite von den Besucherinnen und Besuchern leicht erfasst werden können. Gleichzeitig gibt uns diese Gestaltungsform auch die Möglichkeit andere Elemente bewusst kleiner zu lassen, und somit die Schönheit des Kleinen und der Liebe zum Detail Ausdruck zu verleihen.

Während mancher Besucher vorher die gesamte Seite vergrößerte um den Text in einer leicht zu lesenden Größe auf seinem Bildschirm zu haben, bekommt er diesen nun schon in einer angenehmen Größe angeboten. Wird die gesamte Webseite vergrößert, bleiben zwar die Relationen bestehen, jedoch wird insgesamt alles größer. Durch das Angebot eines größeren und damit übersichtlichen Schriftbildes bleibt die Gestaltung der Nuancen in unserer Hand. Wir haben somit stärkeren Einfluss auf das Erscheinungsbild der Seite und setzen bewusst Schwerpunkte.

In meinem anderen Blog führte ich in diesem Zusammenhang ein kleines Experiment durch. Nachdem ich die Schriftgröße im Inhaltsbereich vor kurzem etwas angepasst hatte, wollte ich noch etwas mehr Fokus auf die jeweiligen Artikel legen. Dennoch wollte ich auf die unterschiedlichen Informationen in den Seitenleisten nicht verzichten. Daher entschied ich mich für die alleinige Darstellung des Artikels in der Einzelansicht und die Beibehaltung der Seitenleisten auf der Startseite und den anderen Seiten des Blogs.

In der Einzelansicht des Artikels wird nun der Inhalt der Seitenleisten nicht mehr aufgerufen, und durch die Verwendung einer bestimmten Klasse für den Seitenbereich, wird mittels Stylesheet die Seitenbreite angepasst. Auf diese Weise ist es den Besucherinnen und Besuchern der Seite möglich die Artikel übersichtlich präsentiert zu bekommen und gleichzeitig in einer ablenkungsarmen Atmosphäre zu lesen. Ähnlich der Konzentration auf Bilder oder Videos durch die Verwendung von Lightboxen, kann auf diese Weise auch Lesbarkeit von Artikel gesteigert werden.

»I want my sites to look Safari in Safari, and IE6 in IE6. I most definitely do not want my sites to look like IE6 in Safari.«
Sam Brown

In den verschiedenen Browsern werden Webseiten unterschiedlich dargestellt. Ein Extrembeispiel in diesem Zusammenhang ist sicherlich der Internet Explorer 6. Folgt man an dieser Stelle Sams Ansatz, dann ist ein Nutzer des Internet Explorer 6 ein gewisses Umfeld in seinem Computer gewohnt. Diesem Umfeld kann auch die Gestaltung einer Webseite entsprechen. Eine Safari-Nutzerin hingegen ist ein anderes Umfeld gewohnt. Interessanterweise unterstützen die beiden Exrembeispiele auch die entsprechenden Klassifikationen der Darstellung. So werden beispielsweise im Safari abgerundete Ecken und auch Schatten unterstützt, die von Netzgestalterinnen und Netzgestaltern mit Hilfe von CSS 3 definiert werden. Der Internet Explorer 6 dagegen stellt weder die Abrundungen noch den Schatten dar.

Ob diese Klassifikation in deinem Browser unterstützt wird, kannst du sehr einfach an folgendem Beispiel erkennen:

Wenn beide Blöcke gleich aussehen unterstützt dein Browser CSS 3. Im linken Block werden die abgerundeten Ecken und der Schatten mit den entsprechenden CSS 3 Klassifikationen angelegt. Der rechte Block dagegen ist einfach ein Screenshot der Darstellung im aktuellen Safari.

Sam plädiert dafür, diese Techniken einzusetzen. Wie bereits oben deutlich wurde, schlägt er vor, hier nicht von einem Minimalkonsens auszugehen, und daher nur die Klassifikationen zu verwenden, die von allen Browsern unterstützt werden. Die oben erwähnte Safari-Nutzerin ist abgerundete Ecken gewohnt, und freut sich wenn das gewohnte Umfeld auch auf Webseiten anzutreffen ist. Ein IE 6 Nutzer dagegen wird die abgerundeten Ecken wohl auch nicht vermissen. Wichtig ist es, dass die Inhalte für alle Zugänglich sind, wie diese jedoch dargestellt werden, darf sich unterscheiden. Hier besteht ein wichtiger Unterschied zwischen der Gestaltung von Drucksachen und von Webseiten. Die Drucksachen gelangen in der Endversion in die Hände der Betrachter. Die Darstellung von Webseiten hängt jedoch sowohl vom Betriebssystem als auch vom verwendeten Browser ab, und muss daher, nach Ansicht von Sam, nicht von allen in derselben Weise dargestellt werden.

Nutzt du CSS 3?

Im letzten Abschnitt seines Artikels plädiert Sam für die Nutzung der CSS 3 Klassifikationen. Mir geht es da ähnlich, da ich die Möglichkeiten von CSS 3 sehr schätze, und habe mich daher über sein Plädoyer gefreut. Mich interessiert eure Meinung zu dem angesprochenen Thema, und freue mich auf eure Kommentare…

Mit diesem kleinen Polaroid aus meinem Wohnzimmer wünsche ich frohe Weihnachten.

Vielen Dank für die gute Zusammenarbeit auf den unterschiedlichsten Ebenen.

Bevor ich nun eine kleine Weihnachtspause mache, wünsche ich euch eine angenehme Weihnachtszeit, neben guten Begegnungen auch etwas Ruhe, um neu Kraft zu schöpfen, für all das, was wir im kommenden Jahr erleben werden.

Den heutigen Beginn der Weltstillwoche nehme ich zum Anlass auf ein Projekt hinzuweisen das vor einiger Zeit online ging. Ich hatte die Gelegenheit eine Webseite für Andrea Schwager im Rahmen ihrer Geschäftsausstattung zu realisieren. Frau Schwager ist Kinderkrankenschwester und widmet sich in ihrer freiberuflichen Tätigkeit der Unterstützung von Eltern in der Anfangsphase mit ihren Kindern. Für weitere Informationen zu ihren Angeboten empfehle ich einen Besuch ihrer Seite…

Ich habe die Rollen und Bedürfnisse der Benutzer mal aus dem Eintrag der WordPress Dokumentation zusammengefasst. Auf einen Blick sieht das dann wie folgt aus:

• Administrator: hat alle Möglichkeiten.
• Herausgeber: kann Einträge und Seiten veröffentlichen und bearbeiten. Sowohl eigene Einträge und Seiten als auch die von anderen Benutzern können bearbeitet werden. Darüber hinaus können auch Kommentare und Links verwaltet werden. Natürlich können auch Dateien hochgeladen werden. Dem Herausgeber ist es auch möglich HTML und Javascript in den Einträgen, Seiten und Kommentaren zu verwenden.
• Autor: kann eigene Einträge und Seiten veröffentlichen und bearbeiten und Dateien hochladen.
• Mitarbeiter: kann eigene Einträge verfassen und bearbeiten, diese jedoch nicht veröffentlichen.
• Registrierter Leser: wie der Name schon sagt kann sie oder er nur lesen.

Auf folgendem Screenshot sind alle Befugnisse zu sehen und die Zuordnung zur jeweiligen Rolle ist grafisch umgesetzt:

Quelle: doku.wordpress-deutschland.org

Göldi nimmt in diesem Artikel einige Gedanken des Medienwissenschaftlers Marshall McLuhan auf und wendet sie auf einige Bereiche des Wandels an den die Medien momentan erleben. Er geht darin auf den Wandel ein, den die Zeitungs- und Musikbranche erleben. Bevor ich die Lektüre des Artikels in seiner Gänze empfehle folgen hier zwei Zitate. Zunächst ein kurzer Abschnitt in dem er den Satz „Das Medium ist die Botschaft“ für den Kontext des Artikels definiert:

Eine von McLuhans Kernthesen ist im knackigen Satz “Das Medium ist die Botschaft” zusammengefasst. Damit drückte McLuhan aus, dass die essentiellen Eigenschaften eines Mediums erheblich bestimmen, wie es von den Konsumenten wahrgenommen wird und damit auch, welche Inhalte darin funktionieren. Letztlich bestimmt das, welche Art von Denkprozessen und Emotionen durch ein Medium ausgelöst werden können, wie die Weltwahrnehmung der Konsumenten beeinflusst und damit langfristig die Gesellschaft verändert wird.

Darauf folgen einige Ausführungen darüber wie sich der Umgang des Lesers mit Inhalten in Zeitungen und im Internet unterscheidet. Meiner Ansicht nach befindet sich der Kernsatz des Artikels im nun folgenden Abschnitt:

Was sollen aber nun die Hersteller von Inhalten tun, wenn das Internet offensichtlich die Wertschätzung von Content so stark reduziert? Zunächst mal müssen sie verstehen, dass “das Internet” kein Medium ist, sondern eine Trägerinfrastruktur für verschiedenste Medien. Das Web funktioniert anders als iTunes und Twitter und Email. Jedes Teilmedium hat seine Charakteristiken, die entscheidend für kommerzielle Ausnutzung sein können. Traditionelle Medienunternehmen täten gut daran, bewusst Internet-basierte Medien zu fördern, die die Inhalte über die Interaktion priorisieren.

Verstehen wir das Internet nicht als Medium an sich, sondern als Trägerinfrastruktur für verschiedene Medien, dann liegt es an uns zu wählen auf welche Weise unsere Botschaft am Besten beim Besucher unserer Webseite ankommt. Die Webseite oder der verwendete Dienst wird daher nach seinen Charakteristiken entwickelt und ausgewählt, so dass eine Einheit zwischen Medium und Botschaft entsteht und auf diesem Wege meine Botschaft bei derjenigen und demjenigen ankommt, der nach mir, meinem Projekt oder meiner Firma sucht. Das ist keine neue Erkenntnis und dennoch eine, die es immer wieder neu zu bedenken gilt.

_
»Das Medium ist auch die kommerzielle Botschaft« von Andreas Göldi auf netzwertig.com

Nachdem eine ganze Reihe von Problemen mit der aktuellen Version 2.8 aufgetreten sind gab es einen ersten Eintrag mit Warnhinweisen auf dem Blog von WordPress-Deutschland. Heute wurden diese Warnhinweise durch die Empfehlung erweitert auf die Version 2.8.1 zu warten bevor ein Update durchgeführt wird. Ende dieser Woche soll bereits die korrigierte Version 2.8.1 in die Betaphase kommen, mit dem Erscheinen der finalen Version ist kurz darauf zu rechnen.