Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

JavaScript und der Platzmangel auf kleinen Smartphone-Displays

Montag, 4. Oktober 2010

Mit dem iPhone kann man sehr gut im Web surfen. (Welch banale Aussage!) Was liegt also näher, als meine eigene Site auch ein wenig ans iPhone (und natürlich andere Smartphones) anzupassen. Mit CSS und einer Abfrage des User Agent ist das ja schließlich kein Problem. Bleibt das Problem der Bildschirmgröße. Im Falle von webdesign.weisshart.de ist auf jeder Seite erst einmal nur das relativ umfangreiche Navigationsmenü zu sehen, und erst Scrollen (oder Antippen des Skiplinks) zeigt den Inhalt der Seite. Nicht sehr elegant.
Screenshot mit Menü

Aber Abhilfe ist nicht fern.
Vor einem Jahr habe ich eine Technik vorgestellt, Bereiche auf Webseiten per JavaScript ein- und auszublenden. Nichts spricht dagegen, zu dieser Technik zu greifen; auch und vor allem, weil das Script die Technik der "Graceful Degradation" einsetzt. Falls JavaScript nicht verfügbar ist, werden die ausgeblendeten Bereiche immer angezeigt. Es geht also keine Information verloren. Im Falle einer Seitennavigation ist dies natürlich absolut unverzichtbar.
Die Technik funktioniert ohne jegliche Anpassung sofort auf einem Touchscreen. Eine Lösung mit CSS-hover könnte dies nicht ohne weiteres. Auf Touchscreens gibt es keine Maus, und ohne Maus gibt es kein hover.
Screenshot mit zugeklapptem Menü

Das sieht doch gleich viel aufgeräumter aus.

Keine Überraschung war, dass VoiceOver (der Screen Reader des iPhone) mit der Technik anstandslos klar kommt. Ebenso wie auch Screen Reader unter Windows.

Soundbeispiel 1: VoiceOver liest die Startseite mit "zugeklappter Navigation", also im default-Zustand nach Aufruf der Seite. Bitte das "Plus" bei ca. 0:10 Min. beachten.


Audio Download des Hörbeispiels (mp3 - 237 kB)

Mit dem iPhone kann man sehr gut im Web surfen. (Welch banale Aussage!) Was liegt also näher, als meine eigene Site auch ein wenig ans iPhone (und natürlich andere Smartphones) anzupassen. Mit CSS und einer Abfrage des User Agent ist das ja schließlich kein Problem. Bleibt das Problem der Bildschirmgröße. Im Falle von webdesign.weisshart.de ist auf jeder Seite erst einmal nur das relativ umfangreiche Navigationsmenü zu sehen, und erst Scrollen (oder Antippen des Skiplinks) zeigt den Inhalt der Seite. Nicht sehr elegant.
Screenshot mit Menü

Aber Abhilfe ist nicht fern.
Vor einem Jahr habe ich eine Technik vorgestellt, Bereiche auf Webseiten per JavaScript ein- und auszublenden. Nichts spricht dagegen, zu dieser Technik zu greifen; auch und vor allem, weil das Script die Technik der "Graceful Degradation" einsetzt. Falls JavaScript nicht verfügbar ist, werden die ausgeblendeten Bereiche immer angezeigt. Es geht also keine Information verloren. Im Falle einer Seitennavigation ist dies natürlich absolut unverzichtbar.
Die Technik funktioniert ohne jegliche Anpassung sofort auf einem Touchscreen. Eine Lösung mit CSS-hover könnte dies nicht ohne weiteres. Auf Touchscreens gibt es keine Maus, und ohne Maus gibt es kein hover.
Screenshot mit zugeklapptem Menü

Das sieht doch gleich viel aufgeräumter aus.

Keine Überraschung war, dass VoiceOver (der Screen Reader des iPhone) mit der Technik anstandslos klar kommt. Ebenso wie auch Screen Reader unter Windows.

Soundbeispiel 1: VoiceOver liest die Startseite mit "zugeklappter Navigation", also im default-Zustand nach Aufruf der Seite. Bitte das "Plus" bei ca. 0:10 Min. beachten.

Audio Download des Hörbeispiels (mp3 - 237 kB)

Nun wird das Pluszeichen angetippt. VoiceOver liest weiter, und "sieht" jetzt auch das Navigationsmenü. (Das Minus zu Beginn der Aufnahme würde beim Antippen das Navigationsmenü natürlich wieder schließen.)

Audio Download des Hörbeispiels (mp3 - 171 kB)

Schön, wenn barrierefreie Seiten ohne großen Aufwand auch auf Geräten funktionieren, die es zur Zeit der Entstehung der Site noch gar nicht gab.


Archiv:

Kategorien:

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