Responsive design ist eins der absoluten Lieblings-Buzzwords aller Kunden in den letzten Jahren. Egal watt die Seite macht, wie sie aussieht und welche Struktur, hauptsache das Tier ist responsive.
Einmal kurz zum Wording, damit wir uns da nicht missverstehen:
Responsive bedeutet „reagierend“ und bezieht sich auf eine Technik (HTML5 und CSS3 Media-Queries) die es ermöglicht, dass der Inhalt einer Webseite auf allen Endgeräten einheitlich angezeigt wird. In der Konzeption bedeutet dies, dass zu Beginn gleich der Aufbau für Smartphone und Tablet mitbedacht wird. In der Umsetzung korrespondiert dann die Struktur der Seite mit der Bildschirmauflösung.
Und was habe ich davon? Wenn ich von Anfang an die „Responsiveness“ bedenke, sieht das Tierchen nicht nur auf dem Desktop richtig schickilacki aus, sondern auch auf Tablets und Smartphones.
Vor einigen Tagen hat die Werbeagentur Kolle Rebbe, mit denen ich auch schon feine Projekte machen durfte, einen interessanten internen Aufbau gepostet:
Hier passiert nichts anderes, als dass sie alle gängigen und wichtigen Tablets und Smartphones an einen Desktop-Rechner angeschlossen haben und sobald eine Webseite aufgerufen wird, ist sie automatisch auf allen Devices zu sehen und die Responsiveness oder Not-Responsiveness auf einen Blick erkennbar.
Aber dafür braucht man sich jetzt kein Regal basteln.. es gibt im Web einige Tools, mit denen man problemlos eine Webseite testen kann. Natürlich ist Test Nummer 1 die Ecke des Browsers zu packen und ihn einmal auf iPad- und dann auf iPhone-Größe zu verkleinern und dann sieht man ja schon direkt, ob die Seite reagiert oder nicht. Aber es gibt so viele schöne Seiten, die es direkt für uns demonstrieren. Und zwar diese:
Zack, bumms, einfach: In Matt Kersleys Tool die URL eingeben, die drei Bildschirmgrößen werden geladen und fertig.
Alle vier Devices werden in einem Aufbau direkt dargestellt: schön bei Kundenpräsen und „mal eben so“: am I responsive
Geht es um unterschiedliche Devicemarken (so ähnlich wie bei Kolle Rebbe) ist Browserstack die beste Wahl!
Die wichtigsten Devices sind einzeln anwählbar und können direkt präsentiert oder gescreenshotet werden.
Für die, die es noch etwas genauer wissen möchten: Die nutzen den VIEWPORT RESIZER von Malte Wassermann, einem Entwickler der Agentur Neteye, mit denen ich auch schon frei zusammenarbeiten durfte. Ein echt schönes Bookmarking-Tool!
Dieses zieht ihr einfach in eure Bookmarking-Leiste und wann immer ihr eine Seite checken wollt, klickt ihr auf das Bookmark und die Responsive-Leiste wird automatisch über der Seite geladen. Von hier aus könnt ihr alle möglichen Größen testen, animieren und drucken. Total empfehlenswert!
So und für alle, die es noch friemeliger möchten, die gehen zu Screenqueries:
Hier müsst ihr euch aktuell für die Beta kurz registrieren und dann könnt ihr das Tool nutzen. Ist mir aber schon nen Ticken zu frickelig. Ich arbeite, ehrlich gesagt am liebsten mit Am I responsive und Malte’s Resizer. Geht schnell und funktioniert beides super.
Viel Spaß beim Basteln und Testen!