Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:

Transcription

1 1 La taille et la résolution de l'écran des ordinateurs portables, des ordinateurs de bureau, des tablettes et des smartphones peuvent considérablement varier. C'est pour cette raison, que les sites Web ne sont pas toujours affichés correctement ou autrement sur les différents supports. Le permet une adaptation automatique du site Web. Les templates standards du Worldsoft CMS sont optimisés pour les supports mobiles (). Tous les réglages nécessaires sont déjà prédéfinis dans ces templates. Pour tous vos nouveaux projets, vous pouvez construire les sites Web directement sur ces modèles. Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du dans le Worldsoft CMS: Activation du Pour configurer les paramètres CSS du vous devez activer l'option Responsive Layout erlauben dans l'administration du CMS. Cliquez sur les onglets Administration -> Paramètres généraux et activez l'option Oui. Dans les paramètres CSS vous avez maintenant un nouvel onglet dénommé "Responsive". C'est ici que vous pourrez définir les paramètres CSS de la version Smartphone et Tablette de votre site Web. Valeurs des supports pour le Pour que le Design s'adapte à l'écran des Smartphones / Tablettes, nous avons défini les valeurs suivantes dans le fichier style.css des templates standards: Smartphones: jusqu'à une largeur du site Web de moins de 480px, le site Web optimisé pour Smartphones sera affiché Tablettes: jusqu'à une largeur du site Web de moins de 767px le site Web optimisé pour tablettes sera affiché Si nécessaire, vous pouvez naturellement ajuster ces valeurs.

2 2 Nouveaux Containers En activant le, 5 nouveaux containers ont été ajoutés au Worldsoft CMS. Ces containers sont nécessaires pour l'utilisation du. Vous avez maintenant les containers suivants: #menu_table #menu_table_tablet #content #leftcontent #rightcontent menu_table Le container menu_table prédomine sur les containers TopLeft, TopCenter et TopRight. Les paramètres CSS de ce nouveau container remplacent automatiquement les paramètres CSS des containers secondaires. ATTENTION: Ce nouveau container est uniquement prévu pour configurer les paramètres du Responsive e Design! menu_table_tablet Le container menu_table_tablet contrôle l'affichage de la navigation sur les supports mobiles. A partir d'une taille d'écran respectivement de fenêtre, le container menu_table_tablet remplace automatiquement le container menu_table. Concrètement, cela veut dire que la navigation normale est remplacée par la navigation pour les supports mobiles. ATTENTION: Ce nouveau container ner est uniquement prévu pour configurer les paramètres du! content, leftcontent, rightcontent Les containers content, leftcontent et rightcontent contrôlent maintenant le CSS des contenus des containers CenterLeft, CenterCenter et CenterRight Les paramètres CSS de ces nouveaux containers remplacent les paramètres CSS des autres containers (Police, etc...). ATTENTION: Ce nouveau container ner est uniquement prévu pour configurer les paramètres du!

3 Worldsoft-CMS 3 Taille du container Pour que l'affichage sur les supports mobiles soit optimisé, il est important que la taille de tous les containers ne soit pas fixe. Seule exception, la largeur du site Web dans le container Container. Pour la configuration des paramètres CSS du container vous avez maintenant une largeur minimale et maximale. Largeur minimale signifie que le container sera au minimum affiché dans la largeur définie. Largeur maximale signifie que le container est affiché au maximum dans la largeur définie. Pour le, on définit une largeur maximale pour le container. Si l'on fixait une largeur minimale le site Web serait affiché avec cette largeur sur les supports mobiles. En définissant la largeur maximale, le container sera adapté à la largeur du support. La taille de tous les autres containers doit être définie en % (dans notre exemple le center_c). Masquer certains container dans le responsive Design Dans les paramètres CSS, vous avez maintenant un nouvel onglet Responsive respectivement un sous-onglet Smartphone et un sous-onglet Tablet. Ces paramètres, vous permettent de configurer le CSS pour les supports mobiles et de masquer certains containers. Principalement pour les Smartphones, nous vous recommandons d'afficher uniquement les éléments fondamentaux (contenu + navigation). Dans notre exemple, nous allons vous montrer comment vous pouvez personnaliser un site Web optimisé pour un terminal mobile.

4 4 Site Web sur un PC / Laptop Site Web sur un Smartphone Pour la version Smartphone du site Web, nous avons masqué les containers Top, TopLeft, TopCenter et TopRight. Sélectionnez tout d'abord le container que vous voulez masquer. Cliquez sur l'onglet Responsive puis sur le sous-onglet Smartphone ou Tablet (selon le support sur lequel vous désirez masquer un container). Pour l'élément Display sélectionnez l'option aucun. Répétez ce procédé pour tous les containers que vous souhaitez masquer dans la version optimisée. Paramétrage de la Navigation Pour certains templates existants vous devez modifier les paramètres d'affichage du menu de navigation pour PC / Laptop et le menu de navigation pour les supports mobiles. Dans ce cas, vous devez modifier la configuration dans certains containers. Dans un premier temps, le menu pour les supports mobiles dans le design pour PC / Laptop doit être masqué. Sélectionnez le container "menu_table_tablet". Cliquez ensuite sur l'onglet Présentation puis sur le sous-onglet "menu_table_tablet". Pour l'élément Display sélectionnez l'option aucun afin de masquer le menu de navigation pour les supports mobiles lorsque le site Web sera affiché sur un PC ou sur un Laptop.

5 Worldsoft-CMS 5 Dans le container "menu_table_tablet", cliquez maintenant sur l'onglet Responsive puis sélectionnez pour les deux sousonglets Smartphone et Tablet pour l'élément Display l'option block. Si vous ne sélectionnez pas cette option, le menu de navigation pour les supports mobiles ne sera pas affiché. Dans un deuxième temps, la navigation pour PC / Laptop doit être masquée lorsque le site Web est affiché sur un support mobile. Sélectionnez le container dans lequel le menu de navigation doit être affiché. Cliquez sur l'onglet Responsive puis ouvrez les deux sousonglets Smartphone et Tablet. Pour l'élément Display sélectionnez l'option aucun. ATTENTION: La position de la navigation sur les supports mobiles ne peut pas être modifiée. Optimisation des images Pour que les images s'adaptent automatiquement au support utilisé pour visiter le site Web, vous devez renoncer à utiliser les valeurs fixes dans la gestion des images. Lorsque vous insérez une image, assurez-vous que la hauteur et la largeur ne soit pas définie (vous devez donc modifier vos images dans un programme de traitement d'images). Si vous avez des valeurs fixes, vos images ne seront pas dimensionnées proportionnellement et seront déformées. Contrôle des résultats du Pour contrôler l'affichage de votre site Web sur les supports mobiles, vous pouvez utiliser un outil très utile. Cet outil vous montre les effets de vos configurations sur les différents supports utilisés pour visiter votre site Web: Saisissez tout d'abord l'adresse URL du site Web que vous voulez contrôler, puis cliquez sur View. Sélectionnez ensuite un Smartphone ou une Tablette pour simuler l'affichage de votre site Web sur ce support mobile. Votre site Web est maintenant affiché dans la fenêtre (dans notre exemple l'affichage du site Web sur un iphone).