UPFRONT TEIL 6: Erstellung von Responsiven Webseiten

<h2>Responsive Webdesign ist laut Wikipedia ein Ansatz zur Gestaltung von Webseiten, der darauf abzielt, eine optimale Darstellung – einfaches Lesen und Navigieren bei minimalem Bedarf an Größenanpassung, Verschieben und Scrollen – auf einer Vielzahl von Geräten zu gewährleisten, von Desktop-Computern bis hin zu Mobiltelefonen.</h2> Ebenso zielt der Responsive-Modus in Upfront darauf ab, sowohl den Besuchern der Webseite als auch – und das ist noch wichtiger – denjenigen, die mühelos eine auf allen Geräten fantastisch aussehende responsive Webseite erstellen möchten, ein nahtloses Erlebnis zu bieten. Im heutigen Beitrag passen wir das Layout unserer Webseite für Mobilgeräte an. Zudem erläutere ich die Überlegungen, die der Gestaltung des Responsive-Modus in UpFront zugrunde liegen. Dies ist der sechste Beitrag unserer Reihe zur Einführung in die Nutzung von UpFront. Wir passen ein bestehendes UpFront-Theme – in diesem Fall „Spirit“ – an und verwandeln es in eine völlig neue Webseite, inklusive eigenem Branding, Bildern, individuellen Schriftarten und responsivem Layout. [video width="736" height="184" mp4="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/hiding-element.mp4"][/video] <strong>Im Verlauf dieser Serie zeigen wir Dir anhand zahlreicher Beispiele, wie Du UpFront nutzt:</strong> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-part-1-die-basics-themefarben-und-schriftarten/">Teil 1: Die Grundlagen, Themenfarben und Typografie</a> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-2-strukturierung-deiner-webseite-mit-bereichen/">Teil 2: Strukturieren Deiner Webseite mit Regionen</a> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-3-layout-deiner-webseite-mit-elementen/">Teil 3: Gestalte Deine Webseite mit Elementen</a> <a href="https://psource.eimen.net/wiki/upfront-teil-4-elemente-mit-individuellem-code-anpassen/">Teil 4: Elemente und benutzerdefinierten Code optimieren</a> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-5-plugins-hinzufuegen-und-powerform-formulare-stylen/">Teil 5: Plugins hinzufügen und Powerform-Formulare gestalten</a> <strong><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-6-erstellung-von-responsiven-webseiten/">Teil 6: Responsive Webseiten erstellen</a></strong> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-7-arbeiten-mit-seiten-und-beitraegen/">Teil 7: Arbeiten mit Seiten und Beiträgen</a> Wir nehmen das „Spirit“-Theme, überarbeiten dessen Bereiche und Inhalte grundlegend und wandeln es in ein eigenständiges Produkt-Theme um – inklusive individuellem Branding, Farben, Buttons, Bildern, Typografie, Newsletter-Anmeldeformular und weiteren Elementen. Im bisherigen Verlauf dieser Serie haben wir die Theme-Farben angepasst, eigene Schriftarten eingebunden, Bereiche entfernt, das Header-Bild aktualisiert, einen Videobereich in voller Breite hinzugefügt sowie mithilfe von Gravity Forms ein Newsletter-Anmeldeformular erstellt und gestaltet. Hier ist ein Überblick über die bisherigen Fortschritte: [video width="736" height="276" mp4="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/finished-homepage.mp4"][/video] <h2>Gestaltung einer responsiven Website</h2> Bevor wir uns an die Anpassung des Responsive-Layouts für unsere Webseite machen, sollten wir kurz innehalten und überlegen, wie die Seite auf verschiedenen Geräten aussehen soll. Brauchen wir alle Bereiche? Und was ist mit den einzelnen Elementen – benötigen wir auch diese alle? Soll die Webseite auf Mobilgeräten und Desktops identisch aussehen? Wie sieht es mit Tablets aus? Muss der Videobereich auch auf Mobiltelefonen angezeigt werden? Das sind wichtige Überlegungen, denn die Darstellung einer Webseite auf einem Desktop-Computer lässt sich meist nicht ohne Weiteres auf den kleinen Bildschirm eines Mobilgeräts übertragen. Es ist sinnvoll, auf nicht benötigte Bereiche und Elemente zu verzichten, um sicherzustellen, dass die Inhalte auf kleineren Geräten schnell geladen werden. <h2>Verwendung des Responsive-Modus von Upfront</h2> Um in Upfront in den Responsive-Modus zu wechseln, genügt ein Klick auf die entsprechende Schaltfläche in der Seitenleiste. Es stehen vier Gerätetypen zur Verfügung, für die du das Layout anpassen kannst: <strong>Mobil (315 px), Tablet (570 px), großes Tablet (810 px)</strong> und <strong>Standard (1080 px)</strong>. [video width="736" height="338" mp4="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/responsive-breakpoints.mp4"][/video] Du musst das Layout nicht für alle diese Geräte anpassen; über das Dropdown-Menü „Breakpoints aktivieren“ kannst du gezielt auswählen, welche davon du bearbeiten möchtest. Für diesen Artikel werde ich meine Website für Mobilgeräte optimieren und daher nur den Breakpoint „Mobil“ aktivieren. Anschließend muss ich oben auf der Seite die Option für Mobilgeräte auswählen. Nachdem dies erledigt ist, können wir mit der Anpassung des mobilen Layouts beginnen. <h3>Aktualisierung der Typografie</h3> Es ist ratsam, mit der Typografie zu beginnen. Die Typografie-Optionen für Upfront erscheinen automatisch in der Seitenleiste, sobald Du in den Responsive-Modus wechselst, kannst Du die gewünschten Schriftgrößen für die einzelnen Textelemente – wie H1, H2, P usw. – anpassen. Manche Elemente, etwa H1, wirken auf der Desktop-Version der Website vielleicht gut, sind aber auf Mobilgeräten viel zu groß, daher ändere ich sie auf eine kleinere Größe. <h3>Ausblenden, Ändern der Größe und Anordnen von Elementen</h3> Erinnere dich, als ich vorhin sagte, dass Du überlegen solltest, was Du auf Mobilgeräten anzeigen möchtest? Jetzt ist es an der Zeit, alle nicht benötigten Elemente auszublenden. Eine coole Funktion des Responsive-Modus in UpFront ist die Möglichkeit, Elemente und sogar ganze Bereiche auszublenden, die Du nicht anzeigen möchtest. Diese Regionen und Elemente werden nicht gelöscht, sondern angezeigt bzw. ausgeblendet. Um den Ein-/Ausblendmodus umzuschalten, bewege einfach den Mauszeiger über ein Element und klicke auf das blaue Augensymbol, das oben rechts angezeigt wird. Wenn Du etwas ausblendest, werden die anderen Bereiche und Elemente auf Deiner Webseite automatisch neu ausgerichtet, um den leeren Raum zu füllen. <img class="alignnone size-full wp-image-526" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/hide-show-element.jpg" alt="" width="735" height="354"> Im obigen Bild markiert die Ziffer 1 die Position des Symbols zum Ausblenden von Elementen. Um Bereiche aus- oder einzublenden, musst Du auf das Stiftsymbol für Bereiche klicken (ebenfalls oben rechts); daraufhin erscheint dort das Augensymbol. Die Nummer 2 zeigt an, wo ein Element ausgeblendet wurde. Um ein Element auf Deiner Webseite wieder anzuzeigen, klicke einfach auf „Element anzeigen“; es erscheint dann wieder. Beachte, dass Sie im Responsive-Modus zwar Elemente innerhalb eines Bereichs verschieben, diese jedoch nicht von einem Bereich in einen anderen verlagern kannst. Auch das Löschen oder Hinzufügen neuer Elemente ist in diesem Modus nicht möglich. Dafür musst Du den Responsive-Modus verlassen und die Desktop-Version Deiner Webseite bearbeiten. Zudem kannst Du lediglich die Hintergrundfarbe eines Bereichs ändern, aber beispielsweise kein Video oder Bild hinzufügen. Warum gibt es all diese Einschränkungen? Nun, letztlich geht es um gutes Design und ein einheitliches Erscheinungsbild Deiner Webseite. Schließlich ist es sinnvoll, dass die mobile Version Deiner Webseite der Desktop-Version ähnelt, anstatt wie eine völlig andere Webseite zu wirken – mit Elementen an anderen Stellen der Startseite und Bereichen, die unterschiedliche Hintergründe aufweisen. Außerdem solltest Du Elemente neu ausrichten, die nicht korrekt platziert sind, wie etwa Logo im Header, die Navigation oder Bilder. <em><strong>An dieser Stelle mache ich einen kleinen Exkurs, um zu erklären …</strong></em> <h3>Arbeiten mit komplexen Inhalten</h3> Im Responsive-Modus von Upfront werden Inhalte automatisch mit `float:left` ausgerichtet. Inhalte werden nicht – wie etwa bei Page-Buildern wie Wix – mittels `position:absolute` auf der Seite platziert. Wer sich mit CSS auskennt, weiß, worum es hierbei geht. Falls nicht: Im Grunde bedeutet dies, dass man Elemente nicht einfach willkürlich irgendwo auf der Seite platzieren kann. Die Funktionsweise von Upfront ist folgende: Sobald man in den Responsive-Modus wechselt, versucht das System, die Größe und Position der Seitenelemente so anzupassen, dass das Ergebnis – nun ja – ordentlich aussieht. Das bedeutet für dich weniger Aufwand im Responsive-Modus: Du musst lediglich die vorhandenen Elemente optimieren – also etwa Bilder und Texte neu anordnen oder bestimmte Elemente und Inhalte ausblenden. Die CSS-Eigenschaft `float` behandelt Seitenelemente wie Zeilen. Übersteigt die Höhe eines Elements die des vorangehenden Elements, wird es daher automatisch in die nächste Zeile verschoben. [video width="510" height="188" mp4="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/about-floats-new.mp4"][/video] <strong>* Ausrichten von Bildern.</strong> Im GIF auf der linken Seite scheint es zunächst unmöglich, den Button mittig zwischen den Bild- und Textelementen zu platzieren. Dieses Verhalten lässt sich jedoch umgehen, indem man die Elemente zunächst gruppiert. Dies ist ein wichtiger Hinweis für das Layouten von Elementen in Upfront. Warum haben wir das Responsive Design in Upfront so konzipiert? Um eine bessere Nutzererfahrung auf responsiven Geräten zu gewährleisten. Ohne diesen Ansatz würden sich Elemente gegenseitig überlagern und ein chaotisches Durcheinander verursachen – kurz gesagt: Es sähe einfach furchtbar aus. Wir arbeiten derzeit daran, dieses Verhalten zu optimieren; halte also Ausschau nach Verbesserungen in einer künftigen Version von UpFront. <h2>Aktualisiere die Responsive-Fähigkeit auf anderen Seiten Deiner Webseite.</h2> Du kannst das Layout Deiner Inhalte auch auf anderen Seiten außer Deiner Startseite anpassen. Das Dropdown-Menü „Browse Layouts“ in der Seitenleiste listet weitere Seiten Deiner Webseite auf, die Du bearbeiten kannst. Wähle einfach die gewünschte Seite aus und nimm die entsprechenden Änderungen vor. Um zur Bearbeitung Deiner Startseite zurückzukehren, klicke auf das UpFront-Symbol oben links. <h2>Zusammenfassung</h2> In diesem Beitrag haben wir gelernt, wie man mit UpFront responsive Designs erstellt. Konkret haben wir das Layout unserer Webseite so angepasst, dass es sowohl auf Desktop-Computern als auch auf Mobilgeräten hervorragend aussieht. UpFront sorgt für eine nahtlose Nutzererfahrung auf allen Geräten; vor allem aber ermöglicht es, schnell eine responsive Webseite zu erstellen – und das mit nur wenigen Anpassungen an der ursprünglichen Seite. Lies den nächsten Beitrag dieser Reihe: <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-7-arbeiten-mit-seiten-und-beitraegen/"><strong>Teil 7: Arbeiten mit Seiten und Beiträgen</strong></a>