Kirby Image Optimizer – ein Kirby-Plugin

tl;dr
Wir haben ein kleines Plugin für Kirby geschrieben, mit dem die Dateigröße von Bildern optimiert werden kann. Das Plugin ist Open Source und auf Github zu finden, Issues und Pull Requests sind gern gesehen.

Motivation
Bilder (und andere Medien) sind häufig die größten Elemente auf Internetseiten und müssen vom Browser heruntergeladen werden, um dem Benutzer angezeigt zu werden. Wenn die Bilder gut optimiert sind, fällt ihre Größe beim Anzeigen kaum auf. Sind sie das nicht, laden sie nur langsam und die gesamte Seite wird größer. Größere Seiten bedeuten unweigerlich auch längere Ladezeiten und bei einer mobilen Verbindung können diese dann 30 Sekunden und mehr betragen.

Das ist sowohl für unsere Kunden als auch für uns als Dienstleister schlecht: Der Kunde wird mit einer unperformanten Seite assoziiert und wir haben diese unperformante Seite erstellt. Und am Ende des Tages haben beide unzufriedene Kunden.

Wir (und hoffentlich auch jeder andere Dienstleister, der Webseiten baut) optimieren deswegen alle Bilder, die wir auf einer Seite einbinden. Aber gerade, wenn ein CMS im Einsatz ist, bleiben die Bilder nicht lange die gleichen und werden häufig von Kunden gewechselt. Die von Kunden eingepflegten Bilder sind oft nicht optimiert. Das kann am Fehlen von Fähigkeiten oder geeigneter Software, aber auch einfach an Zeitmangel liegen.
Hier kommt der Image Optimizer ins Spiel: Er kann Bilder zwar nicht so genau optimieren wie ein Mensch, aber er kann die Dateigröße von Bildern zumindest in einem annehmbaren Rahmen halten.

Funktion
Das Plugin besitzt zwei Funktionen:

  • Die Qualität von Bildern anpassen (von 0% – 100%)
  • Die Pixelgröße von Bildern anpassen

Nach der Installation muss das Plugin in der config.php aktiviert werden: c::set('imageoptim', true);. Ab hier arbeitet es mit den Standardwerten (90% Qualität, 1920px max-width), diese können aber nach Bedarf angepasst werden. Genaue Information finden sich im Github Repository.

Fehler und Features
Wir haben das Plugin nach bestem Wissen getestet, trotzdem können wir die Realität nicht komplett abdecken. Bei Problemen gerne eine Issue oder am liebsten gleich einen Pull Request öffnen.
Gleiches gilt für Features; das Plugin unterstützt zum Beispiel bisher nur .jpg- und .png-Dateien. Mitmachen ist gerne gesehen!

Slack & Hangouts

Wir haben zu Beginn jedes Arbeitstages ein Meeting. Lange haben wir dafür Skype genutzt. Skype ist super, es ist wie telefonieren, nur am Computer. Es bietet die Möglichkeit zur Videotelefonie und man kann seinen Bildschirm freigeben.
Allerdings hatten wir regelmäßig Probleme mit Skype. Abstürze, Leute konnten dem Call nicht beitreten, es klingelte nur das iPad aber nicht das MacBook. Alles keine Weltuntergänge, aber alles nervige Kleinigkeiten.
Deshalb benutzen wir nun seit einiger Zeit Google Hangouts für alle Arten von Meetings. Hangouts ist super, es ist wie telefonieren, nur am Computer. Es bietet die Möglichkeit zur Videotelefonie und man kann seinen Bildschirm freigeben.
Hangouts Bot
Das beste an Google Hangouts ist für uns aber die Integration in Slack. Mit der Google+ Hangouts App muss nur noch einer von uns /hangout in einen Channel schreiben, und es wird ein Hangout gestartet, dem jeder im aktuellen Channel beitreten kann.
Das nimmt ein Programm aus unserem Workflow heraus und zentralisiert die Kommunikation etwas weiter in Richtung Slack (Natürlich ist der Browser, in dem der Hangout geöffnet wird auch ein Programm, aber wenn wir mal ehrlich sind ist der doch sowieso den ganzen Tag offen).
Am angenehmsten wäre es natürlich, direkt über Slack telefonieren zu können und wie immer hat Slack da ein Ass im Ärmel.

The Place To Be

Mit dem Ende der WM hat ja nun offiziell das Sommerloch begonnen. Deswegen gibt es von uns auch keine ausformulierten Texte oder anderen richtigen Content mehr, sondern einfach nur ein paar schöne Bilder.
Aber Spaß beiseite, nachdem wir in unserem ersten Post so sehr von unserem Büro geschwärmt haben ist es natürlich nur fair, einmal genau zu zeigen wie es hier eigentlich aussieht. Diese Aufgabe übernimmt dieser Post.

_DSC0110

Dieses Regal dient als Hauptlagerpunkt für Office-Supply. Hier stehen zum Beispiel Drucker und Telefon, aber auch Getränke und wenn man ganz genau hinsieht kann man auch ein bisschen unnützen Schnickschnack erkennen. Die Post-Its an der Wand sorgen dabei für den professionellen Agentur-Look.
_DSC0118
Unsere Schreibtische – this is where the magic happens. Die Schreibtische bestehen jeweils aus einer Tischplatte, die wir mit je zwei Ikea-Schränken kombiniert haben. Mehr zu den einzelnen Arbeitsplätzen gibt es bald hier.

_DSC0107

Der Tisch und die Stühle sind Originale aus den 50er-Jahren, außerdem gehören sie nicht uns. Sie standen schon hier, als wir in das Büro eingezogen sind.
Die netten Jungs von Bluelemon wussten vorerst nicht genau wohin damit und wir haben uns riesig über diese genialen Möbelstücke gefreut. So müssen diese Schätze nicht im Keller gelagert werden sondern werden fleißig als Meeting- und Kaffeeklatsch-Tisch genutzt.

_DSC0113
_DSC0114

Wer mal ein paar Minuten Pause braucht oder einfach gerade keine Lust hat, am Schreibtisch zu arbeiten geht auf das Sofa. Wir brauchten erstaunlich lange, um uns auf ein Sofa zu einigen, könnten aber mit unserer Wahl nicht zufriedener sein.
Der Couchtisch, der eigentlich grade viel mehr vier Weinkisten als ein Couchtisch ist, ist gerade im Aufbau.

_DSC0119

Ein Blick nach draußen. Obwohl unser Büro sehr zentral in Köln gelegen ist, merkt man davon nicht sehr viel wenn man aus dem rückwärtigen Fenster sieht.

_DSC0121

_DSC0109
Wir fühlen uns hier sehr wohl. Wenn ihr in der Nähe seid, kommt immer gerne auf einen Kaffee vorbei.

Schatz, wir müssen reden

“When two partners always agree, one of them is not necessary.“

Wir arbeiten jetzt seit etwa vier Monaten zusammen. In diesen vier Monaten kam es sehr selten vor, dass wir alle Vier in einer Diskussion sofort einer Meinung waren. Geht man nach Dale Carnegie, von dem das Zitat oben stammt, ist damit keiner von uns überflüssig, und das ist ganz allgemein gesehen schonmal ein Gewinn. Im Folgenden wollen wir einen kurzen Einblick geben, wie Diskussionen bei uns ablaufen.
Gemeint sind dabei „wichtige“ Diskussionen, die sich darum drehen, wie welche Features wie implementiert werden oder warum der Button da wo er gerade sitzt besser nicht sein sollte. Bei einem „Heute mal Pizza bestellen?“ sind dann doch alle schnell bei einem „Ja“.

Generell diskutieren wir gerne und viel (und manchmal auch etwas lauter, vielleicht ein bisschen zum Leidwesen von Bluelemon die im Büro unten sitzen – sorry!).
Wir haben den Vorteil, dass wir vier relativ verschiedene Typen sind, die verschiedene Dinge mögen oder eben nicht und verschiedene Dinge erlebt und gesehen haben, die unsere Meinungen und unser Handeln prägen. Wir können uns also in der Regel sicher sein, dass wir im Gespräch vier verschiedene Ansichten zur besten Lösung eines Problems bekommen.
Auch wenn damit längst nicht alle möglichen Lösungen abgedeckt sind, sind vier unterschiedliche Ansätze ein guter Start, in der Regel ist mindestens ein Ansatz darunter, den die anderen drei noch gar nicht in Betracht gezogen haben.  Wir können dann aus den vorliegenden möglichen Lösungen logisch die aussuchen, die am besten passt. Sich darauf zu einigen, welche Lösung die logisch beste ist, das ist der spannende Teil.

Wie oben schon erwähnt können die Diskussionen manchmal lauter und zuweilen auch recht hitzig werden – logisch, jeder findet seine Meinung (zumindest zu Beginn) am richtigsten und möchte die anderen Drei gerne davon überzeugen. Damit das Ganze vernünftig funktioniert gibt es ein paar ungeschriebene Regeln. Naja, zumindest waren sie das mal, jetzt ja offenbar nicht mehr.

Nimm nie etwas persönlich
Vermutlich die wichtigste Regel, aber auch die am schwersten zu befolgende.
Man hat da also seine Meinung, seine eigene, persönliche Idee, wie etwas am besten zu machen ist. Man ist völlig davon überzeugt, dass das der beste Weg ist, das Problem anzugehen.  Dann erzählt man drei anderen davon und die haben alle selber eine viel bessere Idee und finden die eigene absolut nicht gut. Es ist wirklich schwierig, das nicht persönlich zu nehmen.
Trotzdem darf man es nicht tun. Wenn man anfängt, Dinge persönlich zu nehmen, geht die Objektivität in der Diskussion verloren und der Zielpunkt verschiebt sich. Es geht plötzlich nicht mehr darum, die beste Lösung für ein Problem zu finden, sondern darum, dass alle von der eigenen Idee überzeugt werden. Es geht darum, einen persönlchen Sieg nach Hause zu fahren.
Das hilft am Ende kurz dem Ego von einer der beteiligten Personen, verbreitet im schlechtesten Fall schlechte Stimmung und vor allen Dingen hilft sie dem Problem nicht zu besten Lösung.
Trotz alle dem sollte man nicht immer sofort klein bei geben. Was ist, wenn der eigene Vorschlag tatsächlich der Beste ist und es nur im Moment noch niemand erkennt?

Werde nie persönlich
Dieser Punkt leitet sich ziemlich logisch aus dem oberen ab: Wenn alle versuchen sollten, nichts persönlich zu nehmen dann sollten auch alle versuchen, nicht persönlich zu werden. Sätze wie „Dein Argument ist Scheiße“ oder „Du bist Scheiße“ helfen niemandem weiter.

Sei offen für andere Vorschläge
Auch dieser Punkt hängt mit dem ersten zusammen. Man findet nie die beste Lösung, wenn alle immer nur auf ihren eigenen Vorschlägen beharren. Es ist wichtig, sich die anderen Vorschläge objektiv anzuschauen und zu überlegen, ob sie nicht vielleicht besser sind als der Eigene. Vielleicht sind auch nur ein paar Teile besser, und man kann zwei Vorschläge zur besten Lösung vereinen?
Wer immer dickköpfig auf seine eigene Meinung besteht wird nie das volle Potenzial einer Diskussion ausschöpfen.

Würde man das alles in einem Satz zusammen fassen, würde er in etwa wie „Nimm nichts persönlich, beharre auf deiner Meinung aber dann doch wieder nicht zu sehr und versuche alles so objektiv wie möglich zusehen“ klingen. Das zu befolgen ist nicht ganz einfach und erfordert viel Übung. Natürlich haben wir das auch noch nicht perfektioniert, aber bei jeder neuen Diskussion versuchen wir darauf zu achten, besser zu werden.
Und das wichtigste ist, dass am Ende des Tages trotzdem noch alle zusammen ein Bier trinken und Lachen können.

Henning Schmidtke – Eine kurze Fallstudie

„Kabarett ist in seiner Motivation gesellschaftskritisch, komisch-unterhaltend und/oder künstlerisch-ästhetisch.“
Mit diesen Attributen beschreibt Wikipedia das Kabarett. Und diese Attribute sollten auch auf den neuen Internetauftritt des Kabarettisten Henning Schmidtke zutreffen. Sowohl in der Struktur als auch im visuellen Auftritt wurde auf ein minimalistisches aber seriöses Auftreten geachtet.
Im Folgenden wollen wir einen kurzen Einblick in den Entscheidungsprozess geben, der hinter der Entstehung der Seite stand.

schmidtke_desktop

Der gewünschte Umfang der Seite war bereits so weit auf das Wesentliche reduziert, dass wir ihn fast eins zu eins übernehmen konnten. Der Besucher soll nicht mit trockenen Biographie-Texten gelangweilt werden, er soll Henning Schmidtke selber aktiv entdecken. Die Möglichkeit dazu hat man auf einer Unterseite mit aktuellen Videos oder über den von Henning Schmidtke betriebenen Podcast „Schön Reden“.
Außerdem bietet die Seite einen Überblick über die nächsten anstehenden Termine und versorgt den Besucher mit aktuellen News.

Auch wenn Henning Schmidtke von Beruf aus witzig ist, sollte seine neue Homepage eine seriöse Ausstrahlung haben und nicht albern wirken. Außerdem wurde explizit um das Verzichten auf eine Klaviatur gebeten – ein Wunsch dem wir mit Freude nachgingen.
Auf der Seite kommen hauptsächlich klassiche Grau- Schwarz- und Weißtöne zum Einsatz, die durch ein lebendiges Rot als Akzentfarbe aufgelockert werden.  Sonst wirkt die Seite zwar seriös und hochwertig, aber nicht langweilig oder angestaubt.
Der seriöse Gedanke setzt sich auch in den Icons fort. Diese wirken hochwertig, durch ihre abgerundeten Ecken aber auch lebendig.

Der Minimalismus der Seite spiegelt sich vor allem in den vielen Weißräumen der einzelnen Elemente wieder, die für eine gute Übersicht und eine aufgeräumte Gesamtwirkung sorgt.

schmidtke_mobile

Mittlerweile gehören responsive Websites zum guten Ton. Natürlich haben wir darauf geachtet, dass der Webauftritt von Henning Schmidtke auf allen Endgeräten – Desktops, Handys und Tablets gut aussieht und auch ohne Einschränkungen benutzbar ist.
Wie bei allen Seiten, die wir entwickeln, haben wir auch hier bereits zu Beginn der Umsetzung auf eine gute Search Engine Optimization geachtet. Wer nach „Henning Schmidtke“ sucht, findet so auch sofort seine Homepage.

Wer neugierig geworden ist kann sich die Seite unter henning-schmidtke.de ansehen oder auf unserer Referenz-Seite einen visuellen Überblick über die Elemente der Seite bekommen.

51 wer? – 51seven

Neue Agentur, neuer Name, neues Büro, neues und doch altes Team – es gibt viel zu erzählen, alles würde wohl den Rahmen dieses Artikels sprengen. Ein bisschen was möchten wir dann aber doch aufschreiben.

Wir fangen einfach mal mit dem komischen Namen an: 51 wer? 51seven! Wie kommt man auf so einen Namen ?

Es gab viele Namensfindungsrunden, sehr viele, der Name einer Firma ist ja auch nicht ganz unwichtig.

Der erste Ansatz war es, sich einfach Namen zu überlegen und zu hoffen, dass etwas brauchbares dabei raus kommt. Nachdem »Superagentur 3000« unser bestes Ergebnis war wurde uns klar, dass wir es irgendwie anders versuchen mussten.

Aber auch kreativere Methoden, wie „Jeder schreibt seine Lieblingsfarbe, -tier, -figur auf und wir machen was daraus” brachten uns zwar oft zum lachen, aber leider zu keinem Ergebnis, mit dem wir alle zufrieden sein konnten.

Processed with VSCOcam with t1 preset

Mit der Zeit stellte sich aber heraus, dass wir Köln eigentlich alle ganz gut finden. Die Idee, den Namen irgendwie mit Köln zu verbinden, lag also relativ nahe. Nachdem wir Namen, die mit “Dom” oder “Alaaf” verbunden waren, ausgeschlossen hatten, kam der Vorschlag auf, doch vielleicht irgendwas mit Koordinaten zu machen.

Nach einer Anfrage an das Bundesamt für Vermessung und Kartendinge Google erhielten wir die nautischen Koordinaten der Domspitze:

50° 56′ 33″ nördliche Breite und 6° 57′ 32″ östliche Länge.

Die Richtung stimmte, aber die Tatsache, dass “Fünfzig Sechsundfünfzig Dreiunddreißig Sechs Siebenundfünzig Zweiunddreißig” als Firmenname am Telefon irgendwie ungünstig ist brachte uns dazu, den Namen noch etwas zu verfeinern.

Sechs Zahlen waren irgendwie zu viel, aber zwei, zwei würden eigentlich ganz gut klingen. Nach etwas Aufrunden kamen tatsächlich zwei Zahlen heraus: 51 und 7.

51seven.

Nachdem der Firmenname auf der Agenda endlich abgehakt werden konnte, wurde es Zeit, sich um einen Platz zum Arbeiten zu kümmern. Mit den Koordinaten von Köln im Namen war von Anfang an relativ klar, dass dieser Platz auch in Köln sein musste.

Auf den Immobilienmarkt in Köln möchten wir lieber nicht eingehen, wir schafften es aber irgendwie nicht nur lebend, sondern auch noch mit einem Büro wieder da raus. Und was für ein Büro!

Processed with VSCOcam with t2 preset
Processed with VSCOcam with t1 preset
Processed with VSCOcam with t1 preset

Ein besonderer Dank geht an dieser Stelle an bluelemon Interactive, die uns eine Etage Ihrer Räumlichkeiten überlassen haben.

Auf diesem Blog werden wir in Zukunft sowohl Einblicke in unser tägliches Agenturleben geben als auch Artikel mit Mehrwert in unseren Tätigkeitsfeldern veröffentlichen.

Wir machen uns jetzt aber erstmal ein Kölsch auf und freuen uns, dass unsere Seite endlich online ist. Bis dann!