Mobilmachung

Optimierung für Mobilgeräte

30.3.2011 von Sven Hähle

ca. 2:50 Min
Ratgeber
VG Wort Pixel
  1. Private Websites für iPad, iPhone & Co. optimieren
  2. Optimierung für Mobilgeräte
  3. Syntax und HTML5

Grundregeln fürs Design

image.jpg
Der Opera-Mini-Simulator zeigt, wie Websites im beliebten norwegischen Mobil-Browser aussehen.
© PC Magazin

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:
image.jpg
Die Website Browserhots.org vereinfacht das Testen Ihrer privaten Website in verschiedenen Browsern.
© PC Magazin

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.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

So kündigen Sie Ihre ADAC-Mitgliedschaft online per E-Mail.

Automobilclub

ADAC-Mitgliedschaft kündigen: So einfach geht's online…

Wer seine ADAC-Mitgliedschaft kündigen möchte, bekommt hier aktuelle Tipps. Wir zeigen Ihnen, wie das online per Formular oder E-Mail möglich ist.

Netflix

Kosten, Apps, Kündigung und Co.

10 wichtige Fragen zu Netflix in Deutschland

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.

whatsapp alternativen

Für Android, iPhone, iPad & Co.

Whatsapp Alternativen: Die 10 besten Messenger-Apps

Es gibt keine Whatsapp-Alternative? Quatsch! Diese Messenger-Apps für Android, iOS und PC sind der perfekte Ersatz.

Spam-Mails

Sicherheit

Phishing-Mails erkennen: 6 Tipps gegen E-Mail Betrug

Betrüger versenden E-Mails, die es auf Ihre Daten und Ihr Geld abgesehen haben. Wie Sie Phishing-E-Mails erkennen und sich schützen.

Facebook-Betrug mit Fake-Profilen

Gefälschte Facebook-Konten

Facebook-Betrug mit Fake-Profilen - wie Sie sich und Ihre…

Betrüger nutzen gefälschte Facebook-Profile, um Geld zu ergaunern. Wir zeigen, wie Sie sich und auch Ihre Facebook-Kontakte gegen die Betrugsmasche…