Martin: Includes und media query

Hallo zusammen,

ich baue gerade meine Webseite um. Der Server auf dem meine Webseite liegt unterstützt die Inkludierung von HTML Schnippseln mit der Funktion Include (#include virtual). Diese möchte ich auch gerne nutzen, da ich so viel Verwaltungsaufwand einzusparen hoffe.

Situation und Wunschdenken:

Ich möchte für meine Webseite eine mobile und eine Desktop Version erstellen, welches mittels media query erreicht werden soll. Die moblie Version, ohne viele Grafiken und fast nur mit CSS, funktioniert bisher sehr gut. Jetzt möchte ich jedoch, wenn es sich (wahrscheinlich) um einen Desktop Rechner handelt, ein gänzlich anderes Design aufrufen. Durch die vermehrte Nutzung von Grafiken würde sich auch der html Code der einzelnen Schnippsel ändern.

Jetzt meine Frage:

Ist es möglich mittels media query verschiedene Schnippsel in die HTML Seite zu integrieren? Oder wie wäre soetwas sonst möglich? Muss ich mir etwas ganz anderes überlegen oder einfach auch in der Desktop Version die Grafiken weglassen?

Hier die Webseiten:

  • www.lochost.de (so soll die Desktop Version aussehen - überarbeitungswürdig)
  • arbeit.lochost.de (so sieht die mobile Version momentan aus - nicht fertig)

Schon mal vielen Dank für die Hilfe Schönen Gruß Martin

  1. Servus!

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

    Ja, in JavaScript gibt es matchMedia(mediaQueryString)

    Bedingungen abfragen und dann Inhalte dynamisch nachladen.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun - packen wir's an: ToDo-Liste gewünschte Seiten
  2. @@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:|
  3. @@Martin

    Ja.

    Schauen wir mal:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    

    Auf einer deiner Unterseiten hab ich gesehen, dass du da dran bist, das auf <!DOCTYPE html> umzustellen und auch die Sprache in <html lang="de"> anzugeben?


    <div align="center"><a href="index2.shtml"><img src="/bilder/grundgrafik/eingang.gif" alt="[ Bitte auf das Eingangsbild klicken ]" border="0"></a><span class="bildunterschrift"><br>
    Um zur eigentlichen Seite zu gelangen bitte auf das Eingangsbild klicken</span></div><br>
    

    Präsentationsbezogene Attribute wie align="center" und border="0" haben in HTML nichts zu suchen. Darstellung ist Sache von CSS.

    Der Alternativtext ist nicht sinnvoll. Nicht nur wegen der eckigen Klammern. Warum sollte jemand „Bitte auf das Eingangsbild klicken. Um zur eigentlichen Seite zu gelangen bitte auf das Eingangsbild klicken“ zu lesen/hören bekommen?

    br-Elemente sollten im HTML nur in Ausnahmefällen auftreten (Postadressen, Gedichtszeilen). Für „Um zur eigentlichen Seite zu gelangen bitte auf das Eingangsbild klicken“ ist das p-Element das richtige. Da dieses ein Blockelement ist, brauchst du kein br.

    Warum leitest du von dem Text zum Bild; warum ist nicht auch der Text selbst anclickbar? Also beides – img und p – in das a-Element.

    Aber „zur eigentlichen Seite“[1] verdeutlicht schon das Problem. Eine uneigentliche Seite sollte es gar nicht geben. Binde die Navigation auf diese Seite ein und spare den Link zur „eigentlichen Seite“.

    Diese Seite ist für Neuigkeiten. Binde sie als solche mit in die Navigation ein.


    <div class="news">
      <div class="ueberschrift">Die letzten Neuigkeiten vom Herold der Hallen</div>
    

    So nicht. Überschriften müssen als solche ausgezeichnet werden. Bei <div class="ueberschrift"> versteht der Browser nicht, dass es sich um eine Überschrift handelt, und kann diese Information bspw. nicht an einen Screenreader weiterleiten. Nutzer von Screenreadern hangeln sich aber gerade anhand von Überschriften durch eine Seite.

    Zur Auszeichnung von Überschriften dienen (in absteigender Hierarchie) die Elemente h1, h2 bis h6. h1 ist für die Hauptüberschrift(en). Das wäre auf dieser Seite bspw. „Neuigkeiten“. Die jeweiligen Überschriften in den Kästen wären dann die nächste Hierarchie-Ebene: h2.

    Eine vorhandene Überschrift ist ein sicheres Zeichen dafür, dass der Bereich nicht mit div, sondern besser mit section o.ä. auszuzeichnen wäre. Auf dieser Seite könnten die einzelnen Neuigkeiten auch articles sein. Also:

    <section class="news">
      <h2>Die letzten Neuigkeiten vom Herold der Hallen</h2>
    

    oder

    <article class="news">
      <h2>Die letzten Neuigkeiten vom Herold der Hallen</h2>
    

    class="news" hab ich mal dringelassen, vermutlich brauchst du das aber nicht. Dafür bietet es sich an, section bzw. article eine ID zu geben. Das könnte hier id="herold-der-hallen" sein oder (besonders wenn das automatisch erzeugt wird) id="Die-letzten-Neuigkeiten-vom-Herold-der-Hallen". Oder auch im zweiten Fall die Großbuchstaben in Kleinbuchstaben umwandeln.


    <p>HINWEIS ZUM MICROSOFT INTERNET EXPLORER</p>
    <p>Diese Seite wurde mittels sogenannter Cascading Stylesheets
    (CSS) erstellt. Ältere Versionen des Internetexplorers interpretieren aber viele Angaben
    im CSS nicht korrekt. Erst mit dem IE Version 7 werden die meisten
    dieser Angaben korrekt interpretiert. Es wurde zwar eine Version auch
    für ältere Versionen des Internet Explorers eingefügt, jedoch kann es
    hier trotzdem zu Darstellungsfehlern kommen.
    

    Vergiss nicht, diesen Abschnitt ersatzlos zu streichen.

    Und die „Valid-HTML“- und „Valid-CSS“-Bapperl möchte das Jahr 2006 auch gerne zurückhaben.

    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:|

    1. Du meinst eigentlich Site. Eine Website sind alle zusammengehörigen Webseiten unter einer Domain. ↩︎

  4. Wow, hier wird man ja mit Vorschlägen erschlagen. Vielen Dank.

    Also, die www.lochost.de soll ersetzt werden mit einer html5 und css3 konformen Version. Die Seite ist schon uralt und nicht wirklich für kleine Bildschirmgrößen ausgelegt. Das will ich ändern.

    Die Seite arbeit.lochost.de ist meine Arbeitsversion um live zu schauen wie es auf verschiedenen Geräten aussieht.

    Für die mobile Version wollte ich, wegen dem Datenvolumen und den Bandbreiten, möglichst wenige Grafiken verwenden.

    Die "Desktop Version" sollte dafür grafisch etwas ansprechender und dem Thema angepasst sein. Beide Designs sollen dann unter einer Domain laufen (www.lochost.de). Daher wollte ich das mit Media query machen um je nach Viewport das "richtige" Design anzeigen zu lassen.

    Von Java Script habe ich jetzt gar keine Ahnung. Mal sehen wie ich das dann umsetzen kann. Muss ich mich da halt auch einlesen. ;-)

    Auf alle Fälle habt ihr mir schon sehr geholfen.

    Danke nochmal!

    1. @@Martin Glaw

      Für die mobile Version wollte ich, wegen dem Datenvolumen und den Bandbreiten, möglichst wenige Grafiken verwenden.

      Die "Desktop Version" sollte dafür grafisch etwas ansprechender und dem Thema angepasst sein.

      Die „mobile Version“ sollte auch ansprechend und dem Thema angepasst sein.

      Aber am besten löst du dich ganz schnell von dem Gedanken, dass es so etwas wie eine „mobile Version“ und eine „Desktop-Version“ gibt. Die Gerätelandschaft ist ein Kontinuum: von kleinen Smartphones über welche, die kaum noch in die Tasche passen; Phablets; Tablets; PCs mit Bildschirmen, die weniger Pixel haben als manch Tablet; Fernseher; …

      Die Kunst des responsive design liegt nicht darin, zwei Versionen anzubieten; sondern die Seiten so zu bauen, dass sie sich optimal an das jeweilige Gerät anpassen. Wie Jeremy Keith sagt: „dass es nicht ein einziges Nutzerinterface gibt – es kann viele leicht verschiedene Interfaces geben, abhängig von den Eigenschaften und Fähigkeiten des jeweiligen Browsers und Gerätes zum jeweiligen Zeitpunkt.“

      Und löse dich von dem Gedanken, dass Viewportgröße zwingend was mit Bandbreite zu tun hätte. Wenn ich mit dem Laptop unterwegs bin (großer Viewport), wird die Verbindung zum Internet über das Smartphone (Mobilfunk) hergestellt. Andererseits bin ich oft mit dem Smartphone in irgendeinem WLAN mit Verbindung zum Internet über DSL.

      Und es gibt sicher auch Gegenden, wo das Mobilfunknetz mittlerweile schneller ist als DSL übers Kabel.

      Was also tun? Gestalte die Seiten so, dass sie sich anpassen. Bspw. Breite fürs Menü und Mindestbreite für den Hauptinhalt. Wenn beides nebeneinander passt, dann wird’s nebeneinander dargestellt, ansonsten übereinander oder das Menü herausgefahren.

      Verwende für dein Menü nicht viele Einzelgrafiken, sondern eine. Entweder als Sprite oder als Imagemap. Dabei kannst du auch dafür sorgen, dass der Hintergrund nicht bei jedem Menüpunkt gleich aussieht.

      Wenn du große Bilder hast, liefere sie für verschiedene Viewportgrößen/Auflösungen in verschiedenen Größen aus (responsive images).

      So kriegst du deine Seite für alle Geräte ansprechend hin.

      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:|