Höchste Zeit für HTTPS

Seit Anfang des Jahres haben Website-Betreiber in Deutschland die Pflicht, Daten aus Kontaktformularen verschlüsselt zur übertragen (§ 13 Abs. 7 TMG). Im Klartext heißt das: Wer Daten erhebt und diese ohne SSL überträgt, kann abgemahnt werden.

Was ist HTTPS?

HTTPS (Hypertext Transfer Protocol Secure) sorgt für eine verschlüsselte Verbindung zwischen Website und Besucher. In unserem Fall also zwischen dem Webserver, der die Website bereitstellt, und dem Browser.
Um HTTPS einrichten zu können benötigt man ein Sicherheitszertifikat, SSL-Zertifikat genannt.

Diese Zertifikate werden von einer Zertifizierungsstelle ausgegeben. Dabei gibt es verschiedene „Eskalationsstufen“, also unterschiedlich aufwändige (und teure) Zertifikate:

  • Domain-Validierung
    Für die meisten Websites ist dieses Zertifikat ausreichend, da die Art der Verschlüsselung dieselbe ist wie bei den teureren Zertifikaten.
    Bei diesem Zertifikat wird ausschließlich die Identität des Seitenbetreibers geprüft und mit den Daten der Domainregistrierung abgeglichen. Dadurch steht dieses Zertifikat innerhalb kürzester Zeit bereit.ssl-domain-validierung
  • Organisations-Validierung
    In diesem Fall wird sowohl der Domaininhaber als auch die Organisation dahinter geprüft. Unter anderem geht es darum, ob die Organisation berechtigt ist, die Domain zu führen.
    Die Bereitstellung dauert ein paar Tage, unter anderem deshalb, weil man Belege liefern muss wie z.B. einen Auszug aus dem Handelsregister.
  • Extended Validation SSL
    Das teuerste Zertifikat im Bunde. Es ist aufgrund der hohen Kosten vor allem für Onlineshops oder große Hostinganbieter interessant.
    Um ein solches Zertifikat zu bekommen werden noch weitreichendere Prüfungen vorgenommen. Man erkennt das Zertifikat daran, dass in der Adressleiste nicht nur das grüne Schloss und „https“ zu finden ist sondern der Name des Unternehmens neben dem Schloss ausgeschrieben wird. Klickt man das Schloss an erhält man weitere Informationen:
    ssl-extended-validation

Weiterlesen Höchste Zeit für HTTPS

WordPress-Templates für Übersetzung vorbereiten

Texte in einem WordPress-Theme, die übersetzbar sein sollen, müssen in den Templates gekennzeichnet werden. Dar Code dazu sieht ein wenig ungewöhnlich aus und es gibt viele verschiedene Schreibweisen für diese Funktion. Ich hab eine Weile gebraucht, bis ich mir einen Reim drauf machen konnte.

Der Aufbau eines übersetzbaren Strings ist immer gleich:
__( 'Der zu übersetzende Text', 'text-domain' );

Am Anfang stehen zwei Unterstriche. Die Syntax __() ist ein Kürzel für die translate()-Funktion und setzt das Signal „Achtung, hier gibt’s was zu übersetzen“. Danach kommt der zu übersetzende Textschnipsel, am Ende steht die Textdomain.
An der Stelle, wo die zwei Unterstriche platziert sind, können ganz unterschiedliche Funktionen stehen. Ich möchte vier Varianten vorstellen, die ich im meinem Theme-Alltag am Häufigsten verwende.

Es gibt natürlich noch viel mehr Funktionen. Eine vollständige Übersicht mit ausführlichen Code-Beispielen gibt es im WordPress Theme Handbook.

1. Einfacher Text

esc_html_e('Ich bin ein Text, sonst nix' , 'text-domain');
Damit kennzeichne ich einen einfachen Text.
Im Prinzip würde diese Schreibweise ausreichen:
_e('Ich bin ein Text, sonst nix' , 'text-domain');
Ich bin nicht sicher, wie hoch das Risiko tatsächlich ist, aber theoretisch könnte bei der zweiten Variante ein Übersetzer HTML-Codeschnipsel oder Übleres in die Übersetzung reinschmuggeln. Die Escape-Funktion schmeisst solche Sachen raus.

2. Text innerhalb eines Attributs

Ist ein Text Teil eines Attributs und sitzt z.B. im title-Attribut innerhalb eines Links, dann sieht das Ganze so aus:
esc_attr_e( 'Skip to content', 'text-domain' );
Auch hier ist das Escapen wichtig, damit niemand über die Übersetzung Schadcode einschleusen kann.
Weiterlesen WordPress-Templates für Übersetzung vorbereiten

5 einfache SEO Tipps

Wir bekommen häufig Anfragen von Kunden, die unzufrieden sind, weil ihre Seite unter bestimmten Suchwörtern nicht auftaucht. Was läuft da schief?

1. Kommt das Suchwort auch tatsächlich im Text vor?
Wer unter dem Stichwort „Waschmaschine“ gefunden werden möchte, muss dafür sorgen, dass dieses Wort auf der Webseite auch tatsächlich vorkommt. Oft stellt sich bei näherem Hinsehen heraus, dass da nirgendwo „Waschmaschine“ steht, sondern nur verwandte oder ähnliche Wörter vorkommen wie z.B. „Waschvollautomat“.

2. Vor dem Schreiben überlegen, unter welchen Stichwörtern die Seite gefunden werden soll.
Am besten ist es, Du überlegst Dir, welche Suchwörter zu Deiner Seite passen, bevor die Texte fertig geschrieben sind. Eine gute Idee ist es auch, sich in die Besucher der Webseite hineinzuversetzen. Wonach suchen sie? Häufig sind das komplett andere Begriffe, als die, die einem selbst spontan eingefallen sind.

3.  Suchwort-Kombinationen nutzen
Manche Suchwörter kommen sehr häufig vor und haben einen sehr großen Konkurrenzdruck. Für das Stichwort „T-Shirt“ zum Beispiel ist es fast unmöglich, eine kleine Seite nach vorn zu bringen. Hier hilft es, mehrere Suchwörter zu kombinieren, zum Beispiel: „T-Shirt, Übergrößen, Siebdruck“.

4. Keywords nicht streuen, sondern bündeln
Es bringt wenig, in jedem Text sämtliche Suchwörter zu verteilen. Besser ist es, wenn Du Dir für jeden Artikel zwei bis drei Suchwörter vornimmst. Das kommt auch der Lesbarkeit der Texte zu Gute.

5. Die Suchwörter an den richtigen Stellen platzieren
Ein Suchwort, das in der ersten großen Überschrift vorkommt, hat die besten Chancen von Suchmaschinen gesehen zu werden. Aber auch im Rest des Textes gibt es einige Punkte, an denen Suchwörter gut aufgehoben sind. Und zwar an Stellen, die man gern übersieht: Zwischenüberschriften, Link-Titel, alt-Tags in Bildern, Bildunterschriften. Suchrobots lesen sie alle.

ZUM WEITERLESEN
Keyword-Tools zur Recherche von Suchbegriffen (t3n)

WordPress & Vagrant für visuelle Menschen

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

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

Nachfahre, Kind oder Geschwister? CSS-Selektoren kombinieren

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

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

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!“

Fehler im Projektmanagement vermeiden

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