Tipps & Tricks:Unterschiedliche Bildgröße und -format für Handy und Desktop

Eine kleine Anleitung, wie Sie die Bildformate und Größen für mobil und Desktop unterschiedlich definieren können.
Man sieht unterschiedliche gerahmte Bilder an der Wand
Datum:
24. Mai 2024
Von:
Margit Haubrich

Mit dem letzten kleinen Zwischenupdate hat das System die Möglichkeit erhalten, die Bildformate und Bildgrößen zwischen der Desktop- und der mobilen Ansicht zu unterscheiden. Wir erklären Ihnen in diesem Artikel die Vorteile und das Vorgehen.

Vorab ein wichtiger Hinweis:

Screenshot der Einstellungen. Man sieht bei Bildgröße und -format, dass die mobile Einstellung als erstes kommt.

Ab sofort ist die erste Zeile immer der mobilen Einstellung gewidmet und erst darunter kommt die Desktop-Ansicht (das war bisher genau anders herum).

Wann ist eine Unterscheidung sinnvoll?

Es gibt mehrere Anlässe, weshalb mobil eine andere Größe oder Format gewählt werden sollte.

Beispiel 1:

Screenshot der differenzierten Einstellungen

In der Desktop-Ansicht empfiehlt es sich bei zwei Personenangaben nebeneinander, das Bild im Passbildformat zu definieren. Dieses ist auf dem Handy jedoch viel zu groß. Hier empfehlen wir für mobil eine quadratische Ansicht.


Auf dem Deskop hat das Foto eine definierte Breite von 42%, mobil würde das jedoch eigenartig aussehen, weshalb für das Handy "Vorgabe des gewählten Layouts" die beste Variante ist. Diese Lösung ist in der Regel voreingestellt. 

Zweites Beispiel

Screenshot der differenzierten Einstellungen

In diesen beiden Textfeldern wurden nur die Felder für Desktop definiert. Hier erscheinen die Bilder hochkant mit 50% Breite, weil es so besser zum Text passt.

Mobil werden die Bilder dann "Wie im Inhalt eingestellt" angezeigt.

Eine kleine Bitte

Screenshot des Entwicklertools. Farbig markiert ist der Unterscheidungsbutton zwischen Mobil und Tablet-Ansicht

Wie wir in unseren Schulungen immer empfehlen: Kontrollieren Sie Ihre Seite möglichst immer auch in der Tablet- oder in der Handyansicht. Die Mehrheit Ihrer Seitenbesucher*innen dürfe inzwischen mit mobilen Endgeräten unterwegs sein.

Sie können hierfür

  • das Browserfenster einfach kleiner schieben
  • die Seite (soweit sie veröffentlicht ist) auf dem Handy oder Tablet aufrufen
  • oder mit dem sog. Entwicklertool des Browsers die Ansicht simulieren. Das Entwicklertool erreichen Sie über die Taste F12 (mit dieser Taste verlassen Sie es auch wieder). 
    Nun suchen Sie nach einem kleinen Symbol, das ein Tablet und ein Handy darstellen soll (hier gelb markiert, es kann bei Ihnen an anderer Stelle stehen). Damit können Sie jeweils mit einem Klick zwischen beiden Darstellungen wechseln.

 

Zurück