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?

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

Media Queries: device-width & width – wo ist der Unterschied?

Über Media Queries kann man die Breite des Browserfensters (= width) und die des gesamten Bildschirms (= device-width) abfragen. Wobei in der Praxis meist nicht zwischen diesen beiden Werten unterschieden wird, sie werden in einen Topf geworfen.
Dazu trägt man im Viewport-Metatag im head der Seite folgendes ein:

meta name="viewport" content="width=device-with"

Diese Anweisung ist weit verbreitet, auch wir schreiben das so in unsere Themes. Aber genau genommen ist das ein Workaround: Nur wenn width=device-with dasteht, können Android-Geräte die Anweisung device-width überhaupt verstehen. Aber diese Methode hat auch ihre Nachteile. Weiterlesen Media Queries: device-width & width – wo ist der Unterschied?

Responsive Design: CSS für den Internet-Explorer 7 und 8

Zurzeit teste ich ein neues WordPress-Theme mit einem Responsive Design in verschiedenen Browsern. Bei diesem Theme arbeite ich mit HTML5, CSS3 und Media Queries. Moderne Browser können diese Angaben lesen, ältere IE-Versionen aber haben damit Probleme. IE7 und IE8 können weder HTML5-Syntax noch Media Queries interpretieren.

Nun kann man darüber streiten, ob man diese betagten Browser überhaupt noch berücksichtigen muss. Der Anteil des IE7 ist inzwischen verschwindend klein, auch der IE8 ist auf dem Rückzug. Da Windows zusammen mit System-Updates automatisch und ungefragt den Browser aktualisiert, dürfte es nicht mehr viele User geben, die mit dem IE8 oder gar dem IE7 unterwegs sind.

Aber immerhin, es gibt sie. Und je nach Thema und Inhalt der Website kann es wichtig sein, alle mitzunehmen. Auch diejenigen, die mit älteren Rechnern im Web surfen.

Weiterlesen Responsive Design: CSS für den Internet-Explorer 7 und 8