Webdesign für Smartphones

Wurbelfritzer Sepp (wbcemaster!) on 13.01.2013

Responsive Templates

Das Thema "Responsives Webdesign" brummt ziemlich: Kaum ein Besucher will heute noch in frickeligen Menüs herumzoomen, man hat sich einfach daran gewöhnt, dass eine Website mit dem Daumen bedienbar ist.
Für Webdesigner ist das oft eine Herausforderung. Hat man das Prinzip mal verstanden, kann man aber gut damit zurechtkommen.

"Responsives Webdesign" - so funktioniert das

Der Trick ist relativ simpel: Mit etwas CSS fragt man nach der Breite des Bildschirms (bzw des Fensters) und überschreibt vorher gemachte Angaben, wenn dies nötig ist.

Zb:

.wrapper {
width:70%;  /*hier eine %-Angabe!*/
max-width:960px;  /*hier eine Pixel-Angabe*/
}

@media screen and (max-width: 480px) {
.wrapper {width:100%;}  /*volle Breite auf kleinen Schirmen*/
}

Dieses Spiel mit Prozentangaben und (wenn nötig) max-width zieht man durch.

Auf ältere Browser muss man dabei keine Rücksicht nehmen: Für diese gilt stets die Desktop-Version, weil man sinnvollerweise die Ausnahmen für Handys macht. 
Natürlich kann man auch Angaben für größtere Bildschirme machen, diese wird ein alter Browser eben gnorieren.

Eine wichtige Stellung nehmen Bilder ein:

style="float:left; width:24%; margin-right: 1%;"
bewirkt, dass das Bild auf einem Handy viel kleiner als auf dem Desktop ist  - eben 24% der Spaltenbreite, mit einem Prozent Abstand.
Auf eine Höhenangabe muss man dabei verzichten, sonst wird das Bild verzerrt.
Alternativ hilft: height: auto ! important

Es gibt Ansätze, die Auflösung der Bilder schon beim Ausliefern vom Server anzupassen. Das ist ein komplexes Thema und nicht unbedingt vernünftig.
Durch das Umrechnen der Bilder verlängert sich die Antwortzeit und Serverlast deutlich. Die Bilder müssen neu komprimiert werden, was die Dateigröße aber nicht immer kleiner macht, trotzdem aber die Qualität stark verringert.
Und nicht zuletzt haben Smartphones eine hohe Pixeldichte und die Möglichkeit zu Zoomen. Etwas Overhead ist daher nicht so schlecht.
Die Ladezeit? Mobile Geräte haben nicht unbedingt eine langsame, aber eine instabile Leitung. Die Dateigröße selbst spielt nicht _so sehr_ eine Rolle.

Wie sag ichs dem Smartphone?

Smartphones gehen zunächst davon aus, dass eine Website für den Desktop gemacht wurde und tun daher so, als ob sie eine Auflösung von 980 Pixel Breite hätten.
Um das zu ändern, müssen Meta-Tags gesetzt werden:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Das sagt dem Smartphone, dass es die Breite so annehmen soll, wie es am besten zum kleinen Bildschirm passt (Das kann 320 Pixel sein, aber auch größer)

Back

Comments

13.01.2013

chio

So und kommentieren am Handy?

15.01.2013

chio

Jo, mhsam aber geht

19.01.2014

Christoph

Danke fr die Responsive Design Infos. Luft einfacher als bei den "grossen" CMS!

13.10.2014

DigitalOcean Codes

Vielen Dank fr die ntzlichen Codes.

27.11.2014

sepp

Und jetzt ein Test mit AJAX

Kommentar

email address:
Homepage:
URL:
Comment:

Name:

E-Mail (required, not public):

Website:

Kommentar :

Prüfziffer:
19 minus 1  =  Bitte Ergebnis eintragen