Flexbox jetzt! IE8 und IE9 und die Bremse im Kopf

Das Web entwickelt sich im Sauseschritt. Heute ist SVG das Grafik-Format der Wahl und die Flexbox-Methode bringt uns endlich flexible CSS-Raster ohne semantische Verrenkungen. Wenn da nicht die alten Browser wären.

So lange wir Code vorhalten müssen, den auch alte Browser lesen können, haben wir ein Problem. Wir müssten eine Menge Sachen doppelt schreiben, eine Version für moderne Browser und eine für die alten Herrschaften.

Das ist natürlich mühsam. Bevor ich mir die doppelte Arbeit mache, bleibe ich doch lieber bei den altbewährten Methoden. Floats und clearfixes können neue und alte Browser lesen. Wegen dem bisschen Semantik lohnt sich der Aufwand nicht.

Ist das nur eine bequeme Ausrede oder ist da was dran?
Weiterlesen Flexbox jetzt! IE8 und IE9 und die Bremse im Kopf

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

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.
view Klick aufs Bild startet die Animation

GIF

Weiterlesen Webdesign: Statisch, adaptive oder responsive?

Responsive Design ist schön, macht aber viel Arbeit

Responsive Webdesign ist heute State of the Art im Webdesign. Alle Kunden wollen eine Webseite, die auch auf mobilen Geräten gut funktioniert. Das stellt uns Designer vor neue Herausforderungen.

Beim Entwerfen des Designs für eine Webseite beginnt man in der Regel mit der Desktopansicht. Ich mache das jedenfalls so, auch wenn der Code später „mobile first“ gebaut wird. Die Desktopansicht ist ein guter Einstieg und man bekommt schnell ein Gefühl für die Gestaltung.

Dann wäre da noch die Frage
„Wie sieht das Design auf einem kleinen Bildschirm aus?“

illu-rwd-2-frei

„Auf dem Tablet wird dann alles irgendwie schmäler.“

Okay. Aber was passiert, wenn die Spalten so schmal werden, dass man den Text nicht mehr lesen kann? Und kann man dieses Bild da noch erkennen, wenn es nur noch 30×50 Pixel groß ist? Und wie soll man diesen winzig kleinen Link mit dem Finger anklicken?

Es hilft nichts. Damit die Seite auch auf kleinen Bildschirmen lesbar und bedienbar muss man verschiedene Szenarien durchspielen.
Weiterlesen Responsive Design ist schön, macht aber viel Arbeit

Bildgrößen im WordPress Theme

 

WP-Machine

Wenn ich mit Kunden an WordPress-Themes arbeite, kommt früher oder später die Frage, in welchen Größen denn die Bilder angeliefert werden sollen. Die Bilder erscheinen im Design in unterschiedlichen Größen und die Kunden möchten wissen, welche das denn sind. 

Die Antwort ist simpel: Ich brauche die Bilder nur in einer – der maximalen – Größe. Den Rest macht WordPress ganz alleine.

Die Größe, die ich brauche, orientiert sich an der maximalen Breite des Designs. Die bestimmt, wie groß ein Bild maximal im Theme werden kann. In der Regel ist das irgendwas zwischen 1200 und 1440 Pixeln (Breite).
Das heißt, wenn alle Bilder in 1440px Breite angeliefert werden, sind wir auf der sicheren Seite.
Weiterlesen Bildgrößen im WordPress Theme

Was ist Responsive Design?

Responsive bedeutet übersetzt etwa „reagierend, reaktionsfähig“. Der Begriff bezieht sich auf das Layout von Webseiten. Normalerweise sieht es immer gleich aus: Schaut man mit einem Smartphone die Seite an, sieht man dieselbe Aufteilung wie auf dem Desktop-Computer. Damit alles auf den kleinen Bildschirm drauf passt, verkleinert das Smartphone einfach alles.

Inhalte lesbar machen

Im Responsive Design wird Layout der Webseite flexibel angelegt. Die Inhalte passen sich automatisch an das Gerät an, mit dem die Seite aufgerufen wird. Alle Texte und Bilder werden so präsentiert, dass sie auf Anhieb gut lesbar sind.
Die Inhalte werden nicht verkleinert dargestellt, sondern der Code erkennt, mit welchem Gerät der Besucher unterwegs ist und liefert eine passende Darstellung aus. Die Webseite ist so mit allen Endgeräten gut lesbar und bedienbar.

Weiterlesen Was ist Responsive Design?

Em und rem – was ist der Unterschied?

Im CSS kann man die Schriftgröße in unterschiedlichen Einheiten angeben. Die bekannteste Größe sind Pixel. Aber daneben gibt es auch noch die Einheiten em und rem. Was hat es damit auf sich?

Pixel sind eine absolute Einheit. Das heißt, eine Überschrift, die die font-size 20px hat, hat immer genau diese Größe, nämlich 20 Pixel. Ganz gleich, was um sie herum passiert.
Wie groß eine Überschrift ist, die in 2.5em angegeben ist, kann man erst sagen, wenn man weiß, in welcher Umgebung sie steht. Denn die Einheit em bezieht sich auf den nächsthöheren Container.

Weiterlesen Em und rem – was ist der Unterschied?