Desktop vs. Mobile
📱 vs. 🖥️
Gar nicht mal so leicht so ein Handy Screen zu sehen, oder? Bevor wir damit loslegen, deine App zu bauen, gilt es deshalb noch eine wichtige Frage zu beantworten: Mobile-first oder Desktop-first? Soll meine App nur auf dem Handy nutzbar sein? Oder nur auf dem Desktop-PC? Oder einfach auf beidem?
Mobile-first vs. Desktop-first Apps
Die Herangehensweise an das Bauen sind verschieden. Bei Mobile first muss man sich als User in einem wesentlich kleinerem Bildschirm-Space zurechtfinden können. Deshalb wird das Design in erster Linie für mobile Screens gebaut was natürlich sehr viele Implikationen für die Anordnung von Elementen, Sichtbarkeit von Elementen, Funktionen, Animationen etc. hat. Desktop-first Apps werden für den großen Bildschirm gebaut und haben demnach wesentlich mehr Platz zur Verfügung. Aber sie werden meist auch in einem anderen Kontext genutzt. Und davon ist eben abhängig, was du bauen möchtest.
In diesem Fall hab ich dir die Entscheidung abgenommen, eine Web-App zu bauen. Denn Bubble eignet sich besser für Web- als für mobile Apps. Muss man sich da aber überhaupt festlegen?
Es ist definitiv sinnvoll sich anfangs darüber Gedanken zu machen um das richtige Front-End zu bauen. Doch zum Glück kann man heute in den meisten No-Code Buildern zwischen Mobile und Desktop Ansichten switchen und das zu-sehende Ergebnis für den User daran anpassen. D.h., ich muss keine separaten Apps bauen, sondern muss nur festlegen, was bei welcher Bildschirmgröße wie angeordnet oder zu sehen ist.
Hier ein Beispiel aus Glide - dieselbe App funktioniert gut in beiden Ansichten. Dafür musste das Layout und das Design aber entsprechend angepasst werden. Die Menüleiste ist mobil oben statt links. Die Unterpunkte allerdings unten statt in den linken Menüleiste. Der "Add" Button bedarf keinem Text mehr und auch die Suchleiste ist woanders.
Responsive Design - also die Anpassung einer App oder Website an verschiedene Bildschirmgrößen - ist eine Kunst für sich. Bei Bubble ist das leider auch nicht immer ganz einfach. Wir werden in diesem Kurs auch nicht detailliert darauf eingehen, da wir nur eine Web-App bauen. Wenn du nach diesem Kurs noch tiefer in Bubble einsteigen möchtest, dann lege ich dir unsere Bubble Masterclass ans Herz. Einen Discount Code dafür findest du in der letzten Lektion!
Gar nicht mal so leicht so ein Handy Screen zu sehen, oder? Bevor wir damit loslegen, deine App zu bauen, gilt es deshalb noch eine wichtige Frage zu beantworten: Mobile-first oder Desktop-first? Soll meine App nur auf dem Handy nutzbar sein? Oder nur auf dem Desktop-PC? Oder einfach auf beidem?
Mobile-first vs. Desktop-first Apps
Die Herangehensweise an das Bauen sind verschieden. Bei Mobile first muss man sich als User in einem wesentlich kleinerem Bildschirm-Space zurechtfinden können. Deshalb wird das Design in erster Linie für mobile Screens gebaut was natürlich sehr viele Implikationen für die Anordnung von Elementen, Sichtbarkeit von Elementen, Funktionen, Animationen etc. hat. Desktop-first Apps werden für den großen Bildschirm gebaut und haben demnach wesentlich mehr Platz zur Verfügung. Aber sie werden meist auch in einem anderen Kontext genutzt. Und davon ist eben abhängig, was du bauen möchtest.
In diesem Fall hab ich dir die Entscheidung abgenommen, eine Web-App zu bauen. Denn Bubble eignet sich besser für Web- als für mobile Apps. Muss man sich da aber überhaupt festlegen?
Es ist definitiv sinnvoll sich anfangs darüber Gedanken zu machen um das richtige Front-End zu bauen. Doch zum Glück kann man heute in den meisten No-Code Buildern zwischen Mobile und Desktop Ansichten switchen und das zu-sehende Ergebnis für den User daran anpassen. D.h., ich muss keine separaten Apps bauen, sondern muss nur festlegen, was bei welcher Bildschirmgröße wie angeordnet oder zu sehen ist.
Hier ein Beispiel aus Glide - dieselbe App funktioniert gut in beiden Ansichten. Dafür musste das Layout und das Design aber entsprechend angepasst werden. Die Menüleiste ist mobil oben statt links. Die Unterpunkte allerdings unten statt in den linken Menüleiste. Der "Add" Button bedarf keinem Text mehr und auch die Suchleiste ist woanders.
Responsive Design - also die Anpassung einer App oder Website an verschiedene Bildschirmgrößen - ist eine Kunst für sich. Bei Bubble ist das leider auch nicht immer ganz einfach. Wir werden in diesem Kurs auch nicht detailliert darauf eingehen, da wir nur eine Web-App bauen. Wenn du nach diesem Kurs noch tiefer in Bubble einsteigen möchtest, dann lege ich dir unsere Bubble Masterclass ans Herz. Einen Discount Code dafür findest du in der letzten Lektion!
✅ Schon steht deine erste, eigene Mobile-App! Du kannst den Link jetzt mit Freunden und Kolleg:innen teilen. In der nächsten Lektion sehen wir uns ein paar Glide Case Studies als Inspiration an und lernen zwei andere No-Code-Tools kennen, mit denen du Mobile-Apps bauen kannst.
/ Stand: August 2023. Bitte schreibe mir an adriano@visualmakers.de, wenn du Anmerkungen zu diesem Teil hast.
/ Stand: August 2023. Bitte schreibe mir an adriano@visualmakers.de, wenn du Anmerkungen zu diesem Teil hast.