Webseiten Handy tauglich gestalten

Es gibt zwei möglichkeiten um eine Webseite auf mobilen Geräten anzuzeigen. Die erste ist die mobile Anzeige und wird von Grund auf mit eigener CSS-Programmierung gestaltet. Der HTML-Editor liest  die Pixelgröße des Geräts aus und folgt der Weiche zum CSS-Link.

Die zweite möglichkeit ist das responsive Design, wobei sich die Webseite den vorhandenen Pixeln anpasst. Das kann ein fließender Prozess sein z.B durch Prozentangaben:

#wapper: {width: 1000px;}

wird dann zu

#wapper: {width: 80%}

Die ID wapper zeigt dann eine Breite von 80% an, egal ob auf dem Handy mit 720 Pixeln oder einen Monitor mit 1920 Pixeln. Natürlich muß sich der Inhalt der Umgebung anpassen. Darum sollten alle angaben in Prozenten angegeben werden:

img {
height: auto;
max-widht: 100%;
}

Oder durch Mediaqueries den CSS-Code beeinflussen.

Nachteil des responsiven Designs ist dass der ganze Code der Webseite geladen wird, bei der mobilen Version wird nur der dafür benötigte Teil der CSS geladen.

Comments are closed.
*Pflichtfeld