Comment avoir un thème responsive
UGAL supporte les thèmes graphiques standard et les thèmes responsive. L'affichage d'un thème graphique standard sur un appareil mobile dépend de la falculté du navigateur à zoomer. Les thèmes responsive font appel aux CSS3 media queries pour optimiser l'affichage sur tous les écrans, indépendant de leur taille.
Si vous utilisez un thème graphique sur mesur et souhaitez le mettre à jour pour qu'il soit responsive, cette page vous concerne.
Dites à UGAL que votre thème est responsive
La première étape consiste à signifier à UGAL que vous utilisez un thème "responsive" via la boite à cocher disponible dans la page d'édition du thème personnalisé.
Modifications liées à l'utilisation d'un theme responsive
Une fois votre thème défini comme "Responsive" les modficiations suivantes seront en place sur votre site :
Mise en place d'une viewport meta tag
Pour les sites avec un thème responsive, UGAL ajoute une viewport meta tag dans l'entête du document :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
....
</head>
The changement indique aux navigateurs de ne pas redimensionner la page pour s'adapter à l'écran, cette fonction étant gérée par la page elle-même.
Mise en page horizontale seulement, pas de choix de polices.
Avec un thème responsive, il n'est plus possible de choisir une mise en page : votre site est automatiquement en place avec une mise en page horizontale. Cela ne peut être changé. Une barre de navigation qui occupe une grande partie de l'écran ne correspond pas vraiment à l'esprit du Responsive Web Design.
Le menu permettant de choisir une police de caractère n'est également plus disponible. Le code suivant ne sera plus dans votre markup HTML :
<style type="text/css">
body {font-size: 84%; font-family: Trebuchet MS, sans-serif;}
</style>
Il est préférable de gérer les polices de caractères directement dans le thème graphique, surtout depuis que des Web services, comme Google Fonts, sont disponibles.
Navigation - dites bonjour au hamburger !
La Navigation est l'un des problèmes les plus délicats à gérer pour rendre un site compatible avec les mobiles. Navigation is one of the trickiest issue when making your website mobile friendly. En général, on utilise un menu "hamburger" qui s'adapte à la taille des mobiles :
Menu Hamburger pour les mobiles
Les multiples options disponibles avec la navigation UGAL (statique, dynamique, horizontale, verticale) ne permet pas de mettre en place un système unique qui gèrerait les deux cas de figure (mobile et ordinateur) avec le même markup HTML. A la place, nous avons choisi de mettre en place deux sortes de barres de navigation : une pour les ordinateurs (cachée sur les mobiles) et une pour les mobiles (cachée sur les ordinateurs).
<div id="navigation">
<ul class="navigation static">
<li class="horizontal top-1 first"><a href="/">Home</a></li>
...
</ul>
<div class="mobile">
<a href="#" id="tr-mobile"></a>
<div id="mobile-menu">
<ul class="mobile-top">
<li><a href="/">Home</a></li>
...
</ul>
</div>
</div>
Les deux systèmes affichent les mêmes liens et peuvent être montrés ou cachés en utilisant des requêtes CSS media :
@media screen and (min-width:801px) {
#navigation ul.static {display:block;}
#navigation ul.dynamic {display:block;}
#navigation div.mobile {display:none;}
}
@media screen and (max-width:800px) {
#navigation ul.static {display:none;}
#navigation ul.dynamic {display:none;}
#navigation div.mobile {display:block;}
}
Dans le cas où cette solution ne vous conviendrait pas, il est toujours possible d'intégrer votre propre markup de navigation dans la baniière HTML.
Un système simple de grille CSS
Faire des tableaux HTML responsive nécessite de mettre en œuvre des yacks CSS et / ou javascript. Nous ne voulions pas le faire pour les quelques endroits (énumérés ci-dessous) où UGAL utilise des tables HTML. Au lieu de cela, nous avons en place un système très simple de grille CSS à 6 colonne qui ne serviront qu’aux thèmes resposnive :
<div class="grid">
<div class="row">
<div class="column-6"> ... </div>
</div>
<div class="row">
<div class="column-4"> ... </div>
<div class="column-2"> ... </div>
</div>
</div>
Le comportement par défaut de la grille est celui-là ugal-defaut.css, et ce CSS est chargé d'abord pour votre site web. Si cela ne correspond pas à vos besoins, vous pouvez modifier votre propre fichier global.css. Faites nous savoir si vous apportez des modifications intéressantes, nous pourrions les intégrer vers le fichier CSS par défaut.
Panier et commande
A la place du tableau utilisé dans le panier pour les thèmes standard, les thèmes responsive utilisent un nouveau markup basé sur une grille à 6 colonnes.
<div class="grid" id="cartDetail">
<div class="row cartLine">
<div class="column-4 cartLineDescription">
<div class="cartThumbnail"> {productPhoto} </div>
<a href="{productUrl}" class="itemLink">{productName}</a>
<span class="itemReference">Ref: {itemReference}</span>
</div>
<div class="column-2 cartLineData">
<div class="cartLinePrice">{itemPrice}</div>
<div class="cartLineQuantity">
<input type="text" class="fInput cartQuantity" value="{itemQty}">
</div>
<div class="cartLineTotal">{cartLineTotal}</div>
</div>
</div>
</div>
Login et contact page markup
Pour les thèmes responsive, la mise en page pour la page de connexion et les pages de contact est maintenant basée sur le système de grille à 6 colonnes, de sorte que le contenu du côté de la page se mette vers le bas sur les petits écrans.