Geräte | Sitely-Dokumentation

In Sitely beziehen wir uns auf die Anpassung von Seitenlayouts an verschiedene Geräte, wenn wir von Geräten sprechen. In vielen Webentwicklungsanwendungen werden Seitenlayouts oft automatisch von der Software auf der Grundlage eines zugrunde liegenden Frameworks geändert. Während dies für einige eine Annehmlichkeit sein kann, kann es sich für diejenigen als einschränkend erweisen, die etwas kreativer sein möchten, wie Dinge auf Geräten mit unterschiedlichen Bildschirmabmessungen aussehen sollten. Dies führt oft dazu, dass Website-Entwickler tief in die Materie einsteigen müssen, um Feineinstellungen an den Layouts oder dem Code vorzunehmen, die von solchen Apps erstellt werden. Bei Sitely verfolgen wir einen anderen Ansatz, der auf dem freien Format des Sitely-Webdesigns basiert.

Wenn du die Geräteauswahl von Sitely öffnest, werden dir Informationen über das aktuell ausgewählte Gerät angezeigt. Die Standardeinstellung ist ein Desktop-PC mit einer Breite von 1200 Pixeln. Das sieht dann so aus.

Dies sollte der Ausgangspunkt für alle neuen Projekte sein. Füge einfach Inhalte auf deiner Seite hinzu und ordne sie an, um mit der Erstellung der Standard-Desktop-Version deiner Webseite zu beginnen. Wenn du ein neues Projekt beginnst, versuche, wenn möglich, die integrierten Textstile von Sitely zu verwenden. Verwende beispielsweise den Titelstil für deine Hauptüberschriften, den Textstil für deinen Fließtext usw. Du kannst die Schriftart, Größe und Farben jedes Stils usw. ändern, während du mit der Erstellung deines Inhalts beginnst, und dann die entsprechenden Stile aktualisieren, indem du auf die Schaltfläche „Änderungen übernehmen“ unter dem Stilnamen im Stilbereich klickst.

Das Erstellen und Verwenden von Stilen auf diese Weise ist sehr hilfreich, wenn es darum geht, dein Seitenlayout später für verschiedene Geräte anzupassen. Fahre mit dem Layout deiner Desktop-Seite fort, bis sie genau deinen Vorstellungen entspricht. An dieser Stelle solltest du in Betracht ziehen, deine Seite in Layoutblöcke zu unterteilen, z. B. einen Block für deine Navigation, einen weiteren für deinen Hero-Bereich und mehrere andere für jeden visuell definierbaren Abschnitt der Seite. Um einen Layoutblock zu erstellen, wähle alle einzelnen Seitenelemente aus, die in den Block aufgenommen werden sollen, klicke mit der rechten Maustaste und wähle im Kontextmenü die Option „In Layoutblock verschieben“.

Dadurch werden alle ausgewählten Elemente bequem in einem Block zusammengefasst, der auf der Seite nach oben oder unten verschoben werden kann, ohne die Position einzelner Elemente innerhalb des Blocks zu verändern. Darüber hinaus kann der Layoutblock alle darunter liegenden Layoutblöcke verschieben, wenn du Elemente auf der Seite verschiebst. Dies ist eine weitere Funktion, die sich beim Layouten von Seiten für andere Gerätegrößen als nützlich erweisen wird. Hinweis: Wenn ein Layoutblock zum ersten Mal erstellt wird, wird er mit einer der Wireframe-Farben von Sitely gestaltet. Dies dient nur dazu, dich wissen zu lassen, dass du einen Layoutblock erstellt hast, und macht ihn sofort auf der Leinwand sichtbar. Du kannst die Farbe jederzeit entfernen oder ändern, indem du die Füllung im Stilbereich änderst.

Neue Geräte hinzufügen
Sobald deine Desktop-Seite fertig ist, kannst du ein neues Gerätelayout hinzufügen. Wir empfehlen, erst dann mit dem Hinzufügen neuer Gerätelayouts zu beginnen, wenn du deine Desktop-Seite fertiggestellt hast. Wenn du bereit bist, klicke auf das Symbol für die Geräteauswahl oben auf dem Bildschirm und dann auf die Schaltfläche „Gerätelayouts anpassen“. Daraufhin wird eine Liste mit anderen Geräten angezeigt, für die du Designs erstellen kannst. Wir empfehlen, zunächst die Option „Portrait-Smartphone“ mit einer Breite von 320 Pixeln hinzuzufügen.

Klicke auf die Dropdown-Liste „Nicht vorhanden“ und wähle die Option „Benutzerdefiniertes Layout“. Dadurch wird eine neue Arbeitsfläche erstellt, auf der alle deine Inhalte so skaliert werden, dass sie auf den neuen Gerätebildschirm passen.

Das erste, was dir wahrscheinlich auffallen wird, ist, dass der Text unglaublich klein und fast unmöglich zu lesen ist. Außerdem wurden alle Bilder proportional skaliert. Diese Seite muss nun neu angeordnet werden, damit sie auf einem Smartphone-Bildschirm angezeigt werden kann. Wenn du jedoch unseren vorherigen Rat zur Verwendung von Textstilen befolgt hast, kann alles auf eine akzeptablere Größe skaliert werden, indem du deine Textstile im Stil-Panel änderst.

Denke daran, dass Textstile geräteabhängig angewendet werden. Das bedeutet, dass alle Änderungen, die du an einem Textstil vornimmst, nur für das Gerät gelten, auf dem du gerade arbeitest. In unserem Beispiel wurde der Textkörperstil in unserer Desktop-Variante auf 15 pt festgelegt. Wenn wir zum Smartphone-Layout wechseln, wurde er auf 4 pt reduziert. Wir können diesen Textstil nun auf 12 pt ändern und den Stil erneut aktualisieren, indem wir auf die Schaltfläche „Änderungen übernehmen“ im Stil-Bedienfeld klicken. Dadurch wird die Schriftgröße des gesamten Fließtextes im Smartphone-Layout auf 12 pt geändert. Dasselbe machen wir mit allen anderen verwendeten Textstilen. Beispielsweise können unsere Desktop-Titel auf 28 pt eingestellt sein, während sie in unserem Smartphone-Layout auf 18 pt eingestellt sind.

Diese Änderungen wirken sich sofort auf unser Smartphone-Layout aus. Es sieht nun etwa so aus

Die Größe des gesamten Textes wurde nun auf ein lesbares Maß geändert, aber die Textfelder müssen vergrößert werden, um den neu vergrößerten Text aufzunehmen. Dies wird durch die roten Umrandungen der Textfelder angezeigt. Diese zeigen an, dass mehr Text in den Feldern vorhanden ist, als auf dem Bildschirm zu sehen ist. Dies lässt sich mit ein paar einfachen Handgriffen leicht beheben.

Als Erstes muss die Länge der Smartphone-Seite vergrößert werden, um ausreichend Platz zum Arbeiten zu schaffen. Im nächsten Schritt wird der untere Ziehpunkt des obersten Layoutblocks gezogen, um ihn zu vergrößern und die Größe seines Inhalts anzupassen. Durch Ziehen des unteren Ziehpunkts werden alle anderen Layoutblöcke auf der Seite nach unten verschoben, sodass viel Platz entsteht, um den Inhalt des ersten Layoutblocks zu bearbeiten.

etzt müssen Sie nur noch die Ziehpunkte der einzelnen Textfelder greifen und ziehen, bis die rote Umrandung verschwindet. Sie können die Elemente innerhalb des Blocks verschieben, damit sie besser in den verfügbaren Platz passen. Wenn Sie mehr Platz benötigen, vergrößern Sie den Layoutblock einfach noch etwas. Hier ist unsere mobile Seite, die langsam Gestalt annimmt.

Zwischengrößen von Geräten
In den meisten Fällen reicht es aus, eine Desktop-Version Ihrer Webseite und eine Smartphone-Version zu entwerfen, damit Sitely die Zwischengrößen für Sie handhaben kann. Wenn Sie zwischen Desktop und Smartphone weitere Geräte hinzufügen, können Sie die verschiedenen Geräte einfach von Sitely automatisch skalieren lassen. Dazu müssen Sie lediglich die Option „Automatisch skalieren“ für jede Gerätevariante festlegen.

Natürlich besteht auch immer die Möglichkeit, für jedes Gerät ein benutzerdefiniertes Layout festzulegen, wenn das Seitendesign dies erfordert. Beispielsweise könntest du eine Webseite erstellen, die der unten abgebildeten ähnelt.

IIm obigen Beispiel ist die Desktop-Website überwiegend in einer 2-Spalten-Struktur aufgebaut, wobei einige Layoutblöcke in einer 4-Spalten-Struktur aufgebaut sind. In der Tablet-Version gibt es überwiegend 2- und 3-Spalten-Rasterlayouts, während in der mobilen Version überwiegend eine 1-Spalten-Struktur mit einigen Blöcken in einer 2-Spalten-Struktur verwendet wird. Die Wahl der zugrunde liegenden Rasterstruktur hängt wirklich von der Menge des anzuzeigenden Textes und der Bilddichte der Seite ab. Glücklicherweise bietet Sitely die Möglichkeit, auf diese Weise für verschiedene Geräte zu entwerfen.

Die standardmäßige zugrunde liegende Rasterstruktur für eine Desktop-Version einer Website besteht in der Regel aus 12 Spalten. Dadurch kann die Seite durch 2, 3 und 4 Spalten geteilt werden, zusätzlich zu einer vollen 12-Spalten-Breite. Bei Geräten mit mittleren Größen kann es jedoch vorteilhaft sein, die Rasterstruktur zu ändern, um sie besser an das gewünschte Seitenlayout anzupassen. Im obigen Beispiel wäre es vielleicht besser, die Tablet-Seite in einer 4- oder 8-Spalten-Rasterstruktur zu organisieren, während die mobile Version besser für eine 2-Spalten-Rasterstruktur geeignet wäre.

Um diese Anforderung zu erfüllen, bietet Sitely eine geräteabhängige Rasterstruktur, sodass du deine Desktop-Seite so einrichten kannst, dass sie die standardmäßigen 12 Spalten verwendet, während die Tablet- und Mobilseiten je nach Bedarf mit 2, 4 oder 8 Spalten eingerichtet werden können. Du legst das Geräteraster über den Layout-Rasterwähler oben auf dem Sitely-Bildschirm fest.