Gunnar Bittersmann: Includes und media query

Beitrag lesen

@@Martin

Ich möchte für meine Webseite eine mobile und eine Desktop Version erstellen

Damit meinst du nicht zwei Versionen unter verschiedenen Adressen (Subdomains), oder?

Ist es möglich mittels media query verschiedene Schnippsel in die HTML Seite zu integrieren?

Nein. Media queries leben innerhalb des Stylesheets. Du steuerst damit die Darstellung desselben HTML-Dokuments unter verschiedenen Gegebenheiten (bspw. bei verschiedenen Viewportgrößen). Du kannst damit nicht verschiedenes HTML ausliefern.

Oder wie wäre soetwas sonst möglich?

Per JavaScript Inhalte nachladen – progressive enhancement: in der Grundversion ist es ein Link; wenn genügend Platz (Bandbreite, Datenvolumen, …) zur Verfügung steht, wird jener Inhalt direkt in die Seite eingebunden.

Muss ich mir etwas ganz anderes überlegen oder einfach auch in der Desktop Version die Grafiken weglassen?

Warum? Warum willst du die Grafiken nicht auch auf kleinen Geräten?

Die Grafiken sind ja nicht allzu groß. Außer papiermitte.gif – das ist im falschen Grafikformat. Das sollte kein GIF, sondern JPEG sein; papieroben.gif und papierunten.gif ebenso.

Das Problem ist eher, dass es viele Grafiken sind. Viele HTTP-Requests sind insbesondere durch die Latenz im Mobifunknetz ein Problem. Du solltest Grafiken in Sprites zusammenfassen.

Oder gar nicht erst Textgrafiken verwenden. Gibt es die Schriftart nicht als Webfont?

Ich sehe jedenfalls nicht, warum du für kleine Viewports ein anderes Layout verwenden müsstest als für große. Es müsste natürlich responsive umgesetzt sein. Das Menü links auf kleinen Viewports oben, eventuell auch so, dass es erst auf Nutzeraktion reinfährt.

  • www.lochost.de (so soll die Desktop Version aussehen - überarbeitungswürdig)

Bitte keinen splash screen. Es hat mich eine Ewigkeit gekostet herauszufinden, wie man zu den Inhalten kommt.

LLAP 🖖

--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|