Wie kann ein Modul basierend auf der Größe des Geräts oder des Ansichtsfensters in Joomla 3 deaktiviert werden, um die Leistung für Mobilgeräte zu optimieren?

14

Ich bin ein Befürworter von Responsive Web Design in Verbindung mit Adaptive Web Design (dh ein Design, das die Anzeige für alle Geräte anpasst und Inhalte basierend auf der Größe des Ansichtsports bereitstellt) im Gegensatz zu separaten Designs für mobile Websites.

Es gibt einige Nachteile, zum Beispiel bei großen Bildschirmen. Ich möchte einige Module einbinden, die für kleinere Ansichtsfenster ausgeblendet werden. Jedoch in dem Fall , in dem ein Modul versteckt basiert auf der Anzeigengröße, Laden und das Modul der Ausführung bewirkt eine unnötigen Leistungseinbußen , wenn bekannt ist , dass das spezifische Modul wird nie in einer kleineren Darstellungsgröße angezeigt werden.

Wie kann ich die Größe von Ansichtsfenstern verwenden, um ein Modul effektiv zu deaktivieren (dh die Ausführung zu stoppen), um die Leistung zu beschleunigen?

NivF007
quelle

Antworten:

15

Mit Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) können Sie Module basierend auf dem Browsertyp zuweisen. Sie können also ein Mobilgerät, einen Desktop oder ein bestimmtes Gerät auswählen. Es erlaubt Ihnen jedoch nicht, nach Größe zu wählen, so dass es nur bis zu einem gewissen Grad nützlich ist.

Möglicherweise ist dies auch mit einer Kombination aus PHP und Javascript möglich. Ich werde diese Frage an meinen Kumpel senden, er könnte eine Idee haben.

Faye
quelle
Was für eine schöne Idee, ich hätte nie gedacht, AMM auf diese Weise zu verwenden.
JackJoe
In AMM steckt eine Menge großartiger Funktionen, die meiner Meinung nach ein Muss sind.
Faye
Ich stimme dem zu. Wenn ich bei einem Thema feststecken würde, in dem dies nicht integriert ist (in Warp 7-Themen ist dies beispielsweise integriert), würde ich AMM verwenden.
Brian Peat
@BrianPeat - Können Sie weitere Details zur Funktionsweise von WARP7 bereitstellen?
NivF007
3
Warp 7 verfügt über einen Bereich im Vorlagenadministrator, in dem Sie auf Schaltflächen für Desktop / Tablet / Telefon klicken und Module basierend auf diesen Einstellungen aktivieren und deaktivieren können. Das Raketenthema macht etwas Ähnliches mit speziellen Klassen. Was ich nicht weiß ist, ob die Module entladen sind oder ob alles geladen und dann einfach versteckt ist. Ich vermute, es ist das letztere, da Sie sehen können, dass es sich ändert, wenn Sie die Größe des Browsers ändern. Was passiert, wenn Sie die Fenstergröße aktiv ändern, wenn Sie die Größe der Fenster vollständig ändern?
Brian Peat
10

Ich denke nicht, dass Sie solche Module deaktivieren und es dennoch als responsives Design bezeichnen sollten. Ein Aspekt von responsive ist, dass es auf Änderungen im Ansichtsfenster reagiert und nicht nur ein anderes Layout für verschiedene Bildschirmgrößen druckt.

Abhängig von der Bildschirmgröße des Beispiels kann es vorkommen, dass ein Tablet im Hochformat das Modul nicht lädt, dass dasselbe Tablet diesen Inhalt jedoch möglicherweise einmal im Querformat benötigt.

Spunkie
quelle
3
Das ist zwar wahr, aber in der Praxis nicht wirklich effektiv. Das bedeutet, dass ein iPhone-Benutzer niemals eine Bildschirmauflösung von 1440 x 900 hat und nicht einmal die Möglichkeit hat, die Größe seines Ansichtsfensters zu ändern. Responsive Design, bei dem die Leute sagen "Oh, wie sich die Dinge ändern, wenn ich die Größe meines Browserfensters verändere", ist wirklich nur für Designer effektiv, die angeben möchten. In der Praxis ist es völlig in Ordnung, Module auszuschalten und die Ausgabe für verschiedene Bildschirmgrößen zu ändern.
Don Gilbert
3
@Don Es tut uns leid, dass das Design dann einfach nicht anspricht, und es gibt viele Benutzer auf dem Desktop, die die Größenänderungsfunktionen bei der Arbeit in Windows nutzen. Responsive Design reagiert auf Änderungen im Ansichtsfenster, unabhängig davon, ob es von einem bestimmten Gerät stammt oder nicht.
Spunkie
2
Genau. Aber ich bin nicht einverstanden mit den Zielen des "responsiven Designs". Wie ich schon sagte, es wurde von Designern ausgedacht, um anzugeben. Sie vergessen die Tatsache, dass iPhones niemals eine große Auflösung haben werden. tl; dr - Responsive Design spielt auf mobilen Geräten keine Rolle . Ich möchte lieber Netzwerkbandbreite sparen als "reines Responsive Design".
Don Gilbert
2
@DonGilbert und bei Spunkie - IMO - ihr beide habt recht. Die 'strenge' Definition von Responsive Web Design nicht enthalten Ändern 'Inhalt' - ich die Frage bearbeiten wird RWD / AWD gehören - Responsive Web Design und Adaptive Web Delivery en.wikipedia.org/wiki/Responsive_web_design
NivF007
8

Dies ist eine JS-Klasse, die ich vor einiger Zeit erstellt habe und die JavaScript zum Erkennen von Ansichtsfenstern verwenden konnte. Sie wurde noch nie strengen Tests unterzogen, funktioniert aber.

function ResJS(){
    this.min = 0;
    this.max = 0;
    this.config = config;
    this.width = function(){
        return jQuery(window).width();
    }
    this.breakpoint = function(min,max){
        this.min = min;
        this.max = max;
        this.outside = false;
        this.inside = false;
        this.triggeredOut = false;
        this.triggeredIn = false;
        this.enter = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.min<context.width()&&context.max>context.width()){
                    if(!context.triggeredIn){
                        jQuery(document).ready(function(){callback(context.min,context.max)});
                        context.inside = true; //browser width has entered breakpoint
                        context.outside = false; //browser has left another breakpoint
                        context.triggeredIn = true; //triggered event for breakpoint
                        context.triggeredOut = false; //be ready to trigger leave event
                    }
                }else{
                    context.inside = false; //browser width is not within breakpoint
                    context.outside = true; //brower width is outside of breakpoint
                }
            });
            if(context.min<context.width()&&context.max>context.width()){
                jQuery(document).ready(function(){callback(context.min,context.max)});
                context.inside = true;
                context.outside = false;
                context.triggeredIn = true;
                context.triggeredOut = false;
            }else{
                context.inside = false;
                context.outside = true;
                context.triggeredOut = true;
                context.triggeredIn = false;
            }
            return this;
        }
        this.leave = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.outside&&!context.triggeredOut){
                    jQuery(document).ready(function(){callback(context.min,context.max)});
                    context.triggeredIn = false;
                    context.triggeredOut = true;
                }
            });     
            return this;
        }
        return this;
    }
    return this;
}

Grundsätzlich benutzt du es so

ResJS()
    .breakpoint(0,600)
    .enter(function(min,max){
        console.log(min,max,'enter');
    })
    .leave(function(min,max){
        console.log(min,max,'leave');
    });

Haltepunkt hat Min / Max-Parameter für Breite, dann eine verkettete Funktion zum Eingeben und Verlassen, mit einem Rückruf, um etwas JS-Code auszuführen.

Ich kann nicht im Detail erläutern, wie es funktioniert, da ich es vor so langer Zeit gemacht habe, aber Sie können es kostenlos verwenden, wenn es helfen wird. Dies kann verwendet werden, um Module basierend auf dem Ansichtsfenster über Ajax zu laden. Ich glaube, mit joomlas com_ajax können einige wirklich coole Funktionen erstellt werden.

Jordan Ramstad
quelle
1
Dies sieht aus wie ein großer Teil des Puzzles und bietet interessante Möglichkeiten - vielen Dank für die Antwort und vor allem für das Posten des Codes.
NivF007
1
Die beste Antwort ist mein Kollege, das ist mehr oder weniger meine Idee: P
Jordan Ramstad
3

Eine andere Lösung:

Sie können eine serverseitige Geräteerkennung wie diese verwenden: http://mobiledetect.net/ hier das Joomla-Plugin http://www.yagendoo.com/de/blog/free-mobile-detection-plugin-for-joomla.html und erweitern Sie dann die joomla / templates / yourtemplate / html / modules.php mit Ihrem eigenen mod_chrome-Stil. Dann können Sie beliebig viele PHP if-Anweisungen für jedes Gerät oder jede Auflösung schreiben.

Joomla Agency
quelle
3

Wenn Sie die Leistung steigern möchten, laden Sie keine unnötigen Module. Wenn es auf kleinen Bildschirmen nicht erforderlich ist, ist es auch auf größeren Bildschirmen nicht erforderlich.

Menschen mit größeren Gerätedisplays möchten auch eine schnelle Website, auf der keine unnötigen Daten geladen werden. Sie gehen fälschlicherweise davon aus, dass auf größeren Bildschirmen mehr Bandbreite zur Verfügung steht. Sie tun es nicht.

Seien Sie ein guter Designer und geben Sie Ihren Benutzern unabhängig von der Bildschirmgröße eine optimierte Website-Erfahrung.

Seth Warburton
quelle
2

Ich würde vorschlagen, dass Browser-Sniffing der falsche Weg ist, um hierher zu kommen. Wenn Sie wirklich nur Module basierend auf der Bildschirmbreite laden möchten, müssen Sie Javascript ausführen, das dann das Modul von AJAX (com_ajax) aufruft. Beachten Sie, dass sich die Suchmaschinenoptimierung für von AJAX geladene Inhalte auszahlen kann.

Jeepstone
quelle
2

Im Allgemeinen verwende ich css @media, um dies zu ermöglichen. Macht es einfach, Dinge abhängig von der Bildschirmgröße auszublenden und sie analysieren zu lassen, wenn ein Querformat-Tablet breit genug ist, um sie anzuzeigen, und die Hochformat-Breite nicht. Hier ist ein Beispiel:

@media (max-width:699px) {
    #moduleid, .modulewrapperclass {display:none}
}

Normalerweise verwende ich dies, um eine gesamte Modulposition auszublenden, sodass ich meinen CSS-Selektor auf den Wrapper dieser Position (oder Positionen in einigen Vorlagen) stütze.

Pfadfinder
quelle
Danke für deine Antwort. Das Problem bei der CSS-Medienabfrage besteht darin, dass Sie immer noch ein Modul ausführen (obwohl Sie es nicht anzeigen möchten). Die gesuchte Lösung führt das Modul nur aus, wenn es angezeigt wird.
NivF007
Wie andere bereits gesagt haben, ist dies möglicherweise nicht die beste Idee für Benutzer, die ihre Ansichtsfenstergröße nach dem Laden der Seite ändern, sowie für Tablets im Quer- oder Hochformat. Die wenigen Hundertstelsekunden, die der Server benötigt, um dieses Modul zu analysieren, sind unwichtig, und da es angezeigt wird: Bei den kleineren Geräten wird es nicht gerendert, sodass auch dort keine Zeit verloren geht. - Aber wenn Sie es wirklich nicht laden möchten, ist der Advanced Module Manager wahrscheinlich der richtige Weg, wie in einer anderen Antwort verlinkt.
Pathfinder
1

Sie können es bei Bedarf mit JavaScript laden, das com_ajax aufruft und nur die Module für die aktuelle Größe zurückgibt.

Harald Leithner
quelle