Zum Surfen im Internet steht Nutzern eine Vielzahl von Geräten zur Verfügung, darunter PCs, Tablets oder Smartphones. Damit der Inhalt auf jedem dieser Geräte und auf den verschiedenen Bildschirmgrößen gut aussieht, müssen Websites gut dargestellt und entsprechend angepasst werden. Man spricht hier von "Responsive Design".
Besucher einer Website verwenden vielleicht ein Smartphone, wenn sie unterwegs sind, oder ein Tablet, wenn sie auf dem Sofa sitzen. Welches Gerät auch genutzt wird - wir sind vorbereitet: deine Website wird immer optimiert für das verwendete Gerät angezeigt. Durch "Responsive Design" wird sichergestellt, dass sich die Inhalte, die ein Nutzer anschaut, an das jeweilige Gerät anpassen, ohne dass die Benutzerfreundlichkeit darunter leidet.
Dies gilt insbesondere für, ist aber nicht beschränkt auf:
Im Folgenden findest du ein paar Beispiele aus der obigen Liste und wie diese Elemente auf verschiedenen Geräten aussehen können.
Hinweis
Je nach gewählter Design-Vorlage können bestimmte Elemente unterschiedlich aussehen.Header
Im Header deiner Website kannst du deine Alleinstellungsmerkmale bewerben. Wenn du mehrere Alleinstellungsmerkmale hinzugefügt hast, kann es schwer sein, alle gleichzeitig auf kleineren Bildschirmen zu lesen, wie z.B. auf Smartphones oder Tablets. Darum werden Alleinstellungsmerkmale in einem Slider-Format angezeigt, sobald deine Besucher ein Gerät mit einem kleineren Bildschirm nutzen. Die Alleinstellungsmerkmale werden nach einer gewissen Zeit gewechselt, sodass deine Besucher weiterhin alle Alleinstellungsmerkmale sehen können. Außerdem haben sie die Möglichkeit, sich manuell durch Auswählen der Pfeile das nächste Alleinstellungsmerkmal anzuzeigen.
Größere Bildschirme:
Kleinere Bildschirme:
Suchleiste
Da auf kleineren Bildschirmen weniger Platz zur Verfügung steht, wurde auch die Suchleiste für entsprechende Geräte reduziert. Die Besucher können jedoch auf die vollständige Suchleiste ganz einfach zugreifen, indem sie wählen.
Größere Bildschirme:
Kleinere Bildschirme:
Navigations-Menü
Das Navigations-Menü wird ebenfalls für kleinere Bildschirme optimiert. Während das Navigations-Menü auf größeren Bildschirmen direkt erreichbar ist, können deine Besucher auf kleineren Bildschirmen ganz einfach wählen, um das Navigations-Menü zu öffnen.
Größere Bildschirme:
Kleinere Bildschirme (mit geöffnetem Navigations-Menü):
Bilder in Inhaltselementen
Responsives Verhalten ist auch für Bilder in Inhaltselementen relevant. Der Grund hierfür ist, dass diese Bilder in der Desktop-Version vielleicht in ihrer vollen Größe dargestellt werden können, in der mobilen Version jedoch abgeschnitten werden. Je nach Originalgröße und Bildausrichtung kann das auch genau andersherum sein.
Hier siehst du die Darstellung eines Bildes auf einem größeren Bildschirm:
Und das ist der Bereich, der auf einem kleineren Bildschirm sichtbar ist:
Wie du sehen kannst, wird der obere und untere Teil des Bildes auf dem größeren Bildschirm ein wenig abgeschnitten. Andererseits werden auf dem kleineren Bildschirm Teile der rechten und linken Seite abgeschnitten.
Du hast verschiedene Möglichkeiten für den Umgang mit responsiven Bildern:
- Richte Bilder im Image-Slider aus, um die wichtigsten Bereiche eines Bildes davor zu bewahren, aufgrund der Bildschirmgröße abgeschnitten zu werden.
- Lade Bilder hoch, die der empfohlenen Bildgröße entsprechen.
- Versuche den wichtigsten Inhalt bei Bildern im Querformat in dem mittleren Drittel bezogen auf die Höhe zu platzieren. So stellst du sicher, dass dieser auch auf größeren Bildschirmen noch sichtbar ist.
- Versuche bei sehr breiten Bildern die wichtigsten Teile im mittleren Drittel bezogen auf die Breite zu platzieren, damit sie auch auf kleineren Bildschirmen noch angezeigt werden.