Agimedia - Webwork, Frontend, SEO, Online-Marketing, Selbstständigkeit und Gründung

Star Wars in der Konsole als ASCII Film

Alex Gieche — Thu, 19 Apr 2012 08:25:09 +0000

Gerade eben zufällig über folgendes gestolpert. Wer es noch nicht kennen sollte:

Wenn man folgendes in die Konsole (terminal oder cmd) eingibt, erhält der Star Wars Fan beste ASCII Unterhaltung:

telnet towel.blinkenlights.nl

Viel Spaß!

HAML – Markup wie es sein soll

Alex Gieche — Tue, 13 Sep 2011 20:49:06 +0000

In diesem Artikel möchte ich einen kurzen Einblick in eine meiner Lieblingssprachen mit dem lustigen Namen HAML vorstellen. Salopp formuliert ist HAML nichts anderes als HTML ohne die ganzen nervigen Sachen wie z.B. Tags, die man separat schließen muss. Mehr dazu in diesem Artikel.

Was ist HAML?
Die Markupsprache HAML ist eine äußerst attraktive Art, HTML-Code in einer Ruby on Rails-Umgebung (oder PHP / ASP) zu schreiben.

Die Grundprinzipien von HAML
1. Markup soll schön und gut lesbar sein
2. Markup soll DRY sein
3. Markup soll richtig eingerückt sein
4. Markup soll die Dokumenten-Struktur wiederspiegeln

Und konkret?
Man benötigt z.B. im Gegensatz zu HTML (oder ERB in Rails) keine schließenden Tags, da die Hierarchie eines Dokuments durch Einrückungen von 2 Leerzeichen pro Hierarchieebene erfolgt. Das ist erstens übersichtlicher und zweitens spart das Zeit. Beispiel gefällig?




  Beispiele für Verweise


  
    Eine Überschrift
    
        Wiki
        

        Wiki
    
    Dies ist ein Absatz.
  
  
    
      
        Linktext
      
      
        Noch ein linktext

Und hier dasselbe Beispiel in HAML:

!!! 5
%html
  %head
    %title Beispiele für Verweise
  %body
    #content
      %h1 Eine Überschrift
      .link_block
        %a{:href => "http://www.wikipedia.de/"} Wiki
        %br/
        %a{:href => "http://www.wikipedia.de/"} Wiki
      %p Dies ist ein Absatz.
    %footer
      %ul
        %li
          %a{:href => "/"} Linktext
        %li
          %a{:href => "./"} Noch ein linktext

Das ist jetzt auf den ersten Blick vielleicht noch nicht Raketenwissenschaft, aber wir haben in diesem simplen Beispiel bereits 9 Zeilen Code gespart. Oder in Zeichen ausgedrückt haben wir statt 375 Zeichen lediglich 254 Zeichen geschrieben, also ein Drittel weniger Code. Klingt das sympathisch?

Grundregeln für Umsteiger
Wer den Umstieg machen möchte, dem seien folgende Regeln als “Schnellstarter” ans Herz gelegt:

1. DIV mit ID erstellen

wird zu #content

2. DIV mit Klasse erstellen

wird zu .content

3. Standard Tags erstellen

wird zu %p

wird zu %br

4. Link erstellen
Das ist ein Link wird zu
%a{:href => “#”, :target => “_blank”} Das ist ein Link

5. Bestehenden Code konvertieren
HTML und ERB lassen sich ganz einfach mit folgendem Tool in HAML konvertieren: HTML2HAML

Und wie gehts weiter?
Das war selbstverständlich nur eine kurze Zusammenfassung von HAML. Wer jetzt Appetit hat, umzusteigen, startet am besten gleich mit diesem Tutorial für HAML.

Mehr zur Verwendung und eine detaillierte Doku findet man in der großartigen Referenz zu HAML.

Mein Fazit zu HAML
HAML ist für mich mittlerweile unverzichtbar geworden. Man schreibt schnell Code, es ist (meistens) übersichtlich und man ist mittlerweile dankbar, wenn man nicht HTML oder ERB schreiben muss. Nicht zuletzt dank der Filter bleibt genug Flexibilität übrig, um doch mal einen Schnippsel ERB, Markdown oder andere Formate in HAML zu verwenden. Wer also effizient Markup innerhalb von Ruby on rails oder PHP schreiben will, sollte sich HAML als ernstzunehmende Alternative zum klassischen HTML/ERB angucken. Ich wurde jedenfalls nicht enttäuscht.

Nutzt ihr bereits HAML? Welche Vorteile und Nachteile ergeben sich aus der Verwendung von HAML?

SASS-Mixin für Clearfix, oder: Wie halte ich mein Markup sauber

Alex Gieche — Mon, 12 Sep 2011 19:55:57 +0000

Heute war es mal wieder soweit. Ein neues Projekt wurde ins Leben gerufen. Diesmal auf der Basis von Rails 3 und HAML / SASS.

Einer der ersten Schritte ist bei SASS das Erstellen von Mixins, um sich einiges an Schreibarbeit zu Ersparen. Stichwort DRY.

Ein überaus nützliches Mixin um sein Markup möglichst frei von unsemantischen Klassen wie “.clearfix” zu halten, ist die Verwendung eines Clearfix-Mixins via SASS:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  html[xmlns] .clearfix {
    display: block;
  }
  * html .clearfix {
    height: 1%;
  }
}

Immer wenn man nun einen Container “clearfixen” möchte, schreibt man nicht ins Markup, sondern kann das ganz bequem und sauber via Styleangabe / clearfix-mixin (@include clearfix) erledigen. Das Markup bleibt sauber!

Und so clearfixt man dann via mixin:

#container {
  @include clearfix;
}

Den obigen Clearfix-Code als normale CSS-Deklaration findet man auf dieser Seite.

Vorher – Nachher: Webdesign für eine Agenturseite

Alex Gieche — Fri, 01 Apr 2011 10:45:31 +0000

Nach langer Zeit ist bin ich heute mit den Arbeiten für meine neue Agentur-Seite fertig geworden. Wie einige vielleicht schon wissen, ist eines meiner Hauptprojekte der Shop für gemafreie Musik unter www.addloops.com. Dieser Shop wird von meiner Agentur betrieben und eben jene Agentur, die auf den Namen Maranello Media hört, brauchte nun dringend auch mal einen aufpolierten Internetauftritt.

In diesem Artikel möchte ich erläutern, welche Gedanken bei der Erstellung der Internetseite für mich wichtig waren und welche Vorgehensweise für mich gut funktioniert hat.

1. So sah die Seite vorher aus

Alte Maranello Media Seite

Wie das immer so ist. Man braucht schnell eine kleine Visitenkarte im Netz und sagt sich dann, das können wir dann später noch ausbauen.

Und dann kommen neue Projekte, die Visitenkarte staubt so langsam ein. Außer ein paar Referenzvideos und einigen Schlagworten zu unseren Dienstleistungen gab es auf der Seite nichts zu sehen.
So sollte die neue Seite mehr Platz für neuen Content bieten und sich farblich auch in eine etwas dunklere, kräftigere Richtung entwickeln.

2. Welche Anforderungen stellten wir an die neue Internetseite?

Klare und nicht überladene Struktur
Moderne und schlichte Präsentation
Relevante Informationen über das Dienstleistungsangebot
Showcase unserer Musik in Form eines Audioplayers mit Playlist
Referenzen inklusive Beispielvideos
Vorstellung der Team-Mitglieder
Kontaktmöglichkeit via Formular
Kräftigere Farben und mehr Kontrast

Aus diesen Anforderungen und einem bestehenden Logo musste also nun ein Design erstellt werden. Das Logo sieht so aus:

Maranello Media Logo

Da ich ein großer Fan von CSS3 geworden bin, wurde das Design zum ersten Mal nicht in Photoshop “vorgefertigt”, sondern Schritt für Schritt direkt im Browser. Meine “Waffen” für die Erstellung der Seite waren:

AptanaStudio
HTML
SASS
jQuery

Im Rahmen dieses Artikels möchte ich die (aus meiner Sicht) interessantesten Erkenntnisse aus der Entwicklung dieser Seite zusammenfassen, da man ja doch in jedem Projekt was neues lernt.

3. Erkenntnisse aus der Arbeit an der neuen Agenturseite

3a. AptanaStudio

Da ich ja noch relativ frisch im Thema Webdesign bin, habe ich bisher dem Thema Editor noch keine erhöhte Aufmerksamkeit gewidmet. Vorher wurde das Ganze immer direkt im Texteditor geschrieben. Die ganzen Vorteile wie Syntax-Highlighting oder Auto-Format (mit entsprechend korrekter Einrückung der Tags) konnte ich so richtig erst in diesem Projekt mit AptanaStudio genießen. Bisher bin ich mit AptanaStudio sehr zufrieden. Todos im Quelltext lassen sich einfach erstellen, die Autoformat-Funktion hat mir unglaublich viel Zeit gespart und auch das erweiterbare Highlighting ist gut gelöst. Ingesamt also eine schöne neue Lösung für zukünftige Projekte. Mehr Infos direkt beim Hersteller: Aptana

3b. SASS als CSS-Generator

In diesem Projekt habe ich mich ins Thema SASS eingearbeitet. Wer es noch nicht kennen sollte: SASS ist CSS in “schön” und wird bevorzugt in Ruby on rails Anwendungen verwendet. Doch warum nun SASS statt direkt CSS zu schreiben? Weil man Zeit spart und der Code besser lesbar ist.

Die Vorzüge von SASS sind:

Variablen (z.B. für Farben, Pixelangaben etc.) können definiert und verwendet werden
Keine Redundanz => Nesting (Verschachteln von zueinander gehörenden Anweisungen)
Durch den Einsatz von Mixins lassen sich ganze Anweisungsblöcke an beliebiger Stelle verwenden
Selektoren können Eigenschaften anderer Selektoren erben (z.B. erbt .schlimmerFehler alle Eigenschaften von .Fehler)

Da eine komplette Abhandlung über SASS hier den Rahmen sprengen würde, gibt es nachfolgend einfach mal ein Video für alle Neugierigen:

Ein schöner Screencast (ca. 30min) zum Thema Compass / SASS ist hier zu finden.

3c. jQuery und Plugins – Ein Segen für JS-DAUs
Vielleicht geht es euch auch ein wenig so wie mir. Ich habe immer mal wieder versucht, JavaScript zu lernen, aber es ist doch eine unglaubliche Herausforderung, dass mal so “nebenbei zu machen”. Ich bin dann doch eher der etwas kreativere Schlag von Mensch, der beim Coden schnelle Erfolgserlebnisse haben möchte ohne sich zu lange Einarbeiten zu müssen.

Deswegen bin ich umso dankbarer für JavaScript-Frameworks wie z.B. jQuery, die den Einstieg in die JS-Welt stark vereinfachen. So konnte ich mithilfe von jQuery und ausgewählten Plugins sowohl eine funktionierende und individualisierte Audioplayer-Lösung auf der neuen Agenturseite realisieren, als auch kleine interaktive Sliderelemente und eine funktionale Navigation. Und am wictigsten: es hat auch noch Spaß gemacht!

Die Hauptvorteile von jQuery aus meiner Sicht sind:

Crossbrowser-Kompatibilität
Aktive Community und viele Plugins verfügbar
Verständliche und fast intuitive Syntax

Alles in allem würde ich schätzen, dass mich die Einarbeitung in jQuery nicht mal vier Stunden gekostet hat, um diese Ergebnisse auf der neuen Agenturseite zu erzielen. Aus dem Bauch heraus würde ich sagen, dass das sehr gut investierte vier Stunden waren und die Arbeit mit jQuery viel Spaß macht. Es funktioniert einfach.

4. Das fertige Ergebnis

Maranello Media Agenturseite

Lange Rede, kurzer Sinn: die fertige Webseite ist unter www.maranello-media.de abrufbar und sieht hoffentlich auch in euren Browsern gut aus.

Alles in allem (Contenterstellung, Coding, Layout) hat die Erstellung sicherlich 30 Stunden gedauert, was nicht zuletzt der Tatsache geschuldet ist, dass ich mich in das ein oder andere Thema noch reinlesen musste. Mit aktuellem Wissensstand wäre ich wohl schneller.

Als Grundbasis für die Erstellung einer händisch gecodeten HTML Seite möchte ich für das nächste Mal Boilerplate testen. Das sieht für mich nach einem sehr guten Grundgerüst für die Entwicklung von HTML5-kompatiblen Seiten aus.

Mich interessiert natürlich eure Meinung zu diesem Projekt. Also wenn gerade ein wenig Zeit übrig ist, schaut doch mal rein. Was ist gut gelungen, was würdet ihr verbessern? Welche Tools verwendet ihr für die Entwicklung von solchen Seiten?

Rückschläge verarbeiten – Top 10 gegen Motivationslöcher

Alex Gieche — Mon, 28 Mar 2011 07:30:49 +0000

Wer schon eine Weile selbstständig ist, kennt bestimmt diese Momente, wo man sich fragt: “Ist das hier noch das Richtige für mich?” “Wie lange halte ich das noch durch?” “Was ist, wenn ich diesen Monat keinen Auftrag mehr bekomme oder ein Kunde nicht rechtzeitig zahlt?”

Die erste Krise ist da, das erste Motivationsloch erscheint riesig und die lukrative Festanstellung erscheint wieder sehr attraktiv. Ich glaube, es gibt keinen Selbstständigen, der nicht einmal an seiner Profession oder seiner Idee gezweifelt hat. Umso wichtiger ist es natürlich, auf solche Momente vorbereitet zu sein und auch Methoden zu entwickeln, sich durch diese Talsohlen durchkämpfen zu können.

Deswegen hier aus meiner Sicht effektive Methoden, wieder neue Energie und Power für das eigene Business zu entwickeln oder langfristig produktiv zu bleiben.

1. Mit Freunden und Familie über diese Probleme reden
Es ist für viele Außenstehende nicht einfach zu verstehen, welche Belastungen und teilweise Existenzängste bei Selbstständigen (z.B. auch bei mir als immer noch relativ frischem Selbstständigen) entstehen können, wenn das eigene Geschäft nicht nach Plan läuft. Wenn Freunde und Verwandte diese Problematik verstehen, kommt auch Zuspruch, Motivation und auch einfach mehr Feedback von außen.

Das eigene Umfeld muss oft für das Thema Selsbtständigkeit erst etwas sensibilisert werden. Diese Massnahme hilft mir z.B. sehr gut. Nicht umsonst wird immer wieder in “Einsteiger-Kursen” vermittelt, dass Familie und Lebenspartner hinter der Idee der Selsbtständigkeit stehen müssen.

2. Sich erreichbare Ziele setzen und diese auch verfolgen
Viel zu oft steht man vor dem Berg und wird eingeschüchtert. Das typische Ziel eines Webworkers könnte z.B. lauten, ich möchte mit meiner Webseite genug Geld verdienen, um davon leben zu können. Wenn man dieses Ziel hat und in den ersten Monaten vielleicht mit Ach und Krach 10-50 Euro im Monat verdient, erscheinen die generierten Umsätze gering. Klar, aber es kommt hier auf die Relation an. Sofort ohne Arbeit im Netz Geld verdienen ist beispielsweise ein Ziel, dass man nicht erreichen kann und sich deswegen auch nicht setzen sollte.

Oder man möchte auf die ersten Plätze bei Google für ein bestimmtes Keyword. Und gerade, wenn man meint, einen Fortschritt gemacht zu haben, verliert man plötzlich wieder einige Plätze, die man sich in den vergangenen Wochen erarbeitet hat. Das demotiviert und suggeriert, dass man das Ziel schon wieder nicht erreicht hat. Eine Abänderung des Ziels auf: “Ich möchte testen, ob dieses oder jenes funktioniert.” ist dagegen viel einfacher zu erreichen.

Deswegen: Einen riesigen Berg trägt man stetig und geduldig ab. (Meilen-)Stein für (Meilen-)Stein.

3. Gemeinsam einsam sein
Den ganzen Tag im Home-Office…Vor ein paar Tagen habe ich noch geschrieben, wie großartig das Home-Office ist. Aber natürlich ist nicht immer alles Gold was glänzt (3 Euro ins Phrasenschwein). So ganz ohne Feedback von außen, Mitstreiter, Wir-Gefühl geht es wesentlich schwerer, sich jeden Tag aufs Neue top zu motivieren. Deswegen sollte man sich nicht in dieser “Isolation” fügen, sondern erst recht aktiv werden und erzählen, was man macht.

Man sollte sich regelmäßig an Aktionen beteiligen (z.B. Webmaster Friday, was ich demnächst auch gerne mal ausprobieren will), die Arbeit von anderen “Brüdern im Glauben” beobachten und auch beurteilen und kommentieren. Kurz gesagt, aktiv werden und eine virtuelle Bürogemeinschaft schaffen. Doch virtuell aktiv werden reicht natürlich nicht: regelmäßig mit Freunden und Gleichgesinnte mittags was essen gehen, mal spazieren, Sport machen.

Ein weiterer Ansatz ist natürlich das Home-Office in die Öffentlichkeit zu verlagern, also ab ins Café, in den Park oder Co-Working.

4. Nicht nur arbeiten
Selbstständige müssen der Legende nach ja arbeiten. VIEL arbeiten. Das es dabei leicht passieren kann, dass das Privatleben in den Hintergrund tritt, brauche ich, wie ich meinen bisherigen kleinen Leserkreis einschätze, nicht mehr erzählen. Freunde fangen an zu meckern, dass man sich so selten meldet. Doch woran merkt man eigentlich, dass man zuviel arbeitet? Ich hatte eine Phase, wo ich sehr viel gearbeitet habe. Selbst im Bett noch ans Arbeiten gedacht, morgens ging der erste Griff zum Handy, um Mails und Reports zu checken. Heute frühstücke ich erst mal gemütlich, mache mich einfach in Ruhe startklar für einen produktiven Tag.

Deswegen nicht 7 Tage die Woche arbeiten. Mindestens einen Tag in der Woche frei von Arbeit halten und das auch einhalten. Man belohnt sich sozusagen für die vergangene Woche. Wichtig ist, dass man sich beim Frei machen kein schlechtes Gewissen macht. Mir geht es beim Arbeiten oft so, dass ich eigentlich auch gerne Sonntags arbeiten würde, aber das ist auch fast die einzige Zeit, wo man auch mal tagsüber entspannt Zeit mit den Liebsten verbringen kann. Soviel Zeit sollte immer sein, auch bei den versch(r)obenen Prioritäten von uns Selbstständigen.

5. Hartnäckig und geduldig sein
Gerade als Webworker braucht man unglaublich viel Geduld und Selbstdisziplin. Ich habe erst vor ein paar Tagen auf imgriff.com gelesen, dass Selbstdisziplin irgendwann zur Gewohnheit wird. So ähnlich wie mit dem Zähneputzen morgens und abends. Als Kind mag man es nicht, als Erwachsener ist es dann (hoffentlich!) selbstverständlich geworden.

Demzufolge unangenehme Aufgaben immer zur gleichen Zeit und ohne Wenn und Aber erledigen. So geht es mir zum Beispiel mit Linkbuilding. Unglaublich stupide Aufgabe, wenn man mich fragt. Aber ist halt ein regelmäßiges Todo, dass ich für mich bisher am besten mit Serien gucken nebenbei erledige.

Hartnäckig bedeutet für mich auch, dass man nicht bei den ersten Rückschlägen in Aktionismus verfällt und die Strategie sofort komplett anders ausrichtet. Das geht in den meisten Fällen schief.

6. Positiv denken, konstruktive Umgebung schaffen
Negative Gedanken können ziemlich viel Energie verschlingen. Gerade wenn es nicht so läuft, ist es wichtig, nicht alles schlecht zu reden, was man bisher geleistet hat. Es hilft definitiv, wenn man sich mit Menschen umgibt, die konstruktiv sind, motivierend wirken und gerne neue Ideen mit einem zusammen spinnen. Es gibt ja Leute, die neue Ideen generell erst mal kritisieren oder überhaupt immer nur meckern. Lustig wird es aber, wenn diese Menschen selbst nichts unternehmen, um diese Umstände zu ändern. Miesepeter halt. Diese Miesepeter um dich herum können langsam aber stetig die eigene Denkweise beeinflussen.

Zudem gewinnen Meinungen von außen gerade für “Isolierte” im Home-Office stark an Gewicht. Wenn diese nur negativ sind, ist es klar, dass man auf Dauer zweifelt und ans Aufgeben denkt. Auch aus diesem Aspekt heraus ist ein Netzwerk an Gleichgesinnten so wertvoll. Deswegen immer reflektieren und mehrere Meinungen einholen. Wie beim Arzt.

7. Gesund leben
Ich merke es immer wieder. Da wird dann den ganzen Tag auf den Bildschirm gestarrt, zwischendurch wird kurz was zu Essen eingeschoben und dann ist der Tag auch schon irgendwie vorbei. Ein paar Tage lang kann das ja gut gehen, aber der Körper rächt sich für so einen Raubbau. Spreche da zumindest aus meiner Erfahrung. Deswegen ist es wichtig für meinen Tagesablauf und auch für mein langfristiges Wohlbefinden, dass ich regelmäßig ein bisschen Sport mache und auch mal eine Phase im Tag habe, wo ich mal so rein an GARNICHTS denke. Meditation wäre jetzt in meinem Fall übertrieben, aber so eine Art Abschalten ist es definitiv.

Jetzt bei dem schönen Wetter zum Beispiel eine Tasse guten Espresso oder Tee und Sonne tanken für ein paar Minuten auf dem Balkon oder der Terrasse. Einige in meinem Freundeskreis können das gar nicht, dieses absolute Abschalten. Und da es hier ja auch um Gesundheit geht: man wird ja nicht jünger und wir sind hier unter uns: Regelmäßige Zechtouren wirken sich nicht so super auf die Produktivität aus. Prost. =)

8. Sich Durchhänger erlauben
Wenn es um Produktivität und Selbstorganisation geht, kommt mir dieses Thema immer ein wenig zu kurz. Produktivität erhöhen, immer perfekt organisiert sein und immer alle Ziele erreichen: in einer perfekten Welt scheint das möglich. Doch es gibt auch mal Stunden / Tage, wo einfach nichts geht. Dann nicht auf Krampf versuchen, doch alles noch irgendwie zu schaffen oder Verpasstes schnellstmöglich abzuarbeiten. Der Körper und auch der Geist haben Grenzen, die man nicht regelmäßig überschreiten sollte. Das zu erkennen finde ich persönlich ziemlich schwierig. Wann ist es eher der innere Schweinehund und wann sagt der Körper, dass jetzt grade mal Schicht ist? Die Übergänge stelle ich mir jedenfalls fließend vor.

9. An Kritik wachsen
Wenn man so frisch von der Uni oder aus der Ausbildung kommt und dann mal so die Stellenbeschreibungen durchliest und dann mal das Gehalt dagegenrechnet, kann einem oft schlecht werden. Viel mehr Leistung kann man aus Absolventen wohl nicht mehr rausquetschen. Überhaupt ist der Leistungsdruck heutzutage doch gefühlt sehr hoch. Die Konkurrenten schlafen ja auch nicht. Schlafen nie. Fehlertoleranz vom Chef? Fehlanzeige. Dieses Milieu ist in meinen Augen leistungshemmend.

So passiert es nicht wenigen Berufseinsteigern, dass die Angst vor Fehlern lähmt und vor allem das Lernen stark verlangsamt. Doch das Fehler eigentlich immer auch eine Erkenntnis mit sich bringen und auch eine Chance sind, sich zu verbessern, wird immer unter den Teppich gekehrt und vielleicht auch als Schwäche abgetan. Dabei ist in meinen Augen Kritikfähigkeit, Selbstreflektion und auch die Reaktion auf eigene Fehler wichtig für die eigene Persönlichkeit. Beruflich und privat. Wie Menschen mit Kritik umgehen, ist für mich immer spannend anzusehen. An mir und an anderen.

10. Plan B
Der vielzitierte Plan B. Er sollte immer einsatzbereit in der Schublade liegen. Doch selbst wenn er da ist, stellt sich ja immer noch die Frage, wann man ihn denn nun einsetzen soll. Ich finde, dass man vor der Selbstständigkeit durchaus aufschreiben sollte und auch mit seinen Kollegen (falls es wie bei uns eine Teamgründung ist) offen darüber reden sollte, wann man ein Projekt als gescheitert betrachtet. Oder auch unter welchen Umständen man das eigene Unternehmen verkaufen würde, der so genannte Exit.

Und für mich persönlich stand z.B. schon nach kurzer Zeit der Selbstständigkeit fest, dass Selbstständigkeit an sich großartig für mich ist und auch projekt-unabhängig gesehen werden sollte. Projekte können immer mal scheitern oder nicht funktionieren. Das Leben geht weiter und das nächste Projekt wartet schon.

So jetzt bin ich an eurer Meinung interessiert. Wie geht ihr mit Rückschlägen um? Wie sorgt ihr dafür, dass ihr produktiv bleibt? Was gibt euch Energie für die Arbeit? Welche Methoden sind besonders effektiv? Freue mich wie immer auf eure Meinung!

@font-face: Schriftarten per CSS crossbrowser-kompatibel darstellen

Alex Gieche — Thu, 24 Mar 2011 11:09:53 +0000

Gestern hatte ich mal kurz etwas Luft und konnte noch ein paar Layout-Sachen hier im Blog erledigen. Folgendes hat sich jetzt verbessert (aus meiner Sicht natürlich):

Kommentare jetzt strukturierter mit Gravatar-Bild und Font-face
Autoreninfo unterhalb der Posts eingebaut
Social Media Profile rechts oben gekürzt (da waren vorher sage und schreibe 8 unterschiedliche Profilicons)

Bei der Integration dieser Layout-Änderungen fiel ich dann über ein Problem mit @font-face im Firefox 3.5, das ich nebenbei auch bei der Entwicklung meiner neuen Agentur-Seite hatte. Das ist Grund genug, um mal etwas auf @font-face einzugehen.

@font-face: Schriftarten crossbrowser-kompatibel per CSS verwenden

Für alle, die @font-face noch nicht kennen. Das ist eine komfortable Methode innerhalb von CSS, um Schriftarten, die nicht beim Client installiert sind, innerhalb der eigenen Webseite verwenden zu können. Sprich, was ich früher umständlich mit Überschriften-Grafiken lösen musste, klappt jetzt komfortabel in allen neueren Browsern per @font-face-Deklaration. Wie sieht das denn nun aus? In der rechten Spalte hier im Blog werden z.B. alle h2-tags per font-face gestaltet.

Dabei sieht eine typische font-face Deklaration im Stylesheet folgendermaßen aus:

@font-face {
  font-family: "NotethisRegular";
  src: url("Note_this-webfont.eot");
  src: url("Note_this-webfont.eot?iefix") format("eot"),
    url("Note_this-webfont.woff") format("woff"),
    url("Note_this-webfont.ttf") format("truetype"),
    url("Note_this-webfont.svg#webfonty06M8V4K") format("svg");
  font-weight: normal;
  font-style: normal;
}

Dieser Code-Schnippsel geht auf diesen Blog-Eintrag von Richard Fink zurück. Man sieht in diesem Code, dass man 4 verschiedene Datei-Formate ein- und derselben Schriftart benötigt, nämlich:

.eot
.woff
.ttf
.svg

Wie man komfortabel an diese Formate herankommt, erkläre ich weiter unten.

Nach dieser Deklaration kann ein Text-Element innerhalb von CSS ganz einfach in der oben definierten Schriftart dargestellt werden. Crossbrowser-kompatibel. Hier im Blog werden z.B. die Widget-Title-Tags per font-face gestaltet.

.widgettitle {
  font: 18px/24px 'NotethisRegular', Arial, sans-serif;
}

Der erste Pixelwert bezieht sich auf die eigentliche Schriftgröße, der zweite Pixelwert gibt die Zeilenhöhe an. Der dritte Wert ist dann der in der Deklaration festgelegte font-family-Bezeichner.

FOUT-Probleme mit Font-face
Nach der obigen Syntax hatte ich dann die gewünschte Schriftart von Font-Squirrel eingebunden und war eigentlich mit dem Ergebnis zufrieden. Wäre da nicht das ständige Aufflackern beim Laden der Schrift gewesen. Ein relativ bekanntes Problem im Zusammenhang mit font-face, das auf den Namen FOUT (“Flash of unstyled text”) hört.

Beim Laden der Seite wurde immer erst die ungestylte Schrift angezeigt und etwa 1 Sekunde später sah man deutlich, dass die Font-face Regel vom Browser “entdeckt” und angewendet wurde und die Schriftart wurde umgeschaltet. Das machte die ganze Seite unruhig und sah wenig professionell aus. Diese Probleme betreffen allerdings “nur” Firefox und Opera.

Folgendes Script von Paul Irish (wieder einmal…) löst zumindest das Flacker-Problem (mit einer unangenehmen Nebenwirkung):

(function(){
  // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
    s.textContent = 'body{visibility:hidden}';
    e.firstChild.appendChild(s);
    function f(){ s.parentNode && s.parentNode.removeChild(s); }
    addEventListener('load',f,false);
    setTimeout(f,3000);
  }
})();

Dieses Script bewirkt, dass die gesamte Seite erst angezeigt wird, wenn die Schriftart fertig geladen ist bis zu einer Höchstgrenze von 3 Sekunden. Eingebunden auf jeder Seite mit font-face Deklaration, ergab das Ganze eine ziemlich unschöne Wartezeit. Diese Lösung ist für mich also eher keine Alternative. Eine weiterer Lösungsansatz ist der Einsatz vom Google Webfont-Loader, der jedoch ebenfalls inakzeptable Ladezeiten mit sich brachte.

Mein Fazit lautet daher aktuell, dass ich das Flackern bei langsameren Leitungen in Kauf nehme für ein schöneres Schrift- und Gesamtbild.

Woher bekomme ich kostenlose Fonts für den Einsatz in @font-face?

Meine Lieblings-Seite für freie Schriftarten ist Font Squirrel. Diese Seite hat den großen Vorteil, dass die Schriften

absolut kostenlos sind,
in fertigen @font-face Sets herunterladbar sind
und anschauliche Demos und Beispieldateien beinhalten.

So entfällt lästige Schriftarten-Konvertierung und die Abklärung der Rechte und evtl. anfallende Lizenzgebühren. Anfänger können dank der Beispiele schnell durchstarten. Wer doch mal eine bestimmte Schriftart braucht, die nicht im Sortiment von Font Squirrel drin ist und diese in ein font-face-kompatibles Format bringen möchte, nutzt einfach den Font-Face-Kit-Generator. Dabei unbedingt beachten, dass man über die notwendigen Rechte an der Schriftart verfügen muss.

Wo finde ich weitere Informationen zum Thema @font-face?

Neuigkeiten zur Syntax von @font-face auf readableweb.com
Weitere Ressourcen und Dienste zum Thema font-face auf sixrevisions.com
So ziemlich alles zum Thema auch bei “Erfinder” Paul Irish

Mein Fazit

Da ich noch nicht sooo lange im Thema CSS und Crossbrowser-Kompatibilität bin, war @font-face für mich vor ein paar Monaten eine schiere Offenbarung. Wieviel Zeit ich mit dieser Technik von diesem Zeitpunkt an sparen konnte und welche Design-Möglichkeiten sich dadurch eröffnen, war und ist großartig. Vorher mussten immer Grafiken zu Überschriften gebaut werden. Allerspätestens in multilingualen Projekten ist das einfach grausig. Und spätestens, wenn dann mal jemand fragt “Könnte man die Überschriften nicht blau machen?”, ist es vorbei mit der guten Laune.

Nicht nur, dass die Ladezeit und die Requests durch die wegfallenden Überschriftengrafiken deutlich verringert werden, sieht das Ganze einfach gut aus (mal abgesehen von der FOUT-Problematik). Beim Zoomen, beim Markieren und auch in der Normalansicht. Ich bin also seit dem Zeitpunkt, als font-face in den major browsers druchweg lief, ein großer Fan von font-face und könnte heute nicht mehr ohne. Wenn jetzt noch die Text-Rendering-Engines vereinheitlicht werden würden. Aber man kriegt ja nie alles auf einmal. =)

Nutzt ihr @font-face? Ist das für euch nur Spielerei oder mittlerweile eine Bereicherung des Webdesigns? Wie und wo setzt ihr Nicht-Systemschriftarten am liebsten ein? Ich bin wie immer gespannt auf eure Meinungen!

Home-Office: Meine Top 10 für das Arbeiten zuhause

Alex Gieche — Tue, 22 Mar 2011 09:30:59 +0000

Wer kennt es nicht? Man sitzt im Büro, das Telefon klingelt, man muss gleich ins Meeting und 2 Kollegen warten neben dem Tisch seit 10 Minuten auf Feedback. Es kann innerhalb eines Büros zu ganz schönen “Peaks” kommen. Ärgerlich wird das Ganze, wenn diese Peaks sich so engmaschig aneinander reihen, dass man kaum noch Phasen zusammen bekommt, in denen man den Kopf frei kriegt und KONZENZRIERT an der Lösung eines Problems arbeiten kann.

Kommt euch das bekannt vor? Dann seid ihr vielleicht auch jemand wie ich, der die Vorzüge der Arbeit im Home-Office zu schätzen weiß. Hier lsite ich nun meine Top 10-Gründe auf, warum Home-Office (für mich) einfach großartig ist:

Platz 10: Kein Dresscode

Kein Dresscode bedeutet für mich, dass ich in bequemen Klamotten vor dem Rechner sitzen kann. Shirt, Jeans, Shorts oder Jogginghose. Keine vorgeschrieben Arbeitskleidung ist ein Privileg, was ich jeden Morgen aufs Neue schätze.

Platz 9: Minimierung der Störquellen einfach möglich

Wenn in deutschen Büros mal wieder jemand von gestressten Kollegen umringt ist, 10 Telefone in einem Büroraum parallel klingeln, das Großraumbüro mal wieder Hitzestau hat, habe ich nur ein müdes Lächeln übrig. Kurz vor Feierabend kann nicht noch ein Kollege aus Abteilung XY kommen und die berühmte Frage stellen: “Kannst du nicht eben noch…?”

Im Home-Office schalte ich regelmäßig Störquellen aus. Telefon, Handy, Twitter, Mails, überflüssige Fenster. Und dann wird Timer gestellt und konzentriert an EINER Aufgabe gearbeitet. Produktiv, konzentriert, ergebnisorientiert. Sowas ist meiner Erfahrung nach in vielen Büros nicht mal ansatzweise drin. Unter Störquellen leidet meine Produktivität definitiv.

Platz 8: Keine Rücksicht auf weitere Büro-Bewohner

“Kannst du mal bitte Musik leiser machen?”
“Fenster zu, es zieht.”
“Blockierst du gerade den Drucker?”

Ach, die lieben Kollegen. Natürlich muss man sich im Großraumbüro einschränken, damit die Abläufe funktionieren. Doch damit ich meine eigene Produktivität maximieren kann, ist die Demokratie bei mir hier im Home-Office passé. Musik an, wenn es gefällt. Serien gucken nebenbei, kein Problem. Und wenn es gerade passt, essen am Schreibtisch.

Platz 7: Guter Kaffee

Vorbei die Zeiten mit zugesifften Vollautomaten, abgestandenem Filter-Kaffee. Meine favorisierte Kaffee-Lösung ist eine Siebträgermaschine, an der man nach Lust und Laune einen grandios frischen Espresso selber zapfen kann. Besser kann man nicht in den Tag kommen.

Platz 6: Kein Zeitverlust durch Anfahrt zum Arbeitsplatz

Wie oft habe ich schon auf die U-Bahn gewartet, habe neben pubertierenden Großstädtern deutsche Vorstadt-Ghetto-Musik aus überforderten Handylautsprechern genießen dürfen. Was im ersten Moment vielleicht spießig klingt, ist eigentlich ein Zeitkiller. Für viele Arbeitgeber ist Home-Office der Mitarbeiter gar nicht vorstellbar. So verliert man jeden Tag kostbare Zeit.

Diese Zeit kann ich jetzt effektiv für mich nutzen. Länger schlafen? Manchmal. Den Tag in Ruhe planen oder schon mal anfangen mit Arbeit? Klar! Stattdessen Sport machen? Gelegentlich. In meinen Augen alles sinnvoller als zur Arbeit zu fahren oder im Stau zu stehen. Und günstiger ist es auch noch.

Platz 5: Keine “Ich bin am längsten im Büro”-Spielchen

Ich selbst kenne das Problem jetzt nicht so genau, aber aus meinem Freundeskreis gibts doch einige, die das Spielchen kennen. Der Kollege kommt als erstes, geht als letztes und genießt daher ein gutes Standing beim traditionellen Chef. Wer lange bleibt, schafft viel. Oder auch nicht.

Wann hört diese Einschätzung endlich auf, dass solche Bürohengste per se effektiv arbeiten? Wenn man statt 8 Stunden nur 5 Stunden für die gleiche Arbeit benötigt, sollte das honoriert werden. Stattdessen ist es in Deutschland wohl in die Verfassung gegossen, dass dann eher die Chef-Augenbrauen nach oben gehen und gefragt wird, ob man denn nichts zu tuen habe.

Platz 4: Man lernt die eigene Arbeitsweise kennen

Wenn man einmal die Gelegenheit hat und sich seinen eigenen Arbeitsalltag selbst gestalten kann, der lernt zwangsläufig, welchen Arbeitsrhythmus und welche Arbeitsmethoden gewählt werden müssen, damit man effektiv arbeitet. Ich habe z.B. gemerkt, dass ich ohne zeitliches Grundgerüst (so eine Art Stundenplan) zu lange einzelne Themen bearbeite. Ich schiebe es jetzt einfach mal auf meinen Hang, die Details zu sehr zu beachten.

Damit andere wichtige Themen (auf die man vielleicht nicht so Lust hat) trotzdem nicht zu kurz kommen, muss ich mich da manchmal etwas bremsen. Und wie konkret? Na mit einem ganz normalen Küchentimer =) Wenn man also seine eigene Arbeitsweise mal mehrere Wochen dokumentiert und analysiert, lässt sich einiges für die Zukunft optimieren.

Platz 3: Ziele SELBST setzen

Wer hatte nicht schon mal das Gefühl, dass der Chef nicht so wirklich einschätzen kann, was ein realistisches Ziel ist? Die eigenen Ziele festlegen ist ein Luxus, den ich nicht mehr hergeben möchte. So lernt man erstens eine realistische Sichtweise auf verschiedene Problemstellungen und zweitens kann man seine eigene Arbeitsgeschwindigkeit besser einschätzen lernen. Natürlich ist es auch wichtig, die eigenen Erfolge aufzuzeichnen und zu dokumentieren. Das geht zum Beispiel auch mit einem Blog, so wie ich es hier vorhabe. Oder auch einem Excel-Sheet, einem Whiteboard. Hauptsache, man kann aus den aufgezeichneten Fortschritten Motivation ziehen, wenn man sie mal braucht. Und solche Phasen kommen immer mal wieder.

Platz 2: Zeit für Weiterbildung

Ich nehme mir jeden Tag mindestens eine Stunde, um mich weiterzubilden. Feeds lesen, Fachlektüre, Tutorials im Netz. Wissen will wachsen. Bisher hatte ich keinen Arbeitgeber, bei dem so etwas aktiv gefördert wurde. Weiterbilden ja, aber nicht unbedingt während der Arbeitszeit. Im Home-Office mache ich es während der Arbeitszeit. Sozusagen als Pause vom Tagesgeschäft. Immer zwischen zwei eher drögen Aufgaben als Futter für den Geist. Macht einfach Spaß!

Platz 1: Freie Zeiteinteilung

Ich möchte heute mal eine Stunde später anfangen? Ich möchte heute mal ausgedehnter Mittag machen? Ich arbeite mal länger, weil ich grad gut im Flow bin? Kein Problem! Das wichtigste Argument für Home-Office. Ich bestimme, wann ich arbeite und wie lange ich arbeite. Denn besser als man selbst kann niemand beurteilen, ob und wie man gerade arbeiten möchte. Wichtig ist natürlich, dass die Arbeit nicht liegen bleibt =)

Jetzt seid ihr gefragt. Was findet ihr besser: Büro mit Kollegen, Home-Office oder Bürogemeinschaft? Was stört euch in eurem Arbeitsalltag?

Teamarbeit richtig organisieren – mit Kanban kein Problem

Alex Gieche — Fri, 18 Mar 2011 08:00:33 +0000

Heute möchte ich eines meiner favorisierten Tools für die Organisation von Teams vorstellen. Das Tool, auf das ich mich in diesem Artikel beziehen werden, ist unter www.kanbantool.com zu finden und kostet monatlich einen kleinen Obolus von ca. € 3,50 pro Nutzer. Doch auch mit einem klassichen Whiteboard und Klebezetteln lassen sich die nachfolgenden Tipps für eine Team-Organisation à la Kanban umsetzen.

Kanbantool

Was bringt mir Kanban?
Diese Form der Organisation hat den Vorteil, dass jeder im Team weiß, welche ToDos vom wem bearbeitet werden und wie weit diese Todos sind.

Sozusagen eine Projektmanagement-Lösung für kleine Teams, jedoch mit einer spielerischeren Form der Visualisierung der Todos.

Diese Organsiation eignet sich ideal für kleinere Startup-Teams und macht viele Mails überflüssig. Und genau das wünsche ich mir ja im Alltag.

Weniger (überflüssige) Mails beantworten, mehr Zeit, um ungestört und fokussiert arbeiten zu können. Die Voraussetzung ist, dass alle Team-Mitglieder diszipliniert das System des Kanbans einhalten und die Vorteile des Kanbans verstehen.

Doch was ist Kanban jetzt eigentlich genau?
Laut wikipedia ist das ursprüngliche Kanban eine bestimmte Art der Produktionsablaufsteuerung aus Japan. Insbesondere Toyota setzte diese Technik der Organisation ein. Wer mag, kann sich das hier auch nochmal im Detail durchlesen.

Im Gegensatz zur Kanban-Definition in der Produktion ist die Nutzung von Kanban insbesondere in der IT eine andere und setzt stark auf die Limitierung gleichzeitig ablaufender Prozesse. Kanban fördert also die Fokussierung des Teams auf einige wenige Tasks und verbessert so die Qualität der Problemlösungen. Mehr dazu später.

Was benötigt man für Kanban?
Als allererstes braucht man für Kanban ein Whiteboard oder auch Kanbanboard, welches für alle Teammitglieder zugänglich und am besten gut sichtbar ist. In diesem Board sind mehrere Spalten eingetragen. Z.B.

Todo Heute
ToDo Diese Woche
ToDo Horizont
Feedback
Done

In ToDo heute kommen alle Todos, die heute unbedingt erledigt werden müssen und DANACH die Todos, die man erledigen möchte. Diese frewilligen Todos werden aus der Spalte ToDo Diese Woche herausgezogen. Im Todo Horizont befinden sich Todos, die keine besonders hohe Dringlichkeit besitzen und bei Bedarf zum Auffüllen in ToDos Diese Woche gezogen werden können.

Diese Einteilung ist von diesem schönen Artikel auf imgriff.com über Team Kanban inspiriert.

Die klassische Einteilung ist übrigens

Todos
WIP (Work in progress)
Done

Diese Aufteilung ist für meinen Geschmackeine Spur zu grob und wird mit der Zeit (insbesondere bei Teamarbeit) etwas unübersichtlich.

Jedes Teammitglied oder bei größeren Teams jede Unit bekommt eine eigene Zeile. Wenn man offline mit einem richtigen Whiteboard arbeitet, kann man mit Post-Its arbeiten und Todos in die richtigen Zellen der Tabelle einkleben. Bei Kanbantool geht das umweltfreundlich mit digitalen Klebezetteln. Diese Klebezettel wandern nun zwischen den Spalten und evtl. auch Zeilen hin- und her bis sie die Spalte “Done” erreichen.

So kann der Zustand und Progress eines Todos sehr gut und für alle verständlich visualisiert werden. Das ist vor allem großartig, wenn neue Teammitglieder dazukommen, die schnell einen Gesamtüberblick gewinnen möchten.

Limitierung als Grundsatz
Nun ist es im Alltag meistens so, dass Todos ungefragt reinkommen und man oft an mehreren Baustellen gleichzeitig arbeitet und sich auf kein ToDo so richtig fokussieren kann / will. Diesem Problem begegnet Kanban mit der Limitierung der möglichen Todos.

Beispielsweise können in einer Spalte nur eine bestimmte Anzahl von Tickets (=ToDos) platziert werden. Ist ja auch logisch. Todo Heute ist zeitlich nunmal begrenzt. So ist für alle Abteilungen und Teammitglieder sichtbar, ob ToDos noch reinpassen oder in der Warteschlange landen. In der IT spielt diese Fokussierung eine wesentliche Rolle bei der Code-Qualität.

Wie läuft Kanban bei mir in der Praxis?
In einer wöchentlichen Sitzung bespricht man die Ergebnisse der erledigten Todos der vergangenen Woche. Danach werden neue Todos besprochen, den Teamitgliedern zugewiesen und priorisiert im Kanban abgelegt. Bei uns im Projekt www.addloops.com läuft das Kanban mittlerweile fast von selbst. Jedes Mitglied pflegt seine Zeile und die wöchentlichen Meetings nehmen kaum noch Zeit ein.

Was ich an Kanban besonders mag
Der große Vorteil von Kanban ist meiner Meinung (neben der Visualisierung von ToDos) auch, dass man einen Pool von wöchentlichen Todos hat. Aus diesem kann man sich die Todos herauspicken, auf die man momentan Lust hat (sofern keine Prio auf einem gewissen ToDo liegt). Mir gefällt diese Art zu arbeiten sehr gut. So ganz nach frei Schnauze funktioniert selbstständiges Arbeiten bei mir dann aber doch nicht.

In Ergänzung zu Kanban habe ich mir einen gewissen “Rahmenplan” mit regelmäßigen Todos erstellt. Sieht aus wie ein großer Stundenplan von Stunde 1 bis Stunde 12 (da ich mir den Luxus gönne, aufzustehen, wenn ich ausgeschlafen bin). Anfänglich habe ich im Kanbantool auch regelmäßige Todos erfasst, doch das war mir ein wenig zu voll. Dies habe ich mittlerweile anders gelöst, doch das ist einen weitere Artikel wert.

In diesem Rahmenplan oder auch Grundgerüst sind 1-2 frei gestaltbare Stunden pro Tag enthalten. Genau in diesen Stunden werden die in Kanban erfassten Tasks erledigt. Diese Arbeitsweise funktioniert für mich bisher wunderbar.

Und nun?
Nun hat man also im besten Fall eine Wand voller Klebezettel in unterschiedlichen Spalten. Man fängt an die Todos heute abzuarbeiten. Wenn diese leer sind und wieder Erwarten noch Zeit da ist, kann man sich weitere Todos aus Todos Woche abholen und bearbeiten. So wandern immer mehr Zettel aus den ToDo-Spalten in die Done Spalte.

Am Ende der Woche wird kurz besprochen, welche Ergebnisse zustande gekommen sind und welche Todos für die nächste Woche anstehen. Die neuen Todos werden im Beisein aller Mitglieder wieder verteilt und priorisert.

Das mag am Anfang etwas albern wirken mit den Zetteln, doch nach einiger Zeit möchte man nicht mehr auf diese simple aber geniale Visualisierung verzichten. So ging es mir jedenfalls.

Wie holt man noch mehr aus Kanban heraus?
Wer zusätzlich auch eine Priorisierung vornehmen möchte innerhalb dieser Spalten kann dies wie ich z.B. über einen Farbcode machen (kanbantool unterstützt verschiedenfarbige Zettel). Was mir in kanbantool.com noch ein wenig fehlt: Man kann auf Anhieb nocht erkennen, wie umfangreich ein Todo ist. Hier würde ich mir entweder variable Zettelgrößen wünschen, die sich nach dem eingestellten Aufwand richten. So muss man im Zweifel in jedes ToDo reingucken und den Wert raussuchen.

Auf kanbantool.com stehen zudem einige Analyse- und Reporting-Funktionen zur Verfügung. Dort kann man beispielsweise auf einen Klick sehen, wieviele Todos der Kategorie “5″ (=umfangreich) innerhalb einer Woche vom Team geschafft wurden. So lassen sich Arbeitsverteilung und Effektivität sehr leicht optimieren. Man erkennt als Teamleader, sofort, wenn es in einem Proozess hakt und man unterstützen sollte.

Fazit
Nach jetzt fast einem halben Jahr Team Kanban kann ich sagen, dass ich die Arbeit mit kanbantool.com allen kleinen Teams und Startups ans Herz lege. Als etwas flexiblere Version von SCRUM (salopp formuliert, vgl. hier), macht Kanban aus meiner Sicht vor allem in den Bereichen Sinn, wo es nicht primär um Softwareentwicklung geht, sondern in erster Linie Teams und ihre Todos einfach organisiert und visualisiert werden sollen. Auch bei kleineren Teams, in denen die festen Scrum-Rollen teilweise in Personalunion verteilt werden müssten, macht Kanban als “Scrum light” mehr Sinn.

Wir bei addloops.com nutzen Kanban daher als simples “Ticketing-System” für die Organisation unserer Firma. Kanban ist vielseitig und lebt davon, was die Teams daraus machen und wie sie es in ihren Arbeitsalltag integrieren. Ich würde schätzen, dass sich bei uns die Effektivität und die Abläufe spürbar verbessert haben durch den konsequenten Einsatz von Kanban.

Setzt ihr bereits Kanban in dieser oder einer anderen Form ein? Welche Erfahrungen habt ihr damit gemacht? Oder findet ihr alternative Formen der Team-Organisation attraktiver? Wie organisiert ihr euch in euren Teams? Ich bin auf eure Kommentare gespannt!

Meine Online-Einnahmen im Februar 2011

Alex Gieche — Thu, 17 Mar 2011 08:00:51 +0000

Da ich in anderen Blogs immer wieder gerne die Einnahmen studieren, möchte ich hier auch meine Einnahmen offen legen. Also Hosen runter!

Meine Projekte sind alle noch relativ frisch und beschränken sich momentan ausschließlich auf MFA und Amazon-Blogs, die eher leidlich geupdatet werden und automatisch mit Social Bookmarks versorgt werden. Insgesamt laufen die Blogs jetzt ein paar Monate ohne intensivere Pflege. Mal einen kleinen Artikel schreiben, mal updaten, nichts spektakuläres oder arg Zeit fressendes. Insgesamt schätze ich den Arbeitsaufwand für alle Blogs bisher auf ca. 30-40 Stunden intensives Arbeiten insagesamt über die Monate verteilt. An einem Tag schaffe ich etwa ein Blog mit komplettem Design und 3-5 Affiliate Artikeln.

Momentan habe ich keinerlei Aufgaben outgesourced und habe das in nächster Zeit auch erstmal nicht vor. Noch machts zu viel Spaß, selbst zu schreiben und ein Projekt von Anfang bis Ende hochzuziehen.

Einnahmen Februar 2011

Amazon: 217,13 €

Adsense: 88,95 € (

Affiliate: 63,36 €

Macht insgesamt (für mich wunderbare): 369,44 €

Kommentar zu den Februar-Einnahmen:

Die Einnahmen hätte wesentlich höher ausfallen können, wenn ich alle Affiliate Links zum Partner vorher mal gewartet hätte. So führten sie nicht immer direkt zum Produkt und es ging definitiv Conversion flöten. Wenn ich das Ganze hauptberuflich machen würde, wäre das wohl ein Ansatzpunkt für die Conversion-Optimierung gewesen. So ist es mir leider zu kurzfristig aufgefallen und so wichtig waren mir die paar Euros dann auch nicht.

Da meine Projekte bisher auf saisonale Ereignisse bauen, ist dieser Wert wohl schon so gut wie das Jahreshoch, da Januar und Februar die stärksten Monate für dieses Thema (Karneval) sind. Hier werde ich versuchen, in Zukunft etwas stärker auf “gleichmäßige” Einnahmen zu achten. Für März ist also eine deutliche Verminderung der Einnahmen zu erwarten.

Ich experimentiere momentan auch mit verschiedenen englischsprachigen Autoblog-Projekten im Bereich Gaming und Kaffee. Da die Projekte sehr frisch aufgesetzt sind, lässt ich hier noch nicht wirklich etwas sagen. Bin aber zumindest gespannt, da ein Blog bereits erste Treffer von Suchmaschinen erhält.

Nach einer Rechnung von Arbeitszeit gegen Ertrag hat sich bei meinen Projekten folgendes herauskristallisiert:

Keyword-Domains mit Blogs in einer Stärke von ca. 5 Artikeln gehen verhältnismäßig gut. Wie das jetzt nach dem Update aussieht, kann ich nicht beurteilen. Keyword-Domains sollen ja demzufolge etwas abgeschwächt werden.
Blogger.com Blogs sind schnell aufgesetzt, kostenlos und deswegen gut geeignet für Leute, die ins Thema reinkommen wollen ohne gleich eine Domain zu sichern und Webspace zu zahlen. Mit meinen allerersten Gehversuchen mache ich immer noch ein wenig Geld und habe nie einen Cent rein investiert.

Ich habe auf einem Blog Contaxe getestet und die Zahlen sind mehr als ernüchternd. Wesentlich geringere CTR als mit Adsense. Kommt wohl auch durch die geringere Anzahl der Advertiser zustande. In meinem Test auf einer Kaffeeseite wurde außer allgemeine Amazon oder Ebay Anzeigen nichts brauchbares eingeblendet. Contaxe kommt mir also vorerst nicht in die wichtigen Projekte rein.

Traffic auf agimedia.de

Die Trafficzahlen hier im Blog brauche ich noch nicht zu veröffentlichen, ist ja noch ganz frisch alles hier.

Ziele für den nächsten Monat:

Die ersten Besucher hier im Blog empfangen
Weitere 5 Blogs mit Adsense und Clickbank aufsetzen zu Themen, die nicht saisonal sind
Backlinking und Social Bookmarking für alle Projekte
Gewinn von ca. 150 Euro für März

Habt ihr Tipps für mich, wie ich meine Einnahmen noch unabhängiger von saisonalen Einflüssen machen kann? Mit welchen Programmen und Anbietern habt ihr gute Erfahrungen gemacht? Freue mich auf euer Feedback!

150 kostenlose Backlink-Möglichkeiten mit DoFollow – auf einen Blick

Alex Gieche — Wed, 16 Mar 2011 07:00:59 +0000

Nachdem das Layout jetzt größtenteils durch ist, gilt es die ersten Beiträge im Blog zu platzieren und vor allem das Blog ein wenig bekannter zu machen.

Wie starte ich jetzt konkret mit dem Bekannt machen?

Zu diesem Zweck habe ich mir einen kleinen Schlachtplan zurecht gelegt, den ich zukünftig bei all meinen Blogs verwenden werde. Es geht in dieser Liste um kostenlose Backlinks in Form von Webverzeichnissen, Social Bookmarking Diensten und RSS Feed Verzeichnissen. Sprich, mögliche Orte, an denen ich von meinem neuen Blog oder auch anderen Projekten erzählen kann.

Auf all diesen Seiten schaffe ich so die Möglichkeit, dass Besucher und Suchmaschinen auf meinen hoffentlich hochwertigen Content aufmerksam werden.

Damit diese Liste möglichst die volle Wirkung entfaltet, achtet darauf, diese Liste nicht an einem Tag “abzuarbeiten” sondern regelmäßig und in kleinen Dosen. So vermeidet ihr Abstrafungen durch Suchmaschinen.

Kostenlose Webverzeichnisse:

Es gibt meinen Recherchen zufolge 25 Milliarden Webverzeichnisse. Wichtig sind vor allem Webverzeichnisse, in der sich die Zielgruppe aufhält und in denen Backlinks mit doFollow und hohem PR möglich sind.

Wenn beide Bedingungen (Zielgruppe + doFollow) zutreffen: optimal! Aber zumindest eine Bedingung sollte erfüllt sein. Mittlerweile sind viele Verzeichnisse dabei, die sich das Verlinken per doFollow bezahlen lassen. Von dieser Möglichkeit habe ich bisher keinen Gebrauch gemacht.

http://www.1-webkatalog-webverzeichnis.de/
http://www.1001links.de/
http://www.123-finder.de/
http://www.1a-webtools.de/
http://www.1tipp.de/
http://www.1web-verzeichnis.de/
http://www.1webkatalog.de/
http://www.2wid.net/
http://www.abc-webinfo.de/
http://www.a-free-directory.info/
http://www.aboutus.org/
http://www.allesklar.de
http://www.annomate.com/
http://www.aviso24.com/
http://www.bellnet.de/
http://www.best-web-directories.com/
http://www.bys.net/
http://www.cat-link.de/
http://www.ciiity.de/
http://www.content-elefant.de/
http://www.cxhost.de/
http://www.de-linkliste.de/webkatalog/
http://www.deutscher-index.info/
http://www.directoryvault.com/
http://www.directoryws.com/
http://www.diwe-design.com/
http://www.dmoz.org/
http://www.fcmfans-west.de/
http://www.freewebsitedirectory.com/
http://www.freizeitverzeichnis.de/
http://www.hitmaster.de/
http://www.infotiger.com/
http://www.konzept-welt.de/webkataloge-2.html
http://www.link-rebell.de/
http://www.link-webkatalog.de/
http://www.linkmoney.de/
http://www.netz-experte.de/
http://www.newdy.org/
http://www.open-dir.de/
http://www.pblake.com/
http://www.page2page.de/
http://www.pixel-partisan.de/
http://www.poddys.com/
http://www.ranking-check.de/tools/rc.webkataloge.php
http://www.rusuche.de/webkatalog/
http://www.seo-backlink.com/
http://www.suche4all.de/
http://www.tabularum.de/
http://www.thalesdirectory.com/
http://www.turnpike.net/
http://www.web-sabinchen.de/
http://www.webkataloge-assistent.de/webkataloge-liste.php
http://www.weblink24.net/
http://www.webspider24.de/
http://dir.yahoo.com/
http://www.yuuko.de/
http://www.yvir.com/

Social Bookmarking Dienste:

Social Bookmarking ist ebenfalls eine gute Möglichkeit, Backlinks zu erzeugen, die auf den eigenen Blog zeigen. Nachfolgend eine kleine Liste von potenziellen Diensten, in denen man seinen Blog verlinken kann.

http://www.a1-webmarks.com/
http://www.blinklist.com/
http://www.blogspeed.de
http://www.bookler.de/
http://www.bukmark.net/
http://www.coolsearchinfo.com/
http://www.delicious.com/
http://www.digg.com/
http://www.ebaumsworld.com/
http://www.feedmarker.com/
http://www.folkd.com/
http://www.diigo.de/
http://www.dizzed.com/
http://www.gozoof.com/
http://www.info-ticker.de/
http://www.jimsfreelinks.com/
http://www.kwoff.com/
http://www.linkagogo.com/
http://www.lookday.de/
http://www.mister-wong.de/
http://www.my-favs.com/
http://www.myliveweb.de/
http://www.mylinkvault.com/
http://www.oneview.de/
http://www.oyax.com/
http://www.planeteblog.net/
http://www.plime.com/
http://www.publishr.de/
http://www.rss-jack.de/ (All-in-One Dienst)
http://www.seodis.de/
http://www.socialmarks.de/
http://www.socialarticle.com/
http://www.soforce.com/
http://www.spotback.com/
http://www.tagbox.de/
http://www.tagza.com/
http://www.tagz4me.de/ (All-in-One Dienst)
http://www.tamilers.com/
http://www.yattle.com/
http://www.ziki.com.au/
http://www.bestofindya.com/news/

Diese Liste muss in einer Woche nicht mehr aktuell sein, aber grün bedeutet MOMENTAN doFollow Link, rot noFollow Link. Diese Liste werde ich in der nächsten Zeit für einige Projekte angehen.

Weitere Seiten findet man in der folgenden Aufstellung (englisch): Klick!

RSS Feed Verzeichnisse:

http://www.blogalog.de/
http://www.blogeintrag.de/
http://www.blog-eintragen.de/
http://www.blogverzeichnis.eu/
http://www.feed-link.de/
http://www.feed-portal.com/
http://www.feed-spider.de/
http://www.feedplex.com/
http://www.fybersearch.com/
http://www.goldenfeed.com/
http://www.gorss.de
http://www.icerocket.com/
http://www.info-rss.de/
http://www.metafeeder.com/
http://www.myrss365.com/
http://www.rss-agent.at/
http://www.rss-anmelden.de/
http://www.rss-archiv.com/rssfeed-eintragen/
http://www.rss-easy.de/
http://www.rss-feed-world.de/
http://www.rss-info.net/
http://www.rss-jack.de/
http://www.rss-locator.com/
http://www.rss-network.com/
http://www.rss-portal.biz/
http://www.rss-portal-script.com/
http://www.rss-suche.eu/
http://www.rss-tipp.de/
http://www.rss-world.de/
http://www.rssfeed-eintragen.de/
http://www.rssfeeddirectory.org/
http://www.rssmotron.com/
http://www.seo-rss.de
http://www.tagz4me.de/
http://www.twingly.com/
http://www.weblogliste.de/
http://web-feed.de/
http://www.blogcatalog.com/ (Backlinkpflicht!)
http://www.bloggerei.de/ (Backlinkpflicht!)
http://www.blogoscoop.net/ (Backlinkpflicht!)
http://www.blogtotal.de/ (Backlinkpflicht!)
http://www.blogtraffic.de/ (Backlinkpflicht!)
http://www.topblogs.de/ (Backlinkpflicht!)

Wer zusätzlich automatisiert Feeds eintragen möchte, dem empfehle ich das kostenlose Programm Allscoop RSS Submit Pro.

Eine weitere gut gepflegte Liste zum Thema RSS-Feed-Verzeichnisse und Hintergrundwissen findet ihr hier bei Blogs-optimieren.de.

Blogs mit DoFollow:

Auch in Blogs sollte man unabhängig von DoFollow oder NoFollow in jedem Fall regelmäßig und qualifiziert kommentieren. Ein guter Kommentar ist gute Werbung für dich selbst. Nachfolgend eine kleine Liste mit Blogs, die DoFollow aktiviert haben.

http://www.agimedia.de/
http://www.coderamblings.com/
http://www.bueltge.de/
http://www.selbststaendig-im-netz.de/
http://www.seo-united.de/
http://www.seo-radio.de/
http://www.basicthinking.de/blog/
http://www.dofollow.de/
http://www.netzwertig.com/
http://www.sw-guide.de/
http://www.mitarbeiter-blog.de/
http://www.webvisitenkarte.net/blog/
http://www.blogprojekt.de/
http://www.webdesign-er.com/
http://www.fabian-drescher.com/
http://www.serien-load.de/blog
http://www.eisy.eu/
http://www.webdesign-in.de/
http://www.toscho.de/
http://www.touchscreen-handy.de/
http://www.itler.net/
http://www.projekt-jow.de/
http://www.sportnotizen.de/
http://www.myseosolution.de/blog
http://blog.adler-webprofis.de/
http://www.softwareblog.eu/
http://blog.datenschmutz.net/

Kleiner Tipp: Auch hier im Blog gibts doFollow Verlinkung ab 3 verfassten Kommentaren.

Artikel-Verzeichnisse:

http://www.squidoo.com/
http://www.pageballs.com/
http://www.pageballs.com/
http://www.online-artikel.de/
http://www.artikelforum.de/
http://www.77.am/
http://www.ipmedia.de/
http://www.sourcedb.de/
http://www.articles-content.de/
http://ezinearticles.com/
http://www.articlesbase.com/

Automatisierte Dienste:
Damit ich etwas Zeit beim Eintragen und Verlinken gewinne und nicht einen Nervenkollaps erleide bei dieser recht monotonen Arbeit, habe ich nach Diensten recherchiert, die mir das Eintragen etwas leichter machen. (Serien nebenbei gucken hilft auch schon ungemein =) )

Diesen Diensten übergibt man einfach die URL, die man verlinken möchte und der Rest passiert automatisch oder halb-autmatisch. Und vor allem KOSTENLOS!

IM Automator

http://www.imautomator.com

Mit diesem Tool kann man bis zu 10 Seiten mit Backlinks versorgen. Man kann wählen zwischen verschiedenen Zeiträumen, in denen die Backlinks gesetzt werden sollen.

Social Marker

http://www.socialmarker.com/

Mit diesem Dienst lassen sich relativ schnell händisch Social Bookmarks setzen. Vorteil ist, dass man individuell zusammen stellen kann, bei welchen Diensten man bookmarken möchte. Dieses Tool würde ich als halb-autmatisches Bookmarking bezeichnen.

Und jetzt ganz wichtig: Damit diese Listen aktuell bleiben und vielen Leuten nutzen können, kommentiert bitte fleißig und gebt mir Tipps für neue Seiten und Verzeichnisse. Diese werde ich dann nach kurzer Prüfung hier mit in den Artikel nehmen. Auch bei toten Links bitte kurz Bescheid geben.