In Bubble perfekte statische Seiten entwickeln

In diesem Video lernt ihr die wesentlichen Tipps und Tricks, um Seiten mit statischen Inhalten in Bubble.io anzulegen. Statische Seitenn sind relevant für Webseiten mit viel Textinhalten, welche sich nicht durch User Content ändern; Beispiele hierfür sind das Impressum, die Widerufserklärung, die Datenschutzrichtlinien, die Allgemeinen Geschäftsbedingungen in Bubble io.

Statische Seiten sind inbesodere relevant, wenn es um die reine Textdarstellung geht und nicht zwingend um Bilder, Gruppen, Buttons oder Plugins.

In der Vergangenheit habe ich statische Seiten mit vielen einzelnen Textelementen in Bubble programmiert; jedoch hat sich gezeigt, dass insbesondere beim Responsive Layout viele verschiedene Einzelemente zu erheblichen Problemen geführt haben.

Zunächst sehen wir uns das Seitenlayout in https://bubble.io an:

Auf der Webseite https://gs.statcounter.com/screen-resolution-stats seht ihr die häufigsten Bildschirmauflösungen von Internetnutzern in verschiedennen Regionen.

• Mobilgeräte haben vor allem eine Auflösung zwischen 320px und 414px.
• Desktop- und Tabletseiten zwischen 768px und 1280px, wobei viele Leute auch 1920px haben. Wir optimieren unsere Seite daher für eine Auflösung von 320px bis 1280px; und sind aber responsiv für Browser, welche eine größere Auflösung (1440px, 1920px) haben.

Deswegen hat unsere statische Seite eine Breite / width von 1280px in Bubble. Das Textelement hat eine Breite / width von 1000px mit einer minimum width von 35% und einer maximum width von 120%.

Die Inhalte füllen wir mit dem Lorem Ipsum Generator unter https://www.loremipsum.de

Zunächst legen wir im Rich Text Editor im Bubble Text Feld die unterschiedlichen Größen an. Wichtig ist, dass die Schriftgröße 1,2,3,4,5,6,7 immer fix in HTML definiert ist; unabähig von der Textgröße des Textfelds.

Beispielsweise ist Schriftgröße 6 im Rich Text Editor immer 32px, unabhängig davon, ob die Ausgangsgröße des Textfeldes im Style 12px oder 40px ist.

Eine horizontale Linie legen wir über [hr] fest, um Bereiche sichtbar abzugrenzen. HR steht für horizontal rule.

Geordnete und ungeordnete Listen können wir entweder über den Rich Text Editor erstellen (hierbei bitte Formatierung beachten) oder manuell eingeben über [ol]...[/ol] für ordered list und [ul]...[/ul] für unordered list. Der einzelne Punkt in der  Liste wird über [li]...[/li] eingegeben.

Unterschiedliche Schriftarten könnnt ihr über [font=Fontname]...[/font] erstellen. Dies geht auch direkt über den Rich Text Editor. Farben könnnt ihr über den Rich Text Editor erstellen oder über den Code [color=#000000]...[/color]. Schließlich könnnt ihr Links im Rich Text Editor mit der URL: eingeben bzw. den Code [url]...[/url] oder direkt im Textfeld die Box recognize links and emails aktivieren; diese beiden Optionen schließen sich gegenseitig aus.