WordPress: Schönere Rezensionen mit WP Product Review

Rezensionen und Produktbewertungen sind ein wichtiger Bestandteil vieler Blogs und Websites. Schreibt man regelmäßig Rezensionen, ist es sinnvoll, ein spezielles Plugin für diese Zwecke einzusetzen.

Hier teste ich das WordPress Plugin „WP Product Review“. Die Standardversion ist kostenlos, optional kann man die Pro-Version für 19,99$ erwerben.

 

 

WP Product Review: Grafische Rezensionen

 

Das kostenlose Plugin kommt mit einem unkomplizierten User Interface daher. Man kann das Plugin in die Artikel integrieren. So ergänzt man die Artikelrezensionen durch eine grafische Darstellung. Nachdem man die Bewertungskriterien festgelegt hat, kann man sie auf einer Skala von 0-10 bewerten. Ist dieser Schritt getan, rechnet das Plugin den Durchschnitt aus und zeigt es als Ergebnis an. Der Durchschnitt wird im Kreisdiagramm angezeigt.

WP Product Review

Einfacher Überblick

Mit der grafischen Darstellung ist es möglich, dem Leser schnell einen Überblick über das bewertete Produkt zu verschaffen. Wenn der Leser nicht auf der Suche nach einem speziellen Artikel ist, sondern verschiedene Produkte vergleichen möchte, kann er die weniger interessanten Produkte sofort ausschließen.

 

WP Product Review

Produkte besser vergleichen

Wenn man für eine Produktkategorie (z.B. Smartphones) immer die selben Bewertungskriterien verwendet, ist es für den Leser leichter, die verschiedenen Produktezu vergleichen. Auch hier kommt die grafische Darstellung ins Spiel und zeigt dem Besucher auf dem ersten Blick, um welche Art von Produkt es sich handelt.

Das Plugin kommt auf bekannten Websites wie kfz-halterung.info zum Einsatz, auf denen viele Produkte bewertet werden.

 

 

Affiliate Marketing mit Produktreviews

Das Plugin bringt einen integrierten Button mit, den man selbst gestalten kann. Es ist beispielsweise möglich, den Button mit „Kaufen“ zu betiteln und auf das entsprechende Produkt in einem Onlineshop wie Amazon zu verlinken.

Denken sie jedoch daran, ihre Produkte trotz der Provision ehrlich zu bewerten. Auch schlechte Bewertungen helfen ihren Kunden weiter und erwecken Seriösität. Jemand, der ausschließlich positive Rezensionen verfasst, wird schnell als Verkäufer und nicht mehr als Blogger wahrgenommen.

Website Ladezeit & PageSpeed verbessern: So geht´s!

Website PagespeedDie Seitenladezeiten einer Website sind nicht nur für Usability und Traffic entscheidend, sondern spielen auch für die SEO Optimierung eine große Rolle. Google gab im Blog 2012 bekannt, dass der PageSpeed einer Website direkt in das Ranking mit einfließe.
Sicherlich macht der Pagespeed nur einen geringen Teil des Rankings aus, doch er kann einer Website bei totalen Abweichungen schaden. Daher macht es Sinn, die Seitenladezeit zu optimieren. Wie man das mit kleinen Verbesserungen schnell erreichen kann, zeige Ich in diesem Artikel. 5 Tipps für schnellere Seitenladezeiten!

 

Warum der Pagespeed einer Website wichtig ist

Die Seitenladezeiten einer Website sind für Besucher sehr wichtig. Leute, die auf der Suche nach einem bestimmten Produkt oder Artikel sind, der genau ihren Vorstellungen entspricht, entscheiden sich in kürzester Zeit, ob Sie ihre Website lesen oder Sie sich eine Alternative suchen sollten. Wird der Besucher dann auch noch durch lange Wartezeiten an seiner Recherche gehindert, sinkt seine Kaufbereitschaft und sein Interesse.

Man könnte die Aussagen als belanglose Thesen abstempeln, doch eine Studie von Amazon bewies, dass die Conversion Rate pro 0.1 Sekunden zusätzlicher Antwortzeit um 1% sinke (Conversion = Bestimmtes Ziel einer Website, das erreicht werden soll. Bei Onlineshops ist der Verkauf eine Conversion). Demnach macht eine Sekunde Unterschied einen Verlust von 10% aus.

Vorteile von schnelleren Webseiten:

  • Mehr organische Zugriffe über Suchmaschinen durch die PageSpeed Berücksichtigung
  • Höhere Conversion Rate

Testen Sie die Geschwindigkeit ihrer Website:Auf webpagetest.org erhalten Sie detallierte Informationen und Statistiken (ohne Anmeldung)!

1. Http-Anfragen reduzieren

Jede Anfrage über ein Http-Request kostet Zeit. Der Grund, warum Ich dies an erster Stelle benenne, liegt in der Natur der Sache.

Http Verbindungen unterstützen keinen Datenstrom. Für jedes geladene Bild /Stylesheet wird eine neue Verbindung aufgebaut und im Anschluss wieder getrennt. Für Besucher von Smartphones und Tablets, die über mobiles Internet surfen, ist das sehr aufwändig und zeitraubend.

Optimierung: Überlegen Sie, welche Ressourcen wirklich benötigt werden. Versuchen Sie, externe Inhalte möglichst direkt zu integrieren. Javascript Code muss nicht zwangsweise extern eingebunden werden. Stattdessen empfiehlt es sich, den Quellcode direct über <script> und </script> einzubinden.

 

2. Verschiedene Bildergrößen bereitstellen (Skalieren)

Bei Websites, die mit vielen Bildern arbeiten, machen diese einen großen Anteil der Datenmenge aus. Ein weiterer Grund, Bilder zu skalieren und in möglichst vielen verschiedenen Größen bereitzustellen. Wer eine Seite mit dem Smartphone aufruft und ein großes Bild herunterladen muss, das im Nachhinein sowieso verkleinert wird, bekommt das Bild nicht in besserer Qualität zu sehen als ein für kleine Bildschirme optimiertes Bild.

Optimierung: Stellen Sie im Optimalfall drei Größen für Bilder bereit, die häufig zum Einsatz kommen. Je nach Displaygröße laden Sie dann das entsprechende Bild. Wie sie verschiedene Größen einer Datei bereitstellen und diese (ohne Javascript!) abhängig vom Gerät anzeigen, habe Ich im Artikel Schnellere Ladezeiten durch Conditional Loading gezeigt. Ein nützlicher Service zur Bildverkleinerung ist tinipng.com, der PNG Bilder möglichst verlustfrei komprimiert.

 

3. Dateien bereithalten: Browser-Cache benutzen

Es macht keinen Sinn, alle Elemente einer Seite bei jedem Aufruf neu zu laden. Abhilfe dagegen schafft das nicht unbekannte Browser Caching. Über den Header der Website teilen Sie dem Browser mit, wie lange er die Elemente lokal speichern soll.

Optimierung: Über die Header Daten können Sie einen „Expires“ Wert angeben. Wie der Name schon suggeriert, legt man mit diesem Wert das Ablaufdatum fest. So wird ein Bild nicht bei jedem Aufruf neu geladen, sondern beispielsweise alle 2 Wochen. Google empfiehlt: Bilder mindestens 1 Woche im Browser Cache speichern!

 

4. Javascript im Footer laden

Optimierung: Laden Sie Javascript Quellcode erst am Ende der Seite. Dies hat den entscheidenden Vorteil, dass erst der Inhalt dargestellt und erst im Anschluss das Script geladen wird. Der Besucher kann ihren Inhalt also bereits lesen, während der Browser das Script noch herunterlädt. Auch Besuchertools (z.B. Google Analytics) können im Footer geladen werden.

 

5. CSS & Javascript komprimieren

Eine weitere Stütze zur Pagespeed Optimierung kann die Komprimierung von CSS- und Javascript Ressourcen sein. In CSS Stylesheets befinden sich oft Kommentare und viele Leerzeichen sowie Zeilenumbrüche, die der Benutzer nicht braucht.

Optimierung: Ich empfehle: Speichern Sie eine lesbare und eine komprimierte Version ab. Arbeiten Sie immer an der lesbaren Version und erzeugen Sie daraus wieder eine komprimierte Datei. Laden Sie schließlich nur die komprimierte Datei auf den Webserver. Für diese Aufgabe gibt es die nützlichen Tools csscompressor.com und javascriptcompressor.com. Der Name sollte die Funktionalität bereits erklären 🙂

 

Fazit

Die Pagespeed Optimierung kann für Websites, die sich bisher nicht damit beschäftigt haben, relativ einfach mit üblichen Werkzeugen durchgeführt werden. Im Anbetracht des Aufwands lohnt sich die Optimierung defitnitiv. Wer die Seitenladezeit seiner Website testen möchte, kann das über Pagespeed Insight von Google tun. Auf CoderDesigner gibt es ebenfalls einen interessanten Artikel über Google Pagespeed.

Quellen:

http://www.torbenleuschner.de/blog/730/pagespeed-so-machst-du-deine-website-schneller/
http://unbounce.com/conversion-rate-optimization/a-fast-web-site-increases-conversions/
http://javascriptcompressor.com/
http://csscompressor.com/

Bild: Bernd Kasper  / pixelio.de

Website Pagespeed verbessern – Schnellere Ladezeiten durch Conditional Loading mit Media Queries

Responsive WebdesignSeitenladezeiten sind ein durchaus entscheidender Faktor in puncto Usability. Der vor allem durch Smartphones hervorgerufene Unterschiede zwischen Displaygrößen stellen Webentwickler und Webdesigner vor neue Aufgaben. Aus einer statista.de Statistik geht hervor, dass bereits 2013 rund 95% der Internetnutzer mit einer Bandbreite von 2 MBit / s oder mehr im Internet surften. Von diesen Werten können Smartphone Nutzer beim mobilen Internet ohne einen LTE Tarif nur träumen.

Was ist Conditional Loading?

Conditional Loading – übersetzt „bedingtes Laden“ – ist der Mechanismus, Website Inhalte je nach Gerät in optimierter Form darzustellen. In der Praxis kann dies beispielsweise bedeuten, dass alle Geräte, deren Bildschirmbreite 500 oder weniger Pixel beträgt, ein 500 Pixel breites Hintergrundbild erhalten. Geräte, deren Breite 500 Pixel überschreitet, erhalten ein größeres Bild (z.B. mit 700 Pixel Breite). Es gibt verschiedene Arten des Conditional Loadings.

Alle guten Dinge sind Drei

Man kann über eine Klasse wie MobileDetect überprüfen, ob der Besucher eine Website von einem Smartphone, Tablet oder Desktop PC aufruft. Die Methode finde ich allerdings nicht optimal, da Design & Programmlogik vermischt werden müssten. Man müsste sich im Script um die Darstellung kümmern. Javascript lässt sich ebenfalls für Conditional Loading verwenden, indem man die Breite und Höhe der Geräte über die Standard Javascript Funktionen abfragt. Mein Favorit bleibt jedoch das Conditional Loading über CSS. Seit CSS 3.0 ist es möglich, mithilfe einiger Längenattribute eigene Stylesheets für bestimmte Gerätegrößen zu definieren.

 

Media Queries – Das individuelle Stylesheet

Media Queries sind relativ simpel. Sie werden innerhalb eines Stylesheets definiert und überschreiben die CSS-Eigenschaften speziell für ein gewisses Gerätemedium oder eine Gerätegröße.

Die Queries funktionieren wie eine if-Abfrage und sind wie folgt aufgebaut: media <Medientyp> and (weitere Attribute, z.B. Gerätebreite)

Eine Beispiel Query, die alle Geräte mit einer Breite von 500 Pixeln auswählt, sähe wie folgt aus:

@media all and (min-device-width: 500px) {
spezielle CSS Eigenschaften für Geräte mit einer Breite von <500px
}

Als Medientypen kann man zahlreiche Werte definieren, darunter beispielsweise print zum Druck der Website oder handheld für Geräte die üblicherweise in der Hand gehalten werden. Eine Übersicht über die Medientypen lässt sich dem Dokument von SelfHtml zu Mediaqueries entnehmen. Ich verwende für Responsive Webdesign dennoch meist all als Medientyp, weil die entsprechenden Stylesheets dann auch auf Desktop PCs geladen werden, was ich ebenfalls sinnvoll finde.

Stylesheets auf die Gerätegröße zurechtschneiden (Unterschied zwischen Geräte- und Fensterbreite)

Widmen wir uns nun den Größenangaben der Geräte. Es gibt einen wesentlichen Unterschied bei den Attributen, den man bei der Implementierung beachten sollte: Man kann für die Media Queries die Gerätegröße oder die aktuelle Größe des Browserfensters als Bedingung festsetzen. Der Unterschied ist für Besucher von Desktop PCs besonders entscheidend. Wenn man die Gerätebreite für das nachfolgende Stylesheet auf 500 Pixel festsetzt, dann wird es nur für entsprechend kleine Geräte verwendet. Setzt man jedoch nur die Breite als Bedingung fest, laden auch Browser, deren Browserfenster die Breite unterscheidet, diese Eigenschaften.

Media Query für Gerätebreite

@media all and (max-device-width:749px){
Stylesheet
}

Media Query für Breite des Browserfensters

@media all and (max-width:749px){
Stylesheet
}

 

Bilder von Gerätegröße abhängig herunterladen

Ziel ist es, durch das Conditional Loading Datenmengen einzusparen, die unnötig übertragen werden. In der heutigen Zeit mag dies auf den ersten Augenblick vielleicht “sinnlos” zu wirken, doch für Smartphone Besucher können macht die Datenmenge einen großen Teil der Usability aus. Das W3 Konsortium empfiehlt sogar ein Maximum von 20KB für mobile Websites. Aus diesem Grund laden wir die verkleinerten Bilder für Mobilgeräte über CSS.

Ein Browser arbeitet immer mit dem letzten CSS-Wert, den er versteht. Aus diesem Grund nimmt man beim Stylesheet eine Abstufung vor. Die Bedingungen werden von oben nach unten immer kleiner. Erst definieren wir in unserem Beispiel das Stylesheet für alle Geräte, dann für 750 Pixel Breite und zu guter Letzt für 500 Pixel Breite. Ich empfehle, für statische Bilder am besten 3 oder mehr Versionen anzulegen. Groß, mittel und klein. Hier ein Beispiel zur Implementierung:

 

#teaser{
background-image: url(background-image.jpg);
}
 
@media all and (max-width:750px{
 
#teaser{
background-image: url(background-image-middle.jpg);
}
 
}
 
@media all and (max-width:500px{
 
#teaser{
background-image: url(background-image-small.jpg);
}
 
}

 

Welche Technik nutzt ihr für Responsive Webdesign Bilder? Lasst es mich in den Kommentaren wissen! 🙂

 

 

 

Bild: Jorma Bork  / pixelio.de

Web-Publishing mit Template Engines

Ein Nützliches Werkzeug

oder nur Spielerei?

 

 

Template Engines sind Skripte, die einem Programmierer und Designer bei der Zusammenarbeit sehr helfen können.

Ein Template ist ein Design, was noch nicht inhaltlich gefüllt ist, sondern nur mit Platzhaltern ausgestattet wird. Diese Platzhalter werden dann erst zur Laufzeit, also erst wenn ein Besucher die dynamische Website (das PHP-Dokument) aufruft, mit Leben gefüllt.

 

Es gibt dann einerseits das Template, rein aus HTML, CSS und JavaScript und andererseits die reine Scriptdatei. Die Scriptdatei lädt beispielsweise Inhalte aus einer Datenbank, verarbeitet und filtert sie und gibt sie dann an die Engine weiter, welche den entsprechenden Platzhalter mit dem Inhalt füllt.

 

Was genau ist jetzt dynamisch daran?

Die Struktur bleibt gleich, die Inhalte werden dynamisch per Script ergänzt.

Man kann sich das am besten mit einer Wetteranzeige ihrer Stadt an der rechten Seite der Homepage vorstellen. Dort soll immer ein 50×50 Pixel großes „Feld“ stehen, in dem das Wetter angezeigt wird. Zudem soll dieses Feld einen schönen blauen Rahmen erhalten, im Footer einen Copyrighthinweis anzeigen und als Hintergrund entweder eine Sonne oder eine Wolke angeziegt werden.

Mann kann jetzt das Feld, inklusive Copyrighthinweis und LayOut (blauer Rahmen) in das Template schreiben. Sogar das umschließende <span> Element für die Temperatur kann dort enthalten sein.

Das einzige was das Script am Endergebnis noch ändert ist also die Tempeartur, deren Anzeigeplatzhalter gefüllt und das Hintergrundbild geändert wird.

Man merke sich: Die Struktur bleibt gleich, der Inhalt ist dynamisch!

 

 

Sehen wir uns das ganze doch einfach mal in der Praxis an. Dazu verwenden wir die Template Engine Smarty. Es gibt noch unzählige andere dieser Rendering-Engines, Smarty allerdings ist eine der Beliebtesten, Umfangreichsten und gleichzeitig eine gut dokumentierte Engine.

(Smarty ist selbst auch in PHP geschrieben).

 

 

 

1. Download und Installation

 

Laden sie sich das Smarty Paket unter folgender Adresse herunter:

 

http://www.smarty.net/download

 

Entpacken sie das Archiv anschließend.

 

Darin befindet sich folgender Ordner:

/libs enthält die Rendering-Engine selbst – Dort müssen sie i.d.R. Nichts ändern

 

Nun fügen sie selbst diese beiden leeren Verzeichnisse hinzu:

/templates enthält ihre eigenen Templates – Dort spielt sich der Großteil ihrer Designarbeit ab

/templates_c enthält die kompilierten Templates. Smarty kompiliert Sie in Bytecode, dadurch kann die Engine im Realbetrieb enorm viel Zeit sparen. In diesem Ordner müssen sie ebenfalls nichts ändern. Sobald sie ein Template das erste mal aufrufen, wird es kompiliert und in diesem Ordner gespeichert.

 

2. Programmierung des ersten Scripts und Templates mit Smarty

 

Den größten Teil haben sie schon erledigt. Wenn alle Dateien entpackt, die beiden Template-Verzeichnisse hinzugefügt und auf ihren Webserver oder ihrem virtuellen Server hochgeladen wurden, kann es losgehen!

 

Wie bereits in Schritt 1 erwähnt, müssen sie alle Dateien in /templates speichern.

(templates ist der Standardname für diesen Ordner, in den Einstellungen können sie dies auch ändern. Ich persönlich würde die Konfiguration aber so belassen.)

 

Beachten sie aber, dass die Dateien in diesem Ordner zwangsweise als tpl-Dateien gespeichert werden müssen. Wenn ihr Editor diese Dateiendung nicht kennt, dann schreiben sie einfach selbst ein .tpl hinter den Dateinamen. Achten sie aber darauf, dass das Dokument nicht automatisch als txt gespeichert wird.

 

Legen wir einfach mal los. Wir beginnen mit dem Design! Das können wir genau so tun wie sonst auch, ganz normal mit HTML, CSS und ggf. Javascript.

 

Dazu kommen nun die sogenannten Platzhalter. Man kennzeichnet sie mithilfe der geschweiften Klammern „{“ und „}“. Darin steht der Tag, angeführt von einem Dollar-Zeichen.

 

Datei ‚erster_versuch.tpl‘:

 

<!doctype html>

<head>

<title>Mein erstes Template</title>

</head>

<body>

<h1> Aktuelle Nachrichten </h1>

<article>{$artikel1}</article>

<article>{$artikel2}</article>

<article>{$artikel3}</article>

</body>

 

 

Nun geht es an die PHP-Datei!

Wir haben bis jetzt drei Platzhalter mit den Namen „artikel1“, „artikel2“ und „artikel3“ festgelegt.

Diese möchten wir jetzt mit Beispielinhalten füllen. (In der Praxis ruft man diese Daten meist aus der Datenbank ab, hier nehmen wir zur Demonstration den Standardtext.)

 

Um auf Smarty zugreifen zu können, müssen wir die Klasse zunächst einbinden und dann ein Smarty-Objekt erzeugen.

 

<?php

require_once ‚libs/Smarty.class.php‘;

$smarty=new Smarty();

 

 

Das Smarty Objekt besitzt die Methode assign(‚platzhalter‘,’inhalt‘); Das ist eigentlich ziemlich selbsterklärend. Im ersten Parameter übergeben wir den zuvor definierten Platzhalter und im zweiten Parameter den Inhalt, mit dem der Platzhalter nun gefüllt werden soll.

 

 

$smarty->assign(‚artikel1′,’Lorem ipsum dolor sit amaret.‘);

$smarty->assign(‚artikel2′,’Lorem ipsum dolor sit amaret.‘);

$smarty->assign(‚artikel3′,’Lorem ipsum dolor sit amaret.‘);

 

Damit das Dokument nun gerendert und angezeigt wird, müssen Sie nur noch die Methode display mit dem Dateinamen des Templates aufrufen.

 

$smarty->display(‚erster_versuch.tpl);

 

Wir sind fertig! Das erste Templatebuilding mit Smarty ist vollendet.

 

Fazit

 

 

Vorteile von Template Engines

 

 

Design und Script sind besser getrennt.

Möchte man am Design arbeiten, arbeitet man mit dem Template Engines. Möchte man hingegen am Script arbeiten, arbeitet man an den reinen Scriptdateien. Die Differenzierung kann vielen Designern und Entwicklern enorm viel Zeit und Stress ersparen, wenn die beiden Aufgaben von unterschiedlichen Personen ausgeführt werden. Der Programmierer kann am Script und der Designer gleichzeitig am Layout arbeiten.

 

Multi-Templates für verschiedene Plattformen – Responsive Webdesign

Es ist durch die Trennung vom Script einfacher, plattformspezifische Layouts für z.B. Mobiltelefone zu erstellen. Es müssen nur wenige Zeilen im Script geändert werden.

 

Bessere Inklusionsmöglichkeiten für HTML- bzw. TPL-Dokumente

Mit HTML selbst ist es nicht möglich, andere HTML-Dateien einzubinden. Smarty erledigt das mit einer Zeile. Man könnte das Problem auch mit PHP- Funktionen wie include() oder require() lösen, dann allerdings wären Design & Script nicht mehr getrennt.

 

 

 

 

Nachteile von Template Engines

 

 

Zu großer Aufwand für kleinere Projekte

Für kleine Projekte, insbesondere One-Page-Apps eignen sich die TemplateEngines eher weniger, weil sich der Entwicklungsaufwand und die Umstrukturierung mit Platzhaltern bei wenigen Inhalten nicht lohnt.

 

 

 

Viel Spaß beim Layouten und Programmieren!

Max 🙂