Minnie Ongsricharoenporn

Wie Sie die responsiven Design-Möglichkeiten von Foleon nutzen

von Minnie Ongsricharoenporn

Einleitung

Wie oft sind Sie schon auf eine Website gestoßen, die auf dem Desktop hervorragend aussah, aber auf dem Smartphone eine Katastrophe war?

Auch heute noch sind die meisten für das Web erstellten Inhalte für den Desktop konzipiert, obwohl in 2019 etwa 85 % des Internetverkehrs auf kleineren Bildschirmen stattfindet. Wenn Sie mobile Geräte nicht in Betracht ziehen, werden Ihre Besucher ein ganz anderes Erlebnis haben, als Sie es sich vorgestellt haben.

Doch die Zusammenarbeit mit professionellen Designern, welche alle Ihre Inhalte responsiv gestalten, kann ein teurer und zeitaufwendiger Prozess sein. Wenn Sie sich entschieden haben, die Designarbeit mit Foleon selbst in die Hand zu nehmen, haben wir viele Optionen und Funktionen, die Ihnen Zeit sparen und gleichzeitig ansprechende, responsive Inhalte erstellen.

 

Das Beste aus Foleons responsiven Designfunktionen herausholen

Anpassungsfähigkeit, Typografie, Weißbereiche und Bildgröße sind entscheidende Faktoren, wenn es um responsives Design geht. Hier sind einige Tipps, wie Sie die Vorteile von Foleon nutzen können, um Ihre Publikationen mobil zu gestalten.

1. Designen Sie für verschiedene Geräte

Im Allgemeinen gibt es drei Gerätelayouts, die Sie beachten sollten: Desktop, Smartphone und Tablet. Bei einer normalen Website bestimmt der Browser eines Lesers automatisch, wie die Seite am besten auf der Grundlage von CSS-Medienanfragen angezeigt wird – eine Anweisung im Code, die den Browsern sagt, wie sie Inhalte abhängig von der Bildschirmauflösung anzeigen sollen.

Die integierten Ansichtsmodi von Foleon ermöglichen es Ihnen, die Seite den verschiedenen Endgeräten anzupassen, ohne sich um sogenannte Media Queries sorgen zu müssen.

In der oberen Mitte des Editors befindet sich eine Schaltfläche, mit der Sie die Größe Ihres Ansichtsfensters von Desktop auf Smartphone oder Tablet ändern können.

image10

Sie können zwischen Ihren drei Ansichten wechseln, um zu sehen, wie sich Ihr Layout ändert. Jedes Ansichtsfenster ermöglicht es Ihnen, Ihr Design innerhalb der Grenzen jedes Gerätetyps zu überprüfen und anzupassen.

Desktop-Ansicht:

image6

 

Tablet-Ansicht:

image9


Smartphone-Ansicht:

image12

Obwohl alle unsere Vorlagen bereits für jede Bildschirmgröße optimiert sind, wird es Situationen geben, in denen Sie Feineinstellungen vornehmen möchten, wenn Sie zusätzliche Inhalte hinzufügen. Hier ist die Möglichkeit, Ihr Ansichtsfenster direkt im Editor zu ändern, sehr hilfreich.

Inhalte, die Sie während der Arbeit in dem einen Ansichtsfenster hinzufügen, werden auch in den anderen Ansichten hinzugefügt, so dass Sie nicht für jede Ansichtsgröße ein neues Layout erstellen müssen. Foleon gibt Ihnen jedoch auch die Möglichkeit, einige Designaspekte auf Tablet und Smartphone zu optimieren, ohne die anderen Ansichten zu beeinflussen. Wir werden dies später näher erläutern.

2. Blenden Sie Inhalte in verschiedenen Ansichtsmodi ein und aus

Eine Einheitsgröße für alle zu wählen, ist ein Fehler, den viele Beginner beim ersten Design machen. Da jedes einzelne Element den Fluss Ihrer Publikation ausmacht, ist der Wunsch, alles auf Ihrer Desktop-Ansicht zu erhalten, verständlich. Allerdings ist es auch nicht immer die optimale Lösung, alles auf einen kleineren Bildschirm zu übertragen.

Beispielsweise kann die Darstellung zu vieler Bilder auf dem Smartphone unerwünscht sein, da die erhöhte Ladezeit die Kapazitäten des mobilen Datenvolumens Ihres Lesers zu stark beeinträchtigen könnte. In den verschiedenen Ansichtsmodi von Foleon können Sie bestimmte Bilder (oder andere Elemente) leicht ausblenden.

Die folgende Seite enthält drei Bilder in der Desktop-Ansicht. Jedes Bild ist in einer eigenen Spalte untergebracht.

image5

Bei der mobilen Ansicht werden diese Bilder jedoch automatisch in einer einzigen Spalte angeordnet.

image16

Diese Anordnung erhöht zwangsläufig die Seitenlänge auf dem Smartphone. Um zu vermeiden, dass Ihre Seite unerwünscht lang wird, können Sie Elemente für bestimmte Ansichtsmodi ausblenden.

In der Desktop-Ansicht sind alle Elemente standardmäßig sichtbar. Um ein bestimmtes Element in diesem Ansichtsmodus auszublenden, müssen Sie zu den Element-Einstellungen navigieren. Fahren Sie mit der Maus über das Element – in diesem Fall das Bild – und klicken Sie auf das Zahnradsymbol, das in der rechten oberen Ecke des Elements erscheint. Dadurch werden die Element-Einstellungen angezeigt.

image15

Sobald Sie sich im Einstellungsbereich des Bildes befinden, klicken Sie auf Visibility.

image3

In den Sichtbarkeitseinstellungen sehen Sie Schalter, mit denen Sie das Element für jeden Ansichtsmodus ausblenden können. Wählen Sie den Ansichtsmodus aus, für den Sie Ihr Element ausblenden möchten.

image14

Bei der Arbeit in der Smartphone- und Tablet-Ansicht ist es noch einfacher, bestimmte Elemente auszublenden. Sie fahren einfach mit der Maus darüber, bis Sie ein augenförmiges Symbol in der rechten oberen Ecke sehen.

image13

Klicken Sie auf das Symbol, um das Element auszublenden. Ihr Element wird ausgegraut und erscheint in Ihrer Publikation in diesem Ansichtsmodus nicht – ist aber in einer anderen Ansicht weiterhin sichtbar.

Beachten Sie, dass Sie auch die Möglichkeit haben, Spalten in der Smartphone- und Tablet-Ansicht auszublenden. Diese Funktion ist in der Desktop-Ansicht nicht verfügbar, da die Spalten nebeneinander angeordnet sind.

3. Passen Sie Ihre Typografie an verschiedene Bildschirmgrößen an

Wenn es um responsives Design geht, schenken viele Menschen ihren typografischen Entscheidungen nicht die nötige Aufmerksamkeit. Es ist wichtig, dass Ihr Text auf jeder Bildschirmgröße lesbar ist. Eine gute Faustregel, um die richtige Schriftgröße für jedes Gerät zu bestimmen, ist die Feststellung, ob Sie blinzeln. Solange Sie sich keine Schwierigkeiten haben, den Text zu lesen, haben Sie alles richtig gemacht.

Desktops haben mehr Bildschirmfläche für Landschaftslayouts und können mehr Text aufnehmen. Mobile Geräte hingegen haben schmalere Bildschirme, die für mehrspaltige Layouts nicht ideal sind.

Wenn Sie mehrere Textspalten auf dem Desktop haben, ordnet Foleon diese automatisch vertikal in kleineren Ansichtsmodi an, um sie dem schmaleren Bildschirm anzupassen.

Desktop-Ansicht:

image7

 

Smartphone-Ansicht:

image2

Es ist wichtig zu wissen, dass nur bestimmte Änderungen, die Sie an Ihrer Typografie vornehmen, automatisch auf andere Ansichtsmodi angewendet werden. Und so funktioniert es:

Schriftarten

Wenn Sie die Schriftart eines Textblocks in der Desktop-Ansicht ändern, werden die Änderungen sowohl in der Tablet- als auch in der Smartphone-Ansicht übernommen. Wenn Sie Ihre Schriftart jedoch in der Tablet-Ansicht ändern, wird sie nur in die Smartphone-Ansicht übernommen; sie hat keinen Einfluss auf die Desktop-Ansicht. Kurz gesagt, die Schriftart verändert sich nach unten, aber nicht nach oben.

Schriftgröße

Foleon passt Schriftgrößen automatisch proportional an den jeweiligen Anzeigemodus an, was bedeutet, dass sich die Schriftgröße Ihres Textes in Desktop-, Tablet- und Smartphone-Ansichten standardmäßig leicht unterscheidet.

Ähnlich wie bei der Schriftart, werden Änderungen, die Sie vornehmen, nach unten übernommen. Schriftgrößenanpassungen werden nur auf kleinere Bildschirmgrößen übertragen, nicht aber umgekehrt.

Das bedeutet, dass Schriftanpassungen in der Smartphone-Ansicht weder die Tablet- noch die Desktop-Ansicht beeinflussen. In der Tablet- und Smartphone-Ansicht wird eine Meldung angezeigt, dass Ihre Änderungen nicht für größere Ansichtsmodi gelten.

Dafür gibt es einen guten Grund. Text, der auf kleineren Bildschirmen gut aussieht, wird nicht unbedingt gut auf größeren Bildschirmen umgesetzt. Die Möglichkeit, Ihren Text an verschiedene Bildschirmgrößen anzupassen, ohne andere Größen zu beeinflussen, stellt sicher, dass Sie auf jedem Gerät eine optimale Lesbarkeit gewährleisten.

4. Kreieren Sie Weißbereiche mit nur einem Handgriff

Mit Foleon können Sie das Padding jedes Ihrer Elemente anpassen, so dass Sie selbst entscheiden können, wie viel Abstand Sie um Ihren Inhalt herum haben möchten. Fahren Sie dazu mit der Maus über die Seite der Spalte, die Sie anpassen möchten, bis Sie einen grünen Padding-Balken sehen.

image20

Ihr Cursor verwandelt sich in Pfeile, die anzeigen, in welche Richtung Sie ziehen sollen. Passen Sie die grünen Balken entsprechend an, um die gewünschte Anzahl von Padding für jede Spalte zu erweitern oder einzuschränken. Dies ist auf allen vier Seiten einer Spalte möglich.

Das Gleiche kann auch für Ränder gemacht werden, die beim Darüberfahren mit der Maus rot werden.

image17

Diese Funktion ist besonders hilfreich für die Feinabstimmung der Menge an Weißbereich, die Sie in Ihrer Publikation verwenden möchten. Weißbereich kann verwendet werden, um Informationen visuell in Abschnitte zu unterteilen und gleichzeitig Ihr Layout zu erhalten. Wenn Sie das Beste aus dem Weißbereich herausholen, können Sie Ihre Blöcke effektiv aufteilen, ohne sich auf Rahmen und Linien zu verlassen.

5. Schneiden Sie Ihre Bilder sofort zu

Bilder und Grafiken sind ein wesentlicher Bestandteil dessen, was Publikationen ansprechend macht. Achten Sie bei der Auswahl der Bilder darauf, dass sie das Gesamtdesign Ihrer Publikation ergänzen.

Hier finden Sie unsere Auswahl an Webseiten mit kostenlosen Agenturbildern.

Die Medienbibliothek verfügt über ein integriertes Bildbearbeitungsprogramm, mit dem Sie die Anzeige von Bildern in verschiedenen Bildschirmgrößen anpassen können, ohne Photoshop zu verwenden. Unabhängig von der Ausrichtung passen Ihre Bilder auch bei der Betrachtung auf verschiedenen Geräten perfekt in Ihre Inhale.

Wenn Sie ein Bild zu Ihrer Publikation hinzufügen, skaliert Foleon es automatisch so, dass es in Ihre Spalte passt. Wenn Sie beispielsweise ein Hochformatbild in eine breite Spalte hochladen, die besser zu einem Querformatbild passt, wird die Spalte automatisch vertikal erweitert, um das gesamte Hochformatbild aufzunehmen. Das Bild wird die gesamte Spaltenbreite ausfüllen.

Aber was tun Sie, wenn Sie möchten, dass Ihr Bild innerhalb der Grenzen Ihrer ursprünglichen Spaltengröße liegt? Sie können das Bild im Editor direkt zuschneiden oder skalieren. Fahren Sie einfach mit der Maus über das Bild und ein weißes Quadrat erscheint in der rechten unteren Ecke des Bildes.

image11

Klicken Sie auf dieses weiße Quadrat und ziehen Sie es diagonal, bis Sie die gewünschte Größe haben.

Wenn Sie ein Hochformatbild haben, das so skaliert wurde, dass es in einen großen Bereich passt, sollten Sie es so ausrichten, dass die Abstände um Ihr Bild herum ausgeglichen sind.

image8

Auf diesem Foto wurde das rechte Bild skaliert, um die Spalte zu füllen, in der es untergebracht ist. Standardmäßig wird das Bild dadurch linksbündig in der Spalte ausgerichtet. Um den Raum um das Bild herum auszugleichen, können Sie Ihr Bild über die Bild-Einstellungen neu ausrichten.

Fahren Sie mit der Maus über das Bild und klicken Sie auf das Zahnradsymbol in der oberen rechten Ecke des Bildes, um auf die Einstellungen zuzugreifen.

Als nächstes klicken Sie auf Alignment. Sie erhalten ein Dropdown-Menü, in dem Sie auswählen können, wie Sie Ihr Bild ausrichten möchten.

image19

In diesem Beispiel werden wir das Bild zentrieren.

image18

Ihr Bild wird nun in der Mitte der Spalte ausgerichtet.

 

Fazit

Man kann die Tatsache, dass Bildschirme in verschiedenen Größen angeboten werde, nicht ignorieren. Egal, ob Ihre Leser iPhone-Liebhaber oder Android-Anhänger sind, sie werden Ihre Inhalte auf allen Arten von Geräten abrufen. Mit den steigenden Erwartungen an ein besseres mobiles Seherlebnis ist die Bedeutung der Reaktionsfähigkeit Ihrer Inhalte an das Endgerät nicht mehr zu unterschätzen.

Glücklicherweise war es noch nie so einfach, Inhalte zu erstellen, die geräteunabhängig und anpassungsfähig sind. Die Verwendung eines Tools zur Inhaltserstellung wie Foleon kann Ihnen helfen, fesselnde Inhalte zu erstellen, die Ihre Zuschauer auf jedem Bildschirm ansprechen.

 

Sie benötigen weitere Hilfe? Besuchen Sie unser Hilfe-Center wo Sie eine umfangreiche Sammlung von Artikeln über Design, Einstellungen und vieles mehr finden.

Minnie Ongsricharoenporn
Minnie Ongsricharoenporn is a content marketer at Foleon. She pens the ready-to-share pieces that inspire our customers to create even better content for themselves.



Bleiben Sie auf dem neuesten Stand

Erfahren Sie alles über die Zukunft von interaktiven Web-Inhalten - melden Sie sich für unsere Produkt-News und Blog-Updates an!




Social Media

Folgen Sie uns für frische Inhalte, Tipps und Tricks und tolle Beispiele!

Gehe zu:

Produzieren und veröffentlichen Sie fesselnde Inhalte

Gratis 7 Tage testen