Responsive Kunst

Responsives Webdesign ist mittlerweile ein alter Hut. Überraschend hingegen ist responsive Kunst. Solche ist auf der Webseite essenmitsosse.de zu finden.

Das Bild Zeus

Das Bild Zeus

Auf der Webseite befinden sich sieben Bilder, welche sich responsiv an die Position des Mauszeigers anpassen. Damit stecken in einem Bild viele weitere Bilder, je nachdem welche Größe und welches Seitenverhältnis man wählt.

Immer noch das Bild Zeus

Immer noch das Bild Zeus

Wer das ganze selbst ausprobieren möchte, kann dies unter essenmitsosse.de/pixel/ tun.

Screenfly – Responsive Designs testen

Vor einigen Tagen stellte ich eine Webseite vor, mit welcher man responsive Designs testen kann. Mittlerweile habe ich noch so eine Webseite entdeckt, welche ähnliches anbietet und unter http://quirktools.com/screenfly/ zu finden ist. Mir persönlich gefällt Screenfly dabei um Längen besser was vor allem der intuitiven Bedienoberfläche geschuldet ist mit welcher man schnell die unterschiedlichsten Gerätetypen durchprobieren kann.

Kleines CSS Rätsel unter WordPress

Responsives Design ist schon eine tolle Sache. Je nach den Fähigkeiten des Ausgabegerätes wird die Webseite angepasst. Vor einigen Wochen habe ich mich auch daran gemacht und mein Design um eine reponsive Komponente erweitert. Das ganze sieht auf kleineren Geräten nun so aus:

Dabei wird per CSS geschaut ob eine bestimmte Mindestbreite unterschritten wird:

@media screen and (max-width: 850px)
{
 ...
}

Wenn das der Fall ist werden bestimmte Elemente (wie die Siderbar) ausgeblendet, die Größe der Schriftart verändert, et cetera. Nur gibt es anscheinend ein Problem mit ungeklärter Ursache. Wenn ich auf einem Mobilgerät die Seite “Blog” aufrufe so ergibt sich folgendes Bild:

Er ignoriert anscheinend das angepasste CSS für Bildschirme kleiner 850 Pixel und zeigt stattdessen die “normale” Seite an. Dies passiert auf allen getesteten Geräten und auch nur auf der Blog Seite. Nun zum Rätsel: Woher kommt das? Über Ideen zur Lösung des Problems würde ich mich freuen :)

Weitere Informationen gibt es unter:
http://www.elmastudio.de/webdesign/webseiten-optimierung-fur-mobile-gerate-verschiedene-losungen-im-vergleich/
http://www.elmastudio.de/webdesign/diskussionsanregung-wie-wichtig-ist-die-webseiten-optimierung-fur-mobile-gerate-heute-schon/

Responsives Design testen

Wenn man sich mit responsivem Design beschäftigt und eine Webseite mit diesem umsetzen möchte, so muss man das Design natürlich bei unterschiedlichen Größen anschauen. Da man aber nun nicht alle möglichen Geräte sein eignen nennt ist dies nicht ganz so einfach ;) Hier hilft die Webseite http://responsivepx.com/ auf welcher man eine Zielauflösung angeben kann und in diese die entsprechende Seite laden und anschauen kann.

Weitere Informationen gibt es unter:
http://de.wikipedia.org/wiki/Responsive_Design