How we decreased sign up confirmation email bounces by 50%

People would misspell their email addresses and be unaware of it, resulting in a delivery failure and a lost user. And it got even more interesting – most of these invalid email addresses were a result of a misspelled domain; “hotmail.con”, “gnail.com”, “yajoo.com”. A clear opportunity for improvement.

Kicksend überprüft die E-Mail-Adressen bei der Anmeldung auf Tippfehler und hat damit großen Erfolg. Ein kleines, aber feines Detail.

Responsibles einbetten von Videos mit FitVids

Videos gescheit in ein responsibles Layout einzubinden ist nicht ganz einfach. Sofern man auf den HTML5-Element video zurückgreift, ist das keine Raketenwissenschaft. Dann kann man nämlich diesen CSS-Code verwenden: video { max-width: 100%; height: auto; }.
Für eingebettete Videos von Fremdhostern, YouTube oder Vimeo zum Beispiel, ist das aber nicht so einfach. Denn diese werden über einen iframe eingebunden. Dave Rupert hat sich dazu ein paar Gedanken gemacht und ein kleines jQuery-Plugin geschrieben: FitVids. Dieses übernimmt die richtige Skalierung des Videos. Wie einfach das geht, zeigt folgendes Video.

Wer sich die manuelle Einrichtung des Plugins sparen möchte und WordPress benutzt, dem ist sicherlich mit dem FitVids for WordPress-Plugin geholfen. Und ich bin jetzt zufrieden und kann einen weiteren Haken auf der “Was mich am Blog noch stört”-Liste machen.

Die Woche und ich – Kalenderwoche 3

Montag, 16. Januar 2012

Nur mäßig ausgeschlafen starte ich in die Woche. Dennoch komme ich arbeitstechnisch gut voran, mein jQuery-Slider-Plugin wird weitestgehend fertig und besteht auch diverse Browsertests. Gegen Abend geht es mir nicht sonderlich gut, ich raffe mich trotzdem auf und gehe einkaufen und zum Webmontag. Während ich dort den Vorträgen zuhöre, beruhigen sich meine Bauchschmerzen auch wieder und ich bin froh nicht auf dem Sofa vergammelt zu sein.

Dienstag, 17. Januar 2012

Selten erlebte ich einen weniger berichtenswerten Tag. Aber das leckere Pesto war lecker.

Leckeres Pesto von Barilla

Weiterlesen →

Die Woche und ich – Kalenderwoche 2

Montag, 09. Januar 2012

Nach fast 9 Stunden Schlaf schäle ich mich müde aus dem Bett. Das Wochenende hat, nachdem ich sowieso ja schon müde war, nicht gerade zu meiner allgemeinen Fitness beigetragen. Der Tag vergeht relativ schnell, am Nachmittag gibt es Waffeln in der Firma. So soll das sein!
Am Abend lerne ich, dass fünf Minuten nicht ausreichen um den Zug in Mehlem zu bekommen. Er fährt mir vor der Nase weg. Zu Hause erwartet mich ein fast fertiges Abendessen und nachdem im Heimkino noch drei Folgen White Collar liefen, geht es zügig ins Bett.

Dienstag, 10. Januar 2012

Ich bin schon wieder ein wenig fitter. Mein Arbeitstag beinhaltet ein langes, aber durchaus interessantes Meeting und ein wenig Code-Analyse. Meine virtuellen Rechner mit den Internet Explorern machen sich das erste Mal wirklich bezahlt, ich finde direkt den passenden Fehler.
Fräulein Anna und ich hängen am Abend weitere Vorhänge auf und fragen uns, ob wir diese Wohnung eigentlich jemals wirklich komplett eingerichtet bekommen.

Mittwoch, 11. Januar 2012

Mein Arbeitstag ist recht interessant: Ich bastele an einigen jQuery-Funktionen herum und merke, dass ich hier auf jeden Fall noch ein wenig Nachlegen muss, was meine Kenntnisse angeht. Dennoch bin ich guter Dinge, denn beim Arbeiten an Sachen lerne ich immer noch am Meisten.
Als ich nach Hause komme, erwartet mich bereits ein Überraschungsgast. In der Küche steht… Wasser. Den Rest des Abends verbringen wir damit, den Boden zu wischen und die kaputte Spülmaschine trocken zu legen. Ich ärgere mich nicht wenig.

Donnerstag, 12. Januar 2012

Ich arbeite weiter an meinen jQuery-Kenntnissen. Einige Dinge funktionieren zwar wie sie sollen, über das “Warum” grübele ich allerdings noch. Allerdings merke ich auch, dass mir die Syntax schneller von der Hand geht. Ich scheine also doch Fortschritte zu machen.
Am Abend muss ich mich erst mal um Fräulein Anna kümmern, die von einer Erkältung dahingerafft wurde. Ich koche Tee, gehe einkaufen und hole so dies und das. Es macht fast ein wenig Spaß. Außerdem bekomme ich noch eine Menge getan. Sie Anzahl der abzuarbeitenden Mails sinkt rapide, ich bestelle eine neue Spülmaschine und mache meine Lektionen für diese Woche beim Code Year.

Freitag, 13. Januar 2012

Ich bin weiterhin gesund und werde es auch bleiben. Ein Glück! So technisch gesehen haben meine Lektionen von gestern schon ganz bestimmt etwas gebracht, denn ich stelle kurz vor Feierabend mein erstes jQuery-Plugin fertig. Das ist auch gut so, denn ich hatte mich so festgebissen, dass ich sonst sicherlich das Wochenende damit verbracht hätte.
Am Abend bin ich dann wieder Krankenpfleger. Auch wenn ich mich eigentlich ja gerne kümmere, macht es mich doch ein wenig genervt das ich eigentlich nichts ausrichten kann.

Samstag, 14. Januar 2012

Dem Fräulein geht es den ganzen Tag gar nicht gut. Ich pflege weiterhin fleißig, bekomme aber sonst nichts von dem getan was ich mir so vornahm. Das ärgert mich dann schon ein wenig, schließlich sind meine freien Wochenenden zu Hause doch eher spärlich. Andererseits habe ich großes Mitleid, denn krank sein ist bekanntlich kein großer Spaß. Gegen Abend begleite ich Mademoiselle zu einer Ärztin die, glücklicherweise nicht weit von uns, Samstagsdienst hat.
Nachdem ich meinen Pflegefall früh ins Bett gebracht habe, schaue ich mir Set Up an, bin auch damit unzufrieden und gehe dann einfach auch ins Bett.

Sonntag, 15. Januar 2012

Gammel-Sonntag, unblogbar belanglos. Wir verbringen den Tag auf dem Sofa und ich gehe mehr nebenbei meinen Hausmann-Aktivitäten nach und beseitige einen Spülberg und mache Wäsche. Der Tatort am Abend rundet das Wochenende passend ab und ist auch nicht sonderlich spannend.

Automatische Bildgrößen mit jQuery

Manchmal möchte ich ja gerne meine Bilder auch in schön groß präsentieren, damit sie richtig wirken. Dummerweise haben nicht alle Menschen Displays mit mindestens 24″-Format. So muss man ein wenig gucken, dass sich der liebe Benutzer nicht tot scrollt oder das Bild gar nicht in seiner Gesamtheit anschauen kann.

Deshalb habe ich mal ein wenig in die jQuery-Trickkiste gegriffen und ein kleines Stück Code geschrieben, dass es mir erlaubt die Bilder in möglichst großer Größe einzubinden. Es wird dann automatisch so skaliert, dass es sich in die Browsergröße des Besuchers schön einpasst und zentriert dargestellt. Nachteil daran: Die Dateigröße schiesst natürlich in die Höhe, was bezüglich der Ladezeiten auch nicht so richtig Spaß macht. Damit das nicht überhand nimmt, habe ich die Maximalhöhe der Bilder auf 900 Pixel beschränkt. Ich denke das reicht völlig aus.

Weiterlesen →

Howto: Das Kommentarfeld in WordPress dynamisch vergrößern lassen wie bei Facebook

Ein kleines Detail das an meinem Blogdings hier, das ich ziemlich gerne mag, ist das sich automatisch vergrößernde Kommentarfeld unter den Einträgen. Wie so oft ist das Einbauen dieses Features recht simpel.

Zuerst lädt man sich nämlich das Elastic Plugin für jQuery runter und dann direkt wieder hoch. Am besten in den Ordner des aktuell verwendeten WordPress-Themes. Anschließend muss man es im Kopfteil der Seite, also in der header.php laden lassen. Das geht mit folgender Code-Zeile, man sollte darauf achten das man das Plugin erst nach jQuery lädt.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.elastic.js"></script>

Anschließend muss man das Plugin noch auf ein Textfeld ansetzen. Bei WordPress hat das Kommentarfeld normalerweise die ID comment. Deshalb sieht die entsprechende Zeile Code so aus:

$(document).ready(function(){
	//Elastic textarea for comments
	$('#comment').elastic();
});

Die packt man dann ebenfalls in den head der Seite in ein script-Element. Oder man nutzt die von mir empfohlene Alternative: Wie glaub ich schon einmal erwähnt, habe ich solche Dinge in einer extra Datei namens functions.js ausgelagert.

Ausprobieren kann man die Funktionalität in jedem Kommentarfeld auf dieser Seite. Man muss nur genug tippen.

Lazy Load – Bilder beim Scrollen einer WordPress-Seite nachladen

Letztens fragte man mich, wie das mit dem langsamen Nachladen der Bilder auf meiner Seite funktioniert. “Ganz einfach!” antwortete ich. “Da schreibe ich mal ein paar Zeilen zu.” Here we go:

Um die Bilder nachzuladen nutze ich ein Plugin für das Javascript-Framework jQuery. Das Plugin hört auf den schönen Namen Lazy Load und gibt es schon eine ganze Weile. Ich wundere mich ein wenig, dass es jetzt erst in Mode kommt. Grundidee des Plugins ist es gar nicht, die Bilder schön einblenden zu lassen. Eigentlich geht es darum, die Ladegeschwindigkeit der Seite beim ersten Laden zu erhöhen. Dazu werden zuerst nur die sichtbaren Bilder geladen und die weiteren Bilder dann beim scrollen.

Um das Plugin zu installieren sind nur wenige Schritte notwendig: Davon ausgehend, dass man jQuery bereits eingebunden hat, lädt man sich das Plugin schnell von der Lazy Load-Seite runter und packt es in den Ordner des eigenen WordPress-Themes. Anschließend bindet man die neue Datei dann mit folgender Code-Zeile in den Kopf der Seite (also in das head-Element).

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lazyload.js"></script>

Nun muss dem Script nur noch gesagt werden, welche Bilder eigentlich mit dem Effekt nachgeladen werden sollen. Bei mir sollen das alle großen Bilder in den Beiträgen sein. Da ich sonst alle Bilder im Layout per CSS eingebunden habe, kann ich das Plugin einfach auf dem img-Tag ansetzen.

	//Fauler Bildlader
	if(!navigator.userAgent.toLowerCase().match('ipad')) {
		$("img").lazyload({effect : "fadeIn"});
	};

Nun mag man sich wundern, was das if soll. Ganz einfach: Mir war aufgefallen, dass das iPad leider nicht mit dem Javascript zurechtkommt und statt der nachzuladenden Bildern nur das Fehlersymbol angezeigt wurde. Mit der kleinen Abfrage wird das Problem umgangen.

Für meinen Bedarf war es das dann auch schon. Auf der Plugin-Seite werden die weiteren Optionen des Plugins ausführlichst erklärt.

Bildbeschriftung mit jQuery

Dafür das es gar nicht lange gedauert hat, ist das Ergebnis schon recht ansehnlich: Die Bilder in diesem unglaublich belanglosen Blog sind nun auch mit einer tollen Beschriftung versehen. Aber nur, wenn man mit der Maus darüber fährt.

Realisiert habe ich das mit Hilfe von ein wenig jQuery, HTML und CSS. Bevor nach dem Klick ein paar Code-Schnippsel kommen, hier ein Anwendungsbeispiel:

Die Beschriftung dieses Bildes lautet <em>Blaues Fahrrad</em>.<br>Und das alles, ohne beim Schreiben des Eintrages viel Aufwand zu haben.

Weiterlesen →

Plugin? Pah! – Ein Tutorial

Da fragte mich der Andi dieser Tage doch, mit welchem Plugin ich denn die Schlagworte und verwandten Einträge unter einem Eintrag hier aus- und einblenden lasse. Plugin? Pah! Natürlich habe ich da selbst ein wenig Hand angelegt. So sieht das übrigens ausgeklappt aus, zum Beispiel unter dem vorigen Beitrag1:

Nachdem ich eine kurze Weile beleidigt war, erklärte ich die näheren Umstände und dass man nicht immer alles per Plugin lösen muss. Daraufhin wurde ich als “Programmierer” beschimpft. Wieder war ich für kurze Zeit beleidigt. Anschließend kam dann meine Gutherzigkeit doch wieder durch und so versprach ich dann, mal zu erklären wie man so was selbst baut. Eigentlich ist das nämlich nicht schwer. Und das gibt es dann nach dem Klick.

Weiterlesen →

  1. Verwirrend übrigens, einen Screenshot in Originalgröße in den Eintrag einzublenden. Ich will da dauernd draufklicken. []
CC-BY-SA