Tool – Wichtige Hinweise für das Verwenden von adaptiven Designs

  • Im Header nicht ein grosses Bannerbild verwenden, sondern einzelne kleinere Elemente anordnen die auch übereinander dargestellt werden können. Im weiteren empfiehlt sich die Trennung der Elemente in Logo und Bannerbild, wozu sich einige Designs gut eignen.
  • Im Desig-Editor bei den Werten unbedingt „rem“-Werte (nicht .px) verwenden. Das gilt auch für die Einstellungen der Außenabstände bei den Widgets. Rem-Werte sind  bei gleicher Abstandserzeugung kleiner und haben eine Kommastelle. Darüberhinaus sollten die Werte gering gehalten werden, besonders solche für linke und rechte Abstände.
  • Keine zweispaltiges Layout verwenden. Mobilversion stellen die Inhalte der Spalten automatisch untereinander dar, da es ja gerade im Hochformat eines Smartphones gar nicht anders möglich ist. Die Reihenfolge ist auch immer gleich: zuerst alle Elemente der linken Spalte, dann die der rechten Spalte.
  • Generell Aufschlussreich ist z.B. das Onlinestellen der Originalvorlage, um zu sehen, wie dort die Elemente adaptiv umgesetzt werden. Danach können die individuelle Veränderung von Abständen und Anordungen besser auf ihre Wirkung zu beobachten und die Bedingungen und Spielräume für eine optimale Mobilversion ausgetestet werden.

Tutorials zum Thema Adaptivität und Probleme bei der Darstellung auf Mobilgeräten:

-> Die Groesse meiner Website-Überschrift passt sich nicht an mein Mobilgeraet an

-> Auf meinem Mobilgerät erscheint meine Website zusammengequetscht / Seitenstruktur und Design

-> Masseinheit REM versus PX / Seitenstruktur und Design

-> Wechsel zu adaptivem Design / Seitenstruktur und Design

-> Adaptive Designvorlagen / Seitenstruktur und Design

Hat Ihnen dieser Artikel weitergeholfen?

Ja, das hat er Nein, leider nicht