Elemente ausblenden bei mobiler Ansicht

  • Ich nutze ein responsive Design. Jedoch würde ich gerne einige Elemente wie z.B. Kopfbilder und gewisse Textbausteine ausblenden (gesonderte div id vorhanden).

    dispaly:none ist bekannt. jedoch wollte ich wissen, ob es eine ressourecenschonendere Variante gibt.

    bei display:none werden doch die Elemente geladen, was die Ladezeit beeinträchtigt.

    Danke vorweg,

    mad

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • display:none ist bekannt. jedoch wollte ich wissen, ob es eine ressourecenschonendere Variante gibt.

    bei display:none werden doch die Elemente geladen, was die Ladezeit beeinträchtigt.

    Entschiedenes Jein.

    Wenn du bei der Herangehensweise bleibst, was normalerweise unter „responsive“ verstanden wird, bleibt dir eigentlich nur display: none.

    Eine andere Möglichkeit ist, den User-Agent auszulesen und für mobile Devices die entsprechenden Elemente gar nicht erst auszugeben.
    Das ist in Bezug auf das „Ausschnüffeln“ ein wenig kritisch zu sehen. Ich persönlich finde die wp-Funktion wp_is_mobile(); da einen ganz angemessenen Kompromiss. Allerdings muss man sich dabei im Klaren sein, dass das dann alle Mobilgeräte betrifft, auch Tablets, die vielleicht ein größeres Display haben als mein Notebook, wenn ich das Browserfenster nicht ganz aufziehe …

    Für Bilder gibt es auch noch die Möglichkeit von „responsive images“ über srcset.
    Bei Text ist drüber nachzudenken (wäre mal auszuprobieren und die Ladezeit zu messen), ob Inhalt ausgeben und über CSS nicht anzeigen lassen tatsächlich mehr Ressourcen braucht als die if-Abfrage und gesondertes Handling …

    Gruß
    helix

  • Moin helix,

    danke. Hast recht, wp_is_mobile(); ist zu "grobschlächtig".
    vermutlich werde ich display:none für die Texte nutzen und „responsive images“ für die Bilder

  • naja, man könnte mobile first vorgehen. Also erst mal alles ohne die Bilder etc. aufbauen und dann über css media query ab einer bestimmten width das (Hintergrund)bild bestimmen.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Hi maxe,

    die bestehende Seite komplett auf "mobile first" auszurichten, wäre sehr umständlich, da ich auch <img> Tags nutze. Mein Ansatz war nur für kleine Displays (480px).
    Vermutlich ist der display:none Ansatz für meine Anforderungen das beste.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!