Seitenaufbau für mobiles Web
Planen Sie die Struktur Ihrer Seiten auf dem Papier: Kopf, Kopfnavigation, Textkörper, Fußnavigation, Fußbereich. Legen Sie fest welche Inhalte in den Bereichen angezeigt werden sollen und wieviele Textzeilen die Bereiche verwenden dürfen. Orientieren Sie sich dabei nur an einem Textgerüst und vergessen Sie alles was Sie über pixelgenaues Positionieren von Seitenelementen gelernt haben.
Sie haben nur eine Spalte zur Verfügung deren Breite Sie nur schwer voraussagen können. Alle Elemente werden daher vertikal untereinander angeordnet. Wenn etwas nicht in eine Zeile paßt, dann muß Ihre Struktur es erlauben den Text umzubrechen und das Element zu verlängern.
Erstellen Sie jetzt eine Musterseite mit Fülltext (Lorem Ipsum ..) in der Sie die Seite mit den klassischen HTML-Tags der ersten Generation strukturieren:
- Jeder benannte Bereich (Kopf, Navigations-Bereiche, Textkörper, Fuß) wird mit einem DIV-Container umgeben, für den später CSS-Klassen definiert werden.
- Umfassen Sie die komplette Seite mit einem weiteren DIV-Container, dieser kann später genutzt werden um die Seitenbreite bei der Anzeige auf einem PC zu begrenzen.
- Das Logo oder Logotext im Kopfbereich bleibt unformatiert oder wird mit <bigger> vergrößert.
- Kopf- und Fußnavigation werden ungeordnete oder eine nummerierte Listen. Alternativ werden die Links mit <br /> gezielt umgebrochen.
- Der Textkörper beginnt mit einer H1-Überschrift
- Fließtext wird mit Absätzen (<p>) strukturiert
- Der erste Absatz oder wichtige Worte werden mit Fettdruck (<b>) hervorgehoben
- Unterthemen werden mit H2 bis H3-Überschriften gegliedert
- Text im Fußbereich bleibt unformatiert oder wird mit <smaller> verkleinert.
- Lange Überschriften oder einzelne Textzeilen dürfen mit einem Break (<br />) gezielt umgebrochen werden.
Das Ergebnis ist eine klar gegliederte Seite ohne stylistische Anpassungen die auf jedem Text-Browser angezeigt werden kann.
Viele mobile Geräte sind heute noch nicht in der Lage CSS für die Formatierung zu nutzen oder die Benutzer schalten CSS ab um auch Seiten für den Desktop-PC auf dem Mobilgerät anzeigen zu können. Diese Benutzer sehen die Seite genau so, wie Sie jetzt in Ihrem Browser angezeigt wird.
Optimieren Sie die Struktur der Seite bis alles am richtigen Platz sitzt und in einem schmalen Browserfenster sauber angezeigt wird. Die Schriftart und Größe ist zu diesem Zeitpunkt unwichtig, denn Mobilgeräte verwenden auf die Anzeige angepaßte Schriftarten und Schriftgrößen.
nach oben