WordPress-Seite lokal auf verschiedenen Geräten testen mit MAMP Pro

In diesem Artikel möchte ich eine Methode vorstellen, wie Ihr eine WordPress-Seite, die auf einem lokalen Rechner liegt, über das WLAN testen könnt. Ich arbeite mit MAMP Pro auf einem Apple-Rechner. 

VORAUSSETZUNGEN

  • Ein Apple-Rechner unter OSX
  • MAMP Pro
  • Ein gemeinsames WLAN, in dem alle Geräte (Server-Rechner, Tablets, Smartphones) angemeldet sind

1. Einen virtuellen Server in MAMP Pro einrichten

MAMP Pro kann man sich als Testversion kostenlos herunterladen.

Um eine lokale WordPress-Seite anzuzeigen muss man zuerst einen virtuellen Host (einen virtuellen Server) einrichten. Wie das geht, wird hier beschrieben. Anschliessend kann man WordPress installieren, der Ablauf ist derselbe wie bei der Installation beim Hoster.

Sobald die WordPress-Seite installiert ist, kann man sie über den Browser aufrufen.
In meinem Beispiel ist es die URL http://testing-stuff.

Bildschirmfoto 2015-12-18 um 11.17.58

Weiterlesen WordPress-Seite lokal auf verschiedenen Geräten testen mit MAMP Pro

Icon Font oder SVG?

Es gibt immer wieder Diskussionen darüber, ob man kleine Symbole auf einer Webseite über einen Icon-Font oder besser über SVG-Grafiken einbinden sollte.

Icon-Fonts werden deshalb mit SVG-Grafiken auf eine Stufe gestellt, weil SVG ein Vektorformat ist und man diese Grafiken über CSS einfärben kann. Das kann man mit „normalen“ Pixelbildern (PNG, JPEG) nicht machen. Hier braucht man für jede Farbe ein eigenes Bild.

Bei der Entscheidung für oder gegen Icons-Fonts gibt einige Vor- und Nachteile abzuwägen. Ich fasse mal die Wichtigsten zusammen:

Nachteile Icon-Fonts

  • Opera Mini kann keine Icon-Fonts darstellen
    Opera Mini hat einen sehr hohen Marktanteil in Regionen, die keine gute Internet-Infrastruktur haben (Asien, Afrika). Seiten laden schneller, weil Opera Mini „überflüssige“ Daten ausblendet. Icon-Fonts, die über @font-face eingebunden sind, findet Opera Mini überflüssig.
  • Manche Browser (Chrome, Firefox) in manchen Versionen haben Rendering-Probleme.
    Das heisst, die Symbole können unscharf aussehen.

Vorteile Icon-Fonts

  • Über Standard-CSS integrierbar, keine Umbauten am HTML-Code notwendig
  • Auch alte Browser (IE 7 und IE 8) können Icon-Fonts darstellen.
  • Es müssen keine Fallback-Lösungen eingebaut werden.
    Für SVG-Icons braucht man Fallback-Lösungen für ältere Browser

Schlussfolgerung

Jedes Projekt ist anders. Aber wenn man sich sicher ist, dass man auf Opera Mini verzichten kann, dann ist die Entscheidung für einen Icon-Font in Ordnung. Das Einbinden von Icon-Fonts geht schnell, man braucht keine Fallback-Lösungen und für das Styling über CSS braucht man kein Expertenwissen.
Der Umgang mit SVG ist deutlich anspruchsvoller und erfordert mehr KnowHow.


Dieser Artikel beschreibt ausführlich die Vor-und Nachteile beider Herangehensweisen:
Ten reasons we switched from an icon font to SVG

 

Anleitung: Test-Seite mit .htaccess schützen

Eine Webseite, die noch im Aufbau ist, soll nicht jeder sehen können. Erst wenn alles fertig ist, soll die Seite für alle Besucher und Suchmaschinen sichtbar werden. Auf diese Weise kann man in Ruhe arbeiten und sich mit Kunden und Kollegen abstimmen.

Eine einfach Möglichkeit, eine Seite mit einem „Sichtschutz“ zu verpassen, ist eine Coming-Soon-Seite davor zu schalten. Dafür gibt es viele gute Plugins bei wordpress.org.
Damit ist die Seite vor unbefugten Blicken abgeschirmt. Wer Zugangsdaten zum WordPress-Backend hat, kann sich anmelden, alle anderen sehen nur die Coming-Soon-Seite.

Nachteil: Der Umweg über das Backend

Die Coming-Soon-Seite hat jedoch einen Nachteil: Nach der Anmeldung landet man im Backend. Für Laien ist das sehr irritierend, sie verstehen nicht, wo sie sich befinden.
Update: Es sei denn, man kombiniert den Link zur Seite mit einem redirect Parameter. (s. Kommentar von Torsten)

Wenn es also nur darum geht, dass eine Seite vor fremden Blicken geschützt wird und die Besucher gleich im Frontend landen sollen (ohne Umweg übers Backend), dann bietet sich ein anderer, klassischer Weg an: Das Abschirmen der Seite per .htaccess.

Weiterlesen Anleitung: Test-Seite mit .htaccess schützen

Anleitung: Google Analytics mit Webseite verbinden

Wir setzen bei unseren eigenen Projekten und bei Kunden das Analyse-Tool Statify ein. Damit kann man nachverfolgen, welche Seiten am häufigsten aufgerufen werden und woher die Besucher kommen. Manchen Kunden ist das zu wenig, sie möchten das volle Programm. Die Wahl fällt dann in der Regel auf Google Analytics. Google Analytics ist kostenlos und es gibt praktisch nichts, was man damit nicht auswerten kann.
[white_box]Für die folgende Anleitung übernehme ich keine Gewähr. Ich habe lediglich versucht, die relevanten Informationen nach bestem Wissen zusammenzutragen. Stand: Juli 2014[/white_box]
Beim Verbinden einer Webseite mit Google Analytics muss man ein paar Dinge beachten, wenn das Ganze datenschutzkonform ablaufen soll.

Schritt für Schritt zu Google Analytics

  1. Google-Konto anlegen
  2. Google-Tracking-Info finden
  3. Tracking-Info einbinden
  4. IP-Adressen anonymisieren
  5. Vertrag mit Google abschliessen
  6. Impressum/Datenschutzerklärung ergänzen
  7. Opt-out-Link einbauen
  8. Alte Daten löschen

1. Ein Google-Konto anlegen

Damit Eure Webseite mit Google Analytics ausgewertet werden kann, braucht Ihr als erstes ein Google-Konto. Wer schon eins hat, kann das natürlich benutzen. Aber ohne Konto geht leider nichts, denn Google-Analytics ist Teil eines Google-Kontos.
Weiterlesen Anleitung: Google Analytics mit Webseite verbinden

Drei nützliche Online-Tools für Webdesigner

JPEG- und PNG-Dateien komprimieren

Die meisten Bildbearbeitungsprogramme geben Bilder in relativ großen Dateigrößen aus, trotz bereits eingebauter Kompression. Eine eine gute Bildkompression – und damit eine möglichst kleine Dateigröße – ist aber entscheidend für die Ladezeiten einer Webseite. Gleichzeitig soll man den Bildern die Kompression möglichst nicht ansehen.

Mit diesen beiden Online-Tools findet man ganz schnell den idealen Kompromiss zwischen guter Darstellung und Dateigröße:

Weiterlesen Drei nützliche Online-Tools für Webdesigner