Zum Inhalt springen

Relaunch - Die Änderungen

Wie versprochen gibt es nachfolgend eine kleine Übersicht über all die Änderungen, die mit dem Relaunch und somit dem neuen Template auf “Nur ein Blog” einhergehen.

Das Äußere

Die augenfälligste Änderung ist wohl das Bild auf der rechten Seite. Nun, ich betreibe mein Blog nicht anonym und so soll/kann sich jedeR gleich beim Einstieg ein Bild vom Betreiber machen. Die Lösung als Polaroid kam von Matthias, der dieses Template hier realisierte.

Die Aufteilung - links der Text/Artikelteil, rechts die Seitenleiste mit zusätzlichen “Features” wurde beibehalten. Was man vorerst nicht sieht ist, dass ich im Fuss des Blogs auch eine “Seitenleiste” einrichten kann (über die Verwaltungsoberfläche von Serendipity) und dort ebenfalls Plugins zur Anwendung kommen können. Denkbar wäre z.B. eine Anzeige meines letzten Fotos in Flickr, meine letzten Links in del.icio.us,… und somit eine Anbindung an mein restliches Web 2.0 Leben. Das kann ruhig ganz unten stehen, da es für die Bedienung des Blogs nicht von Bedeutung ist.

Apropos Bedienung. Ganz oben finden sich “noch” zwei Sprungmarken zum Inhalt und zur Navigation. Deren Bedeutung erkläre ich etwas später.

Artikel

Der jeweilige Artikel ist nunmehr von zwei grauen Balken begrenzt. Der obere enthält die (klickbare) Überschrift und der untere eine Vielzahl von weiteren Informationen. Damit sollte die Abgrenzung von Inhalt und BenutzerInnenführung klarer sein und sich auch die einzelnen Artikel besser voneinander trennen.

In Richtung Barrierefreiheit

Hauptgrund für die Umstellung war aber, die Erkenntnisse von Martin im Rahmen des BarCamps Vienna in Änderungen umzusetzen und das Blog barriereärmer zu machen. Daher müsste diese Überschrift eigentlich “Das Nur ein Blog Accessibility Projekt - Teil 8” heissen.

Gehen wir mal diese Punkte durch. Ich beschreibe sie mal wieder etwas laienhafter. Matthias wird in seinem Blog sicherlich auch noch ein paar Anmerkungen dazu machen.

Sprungmarken

werden auch “Skiplinks” genannt und dienen dazu, dass Menschen, die den Browser per Tastatur bedienen raschest auf die wichtigsten Stellen der Website gelangen ohne sich durch jeden anderen Link auf der Website durchbewegen zu müssen.

In der Regel werden Sprungmarken unsichtbar gesetzt. Entweder erkennt sie dann ein Screen Reader oder sie werden erst dann sichtbar, wenn man mit tippen der Tabulatortaste bei ihnen vorbei kommt. In Nur ein Blog haben wir vorerst eine sichtbare Variante verwendet. So finden sich ganz oben im Blog die Reiter/Sprungmarken “Zum Inhalt springen” und “Zur Navigation springen”.

Es gab schon den Hinweis, dass das eventuell für manch sehende Menschen verwirrend sei. Daher gleich mal die Frage: stört das? Sollen wir die Sprungmarken auf unsichtbar schalten?

Ergänzend dazu hat Matthias noch bei jeden Eintrag einer Link “Zum Seitenanfang” eingefügt sowie auch ganz am Ende des Blogs. Ob das wirklich notwendig ist, ist wahrscheinlich eine Streitfrage und hängt von der individuellen Nutzung meiner LeserInnen ab. Aber schaden wird es wohl nicht.

Suche

Auch die Suche wurde überarbeitet. Sie findet sich nun im “Kopf” des Blogs und ist somit rasch per Tastatureingabe erreichbar. Das Suchfeld sollte nun auch richtig ausgezeichnet sein, sodass auch Screen Reader dieses erkennen und korrekt behandeln können. Weiteres gibt es einen eigenen Absendebutton. Das ist wichtig, da Screen Reader BenutzerInnen keine Entertaste in einem Feld verwenden können - diese, wie im Video von Martin ersichtlich, führt immer nur zu einer Eingabemaske des Screen Reader.

Schriftvergrößerung

Das hat schon im alten Layout funktioniert und tut es jetzt noch “besser”. Das führt uns gleich zum Thema

Skalierung

Wie schon erwähnt, verwendet Matthias nunmehr ein elastisches Layout, dass einerseits eine Mindestbreite für das Blog vorsieht, bei Schriftgrößenänderung das Blog bis auf Bildschirmgröße verbreitet und ab dann nur mehr die Schrift vergrößert. Das hat den Vorteil, dass größere Schriften nicht gleich dazu führen, dass man nur mehr ein paar Zeichen pro Zeile sehen sind. Andererseits kommt es nicht dazu, dass man auch bei recht großen Schriftarten horizontal scrollen muss.

Überschriften

Ein Thema über das hier schon einiges diskutiert wurde - siehe auch den damaligen Gastbeitrag von Kerstin Probiesch. Ich bin nunmehr dabei geblieben, dass eine h1 (also Überschrift erster Ordnung) der jeweiligen Artikelüberschrift zugeordnet wird.

Bildbeschriftungen

Es liegt natürlich an mir, dass ich konsequent Bilder beschrifte. Interessant war die Diskussion mit Eric, der uns darauf hinwies, dass natürlich auch die XML-Icons beschriftet werden müssen, da sie ja kein Schmuckgrafik sind sondern auf einen RSS Feed hinweisen.

Sprachauszeichnung

Hier bin ich selbst noch nicht konsequent genug in meinen Texten. Zwei Änderungen kamen aber nunmehr hinzu. Der Fuß von “Nur ein Blog” enthält einen Hinweis auf die Blog Engine, den Template Autor etc. und dies alles in englischer Sprache. Vorerst darauf vergessen, haben wir gestern die Sprachauszeichnung für diesen Bereich nachgeholt.

Eine überraschend erfreuliche Erkenntnis hatte ich gestern bezüglich Serendipity. Das Creative Commons Logo ist mittels einer HTML-Box realisiert. Das ist ein Plugin, dass jeden HTML-Code aufnimmt, den man möchte. Die Box besteht in der Verwaltungsoberfläche von S9y aus dem Feld für die Überschrift und ein weiteres Feld für den Inhalt. Was oft nicht üblich ist: Auch im Feld für die Überschrift kann ich HTML-Code eingeben und somit die Überschrift “Creative Commons” als englischsprachigen Text auszeichnen.

Plugins - oder ein langwieriger Weg

Noch gibt es einige kleinere Barrieren im Blog. Dies liegt daran, dass einige Plugins nicht ganz auf ein sauberes Layout schauen. Auch das gestrige Problem einer falschen Darstellung im Internet Explorer lag genau an dieser Tatsache. Das lässt sich bisher über das Zentraltemplate nur beschränkt beeinflussen. In Zukunft könnte es bei Serendipity aber hierzu zu Verbesserungen kommen.

Wie geht es weiter?

Das hängt auch von euch ab. Etwaige Kommentare, Feedback, Kritik werde ich aufnehmen, eventuell zur Diskussion stellen und schauen, wo und ob das Template noch optimiert werden kann. Insbesondere über Hinweise zu Fehlern oder Problemen wäre ich dankbar.

Ansonsten wird jetzt mal im Hintergrund gewerkelt. Denn es gilt mit einigen Plugin Autoren Kontakt aufzunehmen, sodass auch sie Änderungen vornehmen, die in Richtung Barrierearmut und modernen Webdesignstandards gehen.

Das “Nur ein Blog Accessibility Projekt” geht somit auf alle Fälle weiter…

Trackbacks

Trackback-URL für diesen Eintrag

Nur ein Blog : Der Relaunch - Tag 3

"Der Relaunch - Tag 3" vollständig lesen
In den letzten drei Tagen - seit dem Relaunch von "Nur ein Blog" am Freitag - hat sich einiges getan. Es gab etliche Kommentare, Anregungen und Tipps - siehe z.B. die Kommentare im Beitrag über die Änderungen. Einiges davon wurde schon umgesetzt. So ka

YellowLeds Weblog : YL 102

"YL 102" vollständig lesen
Ich finde ja, als Template-Gestalter hat man das Recht und die Pflicht, seinem Blog alle paar Monate ein neues Kleidchen anzuziehen. Das wäre hiermit dann erledigt, auch wenn hier natürlich nach wie vor Baustelle ist.Das neue Template wird, sollte es eine

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Matthias Mees :

Voll am Thema vorbei, dennoch wichtig: Ich wäre echt froh, wenn ich die Domain matthias.de bekommen hätte - leider ist dem nicht so, der Link zu meinem Blog ist somit flsahc und führt zudem ins Leere :-)

(Es muss http://matthias.yellowled.de heißen.)

Eric Eggert :

Noch eine Anmerkung: Der Header sollte verlinkt sein, ich wollte auf die Startseite und hab erst gar nicht realisiert, dass nix passiert…

Christoph :

Wie intensiv wird eigentlich Deine "Hilfe"-Seite frequentiert ? Gefällt mir gut, aber wie oft wird die Hilfe von Deinen Besuchern eigentlich in Anspruch genommen ? Sidebar mir Suche und Foto ist sehr schön gelöst. Auf den verlinkten Header hab’ ich eben auch ganz automatisch spekuliert, ist aber bei fehlender "Funktion" auch nicht tragisch.

Robert Lender :

Gute Frage. Die Nutzungsfrequenz der Hilfeseiten versuche ich mal herauszufinden. Die Headerfrage werde ich mit Matthias abklären.

Matthias Mees :

Am verlinkten Header kaue ich schon seit Eric Kommentar - eigentlich finde ich ja, das »Startseite« direkt darunter ist nicht zu übersehen ;-)

Die Frage ist: Ist dieser Reflex »Klick auf den Header führt zur Startseite« etwas blogtypisches, etwas webseitentypisches? Kommen darauf alle Besucher dieser Seite oder nur die netzaffinen?

(Ganz davon abgesehen, dass es unauffällig nachzurüsten ist und auch weder weh tut noch schadet.)

Robert Lender :

Gute Frage. Oft findet sich oben Links ein Logo etc. und da kenne ich etliche - nicht so webaffine - Menschen, die dort draufklicken um wieder auf die Startseite zu gelangen. In diesem Sinne würde ich eine solche Funktionalität - unauffällig nachgerüstet ;-) - wenn geht begrüßen.

Matthias Mees :

Dann pack es doch einfach mit auf die ToDo-Liste, es ist gar kein Problem. Die select-Boxen im Kommentarformular bitte auch mit aufschreiben, da stimmt die Darstellung zumindest in Firefox auch nicht ganz.

Beate Firlinger :

Ist schick geworden, das neue Kleid von Nur ein Blog. Und ich finde es wirklich super, wie ihr das Accessibility Projekt in die Tat umsetzt. Zum Header würde ich auch sagen: unbedingt als Startknopf verwenden und verlinken. Was mir noch aufgefallen ist, gerade bei diesem Beitrag: Beim Klick auf "Relaunch - Die Änderungen vollständig lesen" verschwindet der Header. Der sollte aber immmer oben fix bleiben, oder? Weil sonst verliert mensch die Orientierung. Das erging mir auch so bei der Sprungmarke "Zum Inhalt springen". Da ist der Header dann auch weg und das verwirrt schon. Ich würde daher, so wie es jetzt gemacht ist, die Skiplinks auf unsichtbar setzen. Noch eine Idee zur Übersichtlichkeit: Vielleicht solltet ihr als sekundäre Navigation eine Breadcrumb Navigation anbieten, die den NutzerInnen immer den aktuellen Standort innerhalb der Seitenstruktur anzeigt. Fände ich praktisch, soferne das machbar ist.

Robert Lender :

Danke, es ist spannend so gemeinsam daran zu werken, immer wieder etwas Neues zu lernen und auch zu sehen, was es alles für Kanten und Ösen gibt… "Nur ein Blog" ist jetzt - danke Matthias - schon anklickbar. Hmm, Sprungmarken sind doch zum anspringen dar, dass dann z.B. gescrollt wird und dann der Header nicht mehr zu sehen ist, ist doch verständlich - oder doch nicht? Dass beim anklicken der Überschrift die Volltextansicht kommt und gleich zur Überschrift gescrollt wird ist vielleicht wirklich missverständlich. Werde mal darüber nachdenken. Matthias müsste mir aber auch noch sagen, ob da überhaupt adhoc eine Lösung möglich wäre. Prinzipiell sind dies aber Fragen, die wahrscheinlich unterschiedliche Antworten bzw. Meinungen ergeben. Daher würde ich so etwas noch ausführlicher diskutieren. Ebenso die Frage der (un)sichtbaren Sprungmarken. Da kommen schon die ersten Feedbacks. Breadcrumbs klingen interessant, wie das bei einem Blog machbar ist, müsste ich mir ebenfalls überlegen.

Matthias Mees :

Der Inhalt ist für mich in einem Blog die Eintragsspalte, sowohl in der Einzelansicht eines Eintrages als auch auf der Übersichtsseite. Ehrlich gesagt erschließt sich mir auch nicht, wozu man Sprungmarken bräuchte, wenn die auf den Header linken würden, der in der Seitenstruktur direkt auf die Sprungmarken folgt ..?

Der »vollständig lesen«-Link ist meines Erachtens letztlich ei Übersetzungfehler. Im Englischen hieße das »continue reading …«, also »Den Artikel blafasel weiterlesen« - damit wäre meiner Ansicht nach die Sprunkmarke im Text korrekt, denn sie springt ja genau dorthin, wo der Text von der Übersichtsseite fortgesetzt wird.

Eine Breadcrumb-Navigation (auch als »Ariadnefaden« bekannt) ist im Prinzip eine feine Sache, an der ich mich in einem s9y-Template auch schon mal versucht habe - allerdings erfolglos. Ich denke, das ist mehr etwas Langfristiges, möglicherweise erfordert es auch ein neues Plugin. Mal sehen.

Robert Lender :

Ich kann es nicht oft genug schreiben: Das Lob gebührt insbesondere Matthias für seine Arbeit am Template. Ah, Lob rinnt wie Öl :-)

Kommentar schreiben

Markdown-Formatierung erlaubt
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
tweetbackcheck