Mobilmachung
Optimierung für Mobilgeräte
- Private Websites für iPad, iPhone & Co. optimieren
- Optimierung für Mobilgeräte
- Syntax und HTML5
Grundregeln fürs Design
Wer seine private Website nicht vollständig umkrempeln will, kann sie zunächst für mobile Geräte optimieren, ohne sofort auf HTML5 umzustellen. Der Schritt zu HTML5 ist später umso einfacher. Unabhängig von der verwendeten Sprache gibt es für mobiltaugliche Websites Grundregeln, deren Anwendung dringend zu empfehlen ist.
Wenn Sie diese Tipps beherzigen, wird Ihr Web-Auftritt sowohl am PC und Mac als auch auf Tablets und Smartphones richtig und weitestgehend identisch dargestellt.
- Kein Tabellen-Layout, keine Frames:
Grundbausteine eines ordentlichen Layouts sind Container (div), die sich beinah beliebig mit- und ineinander verschachteln lassen. Tabellen-Layouts führen auf vielen Mobilgeräten zu Problemen, Frames werden von den allermeisten mobilen Browsern gleich gar nicht unterstützt.
- Fließendes Layout:
Definieren Sie alle div-Container mit relativen Abmessungen. Anstatt einer festen Website-Breite in Pixeln wählen Sie lieber prozentuale Angaben. Schreiben Sie in CSS also beispielsweise:
.Seiten_Container { width: 100%;
height: auto; }
anstatt
.Seiten_Container { width: 900px;
height: 600px; }
Auch untergeordnete Elemente sollten prozentual definiert werden, wann immer es möglich ist. Zusätzlich geben Sie die minimale und maximale Breite in Pixeln vor - so verhindern Sie zum Beispiel, dass ein Menü nicht richtig sichtbar oder übermäßig breit ist:
.Menue_Container { width: 15%; height:
auto; min-width: 100px; max-width:
200px; }
Schließlich müssen Sie die Position nebeneinander liegender div-Container zueinander definieren. Mit float: left; steht der Container links und wird rechts von nachfolgenden Elementen umflossen. Die Festlegung float: right; stellt den Container auf die rechte Seite innerhalb des Eltern-Elements, nachfolgende umfließen ihn links.
- Relative Positionierung:
Weil bei unterschiedlichen Display-Größen nicht vorhersehbar ist, wie viel Fläche für die HTML-Elemente verfügbar ist, sollten Sie die absolute Positionierung vermeiden. Bei Angaben wie
.Extra_Inhalt {
position: absolute;
top: 200px; left:
300px; }
passiert es leicht, dass der Container außerhalb der sichtbaren Fläche steht oder abgeschnitten wird. Nutzen Sie besser die relative Positionierung:
.Extra_Inhalt { position: relative;
top: 10%; left: 20%; }
Prozentangaben anstelle von Pixel-Werten sorgen auch hier für ein fließendes Layout. Die relative Positionierung orientiert sich immer am übergeordneten Element.
- Inline- und Block-Elemente:
Definieren Sie für alle Elemente ganz genau, ob sie nebeneinander oder nacheinander folgen. Die Angabe
display: block;
entspricht dem Standard für div-Container und sorgt dafür, dass mit dem Element eine neue Zeile im Textfluss erzeugt wird. Wenn Container hingegen nebeneinander stehen sollen, muss für jeden
display: inline;
festgelegt werden. Aufgepasst: Sind zwei oder mehr inline-Elemente zusammen breiter als das übergeordnete Element, werden sie untereinander dargestellt. inline-Elemente dürfen Text und weitere inline-Elemente enthalten, aber in der Regel keine block-Elemente.
- Relative Textgrößen:
Nicht nur die Layout-Struktur sollte flexibel sein - auch die Textgrößen müssen sich an die Display-Größe automatisch anpassen. Das geschieht bei prozentualen und bei em-Angaben, jedoch oft nicht bei Größendefinitionen in Pixeln. Legen Sie am besten zuerst für das ganze Dokument eine Standard-Textgröße fest:
p, h1, h2, h3, { font-size: 120%; }
Jetzt variieren Sie die Größe der einzelnen Textarten mittels em-Angaben, zum Beispiel:
p { font-size: 0.9em; }
h1 { font-size: 1.8em; }
Wichtig für mobile Websites sind Texte, die auch auf kleinen Displays noch gut lesbar sind. Experimentieren Sie mit der Textgröße so lange, bis das der Fall ist.
- Komprimierte Bilder:
Da viele Bilder auf Webseiten für ein hohes Datenvolumen und damit eine langsame Übertragung sorgen, sollten Sie prüfen, welche Sie weglassen können. Hintergrundbilder und Zierelemente werden zudem mobil oft nicht richtig dargestellt. Wichtig ist auch, eine möglichst hohe JPEG-Komprimierung zu nutzen.
- Keine Flash-Elemente:
Da nur ein kleiner Teil der mobilen Endgeräte Flash-Animationen darstellen kann, sollten Sie auf Flash komplett verzichten. HTML5 bietet Möglichkeiten zum Einbinden von Video- und Audiodateien in die Website. Menüs lassen sich anstatt mit Flash auch mit HTML4/HTML5, CSS und JavaScript ansprechend gestalten.
- Touch-Schaltflächen und Links:
Mobile Devices werden durch Berühren des Displays mit den Fingern gesteuert. Wenn Buttons und Links auf Ihrer Website zu klein sind, ist diese Art der Steuerung kaum möglich. Achten Sie deshalb darauf, ausreichend große Schaltflächen und Link-Texte anzubieten.
