Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Entspannt Lesen

Donnerstag, 18. Dezember 2014

Eva Papst führt, mit viel Liebe zum Detail, seit Jahren ihre Website aus-meiner-feder.at. Heute würden viele diese Website wohl als Blog bezeichnen; was die Sache nur zum Teil trifft.

Eva Papst, selbst blind, legt großen Wert darauf, dass ihre Leserschaft, keineswegs ausschließlich blinde oder sehbehinderte Menschen, auch optisch ansprechende und vor allem leicht zu lesende Seiten vorgesetzt bekommen. Seit einiger Zeit hat sie mir die Verantwortung für das Design ihrer Site übertragen, eine Aufgabe, die sie selbst aus nachvollziehbaren Gründen nicht erledigen kann.
Absolute Priorität hat dabei, dem Leser entspanntes Lesen zu ermöglichen, damit er sich auf die Inhalte konzentrieren kann. Im Zuge dieser Prioritätensetzung kam vor einiger Zeit neben dem Stil "dunkel", mit dem die Website ursprünglich online gegangen war, ein zweiter Seitenstil "hell" hinzu. Der dunkle Stil setzte helle Schrift auf dunklen Hintergrund, eine Darstellung, die zwar von manchen (auch sehbehinderten) Menschen als leichter lesbar empfunden wird, von anderen aber, vor allem bei längerem Lesen, als ermüdend.

Screenshot 1
Der Styleswitcher, das Auswahlmenü für den Seitenstil, auf der Desktop-Ansicht von "Aus meiner Feder"

Die zunehmende Nutzung mobiler Geräte macht natürlich auch vor Eva Papsts "Blog" nicht halt. Prinzipiell waren die Seiten zwar immer schon auch mit Smartphones zugänglich. Korrekte Technik — valides HTML und CSS — sorgten dafür. Aber eben nur prinzipiell. Das für Desktop-Monitore gestaltete Layout führte dazu, dass die Texte auf Smartphones nur mit Zoomen und ständigem Links-/Rechts-Scrollen lesbar waren.
Ein interessanter Aspekt in diesem Zusammenhang: Für Eva Papst selbst und ihre blinden Leser, die ein iPhone und den Screen Reader Voice Over benutzen, waren die Seiten auch auf dem iPhone ohne Einschränkungen lesbar und bedienbar. Dem Screen Reader ist es nämlich egal, wie winzig die Schrift auf dem Monitor dargestellt wird.

Nach dieser Vorrede: Ein mobiles Design musste her. Und es ist gut geworden, darf ich nicht ohne einen gewissen Stolz sagen.

Nachtrag: Eva Papst bloggt über die "Nachrüst-Aktion".

Screenshot 2
Die Startseite von Aus meiner Feder auf dem iPhone. Links oben der "Hamburger Button" zum Auf- und Zuklappen des Navigationsmenüs

Das Konzept des mobilen Layouts von "Aus meiner Feder" — für Interessierte

Vorbedingung:

Im Original steht die Navigation am Ende des Quelltextes. Diese Lösung ist für Screen Reader (und auch für Suchmaschinen) günstig, weil die Seiteninhalte, die Beiträge, zuerst gelesen werden. Im Layout wird diese Navigation dann in die rechte Spalte gesetzt, und ist gleichzeitig (und gleichwertig) mit dem Seiteninhalt auf dem Monitor sichtbar.
Ein solches zweispaltiges Layout ist für den kleinen Monitor eines Smartphones nicht brauchbar. Ebenso wenig geht es aber an, die Navigation erst am Ende der Seite zu zeigen (wo sie im Quelltext steht). Vielmehr sollte ein Aufklappmenü ("Hamburger Button") im Kopf jeder Seite Zugriff auf die Navigation ermöglichen.

Screenshot 3
Das "aufgeklappte" Navigationsmenü

änderung der Quelltext-Reihenfolge

Die änderung in der Reihenfolge der Seitenelemente ist mit RWD (Responsive Web Design), also mit CSS Media Queries allein, nicht möglich, sondern muss vor Auslieferung der Seiten auf dem Server erfolgen. Daher wird per PHP der User Agent abgefragt, und der Quelltext je nach User Agent entsprechend sortiert.

Entspannt Lesen

Die richtige Schriftgröße für entspanntes Lesen auf dem kleinen Smartphone-Monitor gibt es nicht. Zu unterschiedlich ist die Standard-Schriftgröße auf verschiedenen Geräten, zu unterschiedlich aber auch die Sehschärfe und das individuelle Empfinden der Leser. Wir haben uns also entschieden, eine Online-Schriftgrößeneinstellung einzubauen. Ein Feature, das auf Desktop-Browsern aus der Mode gekommen ist. Zu Recht. Beherrschen doch alle modernen Browser die Einstellung der Schriftgröße mittels Tastatur (Strg und +/-) bzw. mit dem Maus-Scrollrad. Eine vergleichbare Möglichkeit gibt es auf Smartphones aber nicht, und wenn, dann ist sie 1. weitestgehend unbekannt, und 2. nicht systemweit verfügbar.

Screenshot 4
Die Einstellung der Schriftgröße

NB: Die Schriftgrößenwahl wurde auch für das Desktop-Layout übernommen. Nach dem Motto: "Kann nicht schaden."



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE