Fotos werden nicht breit angezeigt

[zeit]

Hallo,

meine „Seiten“ (URL „pages“) ist ca. 21cm breit links und rechts habe ich noch je 17cm Platz der nicht genutzt wird. Für Text ist das gut weil ein Text über die ganze Breite schlecht lesbar ist für Bilder und Tabellen aber nicht da man darauf nichts erkennen kann da zu klein.

Im Backend habe ich große Bilder 2048 Pixel die auch im Backend groß angezeigt werden im Frontend werden sie nur klein angezeigt vielleicht 700/800 Pixel Breit

Gibt es dafür eine sinnvolle Strategie die gut aussieht und auch auf Mobiltelefonen funktioniert?

In meinem Fall geht es um eine Tabelle mit 14 Spalten die ich in Excel erstellt habe und als PNG Foto in Shopify hochgeladen (die Fotogröße kann ich in Photoshop anpassen [1]). Lesen kann man die Tabelle nicht weil zu klein.

Macht man das Foto breiter (was ich in Shopifiy nicht ausprobieren kann da mir dazu die Kenntnisse fehlen[2]) wird es vermutlich mit dem Text darunter und darüber nicht gut aussehen?

Vielleicht Textfelder? (mit Textfelder meine ich dass man einen Rahmen aufzieht und da der Text reinkommt) aber würde das auch auf Mobiltelefonen gut funktionieren?

Ist das ein falscher Weg der anders umgesetzt werden muss?

Welche Lösungen würde es geben?

[1] In Photoshop arbeite ich schon seit vielen Jahren daher ist die Größenänderung von Fotos kein Problem für mich

[2] keine Kenntnisse in CSS, HTML usw…

Template habe ich “Athens” von “themes.shopify.com“

[Gabe]

Hey @zeit

Super Wahl mit dem Athens Theme!

Shopify ermöglicht es also, das Design und Layout deiner Pages auf eine Weise anzupassen, die sowohl auf Desktop- als auch auf mobilen Geräten gut aussehen. Aber in deinem Fall, empfehle ich eins unserer “Page Builder Apps” die es ermöglichen professionelle Seiten zu erstellen per einem Drag & Drop Editor, sprich, ohne CSS und HTML Kenntnisse haben zu müssen.

Die Page Builder Apps findest du im Shopify App Store, die benutzerfreundliche Design- und Layoutoptionen bieten. Eine solche App ist beispielsweise PageFly oder Shogun, mit denen du das Layout deiner Seiten auf eine Weise anpassen, die für alle Geräte responsiv ist (klicke hier in die Demos).

Es ist auch möglich, die Breite der Bilder zu ändern, um sie vollständig auf den Bildschirm zu passen. Allerdings kann dies dazu führen, dass das Bild auf kleineren Bildschirmen nicht mehr richtig angezeigt wird. Eine mögliche Lösung könnte darin bestehen, verschiedene Versionen des gleichen Bildes zu verwenden - eine größere für den Desktop und eine kleinere für mobile Geräte mit einen CSS Filter wie den folgenden:

@media(max-width: 749px){ .banner__media{ max-height: 56vw; } }

Beachte jedoch, dass dies möglicherweise eine technische Anpassung erfordert, für die ich gerne einen Shopify-Experten empfehlen kann.

Standardmäßig sind alle Themes inkl. das Athens Theme, auf Shopify für mobile Geräte optimiert. Das bedeutet, dass sie automatisch das Layout und die Größe von Elementen wie Bildern und Tabellen anpassen, um auf verschiedenen Bildschirmgrößen gut auszusehen. Wenn du das Theme Code nicht stark geändert hast, sollten die Bilder und Tabellen automatisch auf eine passende Größe skaliert werden. Für die Tabelle mit 14 Spalten könnte man auch eine andere Darstellungsform in Betracht ziehen. Auf mobilen Geräten wird es allerdings schwierig sein, 14 Spalten in einer einzigen Zeile darzustellen, ohne dass der Inhalt zu klein wird.

Eine Option könnte sein, die Tabelle aufzuteilen oder sie in eine andere Datenstruktur umzuwandeln, die auf kleineren Bildschirmen besser lesbar ist, wie zum Beispiel eine Liste.

Ich hoffe da sind ein paar Optionen für euch mit dabei!

[zeit]

Hallo Gabe,

vielen Dank für deine Hilfe.

Page Builder möchte ich nicht verwenden sie haben keinen guten Ruf obwohl es sehr verlockend wäre sie ein zu setzen.

Ich werde versuchen mich den Beschränkungen an zu passen, sollte das nicht möglich sein einen Experten bezahlen der mir hilft.

Vilen Dank noch einmal

[Gabe]

@zeit

Ok und halte mich auf dem Laufenden hier wie das geht!

VG,