Mobile Webseite erstellen aus vorhandener Desktop Webseite

[Auge]

Hallo

Das bedeutet das ich den originalCode nicht änder aber media queries einfüge und dort estimmte wie mobil alles auszusehen hat ja?

Ja.

Mein Header Bild ist eine transparente PNG mit fast 500kb und 900px Breite Mobil kann ich aber eine JPG einbinden, die vielleicht nur 60KB hätte, das muss der Mobile Browser ja auch zu wissen bekommen.

Wenn du diese Bilder per CSS als Hintergrundbilder einbinden solltest, kannst du, je nach Media-Query-Abschnitt ein anderes Bild wählen. Es gibt aber auch Techniken in HTML (srceset-Attribut und <picture>), die von den aktuellen Browsern zwar unterschiedlich aber – natürlich mit Ausnahmen – ausreichend gut unterstützt ^[1] werden. Ich habe das selbst noch nicht druchprobiert, kann also dazu nichts Näheres ausführen. Infos dazu findest du nicht nur im Reiter „Ressources“ auf den oben verlinkten Seiten, sondern auch im Wiki.

Und wie beschränkt man seine Mobile Seite auf gewisse Inhalte? ZB eine div, gibt es Code was besagt, zeige nur auf desktop?

Das ist etwas kniffliger. Du kannst diesen Block bei bestimmten Viewportgrößen per CSS ausblenden. Die Daten werden aber dennoch übertragen. Wenn es sich nicht um Daten handeln sollte, ohne deren Vorhandensein sich der Inhalt der Seite nicht erschließt, kannst du die Daten in Abhängigkeit der Viewportgröße auch mit einem Ajax-Request nachladen. Wenn die Daten für das Verständnis der Seite hingegen unerlässig sind, verbietet sich ein Ausblenden bei kleinen Viewports von selbst.

Tschö, Auge

---

1. Zu den Browsern, die das nicht unterstützen, gehören der IE (Desktop, lädt, wie ehedem, das in <img src=""> angegebene Bild), Opera Mini (Asbach Uralt) und Safaris, deren nächste Versionen Unterstützung bringen sollen. Die werden typischerweise von den Nutzern recht schnell aktualisiert, so dass das ein vorübergehendes Manko ist. ↩︎