Archiv für das Jahr: 2017

HTML5 Video Player ohne Controls – aber mit eigenem Play-Overlay

HTML5 Video Player mit eigenem Play-Overlay

HTML5 Video Player mit eigenem Play-Overlay - Illustration/Montage: T.Bortels/cpu20.de

Als erstes kann man natürlich fragen, warum sollte man einen eigenen HTML5 Video Player verwenden wollen – und dann auch noch ohne Controls – aber mit eigenem Play-Overlay? Am einfachsten wäre es doch sicherlich, ein Video per Vimeo oder YouTube in eine Webseite einzubinden. Man kopiert einfach den embed-Code und fertig ist die Hütte. Aber wie das aussieht? Naja – meistens eben so, wie sich die Damen und Herren von Vimeo und YouTube vorstellen – und diese Vorstellung kann schon mal von den eigenen Vorstellungen abweichen.

Wenn man auch das Design auf der Webseite gezeigten Videos – also das Design des Video Players kontrollieren möchte ist es in jedem Falle hilfreich zu wissen, wie man einen eigenen HTML5 Video Player baut.

In diesem Beispiel beschränken wir uns dabei allerdings zunächst mal auf das Weglassen der Bedienelemente (Controls – z.B. Play-Button, Ladebalken, Lautstärke, Fullscreen-Button etc.) und wollen stattdessen nur einen Play-Button bzw. von der Funktion her einen Play-Pause-Button als Overlay über das Startbild legen. Und das ist gar nicht mal so schwierig, wie die Einleitung vielleicht vermuten läßt. Los geht’s.

Eigener Play-Pause-Button für HTML5 Video Player

Zunächst bauen wir uns mal den HTML5 Video Player ein – also den Code, der dafür sorgt, dass der HTML5 Video Player angezeigt wird, der vom jeweiligen Browser angeboten wird, wenn er das HTML5 Video Tag interpretiert. Damit haben wir dann bereis einen voll funktionsfähigen Video Player, der per CSS auch ein responsiver Player sein kann. Allerdings werden zunächst entweder gar keine Bedienelemente angezeigt, oder alle – je nachdem, ob das Attribut „controls“ gesetzt ist, oder nicht – und diese Controls sind dann natürlich im Design des jeweiligen Browsers. Hier exemplarisch das HTML5 Video Tag mit kurzer Erklärung:

<video autobuffer controls>
    <source src="/files/video.mp4" type="video/mp4" >
</video>

Das erste Attribut „autobuffer“ sorgt dafür, dass das Video geladen wird, sobald es zu sehen ist – und nicht erst dann, wenn es vollständig geladen ist. Der zweite Parameter „controls“ sorgt dafür, dass die Standard-Bedienelemente für Play, Pause, Zeitleiste etc. angezeigt werden. Wer zudem noch möchte, dass das Video automatisch anfängt zu spielen, kann noch das Attrivut autoplay="autoplay" hinzufügen.

Um nun die Standard-Controls nun gegen einen Play-Pause-Overlay auszutauschen, geht man am besten wie folgt vor: Das HTML5 Video Tag muss zunächst in einen Container umziehen, der dann das Overlay für die Play-Pause-Funktion beinhaltet. Dann verstecken wir die Standard-Video-Controls per JavaScript bzw. jQuery und regeln die Play- und Pause-Funktionen ebenfalls über Javascript. So können auch Nutzer, die kein JavaScript aktivert haben, den Player weiterhin problemlos über die Standard-Controls bedienen. Das klingt jetzt vielleicht erstmal ein bisschen kompliziert, ist aber gar nicht so wild – und sieht der Player so aus, wie er soll. Der Aufwand lohnt sich. Los geht’s:

Hier erstmal das HTML:

<div class="video_wrapper">
<video autobuffer controls>
    <source src="/files/video.mp4" type="video/mp4" >
</video>
<div class="playpause"></div>
</div>

Und hier der dazu passende JavaScript-bzw. jQuery-Code, der die Play-Pause-Funktion regelt und die Standard-Bedienelemente versteckt:

<script>
jQuery('.video').parent().click(function () {
    if(jQuery(this).children(".video").get(0).paused){
        jQuery(this).children(".video").get(0).play();
        jQuery(this).children(".playpause").fadeOut();
    }else{
       jQuery(this).children(".video").get(0).pause();
        jQuery(this).children(".playpause").fadeIn();
    }
});

var vids = jQuery("video"); 
jQuery.each(vids, function(){
       this.controls = false; 
}); 
</script>

Nun fehlt nur noch das CSS, das unser Play-Pause-Bild als Overlay auf den Player zaubert:

.video {
    width: 100%;
    height: auto;
    border: none;
}

.video_wrapper{
    display:table;
    width:auto;
    position:relative;
    width:100%;
    cursor:pointer;
}

.playpause {
    background-image:url(img/play-icon.png);
    background-repeat:no-repeat;
    width:35%;
    height:35%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}

Auf iOS Geräten (iPhone, iPad) wird automatisch ein Play-Overlay angezeigt, das das Design unseres Play-Overlay natürlich stören würde. Zu guter letzt also noch ein CSS-Schnippsel, der verhindert, dass das iOS-Player-Overlay angezeigt wird:

video::-webkit-media-controls-start-playback-button {
  display: none;
}

Das war’s. Viel Spaß damit!

Navigation: Links ändern mit jQuery

WordPress-Navigation: Link ändern mit jQuery

WordPress-Navigation – Foto: T.Bortels/cpu20.de

Ich musste neulich mal nach Möglichkeiten recherieren, wie man mit jQuery einen Link ändern kann – und zwar dynamisch, bzw. responsiv – also je nach Bildschirmgröße. Das ist nicht wirklich das schönste, was man so machen kann – aber es kann an der einen oder anderen Stelle praktisch sein, um einem ganz speziellen Problem zu begegnen, von dem man zunächst nicht wusste, dass man es hat. Die Situation war wie folgt:  einer meiner Kunden hatte schon vor einer Weile in ein sogn. Premium WordPress-Theme investiert.

Später stellte sich heraus, dass das Problem zwar sehr schön aussah, sich aber nicht ganz so suchmaschinenfreunlich verhielt, wie zunächst gehofft. Insbesondere die Navigation bereitete SEO-Probleme. Was war das Problem? Das WordPress Theme hatte nicht nur eine Hauptnavigation, sondern zwei – bzw. wurde eine Navigation zweimal ausgeprägt: einmal für breite Bildschirme (Desktop) und einmal für schmale Bildschirme (Mobil). Der einzige Unterschied bestand in unterschiedlichen CSS Klassen. Soweit so gut. Wozu mussten wir nun die Links mit jQuery ändern?

In der Desktop-Ansicht wurden die hauptnavigationspunkte lediglich ans Anker-Links verwendet, um die untergeordnete zweite Navigationsebene bei Klick auszuklappen. Die einzigen verlinkten Navigationspunkte befanden sich also in der zweiten Ebene – die erste Ebene bestand ausschliesslich aus ‚toten‘ Anker-Links. Warum? Vermutlich wollte der Theme-Autor die Navigation vor allem Mobil-freundlich gestalten. So wurden in der mobilen Darstellung zunächst nur die Links der Hauptebene angezeigt – die zweite Ebene wurde dann bei Klick auf den jeweiligen Hauptpunkt ausgeklappt. Bei Touch-Geräten (Smartphones) gibt es ja keinen Hover-Zustand – daher ist der Klick zum Ausklappen notwendig. Wären nun die Hauptnavigationspunkte mit ‚echten‘ Links verknüpft, hätte der Nutzer keine Chance, jemals die Subnavigation zu sehen. Der Nutzer würde auf die verlinkte Seite weitergeleitet werden, bevor irgendeine Subnavigation angezeigt werden könnte.

Für mich ergaben sich aus diesem Umstand eigentlich zwei verschiedene Probleme: die hauptnavigation war aufAnker-Links reduziert und daher für Suchmaschinen uninteressant. Leider besteht die Hauptnavigation häufig aus wichtigen Keywörtern, die für SEO nun unbrauchbar wären – oder anders ausgedrückt: ungenutztes SEO-Potential. Andererseits haben die Hauptnavigationspunkte keine andere Funktion, als bei Klick die Subnavigation anzuzeigen. Es sind also jedesmal zwei Klicks notwendig – und das ist nicht besonders nutzerfreundlich – die User Experience ist nicht optimal – Bad UX. Oder anders ausgedrückt: warum soll zweimal klicken, wenn 1 Klick eigentlich reichen sollte?

Links dynamisch ändern mithilfe von jQuery

Was wir letztendlich gemacht haben: wir haben die Hauptnavigationspunkte ‚richtig‘ verlinkt – und diese Links dann mithilfe von jQuery für die mobile Darstellung so angepasst, dass dann wieder nur die Subnavigation angezeigt wird.

Auf dem Weg zur Lösung trat dann aber erstmal eine weitere Schwierigkeit auf. Eigentlich würde man Links über die ID oder die CSS-Klasse des Links oder des übergeordneten Elements beeinflussen. Leider waren in diesem Theme keine entsprechendes IDs oder CSS-Klassen zu finden, sodass eine eindeutige Zuordnung erstmal nicht so einfach möglich war. Wir mussten also die Link-Informations des eigentlichen Link-Elements (href)  selbst nutzen, um die Links ausfindig zu machen, die dynamisch geändert werden sollten. Das sieht dann so aus:

jQuery(".sf-mobile-menu a[href='/about-us/']").attr('href', '#');

Leider benötigt man für diesen Workaround eine Zeile Code pro Link. Aber immerhin. Hätte es eindeutige IDs zu jedem Link gegeben, hätte der Code-Schnippsel entsprechend anders – und vor allem kompater ausgesehen:

jQuery('.sf-mobile-menu #content_1 li:first a').attr('href', '#');

Man kann natürlich auch gleich mehrere Links in einem jQuery-Loop bearbeiten. Zum Beispiel so:

$('.content').each( function() {   
    $(this).find('li:first a').attr('href', '#'); 
});

oder so:

$('.content').each( function() {   
    $(this).find('li a').first().attr('href'); 
});

Alternativ könnten wir auch eine WordPress-Funktion nutzen, um durch die Navigation zu loopen und dann den entsprechenden jQuery-Schnippsel einzufügen – der jQuery-Loop ist aber eigentlich schon komfortabel genug.

Responsives jQuery – Links für bestimme Bildschirmgrößen anpassen

Oben haben wir nun verschiedene Optionen, Links dynamisch mithilfe von jQuery anzupassen. Wir wollen diese Links aber nur für bestimmte Bildschirmgrößen anpassen – n unserem speziellen Fall nur für das mobile Layout. Dafür können wir einen jQuery Listener verwenden – ein Code-Snippet, dass sozusagen auf bestimmte CSS-Klassen ‚hört‘ und seinen Code nur dann ausführt, wenn sich diese Klassen ändern.

Im Fourfront’s Blog ist zu dem Thema ein etwas ausführlicherer Artikel zu finden:  „Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width„. Hier beschränken wir uns jetzt mal auf die Umsetzung:

function checkSize(){
    if (jQuery("#az-header.h-classic .az-menu-trigger").css("visibility") == "visible" ){
        /* your code */ 
    }
}

Der Code unter „/* your code */“ iwrd in diesem Falle nur dann ausgeführt, wenn die Klasse „.az-menu-trigger“ im Header-Bereich zu finden ist. Der Listener „checkSize“ wird wiederum so eingebaut, dass er beim Laden der Seite ausgeführt wird.

jQuery(document).ready(function() {

Ich hoffe, ich konnte damit dem einen oder anderen weiterhelfen.

Was ist Dedicated Virtual Server Hosting?

Was ist Dedicated Virtual Server Hosting?

Was ist Dedicated Virtual Server Hosting? – Foto 'New servers' CC BY-SA 2.0 by Dominic Hargreaves

Ich wurde neulich mal gefragt, was Dedicated Virtual Server Hosting denn eiegntlich ist. Meine erste Reaktion: Wow! Dedicated Virtual Server Hosting? Klingt interessant – aber – Moment mal…

Der Begriff Dedicated Virtual Server Hosting klingt wirklich spannend – und vielversprechend – aber nach meinem Empfinden handelt es sich zunächst mal um eine Mischung der aus Dedicated Server Hosting und Virtual Server Hosting. Man kann nicht beides gleichzeitig haben. Oder etwa doch?

Virtual Private Server – was ist Virtual Server Hosting?

Manche Hosting-Anbieter bieten Hosting auf sogenannten Virtual Private Servern an. Was verbirgt sich dahinter? Und wie funktioniert das? Grundsätzlich ist ein Webserver eigentlich erstmal ein Progamm – eine Software. Und diese Software läuft beim Virtual Private Server nicht auf einem Rechner, sondern ggf. auf mehreren Rechnern – auf einem Rechnerverbund, einem Cluster, einer Cloud. Als Kunde kann man dann prinzipiell die im Hosting-Paket angegebenen Arbeitsspeicher (RAM) und Festplattenplatz (Webspace) erwarten. Arbeitsspeicher und Festplattenplatz befindet sich aber nicht auf einem einzelnen, physischen Server, sondern verteilt auf einer ganzen Reihe von Rechnern – auf einem virtuellen Server.

Das muss erstmal nicht negativ sein – letztendlich kann es einem ja fast egal sein, wie und wo eine Webseite nun eigentlich wirklich liegt. Allerdings sagen die Angaben über die Speicherverwaltung leider wenig darüber aus, wie die zur Verfügung stehende Prozessorleistung auf die einzelnen Virtuellen Server verteilt wird. Ein Umstand, der bei manchen rechenintensiven Webseiten unter Umständen einen Nachteil darstellen kann.

Dann gibt es offenbar auch noch Virtual Dedicated Server Hosting – dabei handelt es sich aber letztendlich nur um eine andere Bezeichnung für dasselbe Ding. Der ‚Server‘ liegt auch hier in einer Server-Cloud – man hat also quasi einen Dedicated Server, der aber ein Virtueller Server ist. Amazon Web Services funktioniert zum Beispiel nach diesem Prinzip – und es gibt natürlich etliche weitere.

Was ist Dedicated Server Hosting?

Bei vielen Hosting-Anbietern kann einen kompletten Rechner mieten, auf der dann der eigentlich Web-Server läuft. Dieser Rechner steht dann ausschliesslich diesem einen Kunden und seinen Projekten (und ggf. seinen Kunden und deren Projekten) zur Verfügung. Häufig wird das dann auch als Managed Server Hosting angeboten – das bringt zum Ausdruck, dass man sich nicht um die Administration des Servers kümmern muss.

Einen kompletten Server zu mieten hat natürlich seinen Preis – insbesondere dann, wenn man sich nicht um die Administration kümmern muss. Ein Managed Server hat gegenüber einem Shared Server oder einem Virtual Private Server aber auch eine Reihe von Vorteilen. In dem meisten Fällen dürfte ein Managed Server einfach schneller laufen, als seine virtuellen Kollegen. Hinzu kommt je nach Hosting-Anbieter die Möglichkeit, den eigenen Sever speziell für sich konfigurieren zu lassen. Die verschiedenen optionen variieren natürlich je nach Anbieter: einige bieten einen Shell-Zugang an, bei anderen kann man sich auf dem eigenen Server eine Art virtuelle Festplatte einrichten, die man zum Beispiel vom Büro und von zu hause aus erreichen kann. So lassen sich diverse Sachen mit dem eigenen Server anstellen – von der einfachen Backup-Lösungen bis hin zum eigenen Cloud-Service.

Dedicated vs. Virtual Server Hosting

Dedicated Server Hosting und Virtual Server Hosting sind vermutlich die beiden bekanntesten und beliebtesten Hosting-Typen. Dabei packe ich jetzt mal Shared Server Hosting zusammen mit Virtual Server Hosting in eine Schublade. Aber was ist besser?

Ich halte Virtual Server Hosting grundsätzlich für eine gute Sache. Ein Virtual Private Server ist in dem meisten Fällen vermutlich leistungsfähiger, als ein ‚klassischer‘ Shared Server Account, bei dem viele Einzelaccounts sich einen Server teilen müssen. Ausserdem ist ein Virtual Private Server meistens günstiger, als ein ‚echter‘ Dedicated / Managed Server. Und für die meisten Projekte dürfte ein kleiner virtueller Server vollkommen ausreichend sein.

Grundsätzlich sollte man abwägen, wie und wofür man den Server nutzen möchte. Will man als Webdesigner zum Beispiel selbst seinen Kunden das Hosting anbieten, dann würde ich früher oder später zum Managed Server raten. Für den Anfang ist ein virtueller Server aber natürlich vollkommen ausreichen.

Ich hoffe, dass ich ein wenig Licht ins Dunkel bringen konnte. Das Thema ist ziemlich trocken – aber früher oder später vielleicht doch mal relevant. Mich würden natürlich auch Deine Fragen, Erfahrungen und Empfehlungen zum Thema interessieren – einfach unten einen Kommentar hinterlassen. Danke!

Siehe auch: Dedicated Hosting: gute Gründe für einen Managed Server

Google Bildersuche auf dem iPhone

Google Bildersuche auf dem iPhone

Google Bildersuche auf dem iPhone - Montage: T.Bortels/cpu20.de

Die Google Bildersuche ist eine ziemlich feine Sache. EInfach zu bedienen, und man findet eine ganze Mange Bilder zu so gut wie jedem Thema. Und natürlich funktioniert die Google Bildersuche auch auf dem iPhone. Aber einige Leute haben offenbar Probleme, die Google Bildersuche auf dem iPhone ähnlich effektiv zu benutzen, wie auf einem normalen Computer – wie im Desktop Browser. Dabei sollte das eigentlich relativ einfach sein.

Zunächst einmal muß man den Browser öffnen – auf meinem iPhone ist das der von Apple voreingestellte Browser Safari. Dann gibt man seine Suchanfrage oben in die Adresszeile ein, die dann als Suchmaske funktioniert. Normaler weise sollte die Suchanfrage nun an Google geschickt werden.

Direkt oberhalb der Suchergebnisse sollte nun eine Reihe von Links zu sehen sein: ALLE, MAPS, BILDER und VIDEOS. Verschiebt man diesen Link-Streifen nach links, werden weitere Menupunkte sichtbar: NEWS, SHOPPING, BÜCHER, ggf, auch FLÜGE sowie SUCHOPTIONEN. Und interessiert zunächst aber nur der Punkt BILDER. Ein Klick auf den Menupunkt – und wir kommen zur Google Bildersuche.

Auf der Suchergebnisseite der Bildersuche sind nun weitere Links sichtbar – Filter, mit denen man die Suche weiter verfeinern kann: „neueste“ liefert die neuesten Ergebnisse, GIF filter alle Gif-Bilder und auch Gif-Animationen heraus, Clipart liefert Piktogramme, Grafiken und offensichtlich auch Clipart etc. Man kann auch eine bevorzugte Farbe wählen. Darunter ist eine Reihe populärer Suchabfragen aufgelistet, die mehr oder weniger gut zum Suchbegriff passen – also Suchanfragen von anderen Suchenden, die früher schonmal eine ähnliche Suchanfrage gestellt haben.

Wenn nun alle Einstellungen gemacht und alle Filter gesetzt sind, kann man anfangen, sich die Ergebnisse der Bildersuche anzusehen, Einfach nach unten scrollen… und weiter scrollen… und vielleicht noch ein bisschen weiter scrollen…

Bilder aus der Bildersuche auf dem iPhone speichern

Wenn nun das gesuchte Bild gefunden ist kann man es direkt anklicken und sich zunächst einmal so weitere Details zum Bild ansehen. Man hat ausserdem die Möglichkeit, die Ursprungsdatei aufzurufen und so ggf. eine Hi-Res-Version des Bildes zu finden. Und man kann alle Bilder auch relativ einfach auf dem iPhone speicher, um sie vielleicht später für einen bestimmten Zweck zu nutzen – zum Beispiel kann man so nach und nach die Profilbilder der Kontakte im Adressbuch ergänzen.

Um ein Bild aus der Google Bildersuche auf dem iPhone zu speichern geht man wie folgt vor: Zuerst einmal das Bild in der Ergebnisliste anklicken und somit die Detailansicht öffnen. Rechts unterhalb des Bildes sollten dann drei Punkte zu sehen sein. Ein Klick darauf öffnet ein Menu – ein Klick auf „Originalbild anzeigen“ liefert genau das: das Originalbild. Wenn man dann das Originalbild anklickt und einen Moment angeklickt hält(ca. 1-2 Sekunden) erscheinen zwei weitere Optionen: „Save Image“ und „Copy“. Warum dieser Teil der Benutzerobefläche nicht auf Deutsch verfügbar ist bleibt mir wohl ein Rätsel – aber immerhin kann man nun mit „Save Image“ das Bild speichern.

Bilder aus der Bildersuche auf dem iPhone speichern

Bilder auf dem iPhone speichern – Screenshots / Montage: T.Bortels/cpu20.de

Das Bild sollte nun bei allen anderen Bildern in Fotos zu finden sein. Über „Copy“ kann man ein Bild alternativ auch direkt für eine spätere Verwendung in den Zwischenspeicher laden, um es z.B. per Email oder iMessage zu verschicken.

Rückwärts-Bildersuche auf dem iPhone

Anstelle nach Bildern zu suchen kann amn auch mit Bildern suchen. Die umgekehrte Bildersuche – oder auch Rückwärts-Bildersuche. Soweit ich weiss ist das auf Android Handys inzwischen eine Standard-Funktion, die beim iPhone bzw. auf iOS aber leider so noch nicht unterstützt wird. Die iOS App Search by Image Extension macht aber wohl genau das: Suchanfragen mithilfe eines Bildes. Ich kann das aber bis leider nicht bestätigen, da ich das selber noch nicht getestet habe. Aber es ist sicherlich einen Versuch wert.

Siehe auch:

WordPress Übersetzungen ändern, einzelne Begriffe anpassen – ohne Plugin

WordPress WooCommerce Übersetzung anpassen

WordPress Sprache der Website: Deutsch (Sie) - Foto / Screenshot: T.Bortels/cpu20.de

Manchmal möchte man nur einfach einen Begriff anders übersetzen, als es die Standard-Übersetzung vorsieht. Oder einen vorhandenes Wort ändern, weil das von WordPress voreingestellte Wort einfach nicht zum Inhalt der Webseite passt. Besonders wichtig wird das zum Beispiel, wenn man einen Webshopt mit WooCommerce betreibt und wert darauf legt, dass die Texte zu den angebotenen Produkten passen. Um einzelne Begriffe zu ändern muss man nicht gleich ein Übersetzungs-Plugin installieren – einzelne Begriffe lassen sich häufig mit einem kleinen Code-Schnippsel anpassen.

In meinem konkreten Fall sollte einfach die von der deutschen Version von WooCommerce vorgegebene Formulierung „ähnliche Produkte“ in „ähnliche Objekte“ geändert werden. Das übrige Wording bzw. alle anderen Begriffe der Sprachdatei WooCoomerce Deutsch formal waren erstmal in Ordnung. Über ein Übersetzungs-Plugin hätte das natürlich auch angepasst werden können – wir entschieden uns aber dafür, den Text mithilfe des folgenden Code-Schnippsels zu ändern, der einfach in die functions.php des Child Themes eingefügt werden muss:

function gb_change_cart_string($translated_text, $text, $domain) {
    $translated_text = str_replace(“Ähnliche Produkte”, “Ähnliche Objekte”, $translated_text);
    $translated_text = str_replace(“ähnliche Produkte”, “ähnliche Objekte”, $translated_text); 
    return $translated_text; 
} 

add_filter(‘gettext’, ‘gb_change_cart_string’, 100, 3);

Die Funktion gb_change_cart_string klinkt sich in den Filter gettext ein und ändert die Formulierung “ähnliche Produkte” in “ähnliche Objekte”.

WordPress Übersetzungen ändern, einzelne Bergiffe anpassen – mit Plugin

Wer dann doch etwas mehr, als nur 1-2-3 Formulierungen ändern möchte, ist zum Beispiel mit dem Plugin Loco Translate ganz gut beraten, das man hier über wordpress.org kostenlos herunterladen und installieren kann.

Mit dem Übersetzungs-Plugin Loco Translate lassen sich im Prinzip alle Einträge der po- und mo-Sprachdateien individuell anpassen. Somit kann man auch komplette Übersetzungen für Themes und Plugins erstellen, für die es unter Umständen noch gar keine Übersetzung gibt.

Hier eine kurze Einleitung für die Benutzung des Plugins Loco Translate.

WordPress Webseiten und WooCommerce-Webshops übersetzen mit WPML

Das WordPress-Plugin WPML ist ziemlich offensichtlich der Platzhirsch auf dem Gebiet der Übersetzungstools. Mithilfe einer Reihe von Zusatz-Plugins lassen sich quasi alle Details übersetzen – Themes, Plugins, Strings, URLs, auch komplexe Web-Projekte und ganze Online-Shops auf Basis von WooCommerce sind kein Problem für WPML.

Allerdings hat das Übersetzungs-PlugIn auch seinen Preis: zum einen ist WPML recourcenintensiv. Gerade mehrsprachige Webshops können einen Share-Hosting-Account schnell mal an seine Grenzen bringen – manchmal reicht aber auch schon eine einfache mehrsprachige Webseite, um die gefürchtete „out of memory“ Fehlermeldung zu erzeugen. Am besten, man steigt rechtzeitig auf einen Dedicated Server um.

Ausserdem ist WPML kein kostenloses Plugin. Die günstigste Lizenz Multilingual Blog beginnt bei $29,- pro Jahr – die Lizenz Multilingual CMS ist für $79,- pro Jahr zu haben. Für Webdesigner und Webentwickler ist aber vermutlich die Lizent Multilingual CMS Lifetime am sinnvollsten. Diese kostet zwar satte $195,-  –– aber man kann sie unbegrenzt nutzen. WPML ist also sozusagen ein Standard-Plugin für Profi–Anwender, die für ihre Kunden sowieso einen Dedicated Server mit der entsprechenden Rechenpower bereit halten.

siehe auch:

Was ist Content Marketing? Definition zum selbermachen

Content Marketing Definition selber machen

Content Marketing Definition finden - Foto: T.Bortels/cpu20.de

Ist dieser Artikel eine weitere Content Marketing Definition? Nicht wirklich. Es gibt sicherlich genügend Artikel, die Content Marketing thematisieren – genügend Webseiten, die versuchen, eine Definition für Content Marketing anzubieten. Aber helfen diese vielen verschiedenen Definitionen einem wirklich, zu verstehen, was Content Marketing (CM) nun eigentlich ist? Und vor allem: was CM für das eigene Geschäft, die eigene Webseite, die eigene Marketing Strategie bedeutet? Es kommt schon sehr auf die jeweilige Situation an, was CM bedeuten – und  letztendlich auch leisten kann. Ein Beispiel:

Eine Kundin kam zu mir mit dem Wunsch, die Webseite bzw. die Performance der Webseite zu optimieren. Ihre Webseite war eigentlich soweit in Ordnung – die Gestaltung zeitgemäß, die Struktur übersichtlich, die Besucherzahlen stabil. Sie ist im Coaching-Sektor tätig – ein durchaus ein ‚umkämpfter‘ Markt. Aber sie hat sich mit ihrer Firma über die Jahre in Ihrem Segment etabliert und einen entsprechend stabilen Kundenstamm aufbauen können. Soweit so gut. Die Gewinnung von Neukunden gestaltete sich aber schon immer etwas schwierig.

Im Prinzip kam sie über zwei Wege zu Neukunden: die Mundpropaganda, wenn zufriedene Kunden sie weiterempfahlen – oder über die Webseite. Da aber der Coaching-Bereich wie gesagt ein bisschen schwierig ist musste sie regelmäßig relativ hohe Summen in Werbung investieren, um überhaupt potentielle Neukunden auf ihre Webseite locken zu können.

Eines Tages kamen wir eher durch Zufall auf genau dieses Thema: Neukundengewinnung – und die damit verbundenen Schwierigkeiten. Sie beklagte sich ziemlich direkt darüber, dass sie regelmäßig dreistellige Beträge in Werbung investieren musste, um über Webseite Neukunden akquirieren zu können. Letztendlich lohnte sich die Investition zwar, aber das Prinzip missfiel ihr trotzdem. Wir stellten beide fest, dass wir beide Online-Werbung nicht mögen und dass wir beide vermutlich noch nie absichtlich auf einen Werbebanner geklickt hatten.

Ich kenne diese Kundin gut – und ich kenne mich – und daher weiss ich, dass es nicht wirklich hilft, mit Buzzwörtern um sich zu werfen. Manchmal muss man erst seine eigenen Wünsche und Anfordeungen formulieren und somit seine eigene Definition von etwas finden, das es vielleicht schon als Begriff gibt.

Wir ntierten also zunächst einige Anforderungen. Ganz klar war: es sollte künftig möglich sein Neukunden über die Webseite zu gewinnen, ohne in teure Werbung investieren zu müssen. Dafür sollte die Auffindbarkeit zu relevaten Keywörtern und Themen verbessert werden – Suchmaschinenoptimieren (SEO) war somit der erste etablierte Begriff, den wir festhalten konnten.

Wir hatten schon früher über SEO gesprochen – das Thema war ihr bekannt. Aber mit Blick auf die Webseite – und vor allem die vorhandnen Inhalte konnte ich ihr nicht mit gutem Gewissen versprechen, dass ein bisschen SEO Wunder irken würde. Dafür war die Webseite einfach zu kompakt – die Inhalte sozusagen zu übersichtlich. Es kann nur das gefunden werden, was auch wirklich da ist. Content is King! Und schon waren wir beim eigentlich Thema angekommen: Content Marketing.

Was ist Content Marketing?

Zuerst sollte man sich die Frage stellen: Was ist Content? Was sind meine Inhalte? Wie möchte ich gefunden werden? Welche Inhalte sollen gefunden werden – und was kann überhaupt gefunden werden? Grundsätzlich ist alles das Content, was eben auf einer Internetseite zu finden ist: Blogeinträge, eine „Über uns“ Seite, das Impressum – alles das ist Content. Und der SInn und Zweck, solche Inhalte auf der eigenen Interseite anzubieten ist ja gerade, dass sie gefunden werden. Man möchte ggf. Produkte oder Dienstleistungen präsentieren und etwas über die eigene Firma erzählen. Vielleicht will man diese Inhalte nur so anbieten, vielleicht möchte man aber auch mithilfe der eigenen Webseite Neukunden gewinnen. Letztendlich ist der Zweck fast egal – sobald man eine Webseite online hat, hat man auch Content online.

Der Weg zur individuellen Content Marketing Definition

Marketing ist hingegen die Kunst, Menschen bzw. Kunden auf sich, die Firma, das Produkt, die Dienstleistung etc. aufmerksam zu machen. Vielleicht denken Sie, dass Marketing ’nicht Ihr DIng‘ ist, und dass das bestimmt nur etwas für ‚große Firmen‘ ist. Die Wahrscheinlichkeit ist aber relativ hoch, dass Sie bereits Marketing-Methoden anwenden – auch, wenn SIe sich dessen gar nicht bewusst sind. Haben Sie eine Broschüre oder Visitenkarten? Das sind im Prinzip Marketing-Werkzeuge – denn Sie helfen Ihnen, sich, Ihre Firma oder ein Produkt zu vermarkten. Online Marketing kann im Prinzip ähnlich reduziert verstandenwerden: Marketing im Internet. Haben Sie eine Webseite und/oder verschicken Sie hin und wieder einen Newsletter? Das ist Online Marketing.

Content + Marketing = Content Marketing

Es gibt verschiedene Marketingkanäle. Werbung ist einer. Und Content Marketing ist ein anderer. Man betreibt sozusagen Marketing mithilfe von Content. Dabei kann Content wie bereits weiter oben beschrieben theoretisch ‚alles‘ sein: ein Text, ein Blog-Eintrag, ein Video-Clip, ein Foto. Insofern kann man sagen, dass eigentlich jeder, der sein Geschäft im Internet präsentiert, bereits Content Marketing betreibt. Herzlich wilkommen im Verein.

Wie wird Ihre Internetseite gefunden?

Genau wie in der „Offline Welt“ kann im Internet nur das gefunden werden, was auch wirklich da ist. Und dementsprechend können Webseiten auch nur gefunden werden, wenn sie wenigstens über ein paar Inhalte verfügen. Oder anders ausgedrückt: nur weil eine Webseite existiert wird sie noch lange nicht gefunden. Manche Leute scheinen aber genau das zu hoffen – als ob man einfach eine Imbissbude an einer vielbefahrenen Strasse aufstellt – irgendjemand wird schon anhalten. Online ist aber sozusagen jede Imbissbude der Welt an dieser vielbefahrenen Strasse – man könnte auch sagen, die Strasse existiert nur wegen der vielen Buden. Das Bild führt jetzt aber vielleicht ein bisschen zu weit.

Grundsätzlich gibt es nur zwei Möglichkeiten, online gefunden zu werden: entweder man bezahlt für Werbung, oder die Besucher kommen wegen der Inhalte. Beide Optionen haben ihren Preis. Entweder zahlt man einen gewissen Geldbetrag für Werbung, oder man wendet  Zeit und Mühe auf, um Inhalte zu produzieren. Meistens muss man Zeit und Geld aufwenden, um Besucher auf eine Webseite zu locken.

Fazit: Was kann Content Marketing leisten?

In den vergangenen Monaten ist Content Marketing ein Trendbegriff geworden, dem man sich kaum entziehen kann. Viele Definitionen sind geschrieben, viele Versprechen gemacht worden. Einige von Marketing Experten, andere von SEO Agenturen – aber kann Content Marketing die Hoffnungen erfüllen, die viele an dieses Wundermittel haben? Ja und nein. Verbirgt sich dahinter nun wirlich der Schlüssel zum Erfolg? Es kommt darauf an.

Wie oben schon ausgeführt hängen die Chancen, dass die eigene Webseite gefunden wird, mehr oder weniger direkt mit den Inhalten zusammen, die von Suchmaschienn und somit von potentiellen Besuchern und Kunden gefunden werden können. Und sicherlich kann eine gute, nachhaltige Content Marketing Strategie dazu führen, dass sich die Besucherzahlen langfristig spürbar erhöhen.

Wie eine solche Content Marketing Strategie aussehen kann muss aber letztendlich jeder für sich selbst herausfinden. Texte, Bilder, Videos, Social Media – all das kann dazu beitragen, dass eine Webseite gefunden wird. Eine Erfolgsgarantie gibt es jedoch leider nicht.