Bubble.io Tutorial - Mobile Responsive Design in Bubble

In diesem Video erarbeiten wir verschiedene Ansätze, um Mobile Responsive Design in Bubble zu entwickeln. Dieses Video ist als Ergänzung zum Frames Tutorial zu sehen: https://youtu.be/Hj_gSDjX7V0

Video-Transkript:
Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir ein responsive Seiten Layout im Bubble anlegen. Der Canvas im Bubble gibt uns so viel Flexibilität und Freiheiten. Wir können alles darauf zeigen. Im Umkehrschluss ist es aber nicht ganz einfach, dass unser Design sich immer perfekt an den Browser anpasst, dass es responsive ist. Andere Tools machen es viel leichter. Mobile first und responsive zu arbeiten.

Nichtsdestotrotz haben wir aber auch viel weniger Freiheiten und können viel weniger die perfekte App in anderen Tools bauen. Und deswegen freue ich mich heute, euch meinen Best Practice zu zeigen, um responsive Seiten im Bubble anzulegen. Wir nutzen die Responsive Engine, die Bubble uns bereitstellt und lass uns doch anhand von ein paar Beispielen direkt loslegen. Das erste ist, wenn ihr in die Seite geht, dann seht ihr, dass standardmäßig die Seite eine fixe Breite hat. Das würde ich so oft wie möglich es geht vermeiden.

Und es liegt einfach daran, weil fast jeder Mensch, der das Internet nutzt, in einer anderen Bildschirmgröße nutzt. Ich habe immer gedacht, alle nutzen 1440 Pixel oder 1920 Pixel Breite, aber das stimmt einfach nicht, sondern es gibt ganz unterschiedliche Auflösungen. Es werden jeden Tag mehr. Weil das einfach die Schönheit vom Internet ist, dass es ganz unterschiedliche Browser gibt.

Und Responsive Design ist so mächtig, weil es eben eure Seite, eure Seite antwortet, ist responsive auf jedem einzelnen Browser und auf jeden einzelnen Nutzer und ist quasi perfekt dargestellt für jeden einzelnen. Das heißt, nutzt deaktiviert dieses Element so oft es geht und versucht, responsive zu arbeiten. Das zweite ist, wie breit ist die Seite? Wir haben uns nach langem Testen dafür entschieden. 1280 ist eine optimale Pixel Breite und das liegt daran, weil ein iPhone C mit 320 Pixeln eines der meist verbreiteten Telefone in unserem Sprachraum. Mit 1280 Pixeln haben wir genau viermal das iPhone C. Das heißt, es ist viel leichter, alle Abstände rückwärts zu berechnen, weil wir eben immer 23 und dann hochrechnen geteilt durch vier. Die Höhe ist nicht ganz so relevant. Das hängt natürlich von eurem Content ab. Wir machen jetzt mehrere Beispiele, daher einfach mal 4000. Das können wir dann immer anpassen.

So belegen direkt los mit unserem ersten Beispiel, nämlich zwei Spalten. Als erstes mache ich eine Group über die komplette Breite der Seite. Und diese Group bildet quasi den Rahmen, in dem unsere beiden Spalten drin sind. Ich mache das jetzt einmal blau, damit's als Signalfarbe sehr gut sichtbar ist. Weder können wir das natürlich transparent machen. Wenn wir die Seite live stellen, nur um besser zu zeigen, wie Bubble reagiert, hat sich das gerade für die Entwicklung super dargestellt. Wir machen jetzt zwei Spalten und die erste Frage ist Wie breit sind eigentlich unsere Spalten und wie sind die Abstände?

Dafür gehe ich in den Griff. Calculator, der Grid Calculator und der Grid Calculator Punkt DK erlaubt mir ganz genau festzulegen, wie groß meine Breiten sind. Das heißt, wir sagen 1280. Wir wollen an den Seiten jeweils 20 Pixel Abstand haben und zwischen den Spalten 20 Pixel. Und wenn wir jetzt vier Spalten haben, sagte 295 Pixel, und wenn wir zwei Spalten haben, 610, das heißt, wir machen 610. 20 auf der Keys. Sowohl auf der Option set als auch auf der. Und wir wollen sowohl von oben als auch von den Seiten jeweils 20 Pixel. Diese Gruppe machen wir wieder in einer Farbe, um sie zu sehen. Anschließend kopieren wir diese Gruppe.

Und sehen nun auf allen Seiten 20 Pixel. Wir fügen jetzt den Text ein, um dann auch zu sehen, wie der Text spricht, fügt ein Textfeld. Und wir machen 24 als Höhe und ein kleines Pacing von 1,5 und das heißt, wenn wir 24 mal 1,5 haben, dann ist die Höhe in der Box genau 36 Pixel. Auf der Keys gehen wir auf Null auf, die nun auch und eines der wichtigsten Punkte ist, wirklich bis zum Ende den Platz komplett auszunutzen. Also auf die 610 Pixel zu gehen. Wir machen einen zweiten Text. Mit 16 Pixel mal 1,5 und gehen wiederum bis zum Rand. Aber machen hier einen Abstand von 20 Pixeln zwischen den beiden und auch nach unten einen Abstand von 20 Pixel. Hier nutzen wir nun den Ipsum Generator, machen 300 Zeichen und Deploy ipsum d kopieren das Ganze.

Wie kopieren jetzt diese beiden Texte einmal in die andere Spalte und schauen das Ganze im Preview an.. Und ihr seht nun, wir haben einmal die blaue Box, den Rand. Wir haben beides bis zum Rand auch hier. Und wenn wir das Ganze kleiner machen, dann ist auf jeden Fall schon mal unser Browser responsive. Aber wie können wir jetzt mit dem Ganzen auch ein bisschen Optimierte arbeiten? Wir experimentieren jetzt, um zu zeigen, wie diese Responsive Engine funktioniert. Das erste ist Jetzt machen wir, um das zu beschreiben, einmal zwei Spalten ohne.

Das heißt, wir gehen einmal hier rein in die Gruppe und machen API Keys Swiss Vintage Stretch von 100.. Das kann man auch 120 machen, aber um es besser zu verdeutlich, machen wir jeweils 100 und gehen einmal auf Preview, um den Unterschied zu sehen. Wir haben einmal ohne eine maximale Größe und hier einmal mit und wir sehen könnt, gehen jetzt die Ränder und die Abstände werden größer. Wenn wir das Ganze responsive machen. Seht ihr, dass es gleich läuft? Aber eben im Maxwells sich anders verhält? Wenn ihr jetzt den Abstand dazwischen auch bei 20 haben wollt, dann gibt es hierfür einen Trick, nämlich nehmt die äußere Gruppe, macht die auch auf 100. Wir gehen noch mal auf Preview. Und ihr seht, jetzt sind die Abstände gleich und die Marions. Aber die Gruppe außen skaliert nicht mit.

Es gibt noch einen anderen Weg, sich das im Browser anzuschauen, wenn Ihr Rechtsklick macht und auf untersuchen und hier oben auf die Device Toggle war, dann könnt ihr euch die Seite responsive für ganz unterschiedliche Seiten anschauen. Zum 19 20 sieht so aus oder zwei tausend vier hundert. 1200 800. Und es sieht immer, wie die Seite reagiert. Eine Sache, die spannend ist, ist zum Beispiel, wenn wir auf iPhone Se gehen. Wenn wir jetzt möchten, dass auch bei kleinen Bildschirmgröße wir hier aber nur eine Spalte haben, dann geht's los. Bubble Sehr viele Möglichkeiten.

Das einfachste ist, wir gehen in Responsive Editor und hier können wir verschiedene Größen vor wählen, haben aber auch die Möglichkeit immer durch zu laufen. Und wir sehen aktuell das Bubble um. Bricht bei ca. 300 Pixel. Das liegt daran, weil wir einerseits die Abstände haben, jeweils 20 Pixel, also 40 und in der Gruppe einem Minus von 122 Pixeln haben. Das heißt 122. Wir haben ja zwei Gruppen, die jeweils 122 sind, das heißt 244 und dann 60 Pixel. Warum der eine Abstand hier, der zweite Abstand in der Mitte? Ich mache es ein bisschen größer. Das bedeutet, wir haben 20 2020, also 60 Pixel und dann zweimal 122. Das heißt, 244 plus 60 sind 304. Das heißt genau bei 304 Pixeln 305 passt.

Und genau bei 304 bricht uns das Ganze. Jetzt sagen wir aber, wir möchten das größer haben. Das heißt, wir legen die Minute zum Beispiel auf 30 Prozent. Dann haben wir 183. Natürlich müssen wir auch hier 30 Prozent machen, sonst ist nicht symmetrisch. Das heißt zweimal 183. Und sehen jetzt okay. Wann genau bricht das Ganze? 20, 20, 20, also 60 brauchen Platz plus zweimal 183 sind genau 426 und jetzt können wir eben genau festlegen, wann wollt ihr das Ganze brechen, auch wenn ihr sagt beim iPhone SE also 320 Pixel soll es brechen. Aber vielleicht wollen ja eben auch für größere Telefone wie das iPhone X oder andere optimieren. Und das kann man jetzt eben optimieren.

Das heißt, wir gehen zum Beispiel in Preview. Und nochmal auf Rechtsklick untersuchen und sagen Wir wollen auf jeden Fall auch beim iPhone 10, also 375. Wollen wir eine Spalte haben? So wie hier steht auch zum Beispiel das Pixel 2 Pixel hat 410 Pixel. Auch hierfür passt es. Das heißt, wir sollten ungefähr ich sag mal bis 500 Pixel sollte es eine Spalte sein. Was jetzt aber seht, ist, dass wir tatsächlich unsere komplette Seite optimiert haben.

Und hier ist auch das Schöne am Responsive Editor Ihr könnt entscheiden, wie das Ganze aussehen soll. Also wie soll es aussehen bei 300 Pixeln, bei 400 Pixeln, bei 800 Pixeln, bei 12 80? Aber dann eben auch, wenn ihr sagt, ich möchte eine maximale Breite haben von meinen Elementen. Seht ihr, wie man hier das Ganze optimieren kann, wie auf 1920? Nächsten Schritt zeige ich euch jetzt, wie man das Ganze mit drei Spalten macht und drei Spalten und vier Spalten, um einfach auch zu sehen, wie man hier arbeiten kann. Mit verschiedenen Wegen.

Um drei Spalten ohne Max Quickbook. Der erste Schritt ist Wir stellen eine Gruppe wieder über die ganze Breite. Und geben diese eine Farbe. Der zweite Schritt ist Wir geben jetzt drei Klums ein in den Grid Calculator und 10 ist es 400 als Größe. Das heißt, ihr stellt eine Gruppe. 400 auf allen Seiten 20 Pixel Abstand. Ihr kopiert diese Gruppe zweimal. Wir kopiert diese Texte Elemente. Machen beide genau 400 Pixel. Und haben nach unten wiederum 20 Pixel Abstand. Hier noch mal die beiden Text Elemente. Und gehen einfach mal auf Preview und das sieht schon mal gar nicht schlecht aus, wenn untersuchen gehen.

Und sagen Wir machen das ganze 12 80. Wir machen das Ganze für ein iPhone. Keys Ach was für ein iPhone 10! Sieht es ganz gut aus. Wir gehen in den responsive Editor und schauen uns an, was passiert. Die Spalten werden kleiner. Und wir haben hier einen Sprung von drei auf zwei bei 764 63. Springen wir und wir sehen dann die dritte Spalte nimmt dann die komplette Größe ein und da ist schon das erste Thema. Wann genau sollte man springen und wie geht man mit 3 Jahren um? Wenn wir eine Maxwells machen von 100 prozent.

Das heißt, wir kopieren das ganze einmal. Und und gehen jetzt rein und machen einmal 100 prozent bei allen mit der Marke Swiss und vor allem in den einzelnen Gruppen ist das jetzt entscheidend für den für den nächsten Test.

Wenn wir nämlich jetzt eine responsive Editor gehen, dann haben wir einmal ohne Macris drei Spalten und wir sehen, wie diese dritte auf 100 prozent bzw. sogar größer wird wie 100 prozent hier. Eine Größe von 717 statt 400 ist weitaus größer, wohingegen hier sehen wir 345 Pixel, also 86 prozent der Element Größe von 400. Und hier haben wir 400 Pixel. Aber und jetzt kommt genau der Punkt, den er eben sieht. Diese drei Spalten sind immer schwierig, vor allem auf sind vor allem immer schwierig auf Screen, die so mittelmäßig groß sind. Da haben sich drei Spalten einfach nicht wirklich etabliert und aus dem Grund, weil eben diese dritte Spalte dann immer verschiebt. Daher haben wir ihn in unseren Produkten versuchen wir immer geteilt durch zwei zu haben.

Das heißt, und das ist auch unser letztes Beispiel entweder vier Spalten oder zwei Spalten. Und wir machen jetzt noch mal eine mit vier Spalten. Wir stellen noch mal eine Gruppe. Das kennen wir bereits. 1280 die volle Breite, nehmen eine Farbe wieder, um das Ganze zu signalisieren und wollen vier Spalten. Das heißt, wir gehen in den Calculator und sehen 295 Pixel stellen eine Gruppe. Und machen diese weiß, kopieren das ganze noch mal! 20 Pixel. Und nehmen wiederum den Text. 295 Pixel Wir nehmen die komplette Breite. Und sehen uns das jetzt einmal an. 1920 sieht alles super aus.

Vielleicht einmal noch eine Sache, um das Ganze übersichtlicher zu machen Es gibt im Textfeld die Möglichkeit zu sagen Cut off content, der Element des No Code Talent. Das machen wir jetzt hier mal wie sieht sofort den Unterschied. Nämlich der Text wird reduziert und damit haben wir die Möglichkeit, einfach weniger Text zu haben, um diese um alles auch besser zu sehen, quasi weniger Zeichen, wenn wir auf iPhone 10 gehen. Seht ihr, dass wir alle vier Spalten untereinander haben? Aber es gibt hierbei den Iran ein Problem und das ist nämlich hier. Wenn ihr nämlich jetzt merkt, dass wir genug Platz haben für ihr, dann haben wir das Thema, das trotzdem komischerweise mit drei plus eins haben. Hierfür gibt es einen ersten Trick, nämlich dass hier wiederum zwei Spalten miteinander gruppiert. Das heißt, wir nehmen zwei Spalten Rechtsklick Group Elements in der Group und fügen auch hier eine Hintergrundfarbe hinzu, einfach um den Unterschied zu sehen.

Und natürlich auch auf der anderen Seite. Wenn wir jetzt in Responsive Editor gehen. Seht ihr, wir haben nicht mehr zwei Spalten. Jetzt sehen wir aber, dass quasi der Abstand zwischen den Gruppen nicht mehr vorhanden ist. Dafür gibt es einen weiteren Trick Wir erweitern die Blaue Gruppe, also die Außen Gruppe um 20 Pixel. Danach erweitern wir die rote Gruppe um 20 Pixel. Wir erweitern diese Gruppe und fügen eine neue Gruppe hinzu, die genau 20 Pixel hat.Und die gleiche Breite. Wir geben dieser Gruppe noch mal einen anderen Blauton und haben jetzt folgende Funktion und das ist jetzt der Trick, dies nicht visible um page load. Sondern nur wenn Current Page ist es kleiner gleich.

Und wir machen jetzt einmal. 12 100 Pixel. Einfach um das zu demonstrieren. Dann ist diese sichtbar. Und wenn wir jetzt nämlich in den Responsive Editor gehen, sehen wir folgendes im Vergleich zu hier drüben haben wir jetzt den Abstand, das heißt, wir haben die 63 Pixel und wir haben diese Gruppe. Und diese Gruppe schafft genau hier diesen Abstand zwischen den beiden Punkten. Wir brauchen sie aber nur genau, wenn es um bricht. Das heißt, wir haben hier bei 2008 Pixel das Ganze. Das heißt, wir gehen hier rein und sagen wenn kleiner gleich Tausende von acht. Wir fügen das gleiche Gegenüber.

Und ebenfalls nicht sichtbar. Und wenn wir jetzt eine responsive Editor gehen, sehen wir. Wenn wir jetzt auf Preview gehen, sehen wir eben. Wenn das Ganze kleiner machen. Haben wir jetzt genau diese zweite Linie und den Abstand unter den Boxen? Der letzte Punkt, den ich euch noch zeigen will, ist was passiert mit der Max Quickbook? Also was ist, wenn wir die auf 100 legen, dass kein großer Akt mehr. Aber ich glaube, es ist für die Vollständigkeit wichtig, das einfach zu haben. Und wir legen hier nun 100 prozent fest. 100 prozent und sehen.

Und sehen schließlich hier final, was dann passiert. Narayen Responsive, 1920. Und ihr seht, wir haben hier die vier Spalten nun auf 100 prozent. Wir gesehen haben Bubble und die Responsive Engine ist nicht ganz trivial, aber andererseits versucht, vor allem, wenn ihr euch orientiert an den besten Webseiten der Welt, ob Airbnb oder Facebook ist, macht es euch nicht zu kompliziert.

Was ich gelernt habe ist denkt aber immer an responsive Design und versucht so schnell wie es geht. Also ganz am Anfang schon eure Website zu optimieren auf responsive Design. Und wenn ihr dann einen Fehler findet, sucht sofort danach eine Lösung und entwickeln nicht immer erst eure gesamte Webseite für ein Device und versucht es anschließend anzupassen. Am Ende macht Bubble das Ganze sehr gut und sehr hilfreich und die Responsive Engine ist bereits sehr gut. Deswegen macht es euch nicht zu kompliziert und deswegen ähm deswegen vertraut im Bubble und und arbeitet mit dem Responsive Engine. Es ist nie perfekt, aber es ist ein sehr gutes Ergebnis. Und deswegen wünsche ich euch weiterhin viel Erfolg und auf bald.