Comment un module peut-il être désactivé en fonction de la taille de l'appareil ou de la fenêtre d'affichage dans Joomla 3 pour optimiser les performances des appareils mobiles?

14

Je suis un partisan de la conception Web adaptative en conjonction avec la conception Web adaptative (c'est-à-dire - une conception qui ajuste l'affichage pour tous les appareils et fournit du contenu en fonction de la taille du port d'affichage) par opposition aux conceptions de sites «mobiles» distinctes.

Il y a certains inconvénients, par exemple, sur les grands écrans, j'aimerais inclure certains modules qui seront masqués pour les tailles de fenêtre plus petites. Cependant, dans le cas où un module est masqué en fonction de la taille de la fenêtre, le chargement et l'exécution de ce module entraînent un impact inutile sur les performances lorsqu'il est connu que le module spécifique ne sera jamais affiché avec une taille de fenêtre plus petite.

Comment puis-je utiliser la taille de la fenêtre pour désactiver efficacement un module (c'est-à-dire l'empêcher de s'exécuter) afin d'accélérer les performances?

NivF007
la source

Réponses:

15

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) vous permet d'affecter des modules en fonction du TYPE de navigateur. Vous pouvez donc sélectionner un mobile, un ordinateur de bureau ou un appareil spécifique. Cependant, il ne vous permet pas de choisir par taille, il n'est donc utile que dans une certaine mesure.

Cela peut également être possible avec une combinaison de php et de javascript. J'enverrai cette question à mon pote, il a peut-être une idée.

Faye
la source
Quelle belle idée, je n'ai jamais pensé à utiliser AMM de cette façon.
jackJoe
Peter a mis beaucoup de fonctionnalités impressionnantes dans AMM, c'est un must-have à mon avis.
Faye
Je suis d'accord avec ça. Si j'étais coincé avec un thème qui n'avait pas cela intégré (les thèmes Warp 7 par exemple l'ont intégré), j'utiliserais AMM.
Brian Peat
@BrianPeat - pouvez-vous fournir plus de détails sur la façon dont cela fonctionne avec WARP7?
NivF007
3
Warp 7 a un panneau dans l'administrateur du modèle qui vous permet de cliquer sur les boutons pour le bureau / la tablette / le téléphone et il active et désactive les modules en fonction de ces paramètres. Le thème Rocket fait quelque chose de similaire avec des classes spéciales. Ce que je ne sais pas, c'est si les modules sont déchargés, ou si tout est chargé puis simplement caché. Je soupçonne que c'est le dernier puisque vous pouvez le voir changer lorsque vous redimensionnez le navigateur. Si vous déchargez complètement les choses en fonction de la taille, que fera-t-il si vous redimensionnez activement la fenêtre?
Brian Peat
10

Je ne pense pas que vous devriez désactiver des modules comme ça et l'appeler toujours responsive design. Une partie du point avec responsive est qu'il répondra aux changements de fenêtre et pas seulement qu'il imprime une disposition différente pour différentes tailles d'écran.

Selon les exemples de tailles d'écran, il est possible qu'une tablette en mode portrait empêche le module de se charger, mais cette même tablette peut avoir besoin de ce contenu une fois en mode paysage.

Spunkie
la source
3
C'est vrai, mais ce n'est pas vraiment efficace dans la pratique. Cela signifie qu'un utilisateur d'iPhone n'aura jamais une résolution d'écran de 1440x900, ni même la possibilité de redimensionner sa fenêtre d'affichage. Un design réactif où les gens sont comme "ooh regardez comment les choses changent lorsque je redimensionne la fenêtre de mon navigateur" n'est vraiment efficace que pour les designers qui veulent se montrer. En pratique, il est tout à fait correct d'adopter l'approche consistant à arrêter les modules et à modifier la sortie pour différentes tailles d'écran.
Don Gilbert
3
@Don Désolé, ce n'est tout simplement pas un design réactif, et il y a beaucoup de gens sur le bureau qui profitent des fonctionnalités de redimensionnement lorsqu'ils travaillent dans Windows. La conception réactive répond aux modifications de la fenêtre d'affichage, que ce soit à partir d'un certain appareil ou non.
Spunkie
2
Je suis d'accord. Mais je ne suis pas d'accord avec les objectifs du "responsive design". Comme je l'ai dit, les designers l'ont imaginé pour le mettre en valeur. Ils oublient le fait que l'iPhone n'aura jamais une résolution énorme. tl; dr - La conception réactive n'a pas d'importance sur les appareils mobiles. Je préfère économiser la bande passante du réseau plutôt que d'avoir une «conception réactive pure».
Don Gilbert
2
@DonGilbert et chez Spunkie - OMI - vous avez tous les deux raison. La définition «stricte» de Responsive Web Design n'inclut pas la modification du «contenu» - je modifierai la question pour inclure RWD / AWD - Responsive Web Design et Adaptive Web Delivery en.wikipedia.org/wiki/Responsive_web_design
NivF007
8

Il s'agit d'une classe JS que j'ai créée il y a quelque temps et qui pourrait utiliser le javascript pour détecter les fenêtres, elle n'a jamais été soumise à des tests rigoureux mais fonctionne.

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;
}

Fondamentalement, vous l'utilisez comme ceci

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

Le point d'arrêt a des paramètres min / max pour la largeur, puis une fonction chaînée pour l'entrée et la sortie, avec un rappel pour exécuter du code JS.

Je ne peux pas vous expliquer en détail comment cela fonctionne, comme je l'ai fait il y a si longtemps, mais vous êtes libre de l'utiliser si cela peut vous aider. Cela peut être utilisé pour charger des modules via ajax en fonction de la fenêtre d'affichage. Je crois que com_ajax de joomla peut être utilisé avec cela pour créer des fonctionnalités vraiment cool.

Jordan Ramstad
la source
1
Cela ressemble à une pièce majeure du puzzle et offre des possibilités intéressantes - merci pour la réponse et surtout pour la publication du code.
NivF007
1
La meilleure réponse est mon collègue, c'est plus ou moins mon idée: P
Jordan Ramstad
3

Une autre solution:

Vous pouvez utiliser une détection de périphérique côté serveur comme celle-ci: http://mobiledetect.net/ ici le plugin Joomla http://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.html puis étendez joomla / templates / yourtemplate / html / modules.php avec votre propre style mod_chrome. Ensuite, vous pouvez écrire autant de déclarations php que vous le souhaitez pour n'importe quel appareil ou résolution.

Agence Joomla
la source
3

Si vous souhaitez accélérer les performances, ne chargez pas les modules inutiles. Si ce n'est pas nécessaire sur les petits écrans, il n'est pas non plus nécessaire sur les grands écrans.

Les personnes disposant d'un écran plus grand souhaitent également un site Web rapide qui ne charge pas de fichiers inutiles. Vous faites l'hypothèse erronée que les écrans plus grands ont plus de bande passante disponible. Ils ne le font pas.

Soyez un bon concepteur et offrez à tous vos utilisateurs une expérience de site optimisée, quelle que soit la taille de leur écran.

Seth Warburton
la source
2

Je dirais que le reniflement du navigateur est la mauvaise façon d'aller ici. Si vous voulez vraiment charger uniquement les modules en fonction de la largeur de l'écran, vous devez exécuter du javascript, qui appelle ensuite le module par AJAX (com_ajax). Gardez à l'esprit qu'il peut y avoir un gain en termes d'optimisation des moteurs de recherche pour le contenu chargé par AJAX.

Jeepstone
la source
2

J'utilise généralement css @media pour y arriver. Permet de masquer les choses en fonction de la taille de l'écran et de les faire analyser pendant les périodes où une tablette paysage est suffisamment large pour l'afficher et la largeur du portrait ne l'est pas. Voici un exemple:

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

Je l'utilise généralement pour masquer une position de module entière, donc je base mon sélecteur CSS sur le wrapper de cette position (ou des positions dans certains modèles).

éclaireur
la source
Merci pour votre réponse. Le problème avec l'approche de requête multimédia CSS est que vous exécutez toujours un module (même si vous choisissez de ne pas l'afficher). La solution que je recherche n'exécutera le module que s'il est affiché.
NivF007
Comme d'autres l'ont dit, ce n'est peut-être pas la meilleure idée pour les personnes qui modifient la taille de leur fenêtre d'affichage après le chargement de la page, ainsi que pour les tablettes paysage ou portrait. Les quelques centièmes de seconde qu'il faut au serveur pour analyser ce module n'auront pas beaucoup d'importance et puisqu'il est affiché: aucun sur les petits appareils vous ne le restituez donc pas de temps non plus. - Mais si vous voulez vraiment ne pas le charger, alors Advanced Module Manager est probablement la voie à suivre comme lié dans une autre réponse.
pathfinder
1

Vous pouvez le charger à la demande en utilisant du javascript qui appelle com_ajax et renvoie uniquement les modules pour la taille actuelle.

Harald Leithner
la source