UpFront 6: Erstellen von Responsiven Webseiten

Responsives Webdesign ist laut Wikipedia ein Ansatz, der darauf abzielt, Webseiten so zu gestalten, dass sie ein optimales Seherlebnis bieten – einfaches Lesen und Navigieren mit einem Minimum an Größenänderung, Schwenken und Scrollen – auf einer Vielzahl von Geräten, von Desktop-Computern bis hin zu Mobiltelefonen.

Ebenso zielt der responsive Modus in UpFront darauf ab, eine nahtlose Erfahrung für Benutzer zu bieten, die eine Webseite anzeigen, aber noch wichtiger für Personen, die eine responsive Webseite mit Leichtigkeit erstellen möchten, die auf jedem Gerät fantastisch aussieht.

Im heutigen Beitrag werden wir das Layout unserer Webseite für mobile Geräte aktualisieren. Ich werde auch einige der Überlegungen erläutern, die dahinter stehen, wie wir den responsiven Modus in UpFront entworfen haben.

Dies ist der sechste Beitrag in unserer Serie, in dem wir die Verwendung von UpFront vorstellen. Wir passen ein bestehendes UpFront-Theme – in diesem Fall Spirit – an und verwandeln es in eine völlig andere Webseite, komplett mit eigenem Branding, Bildern, benutzerdefinierten Schriftarten und responsivem Layout.

Im Laufe dieser Serie werden wir Dir anhand vieler Beispiele zeigen, wie Du UpFront verwenden kannst:

• Teil 1: Die Grundlagen, Themenfarben und Typografie
• Teil 2: Strukturieren Deiner Webseite mit Regionen
• Teil 3: Gestalten der Webseite mit Elementen
• Teil 4: Optimieren von Elementen und benutzerdefiniertem Code
• Teil 5: Hinzufügen von Plugins und Formatieren von Gravity-Formularen
• Teil 6: Erstellen von responsiven Webseiten
• Teil 7: Arbeiten mit Seiten und Beiträgen

Wir nehmen das Spirit-Theme und überarbeiten seine Regionen und Inhalte komplett und verwandeln es in ein Produktthema, komplett mit eigenem Branding, Farben, Schaltflächen, Bildern, Typografie, Newsletter-Anmeldeformular und anderen Elementen.

Bisher haben wir in dieser Serie Themenfarben aktualisiert, benutzerdefinierte Schriftarten hinzugefügt, Bereiche gelöscht, das Kopfzeilenbild aktualisiert, einen Videobereich in voller Breite hinzugefügt und ein Newsletter-Abonnementformular mit Gravity Forms erstellt und gestaltet. Hier ist ein Bildlauf durch unsere bisherigen Fortschritte:

Entwerfen einer responsiven Webseite

Bevor wir uns mit der Aktualisierung des responsiven Layouts unserer Webseite befassen, sollten wir einen Moment innehalten, um darüber nachzudenken, wie die Webseite auf verschiedenen Geräten aussehen soll.

Brauchen wir alle Regionen? Was ist mit den Elementen? Brauchen wir das alles auch? Soll die Webseite auf Mobilgeräten und Desktops gleich aussehen? Was ist mit Tablet-Geräten?

Benötigen wir die Videoregion zur Anzeige auf Mobiltelefonen?

Dies sind alles wichtige Überlegungen, da die Darstellung einer Webseite auf einem Desktop-Computer in den meisten Fällen nicht automatisch auf den kleinen Bildschirm eines Mobilgeräts übertragen wird. Es ist sinnvoll, Bereiche und Elemente einzuschränken, die Du nicht benötigst, um sicherzustellen, dass Deine Inhalte auf kleineren Geräten schnell geladen werden.

Verwendung des Responsivmodus von UpFront

Der Wechsel in den Responsive Mode in UpFront ist so einfach wie das Klicken auf die Schaltfläche „Responsivmodus“ in der Seitenleiste.

Es gibt drei Geräte, für die Du Dein Layout aktualisieren kannst: mobile (315px), tablet (570px) und default (1080px).

Wenn Du Dein Layout nicht für all diese Geräte aktualisieren möchtest, musst Du dies auch nicht tun. Du kannst diejenigen auswählen, die Du in der Dropdown-Liste Breakpoints aktivieren bevorzugst.

Ich werde meine Webseite für Mobilgeräte für diesen Artikel aktualisieren, daher werde ich nur den Haltepunkt für Mobilgeräte aktivieren. Dazu muss ich die mobile Option oben auf der Seite auswählen

Jetzt, wo das erledigt ist, beginnen wir mit der Aktualisierung des mobilen Layouts.

Aktualisierung der Typografie

Es ist eine gute Idee, mit Typografie zu beginnen. Die Typografieoptionen für UpFront werden automatisch in der Seitenleiste angezeigt, wenn Du in den Responsive-Modus wechselnst, sodass Du die gewünschten Größen für jedes Deiner Textelemente, H1, H2, P usw., aktualisieren kannst.

Einige Schriftelemente wie H1 sehen auf der Desktop-Version meiner Webseite vielleicht gut aus, aber auf Mobilgeräten ist sie viel zu groß, also werde ich sie in eine kleinere Größe ändern.

Elemente ausblenden, skalieren und anordnen

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 Elemente auszublenden, die Du nicht benötigst.

Eine coole Funktion des responsiven Modus in UpFront ist die Möglichkeit, Elemente und sogar ganze Bereiche auszublenden, die Du nicht anzeigen möchtest. Diese Bereiche und Elemente werden nicht gelöscht, sondern angezeigt, nun ja, ausgeblendet.

Um den Ein-/Ausblenden-Modus 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 Bereich zu füllen.

In der obigen Abbildung zeigt 1 an, wo sich das Ausblenden-Symbol für Elemente befindet. Um Regionen ein-/auszublenden, musst Du auf das Regionsstiftsymbol (ebenfalls oben rechts) klicken und das Augensymbol wird dort angezeigt.

Nummer 2 weist darauf hin, wo ein Element ausgeblendet wurde. Um ein Element auf Deiner Webseite anzuzeigen, klicke einfach auf „Element anzeigen“ und es wird erneut angezeigt.

Es ist gut, dass Du im responsiven Modus Elemente innerhalb einer Region verschieben kannst, aber Du kannst keine Elemente von einer Region in eine andere verschieben. Du kannst auch keine neuen Elemente löschen oder hinzufügen. Dazu musst Du den Responsive-Modus verlassen und die Desktop-Version Deiner Webseite bearbeiten. Außerdem kannst Du nur die Hintergrundfarbe einer Region ändern und beispielsweise kein Video oder Bild hinzufügen.

Warum all die Einschränkungen? Nun, es kommt alles auf gutes Design an und darauf, sicherzustellen, dass Deine Webseite einheitlich aussieht. Schließlich ist es sinnvoll, dass die mobile Version Deiner Webseite der Desktop-Version ähnelt und nicht wie eine völlig andere Webseite mit Elementen in verschiedenen Abschnitten Deiner Homepage und Regionen mit unterschiedlichem Hintergrund aussieht.

Du solltest auch alle Elemente neu anordnen, die nicht richtig ausgerichtet sind, wie Dein Logo in der Kopfzeile, Navigation oder Bilder.

An dieser Stelle mache ich einen Umweg, um das zu erklären …

Arbeiten mit komplexen Inhalten

Inhalte in UpFront werden automatisch im responsiven Modus angezeigt. Inhalte werden Deiner Webseite nicht wie bei einigen anderen Seitenerstellern wie z. B. Wix hinzugefügt. Wenn Du mit CSS vertraut bist, weist Du, wovon ich spreche. Wenn dies nicht der Fall ist, bedeutet dies im Grunde, dass Du Elemente nicht wohl oder übel irgendwo z.B.:  mit float:leftposition:absolute auf Deiner Webseite platzieren kannst.

UpFront funktioniert so: Die Logik ist, dass sobald Sie in den Responsive-Modus wechseln, versucht wird, die Größe und Position der Elemente Ihrer Website so zu ändern, dass sie gut aussehen.

Das bedeutet, dass Sie weniger Arbeit haben, sobald Sie in den Responsive-Modus wechseln. Sie müssen nur das nehmen, was da ist, und es verbessern, d.h. Bilder und Texte neu anordnen, vielleicht Elemente und andere Inhalte ausblenden.

Die Float-Eigenschaft in CSS behandelt Elemente auf der Seite als Zeilen. Das bedeutet, dass, wenn die Höhe des folgenden Elements die des vorangehenden Elements überschreitet, es in die nächste Zeile oder Zeile gezwungen wird.

Bilder ausrichten.

Im GIF links scheint es zunächst unmöglich, den Button mittig zwischen den Bild- und Textelementen zu platzieren. Dieses Verhalten kann jedoch überwunden werden, indem zuerst Elemente auf der linken Seite gruppiert werden.

Dies ist ein wichtiger Tipp, den Du beim Anordnen von Elementen in UpFront beachten solltest.

Warum haben wir in UpFront ein responsives Design erstellt, um auf diese Weise zu funktionieren? Um eine bessere Benutzererfahrung auf responsiven Geräten zu bieten. Wenn wir die Dinge nicht so machen würden, würden Elemente andere Elemente in einem wirren Durcheinander überlagern. Im Grunde würde es wie ein Hundefrühstück aussehen.

Wir arbeiten derzeit daran, dieses Verhalten zu verbessern, also bleibe dran für Verbesserungen in einer zukünftigen Version von UpFront.

Aktualisiere die Responsiveness auf anderen Seiten Deiner Webseite

Es ist auch möglich, das Layout Deiner Inhalte auf anderen Seiten neben Deiner Startseite anzupassen.

Im Dropdown-Feld „Layouts durchsuchen“ in der Seitenleiste sind andere Seiten Deiner Webseite aufgeführt, die Du aktualisieren kannst. Wähle einfach die Seite aus, mit der Du arbeiten möchtest, und nimm die gewünschten Aktualisierungen vor.

Um wieder an Deiner Startseite zu arbeiten, klicke oben links auf das UpFront-Symbol.

Zusammenfassung

In diesem Beitrag haben wir gelernt, wie man responsive Designs in UpFront erstellt. Insbesondere haben wir das Layout für unsere Webseite aktualisiert, damit es sowohl auf Desktop-Computern als auch auf mobilen Geräten gut aussieht.

UpFront bietet eine nahtlose Erfahrung für Benutzer, die eine Webseite auf jedem Gerät anzeigen, aber noch wichtiger ist, dass es für Benutzer einfach ist, schnell eine responsive Webseite mit nur wenigen Anpassungen an ihrer ursprünglichen Webseite zu erstellen.

Lese den nächsten Beitrag dieser Serie: Teil 7: Arbeiten mit Seiten und Beiträgen

Wenn Du Fragen zu dem hast, was wir in diesem Beitrag behandelt haben, kannst Du gerne im Forum unten nachfragen.

[forum id=“6″]

So verwendest Du die UpFront-Serie in der optimalen Reihenfolge:

• Teil 1: Die Grundlagen, Themenfarben und Typografie
• Teil 2: Strukturieren Deiner Webseite mit Regionen
• Teil 3: Gestalten der Webseite mit Elementen
• Teil 4: Optimieren von Elementen und benutzerdefiniertem Code
• Teil 5: Hinzufügen von Plugins und Formatieren von Gravity-Formularen
• Teil 6: Erstellen von responsiven Webseiten
• Teil 7: Arbeiten mit Seiten und Beiträgen