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

Momentan können keine Kommentare hinterlassen werden.

DIESE KUNDEN VERTRAUEN AUF DREIWERKEN: WEBDESIGN-AGENTUR AUS ROSENHEIM

Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Die Website verwendet Cookies. Einige davon sind erforderlich, um die Funktionsfähigkeit der Website zu gewährleisten. Andere werden verwendet, um die Benutzerumgebung zu optimieren. Durch die Nutzung der Website stimmen Sie der Verwendung dieser Cookies zu. Weitere Informationen zu Cookies finden Sie in unserem Impressum.

Schließen