Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

RWD und YouTube einbetten

Montag, 23. November 2015

YouTube Videos einbetten ist nicht schwer. YouTube selbst stellt ja den Code dafür unter "Teilen" - "Einbetten" bereit:
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>
Das Problem dabei: Die hart codierten Abmessungen verbieten sich in einem Responsive Design (RWD). Die maximale Breite ließe sich mit CSS iframe {max-width:100%;} responsive machen. Aber die Höhe? Das für Bilder gebräuchliche height:auto; funktioniert leider nicht.

Die Lösung:

Das iframe wird in ein zusätzliches Div gepackt:

<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx" allowfullscreen></iframe>
</div>

und ins CSS:

.yt {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
height: 0;
overflow: hidden;
}
 
.yt iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:none;
}

Danke an A List Apart

Demo:

Nachtrag 24.11.2015

Nein, CSS-Tricks hat sicher nicht bei mir abgeschrieben. Sondern die Sache mit der proportionalen Skalierung von beliebigen Inhalten noch weiter gefasst. (Englisch)


JavaScript async

Seit HTML5 gibt es für JavaScript das Attribut async:
<script src="demo.js" async></script>
Nur: Wozu genau dieses Attribut dient, war mir nie so recht bewusst. Bis gestern.

Ich setze auf mehreren Kundenseiten ein Widget von HolidayCheck ein.

Screenshot
Das Widget zeigt nicht nur einen statischen Banner, sondern auch aktuelle Informationen. Hier beispielsweise die Gesamtbewertung 5.6 "Sehr gut".

Aber HolidayCheck war nicht erreichbar.
Der Ausfall von HolidayCheck führte dazu, dass auf die Ausführung eines JavaScripts von HolidayCheck gewartet wurde. Vergeblich. Währenddessen wurden weitere Seiteninhalte nicht geladen. Dadurch fehlte beispielsweise das Navigationsmenü. Die Site war unbenutzbar!

Abhilfe: Siehe oben: async.
Auf w3schools.com ist genau beschrieben, was async macht:

If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)

Wer lesen kann, ist klar im Vorteil. :-)


RWD und umfließender Text

Freitag, 20. November 2015

Bilder von Text umfließen lassen — mit CSS float kein Problem:

Screenshot 1
Text umfließt mehrere Bilder. Hässlicher Leerraum wird dadurch vermieden.

Auf Tablets, Smartphones und unterschiedlichsten Monitorgrößen kann sich jedoch ein hässlicher Effekt ergeben.

Screenshot 2
Der für den Text verfügbare Platz wird so schmal, dass nur noch ein Wort pro Zeile angezeigt wird.

Diesen Effekt zu vermeiden, ist gar nicht so trivial. CSS min-width für den umfließenden Text scheitert. Lange Zeit habe ich mir damit beholfen, zwischen die ersten Wörter des floatenden Textes mehrere &nbsp;s einzufügen. Sehr unästhetisch. Seit ich automatische Tennung (hyphens) für Fließtexte verwende, genügte selbst das nicht mehr.

Meine Lösung:
Vor den floatenden Text kommt ein <div class="minwidth"></div>
und ins CSS:
.minwidth {min-width:10em;overflow:hidden;}

Wenn neben dem Bild weniger als 10em Platz verfügbar ist, wird das Div — und damit auch der folgende Text — unter das Bild geschoben. Problem gelöst.

Aber ein leeres Div manuell ins Markup einfügen, um das Layout zu retten. Das ist ja schon wieder "bäh".

An dieser Stelle kommt die Allzweckwaffe jQuery zum Einsatz.

$(function() {
$('.toolthumb').after('<div class="minwidth"></div>');
});

fügt nach jedem Element mit der Klasse toolthumb (also nach all meinen zu umfließenden Bildern) das obige Div ins DOM ein.
Problem gelöst. Ohne zusätzliches Markup, und vor allem, ohne dass ich in jedem einzelnen Fall dran denken müsste.


RWD ist gar nicht schwer

Montag, 16. November 2015

… und sogar nachträglich machbar. Wenn das Desktop-Layout sauber strukturiert ist.
Ein Beispiel gefällig:

Das Navigationsmenü auf www.backis-welt.de befindet sich im Quellcode nach dem Inhalt, also am Ende der Seite. Per CSS float wird es rechtsbündig dargestellt:

Screenshot Desktop Seite
Die "normale" Darstellung der Seite auf Desktop-PC und Notebook. Das Navigationsmenü wird in der rechten Spalte dargestellt.

Für die Darstellung auf Smartphones ist dieses Layout natürlich nicht geeignet.
Einige wenige Zeilen CSS verhindern das floating. Die Naviation wird, wie im Quellcode vorgegeben, am Ende der Seite dargestellt.
Der Sprunglink "Zum Wegweiser" (zur Navigation) — der auf PC und Notebook versteckt ist, und dort nur sichtbar wird, wenn er mit der Tab-Taste angesprungen wird (CSS: focus) — wird für die mobile Ansicht permanent dargestellt. Das ist notwendig, weil es auf Smartphones keine Tab-Taste gibt.
Anstelle des (Hamburger-)Menü-Buttons, der ein Menü einblendet, erfüllt hier also ein seiteninterner Sprunglink zur Navigation den Zweck.

Screenshot 1 iPhone
Die Darstellung auf dem Smartphone. Der Sprunglink zur Navigation "Zum Wegweiser" oben.
Screenshot 2 iPhone
Die Navigation wird für das Smartphone per CSS auf Seitenbreite vergrößert.

Der CSS-Code, der all dies ermöglicht, umfasst im Prinzip nur wenig Zeilen:

@media only screen and (max-width: 680px) {
 
/* Angaben zurücksetzen, Elemente auf 100% Breite einstellen: */
body,#main,#kopf,#inhalt, #navi, #kopf {border:0;margin:0;padding:0;box-sizing:border-box;width:100%;max-width:100%;}
 
/* Querformat-Darstellung auf Smartphones */
body { -webkit-text-size-adjust:none;font-size:100%;}
 
img {max-width:97%; height:auto;}
#navi ul {margin-left:0 !important}
#navi li {margin:5px 0 !important}
 
/* Skiplink positionieren */
.skip a {left:1em;top: 7em}
 
}


WWW - das World Wide Web ist 25 Jahre alt

Freitag, 13. November 2015

Happy 25th Birthday WWW.
Der britische Physiker Tim Berners-Lee veröffentlichte am 13. November 1990 unter der Domain info.cern.ch die erste Website der Welt.
Einfach mal reinschauen. Funktioniert mit jedem Browser, und ist responsive und 100% barrierefrei.


Gebärdensprache - Barrierefreiheit auch für gehörlose Menschen

Freitag, 6. November 2015

Barrierefreie Webseiten — bei diesem Begriff denken die meisten wohl zuerst an Webseiten für blinde Menschen. Aber gehörlose Menschen? Die können doch sehen, und lesen. Für diesen Personenkreis braucht es doch keine speziell barrierefreien Seiten.
Falsch!
Die Muttersprache gehörloser Menschen ist die Gebärdensprache.
Gebärdensprache weist eine eigene Grammatik auf, die sich oft wesentlich von der Grammatik der jeweiligen Schriftsprache unterscheidet.
Schriftsprachen sind für gehörlose Menschen wie Fremdsprachen, die sie erst mühsam erlernen müssen.
Vielen gehörlosen Nutzern fällt es schwer, Schrifttexte im Internet zu verstehen oder zu nutzen, wenn deren Inhalte nicht in Gebärdensprachvideos übersetzt sind.

Leider ist die Übersetzung in Gebärdensprache, sowie die Erstellung eines Gebärdensprachevideos recht aufwendig, und folglich teuer. 1.000,- € für eine Seite mit 300 Wörtern entsprechend ca. 4 Minuten Video sind durchaus üblich.

Das ServiceCenter ÖGS.barrierefrei, ein gemeinnütziger Verein, erstellt Gebärdensprachvideos zu einem Bruchteil der üblichen Kosten. Die Umsetzung ist technisch perfekt.

Ein Demovideo zeigt die Umsetzung mit einem Klick auf das folgende Logo. Das Video beinhaltet ein Kurzportrait von webdesign weisshart. Logo Gebärdensprache

Das Video wird bei ServiceCenter ÖGS.barrierefrei gehostet, die Einbindung in die eigene Website erfolgt ganz einfach durch einen Link.
Alternativ kann das Video aber auch selbst gehostet werden. Das sieht dann so aus.

Die finanzielle und technische Hürde, die ein barrierefreies Angebot auch für gehörlose Menschen häufig verhindert, wurde von ServiceCenter ÖGS.barrierefrei deutlich niedriger gelegt.


Archiv:

Kategorien:

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