Log in  • Druckversion

Accessibility im modernen Web II– Responsives Webdesign

Friday, March 8th, 2013

Oft begegnen uns im digitalen Alltag anpassungsfähige Website-Layouts, ohne dass es uns bewusst wird. Ihre optische Wiedergabe erfolgt anhand der Anforderungen des Endgerätes, mit dem die Seite aufgerufen wird. Die Bildschirmtastatur mobiler Endgeräte ermöglicht es zum Beispiel, jeweils passende Tastaturen anzuzeigen. Dieses Verhalten kennt man bereits von nativen Anwendungen: Bei E-Mail-Feldern bietet die Tastatur ein „@“ an, beim Telefonieren werden Zahlen statt Buchstaben angezeigt. Gleiches ist für Webseiten möglich: Mit HTML5 lassen sich Eingabefelder wie z. B. für E-Mail-Adressen, Zahlen oder Datum semantisch einem bestimmten Typ zuweisen. Basierend auf diesem semantischen Bezug wird dann die entsprechende Tastatur angezeigt.

 

[Abbildung 1: Beispiel Kontaktformular der NEBIS-Website bei Nutzung mit einem Smartphone]

 

Diese Typisierung ist unter anderem auch Basis für die Validierung von Formularfeldern. Die korrekte Semantik von Formularen schliesst die Beziehung zwischen Eingabefeld und seinem Label (Beschriftung) ein und ist somit auch für die Screenreader-Verwendung wesentlich. Das Label eines Eingabefelds wird durch das Bildschirmleseprogramm vorgelesen, damit der Hörende weiss, was einzugeben ist. Ist der Bezug korrekt hinterlegt, kommt das allen Nutzern zu Gute. Versucht man z. B. vergeblich, auf einem Touchscreen eine kleine Checkbox mit dem Finger zu treffen, dann kann man stattdessen sein Label berühren. Wenn das Formular semantisch korrekt formuliert ist, schaltet auch das die Checkbox um.

Ein häufiges Spannungsfeld zwischen Webentwicklern und -designern sind die Seitenlayouts. Viele Designer  – immer noch vom traditionellen Print-Design geprägt – entwerfen Designs mit statischer Pixel-Breite, wie z. B. 980px. Darin spiegelt sich ein Unverständnis des Mediums Web wieder. Denn eine Webseite ist, anders als die Seite eines Buches, flexibel. Statisch definierte Layouts können sich daher negativ auf die Benutzerfreundlichkeit von Websites auswirken. Die Breite des Notebook-Displays oder MacBooks stellt heute nicht mehr die geringstmögliche Breite einer Webseite dar, ebenfalls nicht die des iPads. Denn es kommen immer neue Geräte mit stark variierenden Display-Grössen auf den Markt. Diese grosse Vielfalt wirft verschärft die Frage auf, wie sich eine Webseite anpassen kann und soll. Die Entwicklung flexibler Layouts ist daher unverzichtbar.

[Abbildung 2: variierende Tablet-Grössen, Quelle: Lukew Ideation + Design]

 

Im Zuge von HTML5 und CSS3 sind  neue, ergänzende Techniken der Flexibilität entstanden, wie z. B. „Media Queries“. Mit deren Hilfe kann sich z.B. ein dreispaltiges Layout ab einer im Vorfeld definierten Breite in eine zweispaltige Darstellung ändern. Die dritte Spalte wird dann unterhalb der zwei Spalten angezeigt. Auf besonders kleinen Endgeräten wie Smartphones wird die Seite in nur einer Spalte dargestellt und alle Seitenbereiche liegen untereinander.

[Abbildung 2: Flexibles Layout, Quelle: G. Garcia-Mont]

 

Ein weiterer Teilbereich der Flexibilität ist die Elastizität. Für viele Menschen ist es angenehm, Webseiten mit grösserer Schrift anzusehen. Das lässt sich im Browser einstellen. Doch wie ändert sich dann die Darstellung der Seite? Überlappen sich Bereiche? Muss man beim Lesen ständig horizontal scrollen?

Wie gut das Vergrössern funktioniert, hängt ebenfalls vom Layout ab. Fixe Layouts sind da meist ungenügend. Seit etlichen Jahren gibt es im CSS eine Einheit, die auf der eingestellten Schriftgrösse des Browsers basiert („em“). Unterstützend wirken auch hier „Media Queries“. Vergrössert man die Schrift, schlagen die drei Spalten in zwei Spalten und bei weiterer Vergrösserung in eine Spalte um. Der eigentliche Textinhalt ist vergrössert und hat zugleich mehr Platz im sichtbaren Bereich des Displays. Horizontales Scrollen wird so meist unnötig. Auch an dieser Stelle treffen sich klassische Accessibility-Normen (Textvergösserung) und aktuelle Anforderungen die aus der Gerätevielfalt resultieren.

Der Kontrast von Vordergrund- und Hintergrundfarbe ist ebenfalls ein wichtiger Aspekt des Layouts. Manche Webdesigner präferieren schwache Kontraste, da sie als elegant empfunden werden. Eine Webseite ist jedoch nicht nur ansprechender Betrachtungsgegenstand sondern oft auch Arbeitswerkzeug. Werden Menschen älter, verschlechtert sich meist ihre Kontrastwahrnehmung. Aber auch beim seitlichen Blicken auf Notebook-Screens oder bei Smartphone-Nutzung sind zu schwache Kontraste hinderlich. Gute Kontraste nützen also jedem. Ob ein Kontrast ausreichend ist, lässt sich mit einem entsprechendem Werkzeug objektiv überprüfen.

[Abbildung 3: Wissensportal der ETH-Bibliothek, Kontrastkontrolle mit dem Colour Contrast Analyser]

 

Anhand der geschilderten Aspekte zeigt sich, dass moderne Website-Strategie immer auch den Anspruch auf barrierefreie Zugänglichkeit beinhaltet. Die etablierten Techniken zur Entwicklung und zum Testen von Accessibility können einen wesentlichen Beitrag zur Usability von Websites leisten, so dass diese auf einer Vielzahl von Geräten über verschiedene Bandbreiten gut nutzbar sind. Anwendbar sind die besprochenen Techniken nicht nur im Rahmen von Webprojekten, die über grosszügige personelle Ressourcen verfügen. Im Web selbst stehen eine Reihe hilfreicher Open-Source-Werkzeuge zur Verfügung, die es dem Einzelnen ermöglichen, einen barrierefreien Zugang auf eigene digitale Angebote zu gewährleisten und diese schon während der Entwicklung zu testen. Mit diesen Werkzeugen wird sich ein späterer Beitrag dieses Blogs beschäftigen.

Abschliessend danken wir „Zugang für alle“, der Schweizerischen Stiftung zur behindertengerechten Technologienutzung,  für lehrreiche Einblicke in die Alltagsnutzung  assistiver Technologie und das Schulen unserer Kolleginnen und Kollegen.

 

Autor: Bernd Uttenweiler
Koautorin: Maximiliane Okonnek

Kindle Fire im Praxistest

Wednesday, February 29th, 2012

Der Kindle Fire ist offiziell in Europa noch nicht erhältlich. Die Verlockung ist jedoch gross, das sehr günstige Tablet aus dem Hause Amazon in den USA oder über Direktimport zu kaufen. Die Nutzung ist dann jedoch stark eingeschränkt. Es lassen sich nur einige wenige Apps installieren – wie Audible, Weather oder Pandora. Doch wenn man im Amazon Appstore eine andere kostenlose App beziehen will, erscheint die Meldung: „The Amazon Appstore is not yet available in your region.“ Aufgrund der Liste der beliebtesten Downloads wird immerhin klar, dass mit dem Kindle Fire vor allem gespielt wird – und Videos angesehen werden, denn die App von Netflix steht auf Rang 3 der kostenlosen Apps. Ansonsten befinden sich unter den TopTen auschliesslich Games, sowohl bei den kostenlosen wie bei den kostenpflichtigen Apps. Ein gewisses Mysterium sind die Apps, die man trotzdem laden kann. Mit der Zeit haben sich immer mehr Anwendungen unter dem entsprechenden Tab „eingefunden“. So konnte ich eine E-Mail-App oder auch QuickOffice (in einer Light-Version) in Betrieb nehmen, letzteres sogar mit meiner Dropbox verbinden.

Klar ist jedoch, dass sich das Bedienungskonzept des Kindle Fire von den klassischen Kindle-E-Readern unterscheidet. Es handelt hierbei sich um eine abgespeckte Android-Variante. Man hat direkte Links auf die Rubriken Newsstand, Books, Music, Video, Docs, Apps und Web. Hinter letzterem verbirgt sich ein schlanker Browser, mit dem ich mich über die Landingpage der Hochschule mit dem öffentlichen WLAN verbinden konnte. Im Vergleich zu anderen Tablets (iPad, Samsung Galaxy, HTC Flyer) wirkt der Browser etwas rucklig beim Vergrössern von Inhalten.

Aussen vor bleibt man in Europa bei den Videos. Man stellt aber fest, dass Amazon in den USA ein konkurrenzfähiges Angebot bereitstellt. Mit dem Amazon Prime-Abonnement ($ 79 pro Jahr) kann man tausende von Videos und auch E-Books ohne weitere Kosten ausleihen.

Der Kindle Fire ist direkt mit der Amazon-Cloud verbunden. So gibt es auch bei den Büchern zwei Tabs, einen für Bücher auf dem Gerät, einen für jene in der Cloud. Bei Bedarf werden die gewünschten Titel aus der Cloud auf das Gerät heruntergeladen. Eigene Dokumente kann man über eine eigene E-Mail-Adresse auf das Gerät schicken. Dafür muss die Absender-Adresse jedoch in den Einstellungen des Amazons-Konto registriert werden. Ein Word-Dokument mit Tabellen und Grafiken wird allerdings etwas verzerrt dargestellt. Der Viewer ist eher für PDF-Dokumente geeignet.

Das Lesen von Büchern ist vergleichbar mit allen anderen 6/7-Zoll-Tablets mit einer Kindle-App. Es lassen sich Markierungen und Notizen anlegen, die dann auf der persönlichen Kindle-Seite (https://kindle.amazon.com/) über den Browser vom PC aus zugänglich sind und veröffentlicht werden können. Wie bei den anderen Tablets fallen beim Kindle Fire die Vorteile der E-Ink weg. Zum Lesen und Annotieren von PDF-Dokumenten ist die Grösse des Bildschirms nicht ideal. Wer mit dem Tablet arbeiten will, ist mit einem 10-Zoll-Bildschirm besser bedient.

Eine Alternative, die ich so nicht unbedingt empfehlen kann und auf keinen Fall darf: Ein Kollege hat kurzerhand seinen Kindle Fire gerootet, also das Betriebssystem Android 4 installiert – und erfreut sich jetzt am günstigsten Tablet weit und breit auf dem Markt. Wer zu diesem Schritt nicht bereit ist, dem wird empfohlen mit dem Kauf des Kindle Fire noch zu warten, bis er offiziell in unseren Landen erhältlich ist. Erst dann wird man die Funktionen des Kindle Fire wirklich nutzen können.

Share/Save/Bookmark

Samsung Galaxy Tab 10.1 im Praxistest

Friday, September 2nd, 2011

Das Samsung Galaxy Tab 10.1 wird der erste ernstzunehmende Herausforderer für das iPad. Ich halte es für das beste Android-Tablet, das zur Zeit auf dem Markt ist (sofern es denn angesichts des Patentstreits mit Apple im EU-Raum verkauft werden darf). Und es ist auch klar, weshalb sich Apple gerade auf das Samsung-Tablet eingeschossen hat: Es ist sehr schön verarbeitet, liegt gut in der Hand, ist leicht (565 g – verglichen mit 613 g beim iPad2) und schnell.

 

Screenshot: das Samsung Galaxy Tab 10.1 mit dem Social Hub

Der Bildschirm ist von hoher Qualität. Allerdings irritieren gewisse temporäre Druckstellen, die unter der Oberfläche entstehen können und das Bild trüben. Der iPad-Bildschirm ist in dieser Beziehung robuster. Die Auflösung beim Samsung beträgt 800×1280 Pixel (gegenüber 1024×768 beim iPad2) und ist vorwiegend auf das Querformat ausgerichtet. Natürlich kann das Samsung auch im Hochformat genutzt werden, doch werden die Seiten dann ungewohnt lang.

Der grosse Vorteil gegenüber dem iPad liegt in der Offenheit des Betriebssystems Android 3.1 sowie der offenen USB-Schnittstelle. Über diese lassen sich Daten beliebig via Ordnerstruktur vom PC auf das Tablet kopieren. Das hat z.B. mit E-Books im Format EPUB bestens geklappt. Über den entsprechenden Import-Ordner gelangen die Dateien aufs Tablet und können dort mit der vorinstallierten App “ebook” aufgerufen und gelesen werden. Mit dieser App, die weniger elegant als iBooks erscheint, können die Texte annotiert und markiert werden. Diese Notizen und Markierungen können allerdings nicht exportiert werden. Aber im Amazon oder Google App Store finden sich sicher noch weitere Apps zum Bücherlesen. Auch eine Kindle-App ist verfügbar, mit der jedoch wie üblich nur E-Books aus dem Kindle-Store von Amazon genutzt werden können. Natürlich ebenfalls plattformübergreifend. Für DRM-geschützte EPUB-Bücher kann der Bluefire Reader installiert werden.

Zum Bearbeiten von Text und Office-Dokumenten wird die App PolarisOffice mitgeliefert. Auf den ersten Blick kann man damit gut arbeiten, wobei zum Teil die Designs von Dokumenten verändert werden, gerade bei der Verwendung von Spezialschriften. Ein kleiner Nachteil ist der eher schmale Bildschirm im Querformat, wenn die virtuelle Tastatur eingeblendet ist. Sie deckt mehr als die Hälfte des Bildschirms ab. Integriert ist als Online-Speicher der Dienst box.net. Man kann (natürlich) auch die Dropbox-App installieren und dann die Dateien aus dieser Anwendung öffnen. Office-Dokumente werden in PolarisOffice geöffnet und können dort bearbeitet und wieder auf Dropbox abgespeichert werden. Zunächst wird das Dokument aber im internen Speicher des Tablets (/Root/dropbox/) gesichert und muss dann von dort aus an Dropbox gesendet werden.

Einwandfrei und unkompliziert klappt ebenfalls die Einrichtung verschiedener E-Mail-Konten, auch über Exchange.

Samsung bietet mit dem Social Hub oder dem Music Hub eine Bündelung verschiedener Funktionen zu diesen Themen. Beim Social Hub hat man seine sozialen Netzwerke auf einen Blick auf dem Bildschirm. Die angezeigten Elemente lassen sich über die Einstellungen definieren. Im Newsfeed lassen sich Twitter, Facebook und LinkedIn sowie E-Mail in einem Widget anzeigen.

Für die Verbindung mit einem externen Monitor braucht man wohl das Multi-Media-Dock von Samsung ($35), dann kann das Tablet via HDMI an das heimische Media-Center angeschlossen werden. Die “leichte” Variante, um das Tablet direkt an einen VGA-Beamer anzuschliessen, habe ich noch nicht gefunden.

Das Samsung Galaxy Tab verfügt mit Anyconnect von Cisco (kostenlos im Android-Market erhältlich) über einen einfachen VPN-Client. Damit ist mein altes Problem gelöst, dass ich jeweils mit Android-Tablets keinen Zugang zum Firmen-WLAN der Hochschule hatte. Die Installation von Anyconnect ist einfach, und danach erfolgt der Zugriff auf die lizenzierten elektronischen Ressourcen problemlos.

Ein bekannter Mangel des iPad ist die fehlende Unterstützung von Flash. Auf das Samsung Galaxy Tab mit Android 3.1 kann zwar Adobe FlashPlayer geladen werden. Flash-Videos (z.B. auf der Seite des Schweizer Fernsehens sf.tv) oder auf Flash basierte Anwendungen (wie die Zoom-Funktion im Bildarchiv Online der ETH-Bibliothek) werden jedoch nicht angezeigt.

Fazit: das Samsung Galaxy Tab 10.1 ist eine echte Konkurrenz fürs iPad. Das Gerät überzeugt durch seine technischen Leistungsmerkmale und die saubere Verarbeitung. Seine Vorteile liegen bei der Offenheit des Betriebssystems und der Schnittstellen. Der grosse Konkurrent iPad punktet im Vergleich zum Samsung durch die Zahl der Apps und einige “Killer-Apps” wie GoodReader und Flipboard, die es (noch) nicht für Android 3 gibt.

Share/Save/Bookmark

Blackberry Playbook im Test

Friday, June 24th, 2011

Das 7-Zoll-Tablet Playbook ist ein handliches Device, klar für die Nutzung im Querformat ausgerichtet. Der erste Eindruck ist durchaus positiv, wenn man sich mit einer Grundfunktion des Touchscreens vertraut gemacht hat: Um zum Hauptmenü zu gelangen, muss man jeweils mit dem Finger vom unteren Rand nach oben fahren. Das Playbook überrascht durch sehr schnelle Reaktion. Auch Multitasking beherrscht das BlackBerry Tablet OS bestens.

Aber umso schneller merkt man auch, dass das Gerät eindeutig zu früh auf den Markt geworfen wurde. Es gibt erst wenige Apps, und für viele wichtige Anwendungsfälle fehlt ein entsprechendes Tool. Ich nutze selbst kein Blackberry, kann also die Integration in diese Umgebung und die Synchronisation mit den wichtigsten Diensten nicht beurteilen. Ich verweise dazu auf den Bericht von Chip.de, welche diese Synchronisation getestet und gelobt haben. Die Daten sind auf dem Playbook nur solange verfügbar, wie das Smartphone daran gekoppelt ist. Aus Sicherheitsgründen verschwinden die Daten dann wieder auf dem Tablet. Das stelle ich mir allerdings sehr unpraktisch vor… Das bedeutet ja, dass ich das Playbook ohne verbundenes Blackberry nicht vernünftig nutzen kann. Dieses „Feature“ wäre nichts für mich…

Ein Besucher am Stand der Zukunftswerkstatt am Bibliothekartag versuchte die Synchronisation mit seinem Blackberry, gab mir das Gerät aber nach einiger Zeit entnervt zurück… Er fand sich offenbar mit den unterschiedlichen Bedienkonzepten von Smartphone und Tablet nicht zurecht.

Das Hauptproblem des BlackBerry Playbook ist die magere Ausstattung der AppWorld. Ich finde auf dem Device keine brauchbare Agenda, nur verschiedene Mail-Clients (Hotmail, GMail), die auf den Webbrowser verweisen und keine vernünftige Software, um E-Books zu lesen. Installiert sind ein PDF-Reader und die Apps Word To Go, Sheet To Go und Slideshow To Go. Mit BlueBox steht eine Anwendung für Dropbox zur Verfügung. Der Versuch, eine Präsentation von Dropbox zu starten, misslang jedoch.

Ein Rätsel gibt der Akku auf: Laden dauert eine gefühlte Ewigkeit, egal ob man dafür das Ladegerät oder die USB-Verbindung zum PC nutzt. Dafür leert sich der Akku überraschend schnell, vor allem im ausgeschalteten Zustand bzw. im SleepMode. Zudem entwickelt das Device recht grosse Hitze beim Ladevorgang. Angeblich soll das Tablet eine Akkulaufzeit von über 5 Stunden aufweisen.

Für die ETH-Bibliothek sind diese Devices ja vor allem im Hinblick auf die Frage interessant, wie gut sie sich zum Lesen und Bearbeiten von Texten und E-Books eignen. In der Blackberry AppWorld findet man nur den Kobo-Reader. Man kann also nur E-Books aus diesem Store kaufen und auf dem Gerät lesen. Eigene EPUB-Dokumente erkennt das Device nicht, auch wenn sie über BlueBox aus Dropbox geladen werden. PDF-Dokumente können mit dem vorinstallierten Acrobat Reader gelesen, aber nicht bearbeitet werden.

Es ist unklar, welche Zielgruppe RIM mit dem Blackberry Playbook ansprechen will. Die User ihrer Smartphones aus dem Business-Bereich dürften sich mit diesem Gerät kaum anfreunden. Dafür ist es zu wenig praktisch und zu wenig gut in die Arbeitsumgebung integriert. Für alle anderen bietet es zu wenig Inhalte, um eine Alternative zum iPad oder den Android-Tablets darzustellen. Deshalb sage ich dem Gerät keine glorreiche Zukunft voraus… Ach ja, auch der Name des Device hält ja nicht gerade, was er verspricht: wenig zum Spielen, wenig Bücher zum Lesen…

Share/Save/Bookmark

HTC Flyer im Test

Monday, June 20th, 2011

Das HTC Flyer-Tablet läuft auf dem Betriebssystem Android 2.3.3 mit HTC Sense 2.1. Die Oberfläche ist attraktiv mit mehreren Startbildschirmen, die mit einer Wischbewegung und 3D-Effekt gewechselt werden können. Nach dem eigentlichen Startmenu (mit Zeit, lokalem Wetter und den wichtigsten Anwendungen) folgen Kontakte, News (mit GoogleReader), My Shelf (mit den eBooks), E-Mail und dem FriendStream. Alle Google-Anwendungen sind gut integriert – von Google Mail über Kontakte, Reader bis hin zu Maps und Google Latitude. Der Android Market bietet mittlerweile auch zahlreiche Apps für den täglichen Bedarf: Dropbox, Kindle, Evernote, DocumentsToGo, Skype und viele mehr.

Die äussere Erscheinung: Der Rahmen mit Alubody und weissem Plastik wirkt weniger elegant als Konkurrenzprodukte. Mit einem Gewicht von 420 Gramm liegt der Flyer gut in einer Hand. Das Tablet lässt sich sowohl im Hochformat (mit einer Hand) wie auch im Querformat gut bedienen. Die virtuellen Buttons im Rahmen sind immer an der jeweiligen Unterseite. Sie „wandern“ also je nach Ausrichtung des Geräts – ein überraschendes und nützliches Feature.

Der HTC Flyer lässt sich als externe Festplatte an den PC anschliessen, nachdem ein entsprechender Dialog erschienen und die entsprechende Option gewählt worden ist. Auf diese Weise lassen sich Dateien vom PC auf das Tablet kopieren. Im Vergleich zum geschlossenen System des iPad ist der Transfer von Daten auch nicht viel einfacher. Auch beim HTC Flyer nutze ich Dropbox als virtuelles Laufwerk in der Wolke. Ein USB-Stick lässt sich auch hier nicht einfach so anschliessen.

Als E-Book-Reader ist der Kobo-Reader installiert, der auch die Adobe ID verwaltet. Dadurch erhält man Zugriff auf die über die eigene Adobe ID gekauften Bücher im Store. Das Hochladen eigener eBooks erfolgt über das Kopieren der Files ins Dateisystem in den Ordner Books. Nach der Synchronisierung werden die eigenen E-Books im EPUB-Format auf dem Startbildschirm My Shelf und in der App Reader angezeigt. Die Darstellung auf dem 7-Zoll-Bildschirm ist etwas beengt, die Seite wirkt etwas gar schmal (im Hochformat). Aber insgesamt klappt die Buchanzeige tadellos.

Screenshot (via Evernote) vom Startbildschirm My Shelf auf dem HTC Flyer

Eine der Besonderheiten des HTC Flyer ist der spezielle Stift. Er dient dazu, auf jeder beliebigen Ebene  handschriftliche Notizen anzubringen. Nett ist die Synchronisation von Screenshots (ausgelöst durch den Stift) mit der App Evernote. Die handschriftliche Notiz wird als Bild mitgeschickt. Mit dem Stift kann man Textstellen markieren und diese dann als Notiz sichern.

Die virtuelle Tastatur ist natürlich kleiner als bei 10-Zoll-Tablets. Für kurze Texte (Mails, SMS) ist das kein Problem, aber bei umfangreicheren Texten ermüdet man schnell und muss viel korrigieren. Wobei die Korrekturfunktion ziemlich ausgefeilt ist. Bekannte Worte werden vorgeschlagen  und neue Wörter können direkt ins Wörterbuch übernommen werden. Bei den 7-Zoll-Tablets stellt sich schon die Grundsatzfrage, ob sie für eine Smartphone zu gross und für ein Arbeitsinstrument zu klein sind. In dem relativ kurzen Text kann ich diese Frage nicht beantworten. Aber es wartet schon das ASUS Eee Pad Transformer, das mit einem 10-Zoll-Bildschirm ausgestattet ist…

Share/Save/Bookmark


top
 
FireStats icon Powered by FireStats