Tutorials
CSS für Smartphones
Warum für Smartphones optimieren?
Ich denke diese Frage lässt sich relativ leicht beantworten: Immer mehr Menschen besitzen ein sog. Smartphone mit dem sie im Internet surfen können. Gerade große Portale oder Firmen sollten es sich daher nicht nehmen lassen ihre Seiten etwas komforttabler für Smartphone's zu präsentieren.
Aber warum sollten nur Firmen oder Portale ihre Webseiten für Smartphones optimieren?! Auch der private Webmaster kann dafür sorgen, dass man seine Seiten bequem über ein iPhone o.ä. abrufen kann.
Wie optimieren?
Das optimieren für mobile Endgeräte ist relativ einfach. Man muss nicht unbedingt gleich die Seiten neu schreiben. Es reicht schon eine Eigenschaft im CSS und ein kleines Meta-Tag, um schnell und einfach für mobile Endgeräte zu optimieren.
Das CSS:
Es gibt einen ganz speziellen Selektor der für viele Smartphones funktioniert:
@media all and (max-width: 600px){
/* Mobile-Eigenschaften */
}
Das Meta-Tag:
Im Head-Bereich der Seite gibst du dann noch eine Art Zoom an:
<meta name="viewport" content="width = 320" />
Und dann?
Danach kann man anfangen das CSS so zu ändern, dass die Webseite auf dem Smartphone gut dargestellt wird. Man kann z.B. unwichtige Teile der Seite entfernen, um Platz zu gewinnen. Auch uninteressante Teile der Navigation bzw. Webseite können entfernt werden. Dass kann man z.B. über eine Klasse "nosmart" o.ä. machen, welche man dann im "Mobile-CSS" einfach ausblendet.
Wer Inspiration sucht, schaut einfach mal mit einem Smartphone auf den Webseiten großer Portale und Firmen vorbei. Viele davon sind optimiert und liefert gute Anregungen zum designen von Navigation!
Tipp für's iPhone:
Für das iPhone gibt es ein Link-Tag mit welchem man ein Favoriten-Bild festlegen kann. Legt sich ein iPhone-Nutzer deine Webseite unter Favoriten ab, so erscheint dieses Bild auf dem Homescreen des Nutzers.
<link rel="apple-touch-icon" href="pfad/logo.gif" type="image/gif" />
Sehr schönes CSS
Danke für deinen Beitrag, er hat mir echt bei meiner opensource Anwendung weitergeholfen. Wollte das ganze nämlich für Smartphones optimieren, da ich nicht unbedingt eine App erstellen möchte :)