Wie sieht Ihre Webseite mobile, auf Tablet oder auf Desktop aus?

Hier zwei sehr brauchbare Tools um zu testen wie Ihre Webseite mit verschiedenen Auflösungen aussieht.
So können Sie schnell sehen wo Korrekturbedarf ist und wo Mediaqueries greifen müssen.

1. Viewport Resizer: Zum Beispiel in Chrome als Erweiterung. Hier ein paar Screenshots zur Verdeutlichung.

Responsive Design

Apple IPhone 5 – 320×568

 

Responsive Design

Breiter Bildschirm: 1280 x 800 Pixel

 

Responsive Design

Auflösung: 800×600 Pixel

 

2. ISH

ISH Kommt von BigISH, MediumISH, SmallISH

Hier der Link: http://bradfrost.com/demo/ish/?url=http://www.HIER-IHRE_URL.de

Fügen Sie dazu die eigene URL ein.

Ganz hilfreich ist dabei auch gleich die Umrechung von Pixel in EMs.

Responsive Design

Hier können Sie zwischen SmallISH, MediumISH und LargeISH auswählen.

Wie immer, wollen die Webseiten auch auf echten Geräten getestet werden.
Warum? Z.B. Die horizontalen Scrollbalken, die in den Screenshots zu sehen sind, sind in echten Geräten nicht zu sehen.

Markus Trauernicht