Media Queries liefern die Seite aus


Media Queries: Wie wird mit Hilfe von Media Queries die richtige Seite ausgeliefert?

Soll der Inhalt einer Internetseite für einen Ausdruck auf Papier formatiert werden, muss die entsprechende CSS Datei mitgeliefert werden. Eine CSS-Datei ist eine Formatierungsdatei die dafür sorgt, dass wie z. B. in Microsoft Word ein Text oder Textabschnitt fett, kursiv, groß oder klein, etc. geschrieben wird. Die CSS-Datei beachtet jedoch nicht nur die einzelnen Textabschnitte, sondern auch die Internetseite als ganzes. Dynamische Elemente, Bilder, Grafiken, Farben ja sogar ein Logo kann mit der entsprechenden Datei verändert werden. Der Internetbrowser steht in permanenter Kommunikation mit der CSS-Datei. Der Browser fragt ab, wie er die Internetseite nun darzustellen hat. Für mobile Seiten wird ihm dies durch den „Viewport“, also die sichtbare Fläche eines Monitors, mitgeteilt. Er vermittelt die Information, dass es sich zum Beispiel um ein Tablet oder ein Smartphone handelt und welche Ausrichtung (Hoch- oder Querformat) das Gerät gerade hat.

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. Was so automatisch aussieht ist Hirnschmalzarbeit von Grafikern und Webdesignern. Sie konzeptionieren und kreieren Layouts in den verschiedenen Darstellungsweisen und überlegen sich wie einzelnen Elemente angeordnet werden oder welche Elemente bei der Darstellung auf Smartphones gar verschwinden. 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.

 

Wer kann Ihnen bei der Planung helfen:
Webdesign & Werbeagentur DREIWERKEN GmbH
83059 Kolbermoor · Telefon: 08031 6145091
www.dreiwerken.de