Responsitive Webdesign, ein paar Stolpersteine

Ahh, Responsitive Webdesign, ein Begriff, der momentan in aller Webdesigner Munde ist. Es ist aber auch Reizvoll! Man schreibt einmal eine Webseite und bestimmt anschließend durch Media-Queries, wie diese auf mobilen Endgeräten oder eben dem klassischen Desktop aussieht. Keine Weichen auf Basis des User-Agents, keine Subdomains für die mobile Webseite, alles aus einer Hand. Ja, ich bin auch diesem Trend verfallen und habe – dank Inizializr mit dem Responsitive Design – auch schon Erfahrungen in der Praxis gesammelt.

Für mein aktuelles Projekt soll natürlich auch alles ganz hip werden. Von Anfang an auf Responsivität ausgelegt, selbst bei Bildern und eingebetteten Medien, soll die Seite auf Smartphones, Tablets, Laptops und großen Desktop-Monitoren gut aussehen und bedienbar sein. Gäbe es da nicht die kleinen Probleme…

iFrames! Ich dachte, es wäre recht simple damit umzugehen. Am Beispiel orientiert, habe ich mich selber in der Praxis versucht. Aber ganz puristisch:

iframe {
    width: 100% !important;
    max-width: 600px;
    margin: auto;
    height: auto;
}

Doch leider war es dann nicht ganz so einfach. Derweil eingebettete Bandcamp-Player soweit sehr gut aussahen, wurden Youtube-Videos, die per oEmbed eingebunden wurden, plötzlich gerade mal auf ~150px Höhe geschrumpft. Also: Attribut „height“ wieder aus der CSS-Definition gekickt, alles gut!

Doch derweil mein „margin: auto;“ den Bandcamp-Player schön zentriert darstellt, ist der Youtube-Player immer noch linksbündig. Lange musste ich den unterschied suchen. Es liegt im Attribut „seamless“ des iFrames, mit dem die Player eingebunden werden, Bandcamp setzt das Attribut standardmäßig, derweil es Youtube fehlt. Eine Zeile jQuery-Code hilft mir hier:

$("iframe").each(function(){$(this).attr("seamless", "seamless");});

Facebook-Comments! Obwohl Facebook selber eine sehr gute mobile Webseite hat, scheinen die Social Plugins nicht sonderlich responsitiv zu sein, sondern sind mehr oder minder statisch. Nach einfachem Google um das Problem, fand ich schnell Hilfe:

<style>
.fb-comments, 
.fb-comments iframe[style], 
.fb-like-box, 
.fb-like-box iframe[style] {
    width: 100% !important;
}
.fb-comments span, 
.fb-comments iframe span[style], 
.fb-like-box span, 
.fb-like-box iframe span[style] {
  width: 100% !important;
}
</style>
Advertisements
Getaggt mit , , , , , , ,

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: