@@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_{: lang="en"} 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_{: lang="en"}: 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](http://webkrauts.de/artikel/2008/das-richtige-grafikformat-fuer-den-richtigen-zweck) 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](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/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_{: lang="en"} umgesetzt sein. Das Menü links auf kleinen Viewports oben, eventuell auch so, dass es erst auf Nutzeraktion reinfährt. > - [www.lochost.de](http://www.lochost.de) (so soll die Desktop Version aussehen - überarbeitungswürdig) Bitte keinen _splash screen_{: lang="en"}. 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.”_{: lang="en"} —Vitaly Friedman in [Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”](https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/) _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}

@@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_{: lang="en"} 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_{: lang="en"}: 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](http://webkrauts.de/artikel/2008/das-richtige-grafikformat-fuer-den-richtigen-zweck) 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](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Sprites) zusammenfassen. Oder gar nicht erst Textgrafiken verwenden. Gibt es die Schriftart nicht als Webfont? Ich sehe jedenfalls nicht, warum du für kleine Viewport ein anderes Layout verwenden müsstest als für große. Es müsste natürlich _responsive_{: lang="en"} umgesetzt sein. Das Menü links auf kleinen Viewports oben, eventuell auch so, dass es erst auf Nutzeraktion reinfährt. > - [www.lochost.de](http://www.lochost.de) (so soll die Desktop Version aussehen - überarbeitungswürdig) Bitte keinen _splash screen_{: lang="en"}. 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.”_{: lang="en"} —Vitaly Friedman in [Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”](https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/) _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}

@@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_{: lang="en"} 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_{: lang="en"}: 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](http://webkrauts.de/artikel/2008/das-richtige-grafikformat-fuer-den-richtigen-zweck) 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](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Sprites) zusammenfassen. Oder gar nicht erst Textgrafiken verwenden. Gibt es die Schriftart nicht als Webfont? Ich sehe jedenfalls nicht, warum du für kleine Viewport ein anderes Layout verwenden müsstest als für große. Es müsste natürlich _responsive_{: lang="en"} umgesetzt sein. Das Menü links auf kleinen Viewports oben, eventuell auch so, dass es erst auf Nutzeraktion reinfährt. > - [www.lochost.de](http://www.lochost.de) (so soll die Desktop Version aussehen - überarbeitungswürdig) Bitte keinen _splash screen_{: lang="en"}. 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.”_{: lang="en"} —Vitaly Friedman in [Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”](https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/) _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}