Tipps und Tricks zu responsive Design / Layout

Fragen und Antworten zu Pano2VR in deutscher Sprache
Post Reply
MButz
Posts: 3
Joined: Tue Jul 07, 2020 2:54 pm

Tue Oct 20, 2020 1:29 pm

Hallo zusammen,
ich bin aktuell am Thema responsive design / Anpassung meines SKINs an Desktop, Tablett und Smartphone.
Habt Ihr hier irgendwelche Tipps/Erfahrungswerte oder „pauschale“ Standards welche ihr immer einsetzt?

Ich habe diverse Container in einer Tour welche ich nur in der Desktopansicht in dieser Form darstellen möchte. Dies steuere ich dann über die Fensterbreite (ein- und ausblenden).

Über Tipps und Tricks würde ich mich freuen.

Danke im Voraus, Grüße
User avatar
soulbrother
Posts: 433
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Tue Oct 20, 2020 6:02 pm

Man kann sich entweder ne Menge Arbeit machen und das Design und Layout für 3 oder 4 verschiedene Bildschirmgrößen individuell optimieren,
oder - wenn es das Design erlaubt, nur auf die kleinste Größe optimieren.
Dann sieht natürlich ein 300x300 Pixel großes Textfeld mit dem Scroller auf einem 24" Monitor schon etwas mickrig aus, aber je nachdem, wie die "Gesamtstruktur" aufgebaut ist, also das gesamte Layout, KANN es schon auch akzeptabel sein.
Ich zeig bald ein Beispiel für genau diesen Fall, kann aber noch 6-8 Tage dauern.
MButz
Posts: 3
Joined: Tue Jul 07, 2020 2:54 pm

Mon Oct 26, 2020 7:32 am

Hallo,
danke für Deinen Beitrag.
Ich erstelle aktuell eine "Testwelt" wo ich verschiedene Layouts teste.
Ich habe die Inhalte in dem aktuellen SKIN aktuell über die Logik "has touch" gesteuert- empfinde ich als sinnvoller als über die Fensterbreite. Wobei hier die Meinungen auseinander gehen.
Allerdings lädt es jetzt zu Beginn auf einem Touch-Endgerät zuerst das Layout der Desktop-Version welches dann ersetzt wird sobald man erstmalig auf den Touch-Bildschirm klickt.
Hier ist der Link zur Testumgebung: http://www.3d-rundblick.de/Marketing/Mini/
Grüße, Michael
User avatar
soulbrother
Posts: 433
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Mon Oct 26, 2020 7:51 am

MButz wrote:
Mon Oct 26, 2020 7:32 am
Ich erstelle aktuell eine "Testwelt" wo ich verschiedene Layouts teste.
Ich habe die Inhalte in dem aktuellen SKIN aktuell über die Logik "has touch" gesteuert- empfinde ich als sinnvoller als über die Fensterbreite.
Hier ist der Link zur Testumgebung:
Bei einem kurzen Blick sehe ich in dem Projekt leider keine Objekte, bei denen es "drauf ankommt", wie das Layout sich ändert bei schmalen 320 px oder breiten 4k Bildschirmen.
Also alles was irgendwie skaliert bzw. im Layout geändert werden sollte, wie Textfelder mit versch. langen Texten und evtl. URL-Links im Text, Bildeinblendungen (Galerien), PDF, Videos, etc.
Hab ich es übersehen, oder sind solche Elemente noch nicht drin in Deiner Testwelt?
MButz
Posts: 3
Joined: Tue Jul 07, 2020 2:54 pm

Mon Oct 26, 2020 8:13 am

Hallo, das könnte sein, weil ich aktuell ein Update auf den Server lade.
Sollte in 15 Minuten fertig sein. Im Anhang habe ich zwei Bildschirmkopien.

1x Desktop
1x IPhone X

Hier sieht man ja die Unterschiede im SKIN. Ich möchte von der Desktopversion zur Touch-Version eine andere Anordnung der Elemente.
Attachments
mobil.jpg
mobil.jpg (58.39 KiB) Viewed 425 times
Desktop.jpg
Desktop.jpg (317.24 KiB) Viewed 425 times
Post Reply