Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Hintergrundmusik auf Webseiten - reloaded

Samstag, 31. Januar 2015

Hintergrundmusik auf Webseiten — ja, das gibt es immer noch hier und dort.
Bereits 2009 habe ich zu diesem Thema gebloggt, und ein kleines Script erstellt, damit, wenn schon, die "Hintergrunddudelei" wenigstens erst vom Besucher gestartet werden muss.

Dieses Script basierte damals noch auf Flash. Eine Technik, die im Jahr 2015 nun wirklich nicht mehr nötig ist.
Ich habe das Script daher auf HTML5, und damit von Flash unabhängig, geändert.


Videos im Web - eine schöne Anwendung

Donnerstag, 15. Januar 2015

Für einen Kameramann, der sich auf professionelle Zeitrafferaufnahmen von Natur (Pflanzen, Insekten usw.) spezialisiert hat, durfte ich die Website neu erstellen.

Die Herausforderung dabei: Im Laufe der Zeit sollen bis zu 1000 Video-Clips präsentiert werden. Das Hochladen dieser Datenmenge muss natürlich der Inhaber der Website selbst erledigen. Ich habe daher ein Script erstellt, das aus den Dateien auf dem Server die entsprechenden Vorschauseiten erstellt, und auch die Präsentation der Videos selbst ohne manuelles Zutun erledigt.

Die Videos werden selbstverständlich ohne Flash, mit dem zeitgemäßen <video>-Element von HTML5 dargestellt. Die Dateien werden im MPEG-4/H.264 Video Format bereitgestellt, ein Format, das inzwischen von fast allen Browsern unterstützt wird, sowie zusätzlich im WebM Format. Letzteres wird lediglich noch für Firefox Versionen vor 35.0 und älter auf OSX und Linux-Systemen benötigt, und ist wohl bald verzichtbar.

Der Internet Explorer Version 8, der noch kein HTML5 kann, erhält als Fallback einen Link zum Download, bzw. zum Abspielen des Videos auf einem installierten Player.

Alle aktuellen Tablets und Smartphones mit iOS oder Android Betriebssystem können die "HTML5"-Videos abspielen.
Eine Besonderheit gibt es unter iOS und Android: Weder Autostart, noch das Vorladen der Videos werden unterstützt. Mit der nachvollziehbaren Begründung, das Datenvolumen von mobilen Nutzern erst dann zu belasten, wenn eine manuelle Eingabe erfolgt. Dies führt leider unvermeidbar dazu, dass der Start der Videos auf diesen Systemen deutlich verzögert wird.
Um auf Tablets während der Wartezeit nicht nur eine schwarzes Bild zu zeigen, wird daher zu jedem Clip ein Standbild gezeigt, das aus dem ersten Frame des Clips erzeugt wurde. (Das canvas-Attribut des video-Elements ist hierfür zuständig.)

Eine weitere Herausforderung:
Die Videos sollten an Hand von Stichwörtern durchsuchbar sein.
Die Lösung:
Zu jedem Video-Clip wird eine Textdatei mit entsprechenden Stichwörtern hinterlegt. Meine Suchfunktion wurde entsprechend angepasst: Durchsucht werden die Textdateien, zur Anzeige kommt aber nicht der gefundene Text, sondern das jeweilige Vorschaubild mit zusätzlichen Angaben —Name, Clip-Nummer usw. Das Ergebnis einer Suche ist im Design identisch mit der Anzeige der nach Kategorien unterteilten Clip-Archive.

Um die Seiten so schlank wie möglich zu halten, werden die Vorschaubilder auf dem Server auf kleinstmögliche Dateigröße umgerechnet. Das "Gewicht" der Seiten kann also nicht durch (versehentlich) zu große hochgeladene Bilder ungünstig beeinflusst werden. Bei dieser Gelegenheit werden die Vorschaubilder auch gleich noch mit dem Lupensymbol, das die Möglichkeit der Vergrößerung symbolisiert, versehen.
Ergebnis: Ein Clip-Archiv mit beispielsweise 28 Clips kommt mit ca. 400 kB aus. Erfrischend in Zeiten von 3 MB+ Monsterseiten.

Nachtrag 18.01.2015:
Auf einem Smartphone (Android One) wiegt die gleiche Seite sogar nur 174 kB. RESS macht's möglich.

Für die "Vergrößerung" und die Präsentation der Videos sorgt (auf Desktop und Tablets) Fancybox, eine Lightbox-Variante, die ich bevorzuge, u. a. auch weil sie Screen Reader-Nutzer am wenigsten stört.
Ja, ich weiß, blinde Menschen sind nicht die Zielgruppe dieser Site, aber das ist für mich kein Argument, auf Barrierefreiheit a priori zu verzichten. Daher war es nur naheliegend, auch hier wieder "mein" barrierefreies responsives Dropdown-Menü einzusetzen.


Accesskeys - eine Technik, die sich überholt hat

Sonntag, 11. Januar 2015

Accesskeys, die den Zugriff per Tastatur auf bestimmte Seiten und Inhalte einer Website erleichtern sollten, waren lange Zeit ein fester Bestandteil von barrierefreien Webseiten.
Auch auf meinen Seiten wurde diese Technik eingesetzt.
Ich habe mich entschieden, die Accesskeys nach vielen Jahren von meinen Seiten zu entfernen.

Begründung:

  • Es gab nie einen Standard. Das hatte zur Folge, dass jede Site ihre eigenen Accesskeys definierte. Seitenbesucher mussten also erst einmal herausfinden, welche Accesskeys auf einer bestimmten Site gelten, und sich diese — für jede Site unterschiedlichen — Keys merken.
  • Accesskeys können zu Konflikten mit Tastaturkombis führen, die im Betriebsystem oder im Browser des Benutzers wirksam sind. Dies können sogar vom Benutzer individuell konfigurierte Tastaturkombis sein. Es gibt also keine Tastenkombination, die sicher konfliktfrei arbeitet.
  • Nutzer von Screen Readern wurden gerne als Zielgruppe genannt. Gerade diese Personengruppe hat bessere, universell verwendbare Techniken, um auf Webseiten zu schnell navigieren.

Das HTML5 audio Element - wo Apple falsch denkt

Samstag, 3. Januar 2015

Die HTML5 Elemente audio und video kennen unter anderem die Attribute autoplay und preload. Beide Attribute werden von iOS (und auch Android ab Version 4.2.2) nicht erkannt. Unter iOS muss ein Audio bzw. Video durch eine Nutzereingabe gestartet werden. Das — scheinbar logische — Argument: Benutzer, die im Mobilfunknetz surfen, sollen vor unerwartetem Datenverbrauch geschützt werden.

Ich halte dies für eine unsinnige Bevormundung des Users, und einen Usabilty-Fail.

Beispiele:

  1. Gerade Tablets werden häufig im WLAN genutzt, und nicht automatisch im Mobilfunknetz.
  2. audio autoplay ist nützlich, um bei bestimmten Events Sounds auszugeben. Nicht nur Games nutzen Sounds, auch z. B. mein Chat.
  3. Eine Liste, aus der verschiedene Videos ausgewählt werden können. Nachdem der User ein Video gewählt hat (also bereits einmal eine Nutzereingabe getätigt hat) muss mit einem weiteren Tipp das Video selbst gestartet werden. Eine Zumutung.

Archiv:

Kategorien:

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