Schlagwort-Archive: web design

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>
Getaggt mit , , , , , , ,

Ein neues Web-Projekt: Die technischen Hintergründe

Aktuell arbeite ich an einem neuen Projekt, einem neuen Blog um Musik. Die Seite wird selber gehostet und entsprechend muss etwas vorarbeit geleistet werden.

Das Backend übernimmt wieder WordPress. Es ist einfach ein etabliertes CMS/Blogging-System, mit guter Community und vielen Plugins.

Für das Frontend stand ich wieder vor der Wahl: Ein fertiges Theme nehmen? From Scratch alles selber schreiben? Oder eine Starthilfe nehmen? Mein letztes Theme habe ich mit der Responsive-Konfiguration von Initializr gemacht und war damit eigentlich zufrieden. Doch kürzlich las ich einen Artikel über die Gestaltung von WordPress-Themes mit Bootstrap. Initializr bietet auch Responsive Bootstrap als HTML/CSS Template an. Zwar noch in Version 2.3.2, derweil Bootstrap selber bereits bei 3.0 ist, wenngleich nur als RC2. Aber für den Anfang reicht es. Vielleicht folgt auf die Final Release auch ein Upgrade in meinem Webprojekt.

Anfangs war das Arbeiten etwas ungewohnt. Doch als ich das Grid-System verstanden hatte, machte das Scaffolding richtig Spaß und führte schnell zu ansehnlichen Ergebnissen. Da ich ein sehr minimalistisches Theme haben wollte, und auf eine Sidebar verzichte, benötigte ich vergleichsweise wenig HTML und CSS-Code.

Beim CSS habe ich mich für einen Pre-Processor entschieden, weil DRY – Don’t Repeat Yourself. Ich nutze für Farben und andere Werte gerne Variablen, die ich zuweisen kann. Außerdem liegt mir die Schachtelung/Wiederverwendung der Pre-Processor mehr, als von CSS selber. Nach dem Vergleich von Less zu Sass, habe ich mich für Sass entschieden.

Für geringes Eye-Candy, ein paar aufklappende Elemente, Sticky-Divs, etc., bleibe ich beim gewohnten jQuery. Nichts besonderes und eigentlich der De Facto Standard in der Webentwicklung.

 

Interessanter war eher die strategische Frage um die Handhabung der Kommentare. Wenn man die eigenen Hausmittel von WordPress verwendet, muss man sich zuerst mit dem Layout des Formulars rumschlagen – keine einfache gestalterische Frage, da muss man nur mal Tante Google fragen. Anschließend muss man sich mit Spam rumschlagen. Egal, ob man mit Akismet (problematisch mit Datenschutz und ab wann eine Webseite als „kommerziell“ gilt) oder Antispam Bee schützt.

Bisher habe ich auf Disqus vertraut, was sich bei mir und vielen ähnlichen Blogs gut bewährt hat. Doch leider musste ich feststellen, dass die meisten Kommentare mittlerweile nicht mehr auf der entsprechenden Seite selber, sondern bei Facebook passieren. Inspiriert durch einen Artikel aus der CT, der zu ähnlichem Schluss kommt, probiere ich nun dessen Kommentarfunktion aus.

Getaggt mit , , , , , , , , ,

Webdesign: Sinn und Zweck einer Sidebar

Der Trommelschlumpf und Sabines Traumbilder stellen die interessante Frage: Ist eine Sidebar für Webseiten/Blogs sinnvoll? Wann bietet sie Mehrwert und wo wird sie einfach nur als antiquiertes Relikt oder Werbefläche eingesetzt. Eine Frage an die Webdesigner mit ein paar guten Denkansätzen.

In meinem nächsten Projekt gibt es wohl auch nur noch Head-Navi und Footer.

Getaggt mit , , , , ,