FROM CACHE - de_header
Gelöst

Tabelle wird auf Mobile nicht richtig angezeigt

Vapes4You
Entdecker
41 3 11

Hallo zusammen,

 

aufgrund einer EU Verordnung müssen wir bei unseren Produkten einige Hinweise anzeigen.

Dies wurde über eine Tabelle gelöst. Allerdings wird die Tabelle auf der Mobilen Ansicht aufgrund des Inhalts total verschoben angezeigt und ich bekomme es nicht sauber gelöst.

 

Hat hier jemand eine Idee?

 

Ansicht auf dem Desktop:

Vapes4You_0-1706540121690.png

 

Ansicht auf dem Handy:

Vapes4You_1-1706540167246.png

 

 

You're personal Vapeshop expert 🙂
1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
15963 2532 3775

Erfolg.

Hey @Vapes4You 

 

Da du viele Information in dieser Tabelle anzeigen möchtest wird das schwierig sein so zu lösen und daher werde ich andere Optionen vorschlagen, wie z. B. unsere Apps, die das beispielsweise mit einem Lightbox Popup viel eleganter lösen auf Mobile. Siehe eine Demo hier.

 

Ansonsten, um deine Tabelle für mobile Geräte zu optimieren, kannst du auch weitere Ansätze Betracht ziehen:

  • Verwendung beweglicher Tabellen: Diese Methode erlaubt es Benutzern, sich mit Wischgesten durch die Tabelle zu bewegen. Dabei bleibt die primäre Spalte fixiert, um den Kontext zu erhalten. Du kannst auch Farben für abwechselnde Reihen verwenden, um die Lesbarkeit zu verbessern. Allerdings ist diese Methode nicht ideal für Tabellen mit großen Datenmengen, da ein Großteil des Inhalts versteckt bleibt.
  • Verkürzung von Tabellen: Bei dieser Methode werden unnötige Spalten ausgeblendet, sodass nur die wichtigsten Daten sichtbar sind. Ein "Mehr anzeigen"-Button kann hilfreich sein, um Zugang zu weiteren Daten zu ermöglichen.
  • Umwandlung von Tabellen in Karten: Diese Technik klappt Tabellenzeilen zu separaten Karten zusammen. Es ist eine vielseitige Methode, um Informationen darzustellen, besonders bei Tabellen mit umfangreichen Daten. Es ist jedoch schwierig, bestimmte Daten zwischen den Zeilen zu vergleichen, es sei denn, du berücksichtigst die Hierarchie und betonst die wichtigsten Elemente.
  • Anpassung der CSS-Eigenschaften: Du kannst CSS-Eigenschaften wie min-width, max-width und word-break verwenden, um die Breite der Spalten anzupassen und lange Wörter oder Links umzubrechen. Das hält die Tabelle innerhalb des vorgesehenen Bereichs und erleichtert das Lesen und Interpretieren der Daten.
  • Überlegung, welche Informationen wirklich notwendig sind: Auf kleinen Bildschirmen solltest du nur die wesentlichen Informationen anzeigen. Große Tabellen sind unhandlich und schwer zu verwenden. Du könntest redundante Elemente oder Informationen eliminieren und nur die wichtigsten Daten präsentieren.

Diese Methoden helfen, deine Tabelle auf mobilen Geräten lesbarer und benutzerfreundlicher zu gestalten. Es ist wichtig, den spezifischen Kontext und den Zweck deiner Tabelle zu berücksichtigen, um die beste Lösung zu finden​​​​​​​​​​.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

7 ANTWORTEN 7

Gabe
Shopify Staff
15963 2532 3775

Erfolg.

Hey @Vapes4You 

 

Da du viele Information in dieser Tabelle anzeigen möchtest wird das schwierig sein so zu lösen und daher werde ich andere Optionen vorschlagen, wie z. B. unsere Apps, die das beispielsweise mit einem Lightbox Popup viel eleganter lösen auf Mobile. Siehe eine Demo hier.

 

Ansonsten, um deine Tabelle für mobile Geräte zu optimieren, kannst du auch weitere Ansätze Betracht ziehen:

  • Verwendung beweglicher Tabellen: Diese Methode erlaubt es Benutzern, sich mit Wischgesten durch die Tabelle zu bewegen. Dabei bleibt die primäre Spalte fixiert, um den Kontext zu erhalten. Du kannst auch Farben für abwechselnde Reihen verwenden, um die Lesbarkeit zu verbessern. Allerdings ist diese Methode nicht ideal für Tabellen mit großen Datenmengen, da ein Großteil des Inhalts versteckt bleibt.
  • Verkürzung von Tabellen: Bei dieser Methode werden unnötige Spalten ausgeblendet, sodass nur die wichtigsten Daten sichtbar sind. Ein "Mehr anzeigen"-Button kann hilfreich sein, um Zugang zu weiteren Daten zu ermöglichen.
  • Umwandlung von Tabellen in Karten: Diese Technik klappt Tabellenzeilen zu separaten Karten zusammen. Es ist eine vielseitige Methode, um Informationen darzustellen, besonders bei Tabellen mit umfangreichen Daten. Es ist jedoch schwierig, bestimmte Daten zwischen den Zeilen zu vergleichen, es sei denn, du berücksichtigst die Hierarchie und betonst die wichtigsten Elemente.
  • Anpassung der CSS-Eigenschaften: Du kannst CSS-Eigenschaften wie min-width, max-width und word-break verwenden, um die Breite der Spalten anzupassen und lange Wörter oder Links umzubrechen. Das hält die Tabelle innerhalb des vorgesehenen Bereichs und erleichtert das Lesen und Interpretieren der Daten.
  • Überlegung, welche Informationen wirklich notwendig sind: Auf kleinen Bildschirmen solltest du nur die wesentlichen Informationen anzeigen. Große Tabellen sind unhandlich und schwer zu verwenden. Du könntest redundante Elemente oder Informationen eliminieren und nur die wichtigsten Daten präsentieren.

Diese Methoden helfen, deine Tabelle auf mobilen Geräten lesbarer und benutzerfreundlicher zu gestalten. Es ist wichtig, den spezifischen Kontext und den Zweck deiner Tabelle zu berücksichtigen, um die beste Lösung zu finden​​​​​​​​​​.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Finer
Shopify Expert
1996 413 713

@Vapes4You Tabellen sind tatsächlich immer problematisch. Wie bereits @Gabe erwähnt hat, muss man hier sämtliche Bedingungen genauer unter die Lupe nehmen, und prüfen, was ist relevant, und wie bekommt man das nachvollziehbar dargestellt.

In deinem Fall würde ich sogar zwei Tabellen erstellen. Eine für Desktop (entspricht der aktuellen Tabelle) und eine für die mobile Ansicht.

Bei der mobilen Ansicht würde nur ich dann lediglich eine Spalte verwenden und die Überschriften als Zeilen untereinander setzen:

 

Header 1
Inhalt 1
Header 2
Inhalt 2
Header 3
Inhalt 3

 

Um das ganz nicht zu lang zu gestalten, könnte man die einzelnen Inhaltsgrößen (Varianten?) vielleicht sogar in Tabs hinterlegen.

 

Manche Verordnungen definieren genau, wie eine Tabelle oder Kennzeichnung auszusehen hat. Ein "Responsive" Konzept liegt bei solcher Verordnung leider nie vor. Daher würde ich es empfehlen, die Informationen so darzustellen, dass ein Endverbraucher die Inhalte ohne Probleme lesen, genauer gesagt aufnehmen kann. Schließlich ist, dass ja das wichtigste, wenn man Verordnungen zu Produkt- oder Gebrauchshinweisen einhalten möchte.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Vapes4You
Entdecker
41 3 11

Hallo @Gabe  und @Finer ,

 

vielen Dank für euren Input, das hilft mir schon sehr weiter.

Von allen Ideen halte ich deine @Finer tatsächlich am sinnvollsten, einfach aufgrund der Tatsache, dass die Tabelle immer sichtbar sein muss und nicht "versteckt" hinter einem Link, einer Karte oder einem scrollbaren Bereich liegt. Die Inhalte darf ich nicht kürzen oder ändern, das heißt der Inhalt ist fest.

Allerdings weiß ich nicht genau, wie das gelöst werden soll 🙂

Die Tabelle ist Teil der Produktbeschreibung. Kann man die Struktur auch in CSS ändern?

Hier ein extremes Beispiel:
https://vapes4you.de/products/sc-10ml-nikotin-shot?pr_prod_strat=pinned&pr_rec_id=e0fdd3609&pr_rec_p...

You're personal Vapeshop expert 🙂
Vapes4You
Entdecker
41 3 11

Ich muss mich korrigieren 🙂

 

Die beste Lösung ist deine @Gabe und zwar die Darstellung die hier beschrieben wurde:
https://css-tricks.com/responsive-data-tables/

 

Vielen Dank!

You're personal Vapeshop expert 🙂
Gabe
Shopify Staff
15963 2532 3775

Super!

 

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Vapes4You
Entdecker
41 3 11

Hier noch ein Screenshot der optimierten Tabelle auf der Mobilen Ansicht:

 

Vapes4You_0-1706631284043.png

 

You're personal Vapeshop expert 🙂
Gabe
Shopify Staff
15963 2532 3775

Sieht super aus! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog