Aktualisiert für Sparkle 2.8

In English

En Français

In Italiano

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 schneller Arbeitsablauf

‍Wenn Sie ein neues Gerät hinzufügen, skaliert Sparkle alle Elemente passend größer oder kleiner, wobei die App als Ausgangspunkt das Layout desjenigen Geräts nutzt, dessen Größe der des neuen Geräts am ähnlichsten ist.

‍Im Allgemeinen unterscheiden sich nur das Layout für Desktopcomputer und das für Mobilgeräte stark voneinander, weshalb nicht unbedingt fünf verschiedene Layouts erforderlich sind, um von dieser Funktion zu profitieren.

‍Layouts für alle Geräte werden am schnellsten wie folgt erstellt. Nehmen wir an, dass Sie mit dem 960 Pixel breiten Layout bereits fertig und zufrieden sind:

  • ‍• Fügen Sie nur das Hochformat-Layout für Smartphones hinzu (320 Pixel breit).
  • ‍• Gehen Sie über jede Seite Ihrer Website, passen Sie den Text an und richten Sie Elemente neu aus.
  • ‍• Wenn Sie Textstile richtig eingesetzt haben, können Sie für Mobilgeräte eine neue Schriftgröße wählen und sie für 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 Gerät-Popup auf und fügen alle Geräte hinzu. Da die Inhalte vom ähnlichsten Gerät ausgehend skaliert werden, werden sie höchstwahrscheinlich sinnvoll aufgebaut, sodass nur hier und da kleine Korrekturen vorgenommen werden müssen.

‍Oben sehen Sie, welchen Unterschied das Layout macht: ein herausgezoomtes Layout auf der linken Seite, eine 100-%-Ansicht auf der rechten.

‍Text und Geräte

‍Wenn Sie ein neues Gerät hinzufügen, wird der Text zur Gerätegröße passend skaliert. Wenn Sie beispielsweise eine Schriftgröße von 15 pt in einem Layout von 960 Pixeln haben und ein Gerät mit 320 Pixeln Breite hinzugefügt wird, skaliert die Schriftgröße auf 5 pt. Auch die Stile werden angepasst, um die Skalierung widerzuspiegeln. Stile desselben Namens sind hinsichtlich Schriftgröße allerdings immer für ein Gerät spezifisch, wenn Sie einen Stil für ein Gerät ändern, wirken sich diese Änderungen also nicht auf andere Geräte aus.

‍Wir empfehlen, dass Sie die Stile überprüfen und wenn erforderlich anpassen, bevor Sie an einem neu hinzugefügten Gerät arbeiten.

‍Unterschiede zwischen Geräten

‍Manchmal ist es sinnvoll, ein Element auf kleineren Geräten auszublenden oder stattdessen ein Element mit anderen Eigenschaften zu verwenden.

‍Dies kann vorkommen, wenn ein Element für Mobilgeräte nicht zutreffend ist oder weil Sie auf einem Gerät ein Element mit bestimmten 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 auf der Breite des Browsers basiert, wenn Sie eine Website für mehrere Geräte erstellen. Um Verwechslungen zu vermeiden, zeigt die Vorschau nur die Version für das aktuelle Gerät an. Wenn Sie sehen möchten, wie die Website nach ihrer Veröffentlichung aussehen wird, oder wenn Sie die Vorschau gleichzeitig auf einem Desktopcomputer und auf einem Mobilgerät verwenden, müssen Sie „Vorschau nur für aktives Gerät“ deaktivieren.

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

Copyright © 2019 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.