Geräte

Verschiedene Geräte haben ganz unterschiedlich große Bildschirme und nicht wenige Benutzer surfen heute auf Mobilgeräten durchs Netz.

Sparkle berücksichtigt dies, indem es Sie für alle Elemente auf der Seite für gängige Gerätegrößen eine eigene Position festlegen lässt.

Die Gerätegrößen werden zwar im Popup „Gerät“ aufgeführt, es ist jedoch nicht vorgesehen, ausgehend vom Inhalt Ihrer Website eine passende Größe zu wählen. Vielmehr macht es die enorme Vielfalt der heutzutage genutzten Geräte erforderlich, den Inhalt an jedes in Frage kommende Gerät anzupassen.

Sparkle macht dies zu einem Thema, das Sie bei Bedarf später in der Entwicklung Ihrer Website in Angriff nehmen können, nämlich wenn Sie eine genauere Vorstellung davon haben, welche Inhalte sie umfassen soll, und nicht nur ein Layout für ein einzelnes Gerät umsetzen möchten.

Eine Website mit Responsive-Design stellt die Summe aller Layouts dar und ist sinnvoll, um sich nicht mit den Einschränkungen eines einzelnen Geräts auseinandersetzen zu müssen. Wenn Sie aber ein einzelnes Layout bevorzugen, ist das 960 Pixel breite Layout für Desktopcomputer am gängigsten, weshalb es in Sparkle die Standardeinstellung ist.

Einzelnes Gerät

Wenn Sie Ihre Website nicht für verschiedene Geräte optimieren, erstellt Sparkle ein einzelnes festes Layout, bei dem es sich um ein 960 Pixel breites Layout für Desktopcomputer handelt. Der Website-Code weist die Mobilversionen von Browsern in diesem Fall an, einen „Kompatibilitätsmodus“ zu nutzen, sodass die Seite herausgezoomt wird und vollständig sichtbar ist. Der Benutzer kann dann mit zwei Fingern heranzoomen.

Der Nachteil dieser Herangehensweise besteht darin, dass Suchmaschinen dies zunehmend negativ bewerten.

Mehrere Geräte hinzufügen

Sie können sich mehrere Geräte wie verschiedene Fenster eines Hauses vorstellen: Sie sehen denselben Inhalt, aber die Fensterform ist jedes Mal anders.

Wenn Sie Elemente für ein Gerät hinzufügen, werden dieselben Elemente auch für alle anderen Geräte hinzugefügt. Wenn Sie Elemente entfernen, verschwinden sie für alle Geräte. Dies bedeutet, dass Sie die Position eines neu hinzugefügten Elements auf den anderen Geräten überprüfen müssen.

Sparkle lässt Sie die Elementposition und die Texteigenschaften für jedes Gerät einzeln anpassen, so können Sie beispielsweise für einen Desktopcomputer zwei Bilder nebeneinander setzen, die im Layout für Mobilgeräte übereinander dargestellt werden.

Ein Geräte-Layout kann einen von vier Zuständen haben:

  • Nicht vorhanden: Das Layout ist nicht in der Projektdatei gespeichert und nicht veröffentlicht.
  • Nicht veröffentlicht: Das Layout ist in der Projektdatei gespeichert, aber es wurde nicht veröffentlicht.
  • Personalisiertes Layout: Das Layout ist gespeichert, veröffentlicht und kann personalisiert werden.
  • Automatisch skaliert: Das Layout wurde veröffentlicht, aber es kann nicht bearbeitet werden, weil es basierend auf dem ähnlichsten Layout automatisch skaliert wurde.

Ein schneller Arbeitsablauf

Wenn Sie ein neues Gerät hinzufügen, skaliert Sparkle alle Elemente passend größer oder kleiner und verwendet dafür das Layout desjenigen Geräts, das dem neuen Gerät der Größe nach am ähnlichsten ist.

Der Vorteil liegt auf der Hand, denn da sich im Allgemeinen nur das Layout für Desktop-PCs und das Layout für Mobilgeräte stark voneinander unterscheiden, brauchen Sie für fünf Geräte nicht wirklich fünf verschiedene Layouts.

Der schnellste Weg, Layouts für alle Geräte zu erstellen, wenn Sie fertig und mit dem 960 Pixel breiten Standardlayout zufrieden sind, ist Folgender:

  • Fügen Sie nur das Hochformat-Layout für Smartphones hinzu (320 Pixel breit).
  • Passen Sie auf jeder Seite Ihrer Website Text und sonstige Elemente an und richten Sie sie neu aus.
  • Wenn Sie die Textstile richtig eingesetzt haben, können Sie für Mobilgeräte eine neue Schriftgröße wählen und auf den Stil anwenden. Sie wird nur für das aktuelle Gerät übernommen, und der gesamte Text wird sofort angepasst.
  • Sobald das 320-Pixel-Layout auf allen Seiten richtig funktioniert, rufen Sie erneut das Pop-up-Menü „Geräte“ auf und fügen Sie alle Geräte hinzu. Da die Inhalte vom ähnlichsten Gerät ausgehend skaliert werden, sollten sie sinnvoll aufgebaut sein und nur hier und da kleine Korrekturen oder Anpassungen erfordern.

Das nachstehende Beispiel zeigt, welchen Unterschied das Layout macht (links ein verkleinertes Layout, rechts eine 100-%-Ansicht).

Text und Geräte

Wenn Sie ein neues Gerät hinzufügen, wird der Text zur Gerätegröße passend skaliert. Wenn Sie beispielsweise in einem 960-Pixel-Layout eine Schriftgröße von 15 pt haben und ein Gerät mit 320 Pixeln Breite hinzufügen, wird die Schriftgröße auf 5 pt skaliert. Auch die Stile werden angepasst, um die Skalierung widerzuspiegeln. Stile desselben Namens haben allerdings immer eine gerätspezifische Schriftgröße. Wenn Sie einen Stil in einem Gerät ändern, wirkt sich diese Änderung deshalb nicht auf andere Geräte aus.

Sie sollten die Stile prüfen und gegebenenfalls anpassen, bevor Sie an einem neu hinzugefügten Gerät arbeiten.

Unterschiede zwischen Geräten

Es kann sinnvoll sein, ein Element auf kleineren Geräten auszublenden oder stattdessen ein Element mit anderen Eigenschaften zu verwenden, beispielsweise, weil ein Element für Mobilgeräte nicht geeignet ist, oder weil Sie auf einem anderen Gerät ein Element mit anderen Eigenschaften benötigen.

In diesem Fall können Sie Elemente mithilfe des Markierungsfelds „Auf diesem Gerät sichtbar" selektiv anzeigen oder ausblenden.

Vorschau und Geräte

Eine Feinheit der Vorschau besteht darin, dass das angezeigte Layout von der Breite des Browsers abhängt, wenn Sie eine Website für mehrere Geräte erstellen. Um Verwirrung zu vermeiden, zeigt die Vorschau nur die Version für das aktuelle Gerät. Wenn Sie sehen möchten, wie die Website nach der Veröffentlichung funktioniert, oder wenn Sie die Echtzeitvorschau gleichzeitig mit einem Desktopbrowser und mit einem mobilen Browser anzeigen, müssen Sie Option „Vorschau verfügbar – Nur auf diesem Computer“ deaktivieren.

Sparkle's device control
Sparkle's device control, multi device
An example of a desktop layout viewed on a mobile device
An example of a mobile layout on a mobile device

Aktualisiert für Sparkle 3.1

In English

En Français

In Italiano

Bitte melden Sie uns Mängel, die Ihnen in dieser Dokumentation auffallen, damit wir sie schnellstmöglich beheben können!

Sparkle verbindet ein All-in-one-Konzept mit einer verständlichen Benutzeroberfläche und stellt das Entwerfen von effizienten, suchmaschinenoptimierten Websites in den Mittelpunkt. 

Und das alles in einer einzigen starken, nativen Mac-App. 

Einmalig und unerreicht.

Copyright ©2020 River SRL

IT06208340486 — REA FI-609716

Diese Website verwendet Cookies. Einige davon sind für die Funktion der Website erforderlich, andere unterstützen uns dabei, sie zu verbessern. Mit der Nutzung dieser Website erklären Sie sich damit einverstanden, dass diese Cookies gespeichert werden. Weitere Informationen finden Sie in unserer Datenschutzerklärung.