Keine festen Bildgrößen im Responsive Webdesign

15.01.2014 -

Auch Bilder müssen entsprechend skaliert werden. Obendrein sollen sie auf den hochauflösenden Retina-Displays gut aussehen und scharf dargestellt werden. Eine Zwickmühle. Werden sie auf dem stationären PC mit großen Bildschirm und schnellem Internet flott geladen und gestochen scharf dargestellt, kann ein zu großes Bild zu langen Wartezeiten führen, wenn man mit dem Smartphone unterwegs ist.

Abhängig von der Bildschirmauflösung lädt beispielsweise ein JavaScript Plug-In der Filament Group die gewünschte Grafik. So wird die Ladezeit verkürzt und die Nerven des Nutzers geschont. Eine weitere Option über HTML die korrekte Bildgröße auszuliefern bietet Adaptive Images.

 


Wie wird die richtige Seite ausgeliefert?
Soll der Inhalt einer Internetseite für einen Ausdruck auf Papier formatiert werden, muss die entsprechende CSS Datei mitgeliefert werden. Der Browser fragt ab, wie er die Seite nun darzustellen hat. Für mobile Internetseiten wird ihm dies durch den „Viewport“ mitgeteilt. Er vermittelt die Information, dass es sich zum Beispiel um ein Tablet handelt. Ist diese Information ausgewertet, lassen sich über CSS3 Media Queries bequem die Inhalte anpassen. So wird der Inhalt der responsiven Internetseite auf dem Tablet nicht mehr auf 100% angezeigt, sondern skaliert auf 65%. Auch Schriftgröße und Bereiche wie Header und Footer lassen sich auf diese Weise komfortabel steuern. Seitenleisten für die Darstellung einer Navigation oder Kategorien können neu positioniert oder komplett ausgeblendet werden.
Der Inhalt wird also nicht automatisch korrekt in Position gerückt. Planung ist bei Responsive Webdesign extrem wichtig. Nur so kann eine perfekte Internetseite entstehen, die sich auf jede beliebige Größe einlässt.

 

 

Vorsicht Stolperfallen: Worauf müssen Sie achten, wenn Sie planen eine Responsive Webseite zu entwerfen?

1. Der Browser muss CSS3 Media Queries beherrschen und mit diesen umgehen können.
2. Achten Sie auf die Ladezeiten der Seite. Passen Sie mediale Inhalte entsprechend an.
3. JavaScript hilft bei der Entwicklung, kann aber auch zu langen Ladezeiten führen.
4. Navigation ist nicht gleich Navigation! Ein Touchscreen reagiert nicht auf Mouseover Effekte.
5. Der Inhalt der Internetseite muss gut bemessen sein. Andernfalls können Seiten lang werden und weit unter den Fold, also den unteren Bildschirmrand führen.

© EGARA-CMS ist ein urheberrechtlich geschütztes Produkt der DREIWERKEN GmbH - Ihrer Werbeagentur für Online- und Print-Medien aus Kolbermoor (bei Rosenheim).