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