von Kirsten

Was kostet eine WordPress-Seite?

Was kostet das? Diese Frage steht am Anfang jedes Projektes. Die Antwort ist ein bisschen kompliziert. Aber nur ein bisschen.

Ein Mensch, nennen wir ihn Paul, braucht eine Webseite und er fragt sich, was das wohl kosten würde. Unter dem Stichwort „WordPress Agentur“ spuckt die Suchmaschine eine lange Liste von Ergebnissen aus. Kleine und große Dienstleister – und ein wildes Durcheinander an Preismodellen.

Eine Agentur bietet ein „WordPress Komplettpaket“ für 600€ an, eine andere spricht von „WordPress Custom Themes“ und will dafür 3.000€ haben. Und bei Themeforest gibt es coole Themes schon für 60€.

„Geht’s noch?“, empört sich Paul. „Ich bin doch nicht blöd und zahle 3.000€, wenn ich das Ganze für 60€ kriegen kann!“

Wie kann das sein, dass für ein und dasselbe Produkt so unterschiedliche Preise aufgerufen werden?

Es steht zwar überall WordPress drauf, aber es ist nicht überall dasselbe drin

Option 1: Selber machen

Auch ein Laie kann sich eine WordPress-Seite ganz bequem über die Benutzeroberfläche (aka WordPress Dashboard) zusammenbauen. Dafür wurde WordPress erfunden. Mit dem Code dahinter kommt man dabei nicht in Berührung.
WordPress selbst und viele gute Themes sind gratis und lassen sich kostenlos herunterladen. Man muss allerdings bereit sein, sich in die Thematik einzuarbeiten. Je nach Vorwissen und Ziel kann das schon mal ein paar Tage dauern.

Schneller geht’s auch mit dem Premium Theme nicht. Im Gegenteil: Diese Themes sind sehr komplexe Konstruktionen, weil sie für jeden etwas bieten müssen. Zusätzlich zu den WordPress Grundlagen muss man sich hier noch in die individuelle Systematik des jeweiligen Themes einarbeiten.

GEEIGNET FÜR
Kleine Projekte mit einfachen Anforderungen.

WENIGER GEEIGNET FÜR
Komplexe Projekte, bei denen Eingriffe in die Theme-Dateien (Templates) nötig sind oder spezielle Plugins gebraucht werden. Natürlich ist auch hier selber basteln möglich und die WordPress Community ist sehr hilfsbereit. Aber das Risiko, eines Tages vor einer kaputten Seite zu sitzen, steigt mit jedem Codeschnipsel, den man irgendwo aufgegabelt, aber nicht so ganz verstanden hat.
Weiterlesen Was kostet eine WordPress-Seite?

von Kirsten

WordPress & Vagrant für visuelle Menschen

Viele WordPress-Profis schwören auf Vagrant als Entwicklungsumgebung. Das sind meist Leute, die viel per Kommandozeile arbeiten. Und dann gibt es noch Menschen wie mich, die sich mit Shell-Befehlen nicht ganz so wohl fühlen.

Letzte Woche habe ich mir angeschaut, wie sich MAMP und Pressmatic im direkten Vergleich so anfühlen. Um das Bild etwas zu erweitern, habe ich mir noch Vagrant angeguckt. 

Beim Zusammenbauen eines Vagrant-WordPress-Workflows haben mir diese beiden Artikel sehr geholfen:

WordPress Development mit VVV (Tuts+)
Setting up a WordPress VVV Workflow (WP Beaches)

In den Artikeln werden alle Schritte zur Installation genau beschrieben.

Optische Oberflächen für VVV und Vagrant

Für mich ist die Arbeit mit dem Terminal deshalb so schwierig, weil ich vor einer „Black Box“ sitze. Erst wenn ich einen passenden Befehl eintippe, spuckt mir das Terminal eine Rückmeldung aus. Weiss ich den Zauberspruch Befehl nicht, sitze ich nur dumm davor und komme nicht weiter.

Spannend fand ich deshalb diese beiden Module:

  1. VVV Dashboard
  2. Vagrant Manager

VVV Dashboard ist eine optische Oberfläche für eine VVV-Installation. Dort kann ich sehen, was sich in meiner Serverumgebung tut und ich kann direkt vom Dashboard aus Aktionen ausführen. Das VVV Dashboard hat mir den Zugang zur Vagrant-Welt sehr erleichtert.
Weiterlesen WordPress & Vagrant für visuelle Menschen

von Kirsten

Unterstreichung näher am Text positionieren

Ein guter Tipp von Florian Brinkmann zum Gestalten von Links
Florian schreibt: „Wenn ihr einen Link oder anderen Text mit einer Unterstreichung versehen möchtet, dann greift ihr vermutlich auf border-bottom zurück, statt text-decoration: underline zu nutzen. Wenn diese Unterstreichung aber zu weit vom Text entfernt angezeigt wird, habt ihr ein Problem (jedenfalls hatte ich das vor Kurzem), denn weiter nach oben lässt sich so ein Rahmen nicht positionieren. Wie ihr das lösen könnt, zeige ich euch in diesem Artikel.“

Link zum Artikel

von Kirsten

Nachfahre, Kind oder Geschwister? CSS-Selektoren kombinieren

CSS-Selektoren lassen sich auf unterschiedliche Arten kombinieren. Die Schreibweisen dafür sind ein bisschen schwer auseinander zu halten.

Quizfrage: Was ist der Unterschied zwischen diesen beiden Schreibweisen?

ul li {font-size:20px;}
ul > li {font-size:20px;}

In beiden Fällen geht es um Elemente in einer ungeordneten Liste (ul). Im ersten Beispiel werden alle Listenelemente angesprochen, im zweiten Fall nur die Listenelemente der obersten Ebene.
TLDR: Am Ende des Artikels gibt es ein CodePen mit Beispielen.

1. Descendant selector

ul li {font-size:20px;}

Das Listenelement ist ein descendant der ungeordneten Liste (ul). Descendant kann man mit „Nachfahre“ übersetzen.
Diese Kombination legt fest, dass alle Listenelemente in der Liste eine Schriftgröße von 20 Pixeln haben sollen. Egal wie viele Listenelemente es gibt und an welcher Stelle sie stehen. Diese Anweisung greift auch bei mehreren ineinander verschachtelten Listen. Alle Listenelemente sind immer 20 Pixel groß.

2. Child selector

ul > li {font-size:20px;}

Bei dieser Schreibweise ist das Listenelement ein child der ungeordneten Liste (ul), also ein Kind der Liste. Das bedeutet, dass nur die Kinder, also die direkten Nachkommen der ungeordneten Liste, 20 Pixel groß sind.
Wird in die Liste eine weitere Liste hineingeschachtelt, werden diese Elemente nicht angesprochen.
Weiterlesen Nachfahre, Kind oder Geschwister? CSS-Selektoren kombinieren

von Kirsten

„Vollgemüllt ist doof.“ „Clean aber auch!“

User Interfaces sind ein vielschichtiges Thema, für das es keine Patentrezepte gibt. Sondern nur individuelle Lösungen.

Bei t3n erschien kürzlich der Artikel Aufgeräumt? Clean? Von wegen! Warum erfolgreiche Interfaces chaotisch und komplex sind. Der Text ist eine gekürzte Übersetzung eines Posts von Jonas Downey, der bei Medium erschienen ist: Why I love ugly, messy interfaces — and you probably do too.

In dem Artikel geht es darum, dass ein unaufgeräumtes Interface oft erfolgreicher ist als ein reduziertes.

User Interfaces sind ein vielschichtiges Thema, für das es keine Patentrezepte gibt. Es gibt nur individuelle Lösungen. Die sind nicht schwer zu finden, wenn man bereit ist, sich mit der Materie auseinanderzusetzen (Mit welchen Anliegen kommen die Besucher? Auf welchem Weg können sie ihr Anliegen lösen?).

Aber diese Auseinandersetzung ist mit Arbeit verbunden. Arbeit, die Geld kostet, weil man dafür gute Leute engagieren muss.

Komplex, aber bitte nicht chaotisch

Ein komplexes Angebot wie Die Zeit oder The Guardian braucht eine andere Art von Interface als ein einfaches Blog wie dieses hier. Für mich als Leserin einer Tageszeitungs-Webseite ist es aber überaus wichtig, dass das Interface übersichtlich und klar strukturiert ist. So kann ich mich gut orientieren und finde die Inhalte, die mich interessieren.
Weiterlesen „Vollgemüllt ist doof.“ „Clean aber auch!“

von Kirsten

Fehler im Projektmanagement vermeiden

Fehler im Projektmanagement passieren. Aber man kann aus ihnen lernen und es das nächste Mal besser machen.

1. Das Angebot

Der Kunde passt perfekt, das Projekt klingt spannend und wäre ein toller Gewinn fürs Portfolio. Viel Budget ist nicht da, also geben wir ein besonders günstiges Angebot ab. Schließlich haben wir ja Erfahrung und wissen, wie man ein Projekt effizient durchführt.

LEKTION 1 Ideallinie fahren klappt nicht
Die Idee, ein zu kleines Budget durch Effizienz und Schnelligkeit auszugleichen, ist eine blöde Idee. Denn in den seltensten Fällen kommt man auf der Ideallinie durch die Kurve. In der Realität sind die Straßenverhältnisse nur durchschnittlich gut und man muss die Geschwindigkeit reduzieren. Ohne Puffer wird ein Projekt finanziell nicht profitabel werden. Weiterlesen Fehler im Projektmanagement vermeiden

von Kirsten

Einen Textauszug per CSS erzeugen

Kann man die Länge von WordPress-Excerpts per CSS steuern? Ja, aber es ist kompliziert.

WordPress-Excerpts werden in einer bestimmten Länge ausgegeben, der Default-Wert sind 55 Wörter.  Möchte man diesen Wert ändern, kann man das über den Filter excerpt_length relativ einfach erreichen.

function custom_excerpt_length( $length ) {
return 20;
}
add_filter( ‘excerpt_length’, ‘custom_excerpt_length’ );

Sie auch https://codex.wordpress.org/Plugin_API/Filter_Reference/excerpt_length

Geht das nicht auch per CSS?

So lange ein Projekt noch in der Entwicklung ist, ändert sich die Form von Auszügen/Excerpts häufig. Auch braucht man oft unterschiedliche Varianten von Auszügen: An einer Stelle ist ein längerer Teaser sinnvoll, an anderer Stelle ist der Platz knapp und ein Satz muss reichen.

Da wäre es eigentlich praktisch, wenn man die Darstellung der Exzerpte per CSS steuern könnte. Zumindest bis zu dem Zeitpunkt, an dem feststeht, welche Exzerpt-Varianten in welchem Kontext gebraucht werden.

1. CSS Eigenschaft ‚text-overflow:ellipsis‘

In CSS3 gibt es die Eigenschaft text-overflow. Damit kann man festlegen, was passieren soll, wenn ein Text länger ist als die Box, die ihn umschließt. Der default Wert ist text-overflow:clip, damit wird der Text einfach abgeschnitten. Trägt man statt dessen text-overflow:ellipsis ein, erscheinen am Ende der abgeschnittenen Zeile drei Pünktchen (Ellipsis).

Tolle Sache, dachte ich. Damit müsste man eigentlich auch die Darstellung von Exzerpten auf einer WordPress-Seite per CSS steuern können. Das ist leider nicht ganz einfach.
Weiterlesen Einen Textauszug per CSS erzeugen

von Kirsten

Performance-Experiment mit gzip und Browser-Caching

Was macht eine Webseite eigentlich langsam? Wo kann man ansetzen, um schnellere Ladezeiten zu erreichen?

Auf dem WordCamp Nürnberg hat Jan Thiel einen tollen Vortrag zum Theme Performance gehalten: WordPress Performance Mythbuster. Den Vortrag könnt Ihr Euch hier auf wordpress.tv anschauen.

Performance ist ein wichtiges Thema, nicht nur seit Google ein Auge drauf hat. Je langsamer eine Seite lädt, desto schlechter ist die User Experience. Jede Millisekunde zählt, bei mobilen Geräten umso mehr.

Spannend fand ich, wie Jan herausgearbeitet hat, wo denn der Flaschenhals bei den Ladezeiten tatsächlich liegt. Vorsicht Spoiler: Weder die Server-CPU noch der PHP-Code vom WordPress-Core sind hier die Bremse, der PHP Code von Themes und Plugins ist es, der aufs Tempo drückt.

Was logischerweise bedeutet, dass noch’n Plugin Eure Seite nicht unbedingt schneller macht. Auch wenn Performance-Optimierung draufsteht. Ausnahmen bestätigen die Regel.

Das Experiment

Ich hab mir mal zwei Sachen vorgenommen, die Jan in seinem Vortrag erwähnt hat, mit denen man der Netzialisten-Seite Beine machen kann. Ich hab dazu das Google Page Speed Tool genutzt, obwohl ich ein etwas gespaltenes Verhältnis dazu habe: Die Angaben dort muss man mit Vorsicht geniessen und immer die Verhältnismäßigkeit im Auge behalten. Beispiel: Man kann schon „Punktabzug“ kriegen, wenn ein einziges 32KB-Bild nicht optimiert ist.

Die beiden Techniken, die ich mir angeschaut habe, sind:

  1. gzip -Komprimierung
  2. Browser-Caching

Weiterlesen Performance-Experiment mit gzip und Browser-Caching

von Kirsten

Google Fonts über den eigenen Server einbinden

Es gibt verschiedene Methoden, um Google Fonts in eine Webseite einzubinden. Die klassische Methode ist, die Schriften über einen Link in der header.php oder – besser – über die functions.php ins Theme einzubinden. Ellen Bauer hat einen ausführlichen Artikel dazu geschrieben: Google Fonts in WordPress Themes

Bei dieser Methode liegen die Schriften auf den Google-Servern und werden über einen Link auf meine Webseite geholt. Wird meine Seite geladen, schickt sie eine Anfrage an den Google Server und der liefert dann die Schriften aus. Davon merkt man in der Regel nicht viel. Aber es bleibt die Tatsache, dass eine Abfrage passiert und das dauert ein paar Millisekunden.

Je nach der Qualität der Datenverbindung kann es auch passieren, dass die Schriften nicht schnell genug ausgeliefert werden. Dann erscheinen alle Texte plötzlich in Arial oder Times.
Auch Firewalls können ein Problem darstellen – in manchen Firmen gelten so strenge Regeln, dass die Mitarbeiter keine Google Fonts zu sehen kriegen.

Google Fonts herunterladen und Webfont erzeugen

Aus diesen Gründen bin ich in letzter Zeit dazu übergegangen, Google Webfonts nicht mehr per Link einzubinden, sondern direkt auf den Sever zu laden, auf dem auch das WordPress-Theme liegt. Ich gehe davon aus, dass das rechtlich kein Problem ist, denn die Google Webfonts haben eine SIL Open Font License, die das Herunterladen erlaubt.
Weiterlesen Google Fonts über den eigenen Server einbinden