Lesetipp: Frontend Feeds

Louis Lazaris von Impressive Webs hat gestern eine Liste von Blogs und Magazinen für Frontend Developer auf GitHub veröffentlicht. In den Frontend Feeds ist das Who’s Who der englischsprachigen Frontend-Szene enthalten. Wer also auf der Suche nach eventuellen neuen Quellen ist, um auch weiterhin up to date zu bleiben im schnelllebigen Frontend-Bereich, sollte dort einmal vorbei schauen.

Weiterleitungen (redirects) in der .htaccess

Nachdem die letzten Tage eine ganze Reihe von Links zu seit Jahren nicht mehr existierenden Seiten hier angespült wurden und die Google Webmaster Tools schon mahnende Mails verschickten, habe ich mich schlau gemacht wie darauf am besten zu reagieren ist. Standardmäßig ist der Http-Status-Header im Falle einer nicht gefundenen Ressource 404, was aber eine an sich doch eher dürftige Information für den aufrufenden Client und auch den Googlebot ist.
Abhilfe schaffen Http-Statuscodes in der .htaccess-Datei.

Http-Statuscode 410: Ressource nicht mehr existent

RewriteEngine on
Redirect 410 /relativer/Link/zur/nicht/mehr/existierenden/Ressource/

Bei nicht mehr existenten Links empfiehlt es sich, den Statuscode 410 zurückzusenden, der ganz klipp und klar ausdrückt dass die angefragte Ressource nicht mehr vorhanden ist und man den Link darauf doch bitte entfernen soll.

Http-Statuscode 301: Ressource ist an einer anderen Adresse verfügbar

Redirect 301 /relativer/Link/zur/nicht/mehr/existierenden/Ressource/ /relativer/neuer/Link/zur/umgezogenen/Ressource/

Wenn sich hingegen nur der Link zu einer Ressource geändert hat, kann der anfragende Client mit Hilfe des 301-Statuscodes zur neuen Adresse umgeleitet werden.

Links

HTTP response codes

Lesetipp: Designing In The Open

Brad Frost redesigned die Website der Greater Pittsburgh Community Food Bank. Das Besondere daran? Jeder Schritt des Redesigns wird öffentlich gemacht. „Designing in the Open“ heißt diese Methode, die laut Brad eine ganze Reihe von Vorteilen (aber natürlich auch einige Nachteile) bietet. Im Beitrag werden diese ausführlich genannt, nebst Beispielen von ähnlichen Projekten sowie hilfreichen Tipps, wie dem Kunden so etwas nahe gebracht werden kann.

Die Redesign Timeline hat mir bereits etwas neues gezeigt: Zum einen das Content Inventory, dass ich schon oft vermisst habe (aber so leider noch nie angelegt habe) und zum anderen das Pattern Lab, dass ich gern für meine nächsten Projekte ebenfalls bauen möchte.

Einzelne YouTube-Videos automatisch und in Endlosschleife abspielen

Um YouTube-Videos automatisch abzuspielen, genügt es de folgenden Parameter an die Video-Url anzuhängen:

autoplay=1

Zum Wiederholen in Endlosschleife wird folgender Parameter angehängt:

loop=1

Aber Achtung, mittels iframe-eingebettete Videos benötigen zusätzlich noch den playlist-Parameter, da der loop-Parameter nicht hinlänglich unterstützt wird.
Sollte also als Einbettungsmethode das iframe gewählt sein, muss folgendes ergänzt werden:

playlist=[VIDEO-ID]

Dadurch wird eine Playlist gebaut, in der ein und das selbe Video wiederholt wird.

Beispiel

http://www.youtube.com/embed/PpclraSt87U?rel=0&autoplay=1&loop=1&playlist=PpclraSt87U

Links

YouTube Embedded Players and Player Parameters

Lesetipp: Über die richtige Einbindung von Webfonts

Im Smashing Magazine gibt es zwei sehr gute Artikel zum Thema @font-face. In Avoiding Faux Weights And Styles With Google Web Fonts wird erklärt, wie Schriften über das Google Font Directory richtig eingebunden werden können. Ganz so trivial ist das nämlich nicht, denn die Einbindung á la Google Webfonts funktioniert nicht richtig im IE 7 und 8. Dies führt dazu, dass diese beiden Versionen des Internet Explorer einzelne Schriftschnitte „faken“ und so die Lesbarkeit und Darstellung von Textabschnitten verschlechtern. Und obwohl der Fehler seit Juni 2010 bekannt ist, wurde er scheinbar immer noch nicht gefixt, so dass der verlinkte Artikel nach wie vor aktuell ist.

Der zweite Artikel, Setting Weights And Styles With The @font-face Declaration , beschäftigt sich- unabhängig von Google Webfonts- mit der richtigen Einbindung von verschiedenen Schriftschnitten, geht dabei über bold und italic hinaus und behandelt auch so verrückte Sachen wie einen eventuellen light- oder semibold-Schriftschnitt samt Fallack-Lösungen für Geräte, die mit @font-face nichts anfangen können (hallo Windows Phone 7.5).