Hinweise zu Bildern und Reaktionsfähigkeit

Das Design einer Webseite, die sich an sehr verschiedene Bildschirmgrößen und -konfigurationen und Browser anpassen kann, ist eine große Herausforderung. Wir haben unter großem Zeitaufwand die modernsten bewährten Praktiken des Webdesigns implementiert, um sicherzustellen, dass Ihre Bilder auf mehreren Plattformen gut angezeigt werden. Während die meisten Bilder sicherlich gut dargestellt werden, enthalten manche mobil adaptiven Widgets benutzerdefinierte Bilder. In diesen Fällen ist es wichtig, die bewährten Methoden zur Aufnahme dieser Bilder in Designs mit variierenden Abmessungen zu kennen.

Formular für maßgeschneidertes Layout
Sie werden beispielsweise erkennen, dass viele der Auswahlmöglichkeiten für Banner im Administrator-Panel abstrakte Designs sind, da das Bannerbild für viele verschiedene Bildschirmgrößen verwendbar sein muss.

Als Faustregel bei der Auswahl von Elementen für responsive Anzeigen sollte die „Flexibilität“ des Bilds getestet werden. Bei „Flexibilität“ meinen wir hier das Ausmaß, in dem das Bild die beabsichtigte Bedeutung beibehält, auch wenn es etwas abgeschnitten oder auf eine andere Konfiguration zugeschnitten wird. Das Gegenteil von flüssig ist spröde: Ein sprödes Bild muss in seiner exakten Größe wiedergegeben werden, um die beabsichtigte Bedeutung zu vermitteln. Abstrakte Designs oder Muster funktionieren beim responsiven Webdesign gut, da Sie das Wesentliche Ihres Themas oder Ihrer Marke vermitteln können, auch wenn sie nicht in der exakten Pixelbreite und -höhe angezeigt werden. IdeaScale fördert diese Art von Designmuster in den Administratoreinstellungen bei der Bannerauswahl: Sie werden beispielsweise erkennen, dass viele der Auswahlmöglichkeiten für Banner im Administrator-Panel abstrakte Designs sind, da das Bannerbild für viele verschiedene Bildschirmgrößen verwendbar sein muss.

Hier ist ein direkter Vergleich eines spröden mit einem flüssigen Bild, die beide als Hintergrund in einem responsiven Karussell-Seitenelement verwendet werden:

Vergleich von zwei Bildern
Links: „Sprödes“ Bild – Mann mit Kind
am Strand. Rechts: „Flexibles“ Bild – Steinmuster. Wir verwenden diese zwei Bilder unten in zwei Beispielen:
Beide Bilder sehen im Desktop-Layout in voller Größe gut aus.
Beide Bilder sehen im Desktop-Layout in voller Größe gut aus.
Bei der Darstellung auf einen kleineren Bildschirm verschwindet die Person jedoch aus dem Bildrahmen, während die Steine ihre ursprüngliche semantische Integrität beibehalten.
Bei der Darstellung auf einen kleineren Bildschirm verschwindet die Person jedoch aus dem Bildrahmen, während die Steine ihre ursprüngliche semantische Integrität beibehalten.
Auf dem Bildschirm eines Mobilgeräts wird der Unterschied noch deutlicher.
Auf dem Bildschirm eines Mobilgeräts wird der Unterschied noch deutlicher. Die responsive Ansicht muss die Größe des Bilds reduzieren und schneidet das Bild deshalb ab. Das Bild mit den Steinen behält seine semantische Integrität bei, obwohl ein wesentlicher Teil des Bilds abgeschnitten werden muss, um es auf dem kleineren Bildschirm darzustellen.

Zurück nach oben

 

Grenzen des Designs und ungewöhnlich lange Textstrings

Wir haben uns sehr bemüht, alle möglichen Eingaben zu berücksichtigen. In seltenen Fällen können jedoch in bestimmten Browsern und Konfigurationen außergewöhnlich lange Wörter oder URLs in von Benutzern eingegebenen Inhalten das Layout bestimmter Startseiten-Widgets verunstalten. Deshalb empfehlen wir, keine URLs oder ungewöhnlich lange Wörter in den Titeln von Kampagnen oder Ideen zu verwenden. Manche Widgets können lange Texteingaben verarbeiten. Wir empfehlen daher, in den obengenannten Fällen ein Layout mit diesen Widgets wie dem „horizontalen Kampagnen-Widget“ zu verwenden, das mehr Platz für Text bietet (siehe unten).

Zurück nach oben

 

Schriftarten

Benutzerdefinierte Schriftarten stellen nicht nur ein Sicherheitsrisiko dar, sie verursachen oft auch lange Seitenladezeiten. Darüber hinaus sind viele CSS-Regeln für benutzerdefinierte Schriftarten nicht über alle Plattformen hinweg standardisiert, was die Erstellung einer einheitlichen Ansicht für alle Benutzer unabhängig von deren Bildschirmkonfiguration erschwert. Aus diesen Gründen unterstützen wir derzeit benutzerdefinierte Schriftarten nicht.

Zurück nach oben