Cup Of Coffee Please This Is Responsive

Responsive testen

Hier zwei gute Möglichkeiten ein responsives Layout zu testen. Laden Sie zunächst wie gewohnt unsere Vorlage ganz normal herunter, entpacken die zip-Datei und rufen dann die Startdatei index.html in ihrem Browser auf. Bei nachfolgend genannter Möglichkeit [1]) rufen Sie den Browser Firefox [1] auf, bei der zweiten Möglichkeit [2] ist die Browserwahl egal, es funktioniert in jedem Browser, nehmen Sie Ihren Lieblingsbrowser.

[1] Testen mit Firefox-Tools

Und zwar soll mit sogenannten Entwicklertools gearbeitet werden. Das Gute ist, der Browser hat diese gleich mit an Bord, man braucht also nicht auf externe Tools zurückgreifen. Richtig gut gemacht, das Tool. Klicken Sie im Menü des Browsers Firefox den Button Entwicklerwerkzeuge. Wählen Sie dann die Option "Bildschirmgrößen testen". Toll ist bei diesem Testwerkzeug, das sich die jeweilige Auflösung leicht per Klick (Button mit kleinem Pfeil) drehen läßt. So hat man einen guten Überblick über den Portrait- und Landscapemodus, um das Verhalten von Smartphone und Tablet zu prüfen (Hoch-und Querformat).

Mittlerweile hat Firefox diesen Tester um noch eine weitere Option erweitert, nämlich die Möglichkeit verschiedene Marken-Geräte zu testen. Das kann aber auch leicht verwirrend sein, da es ja auch etliche Zwischengrößen bei den Geräten gibt und ja auch niemand wohl bei jeder wechselnden Testauflösung alle Geräte durchklicken möchte.

Eine Möglichkeit es übersichtlicher zu gestalten ist, das Sie im Firefox-Tester unter 'Liste anpassen' eigene Geräte-Profile anlegen und zwar Standard-Größen (die ja auch jeweils umschaltbar sind in Hochkant und Quer-Modus) , auf jeden Fall: 320x480, 360x640 und 768x1024. Unter der Rubrik 'Custom' sehen Sie dann Ihre Profile.

[2] Der schnelle Weg

Noch schneller und einfacher, aber eher für einen ersten allgemeinen Überblick gedacht, testen Sie wie folgt: Wir gehen davon aus, daß Sie Ihre größte Bildschirmauflösung auf dem Desktop-PC eingestellt haben.

Minimieren Sie nun das Browser-Fenster in Ihrem Lieblingsbrowser und ziehen Sie dann das Browser-Fenster mit gedrückt gehaltener Maustaste ganz langsam von rechts nach links in der Breite immer schmaler zusammen und dann wieder umgekehrt von links nach rechts wieder ganz auf.

Achten Sie darauf, wann das Layout umbricht, zum Beispiel von zwei-spaltig auf ein-spaltig oder Objekte sich in der Größe verändern.


One Picture

This is important

Ad labore possim antiopam ius, id eam etiam eleifend abhorreant. Scripta invenire vis te, vis ea doctus instructior. Scripta laboramus eum eu, id cum omnium iuvaret pertinax. Pro id homero scaevola. Sed id lucilius voluptaria, duo ut meis euismod feugiat. Vix convenire dissentiet an, ad lorem quando.


So finden Sie uns

Wir haben unseren Standort auf dem Planeten Erde, in Europa, Deutschland, im Bundesland Bremen, Stadtteil Hastedt, Werderstraße Nr. 1 mit der Postleitzahl 28205 Bremen und heißen Sie ganz herzlich bei uns willkommen. Ja genau, wir haben noch viel mehr als die berühmten Bremer Stadtmusikanten zu bieten. Lassen Sie sich auf uns ein und lassen Sie sich überraschen.

Anfahrt 1 - Aus Norden

So erreichen Sie uns: Aus dem Norden kommend, orientieren Sie sich an maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.

Anfahrt 2 - Aus Süden

So erreichen Sie uns: Aus dem Süden kommend, fahren sie duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.