Bestehende Webseite responsifizieren

erstellt am: 14.06.2013 | Kategorien: Webentwicklung | Schlagworte: Responsive

Will man ein bestehendes Layout mobilfähig machen ist dazu einiges nötig.

Im einzelnen:

1. Media Query einbauen um von Desktop zu Mobil CSS zu wechseln. Das geht z.B. über folgenden Aufbau

   Farbe, Typographie und grundsätzliches Layout
   CSS für Mobil UND Desktop
   @media screen and (max-width:480px) {Link zur Mobil-CSS Datei}
   @media screen and (max-width:480px) {Link zu Desktop-CSS Datei}
   

2. Meta Tag für Zoom:

   <meta name="viewport" content="width=device-width, initial-scale=1">

3. Spaltenlayout auf einspaltig ohne Rand umbauen
4. Spaltenabfolge überprüfen: Soll heißen: Die Spalten kommen ja dann untereinander und diese Abfolge muss passen.
5. Alle Breitenangaben (Width und horizontale Margins und Padding) in Prozentwerte umwandeln. Dabei muss man die Größen in Pixeln des aktuellen Elementes im Verhältnis zum Elternelemet angeben. Das geht über:

   (Größe des aktuellen Element / Größe des Elternelement) * 100 = Prozent Wert der Breite

   Generell müssen Width angebeben werden.

6. Schriftgröße:Font Größe für Body auf 100% setzen und die restlichen mit em angeben
7. Sich um die großen Brocken kümmern. z.B. große Bilder gar nicht darstellen oder kleinere Version laden. Andere Bilder können über

   img { max-width:100%}

   fluid gemacht werden. Videos am besten über ein iframe aus YouTube einbinden.

8. Mobile-first: Das heißt eigentlich nur, dass man erst den Mobilstyle angibt und dann den Desktopstyle zum progressive Enhencement
9. Schauen ab welcher Browsergröße man von Desktop auf Mobile-CSS wechselt

Kommentare wurden abgeschlossen.