Notiz an mich selbst: Responsive Links

Ich bastel mal wieder an meinem Layout herum. Warum nicht, ich habe ja sonst nix zu tun. Da ich seit einer gefühlten Ewigkeit bereits das reaktionsfähige von iA³ Template for WordPress nutze (das mich zwischendurch total annervt, aber trotzdem schick ist), werde ich auf dem reaktionsfähigen Weg bleiben.

Abgesehen von solchen Micro-Webseiten wie Blogs gibt es inzwischen etliche große Webseiten, die auch reaktionsfähig sind. In den letzten Wochen hat sich einiges dazu in meinem Reader angesammelt, dass ich jetzt hier rein schreibe um es nicht zu vergessen.

Schrift. Grundlage. Einfache Sache.
elmastudio – Schrift-Optimierung im responsive Webdesign

Neu. Jetzt in Version 3 mit drölf Milliarden Gaga-Kniffen, insgesamt aber schon irgendwie state-of-the-art. HTML5 Boilerplate. Was die sich alles nur für das HTML haben einfallen lassen – Sensationell. Auch deren Google Analytics Artikel ist ein Knaller. Mit solchem Firlefanz wie Events beim Scrollen. Großes Kino.

Völlige Nerd-Tricks gibt es auch bei wirres.net redesign. Großes Kino, funktioniert und den HTML5-videoplayer schaue ich mir auch noch an.

Das ist zur Zeit noch die ganz große Schwäche dieses ganzen Responive-Gelöts. Das einbetten von Videos oder Werbung. Alles kaputt, aber vielleicht hilft Responsive embeds.

Wie sagt man so schön? Relaunch und gesunde Mittelwege. Immer wieder ein Problem.

Wie man trotzdem volles Rohr mit einer großen Seite auf ein reaktionsfähiges Layout wechselt, zelebrieren die Kollegen bei readwriteweb – The Boston Globe. Netter Einstieg, wird dann in How to Approach a Responsive Design im Detail beschrieben. Endlich erklärt mal jemand, warum sie die gewählten Breakpoints setzen. Sehr gut. Absoluter Lesebefehl, wenn ihr euch damit beschäftigt.

Zum gleichen Projekt gehört auch alistapart – Responsive Images: How they Almost Worked and What We Need

Und dort schreibt jemand über den The responsive design process. Kann man auch lesen, da taucht dann zum ersten Mal ein Kunde auf.

Unkommentiert, aber auch gut:
codecandies – Responsive Content
anmutunddemut – New Frontier Responsive Design
marctv – Responsive Web Design
lukew – Mobile First

Und dann auch noch das da:
Der nächste große Blocker, ich wiederhole mich mit den Jahren, ist natürlich wieder Bannerwerbung. Bannerwerbung, mit ihrer kindischen Fixierung auf Pixelmaße, hat fluide Seiten genauso verhindert, wie sie jetzt dem responsiven Design im Wege stehen.
codecandies – Praxisprobleme des responsive webdesign

Wenn jemand eine gescheite reaktionsfähige Lösung für Adsense kennt: HER DAMIT. Damit kann man sofort das Internet besser machen. Werbung bleibt kaputt im reaktionsfähigen Layout, bzw. es verstösst gegen die Adsense TOS, wenn man sie anpasst.

7 comments

  1. Marc says:

    Danke fürs Verlinken. YT Videos lassen sich eigentlich sehr gut einbinden. Ich habe dafür auch ein WP Plugin namens MarcTV jQuery Video geschrieben, dass auch in meinem Blog in dem verlinkten Artikel zum Einsatz kam.
    Das erzeugt aus Links zu den Videoseiten bei YT per CSS Klasse „videoembed“ einen iframe der mitskalieren kann.

  2. ben_ says:

    Danke für den Link. Und. Kleine – inoffizielle – Bonusinfo: Wir arbeiten bei iA gerade an weiteren – latürnich auch responsiven – Themes. :)

  3. ix says:

    schöne zusammenfassung. dein link auf mich ist etwas unspezifisch. vermutlich meintest du diese seite. und für responsive werbebanner gibts ne einfache lösung: banner die sich nicht anpassen (können) einfach per mediaquery (oder jquery) ausblenden. stattdessen per mediaquery (oder jquery) einersatzbanner einblenden, die passen.

    • @ix
      hups. Das war keine Absicht. Ist geändert. Danke
      War es nicht so, dass ausblenden von adsense eher suboptimal ist und gegen deren TOS verstösst?

      @ben_
      Oh. Sehr schön. Ich bin gespannt

      @Marc
      Ich verstehe das Plugin nicht. Ich nehme immer den Einbetten-Schnipsel. Da greift dein Plugin nicht, oder?

  4. ix says:

    @sven dann lade die passenden adsense-anzeigen einfach per jquery, je nach bildschirmgrösse, nach. dann brauchst du es nicht auszublenden. also 1) seite laden, 2) wenns fertig geladen ist, per jquery prüfen wie gross der bildschirm ist und 3) die entsprechende adsense-anzeige per jquery an die jeweiligen platzhalter laden.

Es können keine Kommentare mehr abgegeben werden.