WordCamp Köln 2011

Wordcamp Köln 2011Mit meinem Fazit zum WordCamp Köln 2011 bin ich hoffnungslos zu spät dran. Der Grund: Die freundliche Telekom hat bei einem Reparaturversuch beim Nachbarn unseren Anschluss abgeknipst. Das heisst, wir fahren im Notbetrieb und Blogposts bleiben liegen.

Eine gute Zusammenfassung des Camps hat Jan Tissler auf t3n.de geliefert.
Mein Eindruck ist gemischt. Einerseits mag ich die Atmosphäre auf einem BarCamp ungeheuer gerne. Man trifft immer interessante Leute und trägt eine Menge Anregungen nach Hause. Andererseits steht und fällt die Qualität der Sessions mit dem Engagement und der Qualifikation der Teilnehmer. Melden sich zu wenige, ist die Spannweite der Themen nicht sehr breit und der Anteil an schwachbrüstigen Sessions ist tendenziell höher. Weiterlesen WordCamp Köln 2011

Kunden-Logo in die WordPress-LogIn-Maske einbauen

Kunden freuen sich, wenn anstatt des WordPress-Zeichens ihr Logo in der LogIn-Maske auftaucht.

Dazu muss man diesen Code, in die Datei functions.php einfügen:

function custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_template_directory_uri().'/images/kundenlogo.png) !important;background-size:250px 50px !important; }
    </style>';
}
add_action('login_head', 'custom_login_logo');

Damit man etwas sehen kann, müsst Ihr eine Datei „kundenlogo.png“ in den images-Ordner Eures Themes legen. Das Logo hat in diesem Beispiel die Größe 250px x 50px. Die Größe gebt Ihr bei background-size an.

Wenn das Logo nicht zu sehen ist, ist ziemlich sicher etwas mit dem Pfad zur Datei nicht in Ordnung. Falls Ihr ein Child-Theme verwendet, müsst Ihr anstatt get_bloginfo(‚template_directory‘) das hier eintragen: get_bloginfo(’stylesheet_directory‘).
Sonst schaut die Funktion im Parent-Theme-Ordner nach und findet das Logo dort nicht.

Responsive Design: Welche Vorteile hat der flexible Raster (Fluid Grid)?

Wenn man eine Website mit einem Responsive Design umsetzen will, hat man gut zu tun. Was auf den ersten Blick einfach aussieht, ist auf den zweiten Blick ziemlich komplex.

Was ich mich dabei immer wieder gefragt habe ist: Wozu eigentlich die Umstände mit dem flexiblen Raster (Fluid Grid)?
Die Arbeit mit Prozentangaben ist kompliziert und man muss das Verhalten des Layouts aufwändig testen. Würde es denn nicht reichen, nur mit Media Queries zu arbeiten? Dann könnte man beim festen Layout bleiben und die Seite sieht trotzdem auf unterschiedlichen Geräten gut aus.

Adaptive oder Responsive Design?

Natürlich gibt es auch für diese Idee schon ein Schlagwort: Adaptive Design. Damit wird die Methode bezeichnet, die ich oben skizziert habe: Man baut Layouts für verschiedene Bildschirmgrößen. Es gibt beispielsweise eine Ansicht fürs iPhone in der Breite 320px, eine fürs iPad im Hochformat mit der Breite 768px und eine für Desktop-Computer mit einer Breite über 1024px.
Alle drei Layouts werden mit festen Werten umgesetzt, also ganz ohne die komplizierte Prozentrechnerei. Über MediaQueries fragt man dann ab, welches Gerät die Website gerade anschauen will. Meldet sich ein iPhone, schaltet das CSS automatisch auf das passende Layout um.

Perfekt. Dann kann man sich den flexiblen Raster eigentlich sparen, oder?
Die Antwort: Es kommt darauf an.

Weiterlesen Responsive Design: Welche Vorteile hat der flexible Raster (Fluid Grid)?

Hörbuch-Tipp: „Ausgebrannt“ von Andreas Eschbach

Letzte Woche hatte ich Urlaub. Das ist die Zeit, in der ich mal was anderes lese als Bücher über Webdesign. Manchmal lasse ich mir auch etwas vorlesen.

Dieses Hörbuch ist toll. Die Geschichte ist spannend von Anfang an und hält diese Spannung bis zum Schluss. In der Mitte des relativ langen Hörbuchs hatte ich mal kurz Sorge, dass die Geschichte abdriftet, aber die Story blieb in der Spur. Wobei der erste Teil vielleicht einen Tick packender ist.

Das Buch wird gelesen von Ulrich Noethen und das ist ein Erlebnis. Noethen liest sehr lebendig und farbig, bleibt dabei aber ruhig und angenehm im Duktus. Alle Effekte erzielt er mit minimalen Mitteln. Weiterlesen Hörbuch-Tipp: „Ausgebrannt“ von Andreas Eschbach

Newsletter light: Das WordPress PlugIn Subscribe2

Als RSS-Feed-Leser war mir lange Zeit nicht klar, dass nicht alle Leute, die regelmäßig im Internet Texte lesen, das über einen RSS-Feed tun. Über den im Blog eingebauten Feed erreiche ich also viele Leser gar nicht. Deshalb habe ich nach einer Ergänzung für meinen RSS-Feed gesucht und bin beim klassischen E-Mail-Newsletter gelandet.

Die Idee war, dass man sich über die Website anmelden kann und dann in regelmäßigen Abständen eine kurze Zusammenfassung der neuesten Artikel im E-Mail-Postfach findet. Das Ganze sollte weitgehend automatisch ablaufen, so dass ich keine Chance haben würde, den nächsten Termin zu verschusseln.

Über einen Umweg über MailChimp, deren Service es leider bisher noch nicht auf deutsch gibt, bin ich schließlich bei CleverReach gelandet. Das ist ein Anbieter, der seinen Sitz in Deutschland hat und mit dem man folgerichtig auch Mails auf Deutsch verschicken kann. Für den An- und Abmeldeprozss war es mir wichtig, dass meine Leser verstehen, was sie da anklicken.

Weiterlesen Newsletter light: Das WordPress PlugIn Subscribe2

5 schöne Effekte mit der CSS-Eigenschaft „text-shadow“

Mit der CSS-Eigenschaft „text-shadow“ kann man sehr reizvolle Akzente setzen, wenn man den Effekt sparsam und gezielt einsetzt. In diesem Artikel stelle ich fünf Beispiele dazu vor.

Der Code ist relativ einfach aufgebaut:

[css]text-shadow: 1px 2px 3px #999[/css]

Der erste Wert bezeichnet den horizontalen Versatz, der zweite Wert gibt den vertikalen Versatz an. Man kann mit positiven und negativen Werten arbeiten.
Der dritte Wert bestimmt den Grad der Weichzeichnung. Je höher dieser Wert ist, desto weicher und breiter ist die Kante des Schattens. Der vierte Wert ist die Farbe des Schattens. Weiterlesen 5 schöne Effekte mit der CSS-Eigenschaft „text-shadow“

Responsive Web Design (5)

Serie Responsive DesignIn den vorangegangenen Artikeln habe ich die drei Module der Responsive Design Technik erklärt, den Fluid Grid, die Media Queries und das Thema Fluid Images. In der Praxis ist der richtige Umgang mit den Modulen nicht immer ganz einfach. Es gibt ein paar kritische Punkte, mit denen man sich auseinandersetzen sollte.

Wer mit dem Smartphone eine Website aufruft, befindet sich in einer anderen Situation als jemand, der vor einem Desktop Rechner sitzt. Da ist einmal die Verbindungsgeschwindigkeit. Zwischen einer schnellen DSL-Anbindung und einem Funknetzwerk liegen Welten. Das heißt, beim Smartphone zählt jedes Byte, beim Desktop-Rechner in einer DSL-Umgebung sind Ladezeiten kein Thema mehr.

Mit dem Smartphone sucht man zudem nach anderen Informationen als vom Desktop-Rechner aus. Am Schreibtisch hat man die Muße, auch mal einen längeren Texte zu lesen. Hier werden auch die meisten Käufe in Online-Shops abgeschlossen. Am Smartphone kauft man seltener ein, man sucht statt dessen nach ganz bestimmten Informationen. Und möchte schnell zum Punkt kommen.
Weiterlesen Responsive Web Design (5)

Tipps für kleine Projekte

Am liebsten sind mir Projekte mittlerer Größe. Nicht zu groß, so dass man in absehbarer Zeit Ergebnisse sieht und nicht zu viele Entscheider involviert sind. Aber auch nicht zu klein, damit der finanzielle Rahmen auch dann noch trägt, wenn die Ideen mal etwas länger brauchen. Aber man kann sich die Größe eines Projekts nicht immer aussuchen. Was also tun mit Mini-Budgets? Gleich ablehnen oder annehmen?

Kleine Projekte haben einen großen Nachteil: Der Aufwand, den man für Organisation und Kontakt treiben muss (Mails, Telefonate, Abwicklung) steht in einem ungünstigen Verhältnis zum Budget. Damit sind kleine Projekte weniger lukrativ, weil unterm Strich ein geringerer Stundensatz herauskommt.

Auch muss die Arbeit viel mehr „auf den Punkt“ passieren. Wenn es ums kreative Arbeiten geht, entscheidet oft die Tagesform darüber, ob am Ende des Tages etwas auf dem Papier steht oder nicht. Ehrenrunden drücken auf den Stundensatz.

Eigentlich spricht eine Menge dafür, kleine Projekte abzulehnen.
Berufsanfänger und Einsteiger sind in einer anderen Situation, aber was ist mit den alten Hasen? Worauf kommt es an, worauf sollte man ein Auge haben?

Weiterlesen Tipps für kleine Projekte

Responsive Web Design (4): Fluid Images

Serie Responsive DesignIn dieser Serie ging es bisher um den Fluid Grid, das flexible Raster, das sich unterschiedlichen Bildschirmgrößen anpasst und um die Media Queries. Heute ist der letzte Baustein der Responsive-Design-Technik dran, die Fluid Images. Dadurch passen sich auch die Bilder ihrer Umgebung an.

Jeder Webdesigner kennt das: Passt ein Bild in der Größe nicht ins Layout, gerät alles durcheinander. Spalten und Texte verschieben sich und die Optik ist dahin. Das würde mit einer Website passieren, die zwar einen flexiblen Raster hat, aber alle Bilder nur in einer fixen Größe vorhält.

Weiterlesen Responsive Web Design (4): Fluid Images