Sprung zum Inhalt [/]

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

Der TBL-Kommunikator

Samstag, 23. Mai 2015

Ein spannendes neues Projekt:

Der TBL-Kommunikator ermöglicht die asynchrone elektronische Kommunikation mit taubblinden oder hörsehbehinderten Menschen. Asynchron bedeutet, dass Schreib- und Lesegeschwindigkeit entkoppelt sind. Der/die taubblinde oder hörsehbehinderte Leser(in) bestimmt selbst seine/ihre Lesegeschwindigkeit.

Die ersten Reaktionen von Testpersonen: Begeistert!

Eine Beta steht für Interessierte zur Verfügung. Bei Interesse bitte Kontaktaufnahme per E-Mail.


Wieviel kostet eine Website

Freitag, 24. April 2015

Anfrage:

Ich möchte meine [Produkte] online auf einer Website anbieten und möchte gerne wissen, was so eine Website bei Ihnen kostet? Die Seite soll barrierefrei sein.

Ohne den Nachsatz “… barrierefrei” wäre diese Anfrage der Löschtaste zum Opfer gefallen.
In diesem Fall habe ich geantwortet, bin kurz auf meine Expertise zum Thema Barrierefreiheit eingegangen, und habe einen – sehr moderaten – Mindestpreis genannt.

Die Absage kam erwartungsgemäß postwendend. “… übersteigt bei Weitem meine Vorstellungen.”
So weit nicht weiter erwähnenswert.
In diesem speziellen Fall habe ich aber nachgefragt, was denn die Vorstellungen wären; und darauf – wider Erwarten – sogar eine Antwort erhalten:

Mir wurde jemand empfohlen, der es für 15 Euro im Monat einrichtet.

Ein-Euro-Schein


Telekom respektiert Fernmeldegeheimnis

Donnerstag, 23. April 2015

Die Telekom ist nicht immer nur böse. :-)
Was ist passiert?

In diesem Artikel bezichtigte ich die Telekom der Fälschung und eines Verstoßes gegen das Fernmeldegeheimnis. Na ja, ich glaube zwar eher nicht, dass die Telekom vor mir eingeknickt ist. Dennoch: Wenn ich aktuell die Konfigurationsseite http://www.speed.t-mobile.de aufrufe (nur aus dem Telekom-Mobilfunknetz erreichbar), dann findet sich dort folgende Meldung:

Screenshot vom iPhone
Speedmanager-Info

Sehr geehrte Kundin, sehr geehrter Kunde,

der Dienst Speedmanager wurde eingestellt und kann daher auf dieser Seite nicht mehr administriert werden …

Ob das wohl freiwillig, oder erzwungenermaßen geschah?


UTF-8 nach 10 Jahren

Sonntag, 19. April 2015

Vor 10 Jahren, als ich “meine erste Homepage” erstellte, habe ich mir über Zeichenkodierung keine großen Gedanken gemacht. ISO 8859-1 war fast automatisch die Folge.
Eine Umstellung auf UTF-8 musste irgendwann erfolgen.
Leider haben sich auf einer gewachsenen Site wie meiner viele “Ungereimtheiten” angesammelt. Die Umstellung auf UTF-8 ist daher mit viel Handarbeit verbunden. Letztlich muss ich praktisch jede einzelne Datei anfassen.

Während der Umstellung wird es sich leider nicht vermeiden lassen, dass Darstellungsfehler, z. B. bei Umlauten auftauchen. Ich bitte meine Leser um Nachsicht.

Danke.

Nachtrag 24.04.2015

So, Die Umstellung ist im Wesentlichen erledigt. Alle statischen Artikel sollten sauber dargestellt werden, die verschiedenen Funktionen – Blog-Teaser auf der Startseite, Suchfunktion usw. – sollten passen.
Noch klemmen kann es bei alten Blogposts (2013 2011 und älter – liest das eigentlich noch jemand, oder kann das weg?). Dort rächt es sich jetzt, dass ich immer wieder versucht habe, unter ISO nicht nativ unterstützte Sonderzeichen, z. B. typografische Anführungszeichen, einzusetzen. Da hier fallweise aufwendige manuelle Nacharbeit nötig ist, kann es noch etwas dauern, bis auch die letzten Darstellungsfehler behoben sind.

Hat sich die Umstellung gelohnt: Ja! Ab sofort gehören Fingerverrenkungen beim Tippen von irgendwelchen Sonderzeichen der Vergangenheit an. Ebenso wie Darstellungsfehler auf exotischen Ausgabegeräten. Ein ä bleibt ein ä, und ein ü ein ü.


alt-Text Robot für Twitter

Kaum gibt es das neue Twitter Feature “Retweet mit Kommentar“, hat sich das jemand für einen ganz tollen Service zunutze gemacht:
Ein Alt-Text Robot.

Das Problem ist alt: Um blinden Lesern einen kurzen Hinweis zu geben, was auf einem Online-Bild dargestellt ist, gibt es in HTML das alt-Attribut.
Nicht so bei Twitter.
Ich hab’ deshalb vor längerer Zeit ein Tool gebastelt, um Bilder nachträglich mit einer Beschreibung für blinde Twitteristi zu versehen: twitpicdescription.de. Entstanden ist das Tool eigentlich nur, um zu beweisen, dass so etwas grundsätzlich machbar ist. In der Praxis ist der Aufwand, eine Bildbeschreibung auf Twitter einzustellen, doch recht erheblich. Das Tool wird daher kaum genutzt (was ich auch nicht erwartet habe).

Aber jetzt hat es jemand geschafft: @alt_text_bot.
Wie das funktioniert?
Einfach ein Bild twittern, und im Text des Tweets “@alt_text_bot” erwähnen.

Das Ergebnis ist verblüffend:

Screenshot eines Retweets mit alt-Text
alt=gray-scale landscape of rainbow over large body of water

Hinter dem Dienst steht natürlich eine leistungsfähige Bilderkennungs-Software.

Ach ja, ich sollte noch das ursprünglich getwitterte Bild nachreichen:

Schwarzweißbild Regenbogen
Das Schwarzweißbild zeigt einen Regenbogen über einer dramatisch wirkenden Gebirgslandschaft (Monument Valley in Kalifornien).

Google fordert Responsive Web Design

Freitag, 17. April 2015

Der Suchmaschinenriese Google fordert zunehmend Responsive Web Design RWD, also Seiten, die auch auf den kleinen Monitoren von Smartphones optimal bedienbar sind.

Screenshot Smartphone
Wenn eine Suche auf mobilen Geräten ausgeführt wird, dann werden Treffer, die mobile optimiert sind, bereits heute speziell gekennzeichnet: “Für Mobilgeräte”

Google hat angekündigt, Seiten, die für Mobilgeräte optimiert sind, in Zukunft generell besser zu platzieren.

Zitat Google Webmaster Blog:

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.

Je nachdem, wie groß die Abhängigkeit des eigenen Geschäfts von guten Platzierungen in den Suchergebnissen ist, kann also eine alte, nicht für Mobilgeräte optimierte Website echtes Geld kosten. Es wird also langsam Zeit, seine eigene Site darauf zu überprüfen, ob sie Googles Wohlwollen findet.
Webworker nutzen hierfür die Google Webmaster-Tools. Aber auch ohne Webmaster-Tools ist eine erste Kontrolle für jedermann möglich:
Google selbst bietet auf der Seite www.google.com/webmasters/tools/mobile-friendly/ einen Schnelltest auf Optimierung für Mobilgeräte.

Screenshot
Einfach die zu testende Adresse eingeben - fertig!

Facebook (und andere Sites) ohne Flash

Mittwoch, 15. April 2015

Ich geb’s ja zu: Ich mache schon den einen oder anderen Klimmzug, um Flash von meinem MacBook zu verbannen. Siehe diese diversen Artikel über flashloses Leben.
Wir schreiben das Jahr 2015, und HTML5 Video ist bereits erfunden. Dennoch gibt es immer noch Spezialisten, die Flash anscheinend für unentbehrlich halten. Facebook gehört dazu, aber auch die Süddeutsche Zeitung. Beide stellen Ihre Videos zwar auch im HTML5-Format zur Verfügung, aber eben nur für Smartphones und Tablets. Klar, man will ja schließlich auch auf diesen Geräten verfügbar sein.
Aber ein Desktop oder Notebook ohne Flash? Das gibt es doch gar nicht?
Doch. Gibt es!
Nun könnten die Entwickler der o.g. Seiten ja einfach prüfen, ob Flash auf einem System verfügbar ist, und bei negativer Abfrage das entprechende HTML5-Video anbieten. (Was machen diese Leute eigentlich beruflich?)

Gut, dann muss ich eben selbst Hand anlegen.

1. Schritt:

Ich gaukle den betreffenden Sites einfach vor, ein iPad zu sein. Das geht, indem man der Site einen entsprechenden User Agent vorgaukelt. Das Firefox Addon User Agent Switcher erledigt das. Vielleicht muss man ein wenig mit verschiedenen User Agents experimentieren. Smartphone-User Agents eignen sich eher weniger, weil sie häufig auch noch ein für kleine Monitore optimiertes Design erzwingen.
Wenn man einen passenden User Agent gefunden hat, dann muss man eben jedesmal, wenn eine Site partout Flash-Videos an Stelle von HTML5-Videos ausliefern will, den User Agent wechseln.

Weil das auf Dauer eher lästig ist, taucht über kurz oder lang die Frage auf, ob man den Wechsel des User Agents nicht automatisch “per site” erledigen kann.
Man kann!

2. Schritt:

Die Lösung findet sich auf superuser.com: Die beiden Firefox Addons User-Agent JS Fixer und User Agent Site Switcher machen es möglich. Ja, man braucht beide. Aber nur letzterer taucht als Icon im Browser auf. Wenn die Site, die mit dem “passenden” User Agent versehen werden soll, im Browser offen ist, den User Agent Site Switcher aufrufen, und dort nur noch den passenden User Agent eintragen.
Und woher weiß ich, was der passende User Agent ist? Genau dazu ist Schritt 1 erforderlich. In diesem Addon die Edit-Funktion aufrufen, und den dort eingetragenen User Agent kopieren.

Klingt etwas kompliziert, aber die Mühe lohnt sich. Zumindest für so merkwürdige Zeitgenossen wie mich, die partout kein Flash auf dem Macbook wollen.


Twitter und die Barrierefreiheit

Twitter war (und ist?) bei Screen Reader Nutzern ja nicht gerade als Muster an Bedienbarkeit bekannt. Blinde und sehbehinderte Twitterist sind daher zumeist auf alternative Twitter-Clients ausgewichen.
Kann es sein, dass die Entwickler bei Twitter sich des Themas Barrierefreiheit verstärkt annehmen?
Ein neues Feature “Retweet mit Kommentar” weckte meine Neugier, und ich habe mal die Nutzbarkeit dieses Features mit Screen Reader kurz angetestet.
Dieses Feature steht meines Wissens nur auf der Website https://twitter.com, sowie auf der offiziellen Twitter-App für Smartphones und Tablets zur Verfügung.

Die erste Überraschung:

Screenshot vom iPhone
Wenn VoiceOver auf dem iPhone aktiviert wird*), erscheint folgende Meldung:

Du hast VoiceOver eingeschaltet.

Für ein optimales Erlebnis bei VoiceOver mit Twitter empfehlen wir, die App zu schließen und wieder zu öffnen, während VoiceOver eingeschaltet ist.

*) Aktivieren von VoiceOver

Dieser Hinweis, den blinde Twitteristi vermutlich nie zu Gesicht bekommen — weil sie VoiceOver eben immer laufen haben, und nicht erst nach dem Aufruf der Twitter App zuschalten — hat mich elektrisiert. Hier scheinen Entwickler am Werk zu sein, für die Barrierefreiheit mehr ist, als eine Rampe am Eingang zum Büro.

Dann also einen der neuen Retweets aufrufen:

Screenshot eines Retweets (Desktop)
Der Retweet zeigt zuerst den Kommentar, darunter, eingerückt, den zititerten Tweet einschließlich Bild.

Auf dem iPhone hört sich so ein Retweet folgendermaßen an (Audio von VoiceOver):

Bemerkenswert an dieser Ausgabe ist die Aufbereitung speziell für Screen Reader. Es wird nicht einfach linear vorgelesen, was auf dem Bildschirm sichtbar ist, sondern eine logisch sinnvolle Reihenfolge für das Zitat erstellt:

Transkription:

Fritz Weisshart zitierte achimhepp.de:
“Einer meiner Hashtag Twitter Tipps: Nichts automatisieren …”
Fritz Weisshart fügte hinzu:
“Ok, dann eben ein Test mit einem fremden Tweet.”

Das ist wirklich erstaunlich, und so etwas entsteht nicht zufällig, sondern wurde von Entwicklern geschaffen, die das Thema Barrierefreiheit ernst nehmen und verstehen.

Ich muss natürlich auch noch kurz eingehen auf die Erstellung eines “neuen Retweets” mit Screen Reader.
Auf iOS klappt das prima. Den zu kommentierenden Tweet anklicken. Er öffnet sich auf einer neuen Seite, die Buttons zum Antworten, Retweeten usw. sind erreichbar. Bei Retweet öffnet sich ein Auswahldialog “Retweeten oder Tweet zitieren". Perfekt.

Weniger glücklich ist das auf dem Desktop (Firefox mit NVDA) gelöst. Twitter kann zwar fast vollständig mittels Tastaturkürzeln bedient werden. Siehe www.bitpage.de/2014/internet/twitter-per-tastaturkuerzel-bedienen
Leider muss im NVDA jedes einzelne der zahlreichen Tastaturkürzel erst mal durchgereicht werden, was die Bedienung zu einer fingerverknotenden Aktion macht.

PS: Dieser Kurztest eines einzelnen Features sagt natürlich nichts aus über die Barrierefreiheit von Twitter insgesamt.


Keine Entwicklung mehr für IE 8

Sonntag, 5. April 2015

Logo IE 8Ich habe bis heute versucht, auch den Internet Explorer 8 noch bei der Entwicklung (Webseiten, Skripte) zu berücksichtigen. Trotz der allgegenwärtigen — und berechtigten — Aufforderung, doch bitte einen aktuellen Browser zu verwenden.
Es gab eine Benutzergruppe, deren Aversion gegen Upgrades ich zu respektieren versuchte. Screen Reader User, die noch Windows XP auf Ihrem Rechner hatten.
Heute habe ich den IE 8, den ich bisher zu Testzwecken in einer Virtuellen Maschine installiert hatte, gelöscht.
Das bedeutet nun nicht, dass meine Webseiten und Skripte unter IE 8 nicht mehr laufen. Es bedeutet lediglich, dass ich nicht mehr testen kann, ob es eventuell zu Darstellungsfehlern im IE kommt.
Klar, dass im Laufe der Zeit auch alle meine Webseiten und Skripte um die diversen IE 8-Hacks bereinigt werden.


Responsive Webdesign: Schriftgröße an Viewport anpassen

Samstag, 4. April 2015

Nicht sehr bekannt ist die Möglichkeit, per CSS die Schriftgröße an den Viewport anzupassen. Die Einheit lautet einfach vw (viewport width). Im Rahmen von Responsive Web Design RWD kann das bei bedächtigem Einsatz schon mal Sinn machen.

Im folgenden Beispiel ist ein Absatz mit font-size: 4vw ausgezeichnet. In der Praxis wird man so etwas wohl hauptsächlich mit Überschriften machen wollen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Um das Beispiel in Aktion zu sehen, einfach die Größe des Browserfensters verändern.
(Das Beispiel ist für die Ansicht auf Desktop-Monitoren konfiguriert. Auf dem Smartphone ist es wenig “beeindruckend"; Auch und vor allem, weil man die Größe des Browserfensters auf Smartphones nicht ohne weiteres ändern kann.)

Eine detaillierte Beschreibung findet sich bei treehouse.
Und weil der treehouse-Artikel schon etwas betagt ist, hier die Browserunterstützung.


Ältere Beitäge:

Kategorien:

Creative Commons Lizenzvertrag
Alle Artikel des Blogs Creative Commons CC BY-NC-SA 3.0 DE