Was bedeutet Responsivität?

Was ist eigentlich eine responsive Website? Anhand dieser Website möchte ich Ihnen zeigen, wie Responsivität entsteht beziehungsweise was es auch konkret bedeuten kann. Eine Website wie hier bei diesem Veranstaltungstechniker Flashlight ist so gestaltet, dass sie in einem Desktop-Modus, also in dieser Größe und Darstellung, ordentlich aussieht, zum Beispiel dieser Slider hier sehr schöne Bilder zeigt mit Verlinkungen et cetera. Aber natürlich auch Unterseiten, die direkt erreichbar sind und die natürlich dann auch geladen werden können, mit entsprechenden Texten und so weiter und so weiter. Doch was passiert, wenn ich diese Website auf einem mobilen Gerät darstelle? Das mobile Gerät ist in der Regel einfach etwas kleiner. Das heißt, wenn wir hier ungefähr in der Größe uns das Design anschauen, dann hätten wir ungefähr die Größe eines Tablets vor uns. Oder wenn wir noch kleiner sind, dann haben wir vielleicht so ein kleines Tablet oder sogar schon ein großes Smartphone, so ein Phablet. Und noch kleiner, dann sind wir schon bei der kleinsten Darstellungsgröße, nämlich Smartphones insgesamt, und das zeigt man hier natürlich auch sehr gut. So sehe ich also, hier klappt zum Beispiel das Menü dann zusammen. Wir haben hier den sogenannten Hamburger, das heißt diese drei Striche, die kennzeichnen einfach das Untermenü, und dieser Hamburger ist eine gewisse Zeit zu sehen. Das heißt, wenn ich hier jeweils in den Tablet-Größen oder Smartphone-Größen reingehe, kann ich alles aufrufen, aber in der Desktopdarstellung ist das komplette Menü wieder zu sehen mit allen Menüpunkten. Wie kann ich jetzt eigentlich testen, dass ich eine responsive oder nicht responsive Website hab? Dafür gibt es eine eigene Website: ami.responsivedesign.is. Das ist im Prinzip die Website, mit der Sie das testen können. Es gibt noch andere Plattformen, wo Sie dies erledigen können, und ich zeige Ihnen mal ein Beispiel: Wir geben einfach mal hier die Website ein. (Tippgeräusche) So, die hat er noch nicht gefunden, weil ich das http:// vergessen habe. So, jetzt wird die Website geladen. Das dauert einen kleinen Moment, weil nämlich hier nicht ein Browser simuliert wird, sondern gleich vier Browser, das heißt auf einem iPhone, auf einem iPad, auf einem iMac und auf einem Macbook Pro zumindest, was die Auflösungen angeht. Das Schöne ist, ich sehe jetzt die Website gleichzeitig mit einem leichten zeitlichen Versatz, sodass ich sofort überprüfen kann, wie die Erscheinung ist, Schriftgrößen et cetera, und man sieht, wir haben hier relativ viel Aufwand betrieben, die Schriftgrößen anzupassen, damit auch wirklich alles lesbar ist und auch alles miteinander verlinkt ist und die Bildgrößen und Ausschnitte am besten auch passen hinterher. Das ist sehr wichtig auch bei so eingebundenen Videos, die hier im Hintergrund sind, dass man die entsprechend gut erkennen kann. Das heißt, eine Möglichkeit, tatsächlich die Website so zu überprüfen. Und das Schöne ist dabei, diese gesamten Geräte, die können Sie natürlich auch noch sich selber zurechtziehen und zurechtschieben. Das heißt, wenn Sie das Macbook mal eher hier vorne haben oder das iPhone davor oder das iPad mehr so an die Seite oder vielleicht ist es ganz unrelevant, dann können Sie sich das so zurechtschieben, wie Sie gerne möchten, und das ist natürlich extrem komfortabel, um zum Beispiel so ein kleines Präsentations-Mockup zu bauen, für den Kunden, mit dem Sie dann die Website hinterher betrachten. Responsive Websites entstehen nicht einfach so von alleine, dazu braucht es ein Framework, zum Beispiel ein Bootstrap-Framework oder ein Content-Management-System. WordPress-Themes beispielsweise sind in der Regel responsiv, sodass also auch die Anpassung von solchen Slidern oder auch Menügrößen, Schriftgrößen und die Anzahl von Spalten natürlich ganz stark angepasst wird an das Design beziehungsweise an die Größe des Monitors. Hier vielleicht noch ein Punkt: Man kann hier tatsächlich auch immer noch navigieren, man sieht es hier ganz, ganz klein, sodass ich tatsächlich hier auf Unterseiten klicken kann und zum Beispiel hier mal in Leistungsbereiche hineinklicke. Dann rufe ich mir mal hier die entsprechenden Unterseiten auf, nur hier mal als Beispiel, damit man sieht, wie das Ganze passiert, wenn ich hier nach unten scrolle. So habe ich hier zum Beispiel jeweils zwei Boxen nebeneinander. Das ist natürlich relevant für die große Monitordarstellung, wo ich viel Platz habe, da kann ich auch drei oder vier Boxen nebeneinander setzen, aber auf so einem kleinen Gerät wie dem iPhone oder auch beim iPad wird das Ganze ein bisschen schwieriger. Jetzt versuche ich das Ganze mal hier so direkt aufzurufen, den Link habe ich mir natürlich vorher gemerkt, und jetzt sehen wir auch, das Menü wird natürlich hier zusammengefahren. Die Boxen, die eigentlich nebeneinander sitzen -- Box eins Ton, Box zwei Licht -- werden hier untereinander dargestellt, also hier Ton und dann erst Licht, also ein ganz einfaches Prinzip. Über diese Zweispaltigkeit können Sie sich das gut merken und wenn Sie noch nicht so viel Erfahrung haben im responsiven Design und Websites konzipieren wollen, mache ich Ihnen schon mal den Vorschlag, beschränken Sie sich einfach auf zwei Spalten nebeneinander im maximal, vielleicht auch drei, sodass Sie dann hinterher diese Boxen auch wieder untereinander sortieren können im responsiven Design. Das ist eine ganz einfache Logik. Die funktioniert in der Regel immer und auch gut und damit kann man auch die eigene Arbeit soweit einschränken, dass man sich nicht für jedes Gerät eine neue Website ausdenken muss. Also, wenn Sie zum Beispiel mit Ihrer Arbeit fertig sind, können Sie das mit dieser Website wunderbar testen. Sie können aber selbstverständlich auch bestehende Websites damit analysieren und zum Beispiel mal den Kunden verblüffen, ob seine Website überhaupt responsiv ist oder nicht, und das macht natürlich auch erst mal eine Menge Spaß, weil man dann sieht, dass zum Beispiel alte Websites überhaupt nicht darstellbar sind auf solchen kleinen Geräten oder mobilen Geräten, sodass die entsprechend stark skaliert werden und man hinterher eigentlich gar nichts mehr sehen kann. Also, merken Sie sich, Responsivität ist ein wichtiges Thema beim Webdesign. Ohne responsives Design gibt es heute eigentlich fast gar keine neuen Websites mehr. Beziehen Sie das in Ihr Konzept ein und damit sind Sie auch zukunftssicher für alle weiteren Geräte, die uns in Zukunft noch von den großen Herstellern beglücken werden.