Vue d'ensemble - fixe, fluide

Vertex comporte un bouton va-et-vient entre les mises en page fluides et fixes, donc si vous préférez une mise en page fluide, vous pouvez facilement passer à ce template.
Comme vous pouvez le voir sur la photo ci-dessous vous pouvez ajuster la largeur de chaque colonne sur la page, ainsi que la largeur du body et de largeur maximum du body. Enfin, nous avons prévu le chargement des articles avant les colonnes de gauche et de droite pour l'optimisation SEO. Ils sont repositionnés avec CSS donc visuellement vous ne voyez pas de différence dans la présentation.

 

mise en page vertex1

Introduction au Responsive design

Vertex vous donne la possibilité d'activer ou de désactiver la fonction de mise en page responsive sur des template construits avec la version 2 et supérieure. Le mode Responsive peut être activé en utilisant soit la mise en page fluide ou fixe ci-dessus vous fournissant ainsi la fléxibilité optimale pour créer votre site!

Assurez-vous de consulter notre tutoriel « Responsive : meilleures pratiques » pour des informations spécifiques sur la mise en place d'une présentation de site web responsive.Vous pouvez également masquer les zones sur Vertex tels que des rangées de modules.
Ainsi, par exemple, sur une tablette ou un téléphone mobile, vous pourriez ne pas vouloir rendre visible tous les modules ou rangées de modules car une fois qu'ils commencent à s'empiler les uns au dessus des autres le défilement vertical peut devenir très volumineux ou encore certains modules peuvent ne pas être conçus pour les sites web responsive.
Comme vous le remarquerez sur la capture d'écran ci-dessous, vous pouvez sélectionner différentes zones du framework dont vous souhaitez cacher les rangées de modules lorsque l'écran est une tablette ou mobile.
Il suffit juste de sélectionner la zone que vous souhaitez masquer et Vertex s'occupe du reste! Ces champs ne fonctionnent indépendamment les uns des autres, donc si vous voulez cacher quelque chose à la fois sur tablette et sur les écrans de la taille des mobile vous devez sélectionner la même zone sur les deux champs.

mise en page vertex2

Comment fonctionne le Responsive dans Vertex

La fonctionnalité responsive de Vertex utilise les media queries pour appliquer du CSS selon certaines largeurs d'écran. Un des grands avantages de la disposition responsive de Vertex est que nous commençons la mise en page comme si cela avait été conçu pour un afficheur de bureau, et puis tout simplement nous réduisons, modifions, ou supprimons certaines sections ou les tailles de police selon la taille de l'écran de l'utilisateur. Lorsque l'écran change tout s'ajustera comme décrit ci-dessous. La majorité des lignes et des colonnes ne changera pas de style de base ou de positions jusqu'à ce qu'elles atteignent la version mobile. Encore une fois, seuls des ajustements mineurs sont faites sur différentes tailles d'écran de sorte que vous savez toujours ce à quoi votre site va ressembler et où le contenu sera placé!

  • Si l'option de largeur de colonne est activée, le body est fixé à fluide, et la largeur du corps atteint 1300px les tailles de colonne vont augmenter de 30%. Si cela atteint 1900px elles vont augmenter de 60%. Si cela atteint 2500px elles vont augmenter de 90%.. Si vous utilisez les calculs de largeur max-body les largeurs de colonnes s'appuieront sur ce paramètre au lieu de la largeur de l'écran.

  • Entre 971px et 1300px aucun changement n'aura lieu dans la mise en page. C'est la vue de bureau standard du template.

  • À 970px (un écran standard de tablette 10 pouces) la largeur du body devient fluide et remplit la majeure partie de la zone de visualisation. Si les colonnes d'encart sont utilisées sur la page elles seront réunies dans leurs colonnes adjacentes pour créer une colonne pour augmenter la largeur disponible de la colonne du centre.

  • À 750px (un écran standard de tablette 7 pouces) la barre de navigation mobile s'affiche pour faciliter la navigation. Si l'option largeur de colonne pour petites tablettes est activée vous pouvez demander à la colonne centrale de rester à sa taille d'origine, réduire la largeur de 20 %, ou s'empiler dans une colonne.

  • À 580px (une taille standard de périphérique mobile) le body tout entier va devenir une seule colonne et les modules s'empileront les uns sur les autres. Certains ajustements à l'en-tête et pied de page se produiront.


Voici les illustrations des colonnes Centrales uniquement dans les scénarios décrits ci-dessus.

mise en page vertex3

Tailles de colonne, Petites tablettes, et Mobile

Si vous concevez votre site pour les écrans très larges, mais aussi des écrans de bureau standards, envisagez alors d'activer la fonction d'augmentation de la taille de la Colonne. Si la largeur du body est réglée sur fluide alors les positions left, left_inset, left_top, left_bottom, right, right_inset, right_top, et right_bottom augmenteront leurs largeurs pour des écrans plus larges pour que tout reste proportionné.
Si la largeur du body atteint 1300px cette taille va augmenter de 30%. Si il atteint 1900px cela va augmenter de 60%. Si il atteint 2500px cela va augmenter de 90%. Si vous utilisez les calculs de largeur max-body, les largeurs de colonnes s'appuieront sur ce paramètre au lieu de la largeur de l'écran. Les largeurs originales sont calculées dans la zone mise en page générale. Pour les plus petits écrans, il est souvent difficile de faire que tout votre contenu s'ajuste dans les principales colonnes centrales. Si la taille de l'écran atteint 750px vous avez la possibilité de conserver les largeurs des colonnes centrales comment elles sont, de les réduire de 20%, ou de les empiler les unes au dessus des autres dans une seule colonne. Cette option est destinée aux tablettes de 7 pouces et affecte uniquement les colonnes centrales principales.
À 580px toutes les positions formeront une colonne simple pour les appareils mobiles.

Lorsque la taille de l'écran atteint 750px de large (Tout ce qui est plus petit qu'une tablette de 10 pouces standard), une barre de navigation apparaît dans le haut du site et le bas. Cette barre remplace le menu principal, la connexion, l'inscription, et la recherche, pour aider l'utilisateur sur les appareils mobiles. Dans la configuration, vous pouvez choisir ce que vous activez dans ces barres, ainsi que modifier les couleurs et le style comme vous le souhaitez.

mise en page vertex4

mise en page vertex5

Même s'il s'agit d'une mise en page responsive et qu'il n'y a aucune mise en page séparée pour les appareils mobiles, cela ne signifie pas que les visiteurs de votre site vont le réaliser ou même pas savoir que c'est une présentation responsive. C'est devenu courant pour les sites Web qui utilisent une mise en page mobile d'avoir un lien pour afficher la vue du Bureau du site Web, et c'est ce que vos visiteurs s'attendront à voir. Ce lien désactivec la configuration responsive à l'aide d'un cookie et appelle le site comme le ferait un ordinateur de bureau standard lors de l'affichage sur un mobile.
Il y a alors un lien pour revenir à l'affichage mobile du site présenté.

mise en page vertex6

IE7 et le Responsive

IE7 et IE8, ne supportent pas intrinsèquement les css media queries, et c'est ce qui rend les mises en page responsives possible. La raison est que javascript est nécessaire pour ajouter ces fonctions aux navigateurs. Javascript peut affecter les performances du site, si vous rencontrez une lenteur sur votre site en utilisant IE7 et IE8 désactivez simplement le responsive pour ces navigateurs. Quand il est désactivé, IE7 et IE8 utiliseront tout simplement la largeur du body par défaut et les paramètres fixes / fluides de la section Disposition générale. Gardez à l'esprit que l'objectif principal des mises en page responsives devrait être les tablettes et les appareils mobiles, où IE7 et IE8 n'existent pas.


Lorsque vous définissez un max-width à une image ou inputbox et que vous dites que vous réglez à max-width:100% il ne prends pas en compte la largeur du DIV, il regarde la largeur + padding. Donc si la DIV contient du padding, il s'étend au-delà du DIV. Nous avons ajouté ce qui suit :

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */


Cela lui indique qu'il regarde strictement à la largeur de la DIV, et puis tout fonctionne bien. IE8 le supporte mais pas IE7. Donc, pour les images en IE7, nous avons ajouté ce qui suit :


<?php if ($browser == "ie7") { ?>
img.ie7, img.boxed, img.boxed_black, img.padded {
max-width:95% !important;
}
<?php } ?>


Ainsi images avec ces noms de classe ne seront jamais plus larges que 95%. Nous y avons ajouté une classe "ie7" que quelqu'un peut ajouter si besoin. Alors n'oubliez pas de vérifier votre site dans IE7 pour être sûr toutes les images s'affichent bien en mode responsive.

Responsive : Mode d'emploi

Masquer les Modules spécifiques via les Classes Hide

Pour une liste complète des Classes HIDE téléchargez notre document « Responsive Best Practices » sur la page des tutoriels:

http://www.shape5.com/joomla_tutorials.html

Si vous avez seulement un module spécifique que vous souhaitez masquer à certaines tailles d'écran, et pas une section entière du template, c'est la meilleure approche. Une classe HIDE est une classe qui peut être appliquée à n'importe quel élément sur la page et qui cache cet élément spécifique à certaines dimensions de l'écran. Les classes s'incrémentent de 100px pour les grands écrans et de 50px pour les petits écrans. Utilisez-les avec parcimonie si vous le pouvez.

Recommandation: la cible principale de ces classes devrait se focaliser sur la tablette et les écrans de taille mobiles. Les moniteurs à écran large varient en taille de sorte qu'il est beaucoup plus difficile à utiliser ces classes correctement pour les grands écrans. Tablettes et appareils mobiles sont beaucoup plus cohérents en taille et c'est beaucoup plus facile d'appliquer les plus petites classes HIDE.

Par exemple, vous souhaitez masquer un module spécifique lorsque la taille de l'écran atteint 900px de large, et le laisser caché pour n'importe quel écran en-dessous de 900px.
Il suffit d'ajouter class=hide_900 au titre du module comme ceci :

mise en page vertex7

La classe est tout simplement mise dans le titre du module. Il doit y avoir un espace juste avant class = , et ne vous inquiétez pas, la zone de classe du titre n'apparaîtra pas vraiment sur le site en ligne, cela s'affiche uniquement dans le backend. Elle doit être entrée exactement comme indiqué ci-dessus. Le titre peut être publié ou non, cela n'a pas d'importance. L'ajout simple des classes au titre appliquera les classes à la totalité du module.

Que se passe-t-il si vous voulez cacher le module uniquement pour une certaine gamme ?

C'est facile, il suffit d'ajouter à la fin du nom de la classe _only.
hide_900_only cachera seulement cet élément à partir de 900px jusqu'à l'échelon suivant dans les classes HIDE, qui est 850px. Donc il sera seulement caché de 850px à 900px.
Vous pouvez également ajouter plusieurs classes au titre comme ceci: class=hide_900_only hide_850 qui appliquera ces deux classes au module.

Que se passe-t-il si vous voulez cacher le module et ensuite le montrer plus tard ?
C'est simple, utilisez show_ dans la classe au lieu de hide_. Cela permettra la visualistation du module pour la taille spécifiée, peu importe les autres paramètres du module. Donc, si vous voulez cacher le module pour 1000px et moins, mais que vous voulez le montrer à nouveau plus tard, faites quelque chose comme ceci class=hide_1000 show_600. Cela masquera le module de 600px à 1000px.

Y a-t-il un moyen plus simple ? Oui, bien sûr, les indications ci-dessus sont pour les utilisateurs expérimentés qui veulent modifier leur contenu pour chaque taille d'écran disponible. Si vous ne voulez pas perdre son temps avec des tailles de fenêtre spécifique, il suffit d'utiliser à la place les classes suivantes, qui sont préréglées en fonction des tailles d'écran correspondantes :

hide_wide_screen
hide_standard_screen
hide_large_tablet
hide_small_tablet
hide_mobile
show_wide_screen
show_standard_screen
show_large_tablet
show_small_tablet
show_mobile

Masquer un contenu spécifique via les Classes Hide

Si vous avez uniquement un contenu spécifique ou des images dans un article ou dans un module que vous souhaitez masquer, alors utilisez les mêmes classes HIDE décrites ci-dessus, mais entourer ce contenu spécifique avec la classe à la place de l'appliquer au module entier. Par exemple, dans l'image ci-dessous, le troisième paragraphe se cachera à 900px et montrera de nouveau à 700px.

mise en page vertex8

Pour une liste complète des Classes HIDE téléchargez notre document « Responsive Best Practices » sur la page des tutoriels:

http://www.shape5.com/joomla_tutorials.html

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels