BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Créer un site qui s’adapte à tout type d’écran
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Créer un site qui s’adapte à tout type d’écran

 Répondre Répondre
Auteur
Message
MichelH allez vers le bas
Newbie
Newbie


Depuis le: 16 Jan 2013
Status: Inactif
Points: 26
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MichelH Citer  RépondreRéponse Lien Direct à ce Post Sujet: Créer un site qui s’adapte à tout type d’écran
    Envoyé : 06 Feb 2013 à 18:25
Aujourd'hui les sites internet sont consultés de plus en plus fréquemment sur de petits écrans : smartphone, iPhone et autres appareils mobiles. Les pages d’un site conçu de façon « classique » avec openElement (ou tout autre éditeur de type « glisser-déposer ») apparaîtront minuscules sur l’écran d’un téléphone portable, ou bien apparaîtront suffisamment grandes (après zoom) mais tronquées : l’internaute devra les faire glisser sans arrêt de gauche à droite sur son écran.
Pas pratique, n’est-ce pas ?

Pour éviter ce problème, il existe une solution qui consiste à :
- créer des pages avec des éléments de largeur variable
- ajouter un balise META qui modifie la largeur de la page en fonction du type d’appareil qu’utilise l’internaute.
Par ce procédé, les pages pourront être visualisées confortablement quelque soit le type d’écran. On évitera ainsi le double travail qui consiste à créer des pages pour écran normal et d’autres pages pour petit écran.

Détail du procédé (fonctionne bien avec la version 1.31 d’OE) :

1. Préalable : bien maîtriser openElement et notamment savoir modifier de façon avancée les propriétés de chaque élément :
- en sélectionnant l'élément dans l'explorateur d'éléments (colonne de gauche) - y compris parfois la page elle-même, en tête d'arborescence
- en modifiant ses propriétés (quelques unes) dans l'onglet Propriétés (colonne de droite) 
- en modifiant ses propriétés (la plupart) dans l'onglet Styles > Personnalisation (colonne de droite aussi)
- en vérifiant, avant de modifier une propriété, la zone et l’état sélectionnés dans l’onglet Styles (c’est normalement la zone « Cadre principal » et l’état « Normal », sauf effet particulier recherché) 

2. Créer un nouveau projet sans modèle. Une fois sur la page d’accueil, modifier ses propriétés : Styles > Personnalisation > Largeur : auto ; Largeur maximum : 900 (ou tout autre valeur fixe, à ajuster selon le résultat attendu sur écran classique)
NB : si on ne lui attribue pas de largeur maximum, la page ne sera pas centrée.

Important : Enregistrer la page après chaque modification, sinon certains valeurs (largeur « auto », ou largeur maximum de la page, par exemple) risquent d’être effacées.

3. Déplacer vers le bas le « Contenu bas » (vide) qui ne sert à rien et qui gêne : Explorateur d’éléments > Elements non visibles : sélectionner la ligne hachurée qui se trouve dans le bas de la zone d’édition puis la remonter contre la ligne qui se trouve juste au-dessus. Sélectionner ensuite cette dernière (la ligne au-dessus de celle hachurée) puis la descendre d’au moins une hauteur d’écran.

4. Ne pas utiliser de calque pour y mettre des éléments visibles (en-tête, barre de navigation, etc.), vous comprendrez pourquoi après avoir mis ce tutoriel en pratique. Cependant, le calque sera quand-même utilisé pour y ajouter du code HTML (élément non visible) - les instructions sont détaillées à la fin. Il faut donc conserver le calque par défaut et l’associer à chaque page.

5. Ajouter un élément Conteneur > Panneau d'éléments, puis modifier sa propriété Comportement > Mode d'affichage : relative. On glissera ensuite dans ce conteneur tous les éléments à ajouter dans la page (textes, boutons, etc.)

Explication (pour les non-initiés au CSS) : par défaut tous les éléments ont une « position : absolute » c'est à dire que leur position est fixe dans la page. Or dans le cas présent on veut que les blocs de texte aient une largeur variable, ce qui aura pour conséquence de faire varier aussi leur hauteur en fonction de la taille de l'écran. Pour éviter que les éléments se chevauchent, il faut laisser le logiciel gérer leur emplacement dans la page : tous les éléments vont s'empiler automatiquement de haut en bas dans l'ordre de leur création. C'est ce que permet justement la propriété « position : relative », et le seul endroit, à ma connaissance, où les éléments peuvent l'obtenir avec OE c'est à l'intérieur d'un Panneau d'éléments.

6. Ajouter chaque élément (texte, bouton, image...) en le faisant glisser dans le Panneau ainsi créé 

7. Modifier les dimensions et le positionnement de chaque élément (sauf le Panneau lui-même et sauf cas particuliers indiqués plus bas) : Dimensions > Largeur et Hauteur : auto ; Positionnement > Distance haut et gauche : supprimer les valeurs qui s’y trouvent

8. À chaque élément (sauf au Panneau), mettre une marge extérieure en haut et à droite (par exemple 5 pixels), pour "aérer" la présentation

9. Après avoir ajouté ainsi quelques éléments dans le Panneau (nommé « Panel » dans l’explorateur d’éléments), modifier les propriétés du Panel ainsi : Largeur : auto ; Hauteur : 1200 (ou toute autre valeur fixe, à ajuster selon son contenu) ; Distance haut et gauche : supprimer les valeurs

NB : un phénomène bizarre se produit parfois : les dimensions de la page et du Panel changent d’elles-mêmes et remplacent les valeurs saisies (ou peut-être ai-je rêvé ?). Si vous constatez que la présentation est chamboulée sans comprendre pourquoi, vérifiez tranquillement les propriétés : largeur « auto » pour la page et le Panel, largeur maximum fixe (exemple : 900px) pour la page.

10. Les images malheureusement ne peuvent pas être mises aux dimensions variables (en « auto » elles ne s’affichent pas, et en « % » au lieu de « pixel » les proportions hauteur/largeur sont déformées). Il faut donc leur attribuer une largeur fixe (exemple : 320 px).

11. Les autres éléments : certains (par exemple Google Maps) s’adaptent bien à une largeur variable, il faut leur affecter une largeur et une hauteur en pourcentage (exemple : 100%).
Je n’ai pas testé le dimensionnement variable pour tous les éléments, je vous laisse le soin de le faire (essayez en mettant « auto » ou « 100% » sur leur hauteur et/ou largeur)

12. De temps en temps, vérifier le rendu en simulant un petit écran : sous OE, rétrécir la zone d'édition en déplaçant le montant de la colonne de gauche vers la droite. Si les cadres de texte sont automatiquement redimensionnés, si on continue à lire un paragraphe en entier, c'est parfait ! Si par contre on voit apparaître en bas une barre de défilement horizontal, alors il y a une erreur : relisez les instructions. 

13. Eviter de faire un menu horizontal via l’élément « menu accordéon ». Même si techniquement ça marche, grâce à la propriété « affichage : ligne » (voir mes précédentes contributions), l’inconvénient est que sur petit écran la coupure en bout de ligne (le « retour à la ligne ») n’est pas fait de façon propre (le bouton de droite est coupé en deux). Utiliser plutôt les boutons-liens ou images-liens. Comme pour les images, il faudra évidemment leur attribuer des dimensions fixes.

14. Pour modifier l’ordre des éléments dans la page, ça n’est pas évident puisque tous les éléments s’empilent dans l’ordre de leur création. Alors voici l’astuce : il suffit de couper-coller (Ctrl+X puis Ctrl+V) les éléments qu’on veut déplacer, en commençant par le haut. Ainsi vous constatez que lors du « coller », l’élément se replace automatiquement en bas de liste.

15. Chaque fois que vous coupez-collez ainsi un élément (ou que vous le dupliquez par copier-coller), vous noterez que le nouvel élément est créé avec des Distances haut et gauche de 5 pixels, il faut donc [de nouveau] supprimer ces valeurs.

16. Noter que sur les téléphones portables, les effets d’animation suivants ne fonctionnent pas : image gif animée (sauf sur iPhone), animation flash, état « Survol de souris » d’un bouton... et sûrement d’autres.

17. À présent, voici comment aligner des boutons et de petits éléments de gauche à droite :

- Arrivé à ce stade vous avez pu constater que tous les éléments s’empilent verticalement, mais qu’il n’est pas possible de faire tenir plusieurs éléments sur une même ligne. C’est pourtant nécessaire par exemple pour créer une barre de navigation horizontale avec des boutons. Voici comment procéder :

- Normalement c’est la propriété « Flottement : gauche » qui le permet, mais elle ne fonctionne pas car le logiciel insère devant chaque élément un séparateur fictif avec la propriété CSS « clear : both », ce qui a pour effet d’effacer le flottement. Voici donc une solution de contournement :

- Ouvrir avec Bloc-notes (ou Notepad++) le fichier :
/openElement/(mon-site)/WEFiles/Css/openElement.css
puis le modifier ainsi : dans le paragraphe commençant par « .XBodyLineSeparator », remplacer « clear:both; » par « /* clear:both; */ », ce qui le met en commentaire, puis enregistrer

- De retour dans OE, Enregistrez : vous constatez que tous les petits éléments présents dans votre Panneau s’alignent désormais de gauche à droite, dans la limite de la largeur maximum de la page, puis de haut en bas comme avant

- Pour ramener en début de ligne les éléments qui doivent s’y trouver, modifiez-les ainsi : propriété Annuler accrochage : les 2.

18. Tout fonctionne, jusqu’ici ? Parfait ! Vous maîtrisez maintenant la création d’une page en mode « flottant »... Pour les autres pages, il est facile de les créer par duplication de la page d’accueil. Conseil : créez d’abord dans la page d’accueil votre menu de navigation complet, c’est à dire un bouton-lien pour chaque page prévue. Ainsi vous n’aurez pas à recopier les boutons sur toutes les pages, une fois celles-ci créées, il suffira de modifier les liens.

19. Après avoir créé une ou plusieurs pages, ouvrir le calque et y ajouter un élément Interactivité > Bloc de code masqué qui contiendra la balise META destinée à réduire la taille de page pour petits écrans :
- dans Type de script, sélectionner Html
- dans Emplacement, sélectionner Dans l’entête
- copier-coller la ligne de code suivante :
<meta name="viewport" content="width=device-width">
- Enregistrer l’élément puis enregistrer la page calque
- Ouvrir chaque page et l’Enregistrer, sinon la modif du calque n’est pas reportée sur les pages

NB : au lieu de "width=device-width" d’autres valeurs sont possibles, par exemple "width=320" pour forcer la largeur de la page en pixels. Mais le résultat varie suivant le type d’appareil (smartphone, iPhone...) et de navigateur. Voir détails de la syntaxe par exemple sur : https://developer.mozilla.org/fr/docs/Mobile/Viewport_meta_tag

20. Après avoir publié votre site via la fonction « publier » d’OE, il vous faudra encore publier manuellement - par exemple via le logiciel FileZilla - le fichier openElement.css que vous avez modifié (cf plus haut), car OE l’a bien transféré... mais depuis un autre dossier.

Exemple de site construit avec ce procédé : http://aimag.free.fr
J’ai testé sur Samsung Galaxy Y GT-S5360 et iPhone 3GS, avec leur navigateur d’origine : le rendu est correct. N’hésitez pas à laisser vos commentaires si vous avez l’occasion de tester sur d’autres appareils.

Haut de la page
MichelH allez vers le bas
Newbie
Newbie


Depuis le: 16 Jan 2013
Status: Inactif
Points: 26
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MichelH Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Feb 2013 à 22:35
Et bravo au concepteur d'openElement d'offrir cette possibilité ("position:relative" et "floating:left"), assurément cela offre des possibilités que d'autres éditeurs n'ont pas.
Smile

Et je retire ma critique sur le "contenu bas". J'étais énervé, voilà tout. Si la fonction existe c'est qu'elle sert sûrement à quelque chose...
Smile
Haut de la page
Yannick OE allez vers le bas
Admin Group
Admin Group


Depuis le: 26 Mar 2012
Pays: France
Status: Inactif
Points: 977
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Yannick OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 14:31
Bonjour,

Ce lien pourra vous être utile dans la conception de votre site : http://dfcb.github.com/Responsivator/


Edité par Yannick OE - 07 Feb 2013 à 14:31
Rejoignez-nous sur Facebook ou Twitter et soyez les 1ers à être au courant de l'actu OE.
Haut de la page
Grosdede allez vers le bas
Newbie
Newbie


Depuis le: 08 Août 2007
Pays: France
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Grosdede Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 16:11
Bravo à MichelH pour la procédure et ce tutoriel.
Je l'ai essayé, et cela fonctionne bien, pour les photos on peut solutionner.
Je n'ai pas pu centrer les boutons de menu, il y a peut-être une manip ?
Merci et encore bravo !
Clap
Haut de la page
tymallus allez vers le bas
Newbie
Newbie


Depuis le: 27 Mar 2011
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer tymallus Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 17 Mar 2013 à 21:58
Bonsoir, Voulant avoir un site qui est lisible sur différents supports, j'essaye le tuto repris ci-dessus.

J'avoue être un peu largué.

Je crée la page d'accueil comme indiqué sur le tuto.
Mes éléments se mettent les uns en dessous des autres mais, je n'arrives pas à les mettres à leur place sur ma page.


Au secour....



Haut de la page
MichelH allez vers le bas
Newbie
Newbie


Depuis le: 16 Jan 2013
Status: Inactif
Points: 26
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MichelH Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Mar 2013 à 15:03
Effectivement, cette technique est prévue pour un positionnement AUTOMATIQUE des cadres dans la page, c'est à dire qu'on ne peut plus faire de glisser-déposer pour les placer à un endroit précis de la page. On ne peut agir que sur l'ORDRE d'empilement des objets. C'est ce que j'explique dans un des paragraphes.
Haut de la page
tymallus allez vers le bas
Newbie
Newbie


Depuis le: 27 Mar 2011
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer tymallus Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Mar 2013 à 15:06
Je ne comprends pas bien.

Mon but étais de créer le même site que celui qui est en ligne mais avec affichage sur différentes tailles d'écrans.

Par contre,

Lors de la création du site, j'ai mis tout les boutons raccourcis sur le calc que j'emplois pour toutes mes pages et, il y a des pages sur lesquels il ne fonctionnent pas .Est ce normal?

Merci de votre réponse et gentillesse.
Haut de la page
Marie OE allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Dec 2008
Pays: France
Status: Inactif
Points: 876
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Marie OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Mar 2013 à 15:20
Message posté par tymallus tymallus a écrit:

Je ne comprends pas bien.

Mon but étais de créer le même site que celui qui est en ligne mais avec affichage sur différentes tailles d'écrans.

Par contre,

Lors de la création du site, j'ai mis tout les boutons raccourcis sur le calc que j'emplois pour toutes mes pages et, il y a des pages sur lesquels il ne fonctionnent pas .Est ce normal?

Merci de votre réponse et gentillesse.

Bonjour,
Pouvez vous être plus précis dans la description de votre problème? Si vous avez un exemple en ligne, pouvez vous nous donner l'url?
Cordialement, l'équipe d'openElement.
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.