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?