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

Neu in WordPress 4.4 Responsive Images mit srcset und sizes

Meistens lädt der Browser eine deutlich größere Bild-Datei, anschließend wird das Bild auf die passende Größe verkleinert.

Bei kleinen Webseiten mit wenigen Bildern ist das vielleicht kein großes Problem. Aber bei größeren Seiten mit vielen Bildern kommen schnell ordentliche Datenmengen zusammen.

Was WordPress bisher macht

WordPress sorgt schon lange dafür, dass Bilder nicht unnötig groß werden. Aus jedem Bild, das in die Mediathek hochgeladen wird, erzeugt WordPress automatisch drei (in Zukunft vier) verkleinerte Varianten. Die Maße kann man in Einstellungen/Medien vorgeben.

Nach dem Hochladen liegt jedes Bild in vier Größen vor:

  1. Originalgrösse (so wie hochgeladen)
  2. Mittlere Größe
  3. Klein
  4. Thumbnail

Schon heute kann man also bestimmen, in welcher Größe – groß, mittel oder klein – ein Bild in einen Artikel eingebunden werden soll. Wie groß ein Beitragsbild ausgegeben werden soll, kann man im Template festlegen:

<?php the_post_thumbnail( 'medium' ); ?>

Responsive Design ist schön, aber…

Im Desktop-Layout brauche ich andere Bildgrößen als im Smartphone-Layout.
Ein Beispiel: Das Headerbild in der Desktopansicht ist stattliche 1400 Pixel breit. Der Smartphone-Screen ist aber so schmal, dass 1400 Pixel gar nicht draufpassen würden. Hier würde ein Headerbild von 400 Pixeln Breite vollkommen ausreichen.

responsive

Was kann man tun, um dem Browser mitzuteilen, dass er auf mobilen Gräten die 400 Pixel breite Version des Headerbildes laden soll anstatt der riesigen 1400-Pixel-Variante?
Man könnte versuchen, dieses Problem mit Javascript oder CSS zu lösen. Aber das hat einen Haken.
Weiterlesen Neu in WordPress 4.4 Responsive Images mit srcset und sizes

Content-Strategie: Welche Texte kommen auf die Webseite?

Alle warten darauf, dass die neue Webseite endlich online geht. Das Web-Team arbeitet schließlich schon eine ganze Weile daran. Momentan diskutiert das Team über die Frage: Welche Inhalte kommen rein in die Webseite und welche bleiben draussen?

Diese Frage hat es in sich. Denn über nichts kann man sich schöner in die Haare kriegen.
Hier hilft ein Blick auf die drei Leitfragen der Content-Strategie:

  1. Mit wem wollen Sie ins Gespräch kommen?
  2. Welche Botschaft möchten Sie vermitteln, was wollen Sie [als Unternehmen] erreichen?
  3. Mit welchen Fragen kommen die Besucher auf Ihre Seite?

Aus diesen Leitfragen lassen sich objektive Kriterien zur Bewertung der Inhalte ableiten. Jeder Text, jedes Bild, Video usw. kann anhand dieser Kriterien auf seine Verwendbarkeit abgeklopft und eingeordnet werden.

  1. Welche Nutzergruppe spricht Text A an?
  2. Welche Botschaft vermittelt Text B?
  3. Welche Fragen der Besucher beantwortet Text C?

Weiterlesen Content-Strategie: Welche Texte kommen auf die Webseite?

Inhalte in WordPress über Kategorien organisieren

Inzwischen laufen ein Viertel aller Webseiten da draussen unter WordPress. Aber wie tickt WordPress? Wie werden Inhalte in WordPress organisiert?

WordPress funktioniert ein bisschen anders als Vieles, das man so aus dem Alltag kennt. Nehmen wir zum Beispiel ein Word-Dokument. Es besteht in der Regel aus mehreren Seiten, Überschriften gliedern den Text. Wenn das Dokument etwas umfangreicher ist, gibt es noch ein Inhaltsverzeichnis.

Linear ist gleich statisch

Ein Word-Dokument funktioniert nach einem linearen Prinzip: Eins nach dem anderen.

Auch eine Webseite könnte man so aufbauen: Man beschreibt ein paar Seiten und verteilt Überschriften. Unser Inhaltsverzeichnis ist die Navigation.

Der Haken dabei: Es ist nicht sonderlich dynamisch.
Weiterlesen Inhalte in WordPress über Kategorien organisieren

Webdesign: Statisch, adaptive oder responsive?

In diesem Artikel möchte ich erklären, was der Unterschied ist zwischen einer statischen und einer responsiv programmierten Webseite. Ich habe dazu ein paar kleine Animationen gebastelt. (Ich wollte schon immer mal was mit animierten Gifs machen.)

Im Responsive Design wird das Layout der Webseite per CSS so programmiert, dass es sich automatisch allen möglichen Bildschirmgrößen anpasst. Aber was bedeutet das konkret oder besser gesagt:

Wie muss ich mir das vorstellen?

1. Das klassische, statische Layout

Nehmen für den Anfang den Fall einer Webseite, die nicht im Responsive Design programmiert ist. Alle Inhalte haben feste Breiten. Wird der Bildschirm kleiner, bleiben die Elemente unverändert.

Weiterlesen Webdesign: Statisch, adaptive oder responsive?