1 Responsive Design - Alliance Webmaster

Worldsoft CMS
Responsive Design
1
Responsive Design
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 Responsive Design permet une adaptation automatique du site Web.
Les templates standards du Worldsoft CMS sont optimisés pour les supports mobiles (Responsive Design). 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 Responsive Design
dans le Worldsoft CMS:
Activation du Responsive Design
Pour configurer les paramètres CSS du Responsive Design
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 Responsive Design
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.
© Copyright by W orldsoft AG, 2013, Pfäffikon SZ, Switzerland. All rights strictly reserved!
World
dsoft CMS
Respon
nsive Design
2
Nouveaux Containers
En activant le Responsive Design, 5 nouveaux containers ont été ajoutés au Worldsoft CMS. Ces containers sont nécessaires pour
l'utilisation du Responsive Design. Vous avez maintenant les containers suivants:
•
•
•
•
•
#menu_table
#menu_table_tablet
#content
#leftContent
#rightContent
menu_table
Le container menu_table prédomine
domine sur les containers TopLeft, TopCenter
et TopRight. Les paramètres CSS de ce nouveau container
c
remplacent
automatiquement les paramètres CSS des containers secondaires.
ATTENTION: Ce nouveau container est
st uniquement prévu pour
configurer les paramètres du Responsive
e Design!
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.
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 Respon
sponsive Design!
content, leftContent, rightContent
Les containers content, leftContent et rightContent
rightCont
contrôlent
maintenant le CSS des contenus des containers CenterLeft,
CenterCenter et CenterRight
Les paramètres CSS de ces nouveaux conta
ntainers remplacent
les paramètres CSS des autres containers (Police,
Police, etc...).
ATTENTION: Ce nouveau container
ner est uniquement prévu
pour configurer les paramètres du Respon
sponsive Design!
© Copyright by W orldsoft AG, 2013, Pfäffikon SZ, Swittzerland. All rights strictly reserved!
Worldsoft-CMS
Responsive Design
3
Taille du container Responsive Design
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 Responsive Design, 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.
© Copyright by W orldsoft AG, 2013, Pfäffikon SZ, Switzerland. All rights strictly reserved!
Worldsoft CMS
4
Responsive Design
Site Web sur un PC / Laptop
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.
© Copyright by W orldsoft AG, 2013, Pfäffikon SZ, Switzerland. All rights strictly reserved!
Site Web sur un Smartphone
Worldsoft-CMS
Responsive Design
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 Responsive Design
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: www.screenqueri.es
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).
© Copyright by W orldsoft AG, 2013, Pfäffikon SZ, Switzerland. All rights strictly reserved!