Verhindern Herunterladen von unnötigen Inhalten je nach Bildschirmgröße

Ich baue eine responsive Website, auf der ich eine Nachrichtenabteilung habe. Abhängig von der Bildschirmgröße des Besuchers hat dieser Bereich entweder 2, 3 oder 4 Nachrichten. Momentan liefert das cms (modx) immer 4 Nachrichten und wenn der Benutzer ein kleines Viewport haben sollte, verberge ich die zusätzlichen Nachrichten mit Medienabfragen.Verhindern Herunterladen von unnötigen Inhalten je nach Bildschirmgröße

Dies scheint nicht sehr effizient (es verwendet zusätzliche Bandbreite für Menschen mit kleinen Bildschirmen). Auch mit dem oben genannten Ansatz bekomme ich Probleme mit "neueren Posts", "älteren Posts" -Typ Navigation (weil das Klicken auf "ältere Beiträge" immer 4 ältere Beiträge laden wird, während einige Leute nur 2 oder 3 brauchen).

Gibt es eine bessere, zuverlässige Möglichkeit, dies zu tun? Ist es möglich, das Servieren von Nachrichten reaktionsfähiger zu machen? Mit anderen Worten: Wie verhindere ich, dass basierend auf der Bildschirmgröße unnötige Inhalte heruntergeladen werden?

Quelle

2013-03-19 Anonymous

Einer der Nachteile von Responsive Design im Vergleich zu separaten Websites ist, dass der Inhalt heruntergeladen wird, auch wenn es mit CSS versteckt ist - ein Weg um dies zu sein wäre, bestimmte Elemente in die Dom mit js basierend auf Bildschirmgröße aber dann zu injizieren Es kann Ihre Website brechen, wenn Leute ihre js deaktiviert haben – Pete

Sie können mit serverseitigen Komponenten betrachten: http://www.lukew.com/ff/entry.asp?1392 –

Sie müssen es Server-Seite oder über Lazy- lösen Laden Sie bitte auch Ihre Designer auf diese Seite: https://managewp.com/5-reasons-why-responsive-design- ist-nicht-wert-es – span

Eine Möglichkeit wäre, den umgekehrten Weg zu nehmen, was Sie tun: erzeugen, um die Seite mit nur 1 News und dann bevölkert mit mehr, wenn nötig (statt mit 4 zu erzeugen und sie dann versteckt)

Sie können erkennen, ob das Viewport des Viewers mehr Stories mit JS erlaubt und diese dann mit AJAX (mit vielleicht einer 'loading more ..'-Animation in der Zwischenzeit) holen.

Auf diese Weise erhalten mobile Benutzer nicht ihre Bandbreite aufgebraucht und es wird auch für Nicht-JS-Benutzer zu einer Nachricht geschrumpft (Sie könnten auch Nicht-JS-Benutzern große Ansichtsfenster mit einem "Klick für mehr" bereitstellen) Link)

Quelle

2013-03-19 09:40:30

Das macht Sinn. Meine Medienabfragen sind in EMs, weißt du, ob jQuery die Größe des Darstellungsbereichs auch in ems erkennen kann? Denn dann wäre das eine ausgezeichnete Lösung. –

Wenn ich mich umsehe, sehe ich, dass das schwierig sein wird, also würde das wohl nur funktionieren, wenn ich meine Medienabfragen in px mache. –

als @Ella Ryan erwähnt, wäre progressive Verbesserung eine großartige und einzige Lösung, um Ihre responsive Website benutzerfreundlich zu halten. Das Holen von mehr Nachrichten mit Ajax ist ziemlich einfach und wird einen Unterschied für diejenigen machen, die Handgeräte benutzen –

Verhindern Herunterladen von unnötigen Inhalten je nach Bildschirmgröße

Antwort

Verwandte Themen