Créer un site qui s’adapte à tout type d’écran |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
MichelH
Newbie Depuis le: 16 Jan 2013 Status: Inactif Points: 26 |
Options des messages
Thanks(0)
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. |
|
MichelH
Newbie Depuis le: 16 Jan 2013 Status: Inactif Points: 26 |
Options des messages
Thanks(0)
|
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.
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... |
|
Yannick OE
Admin Group Depuis le: 26 Mar 2012 Pays: France Status: Inactif Points: 977 |
Options des messages
Thanks(0)
|
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 |
|
Grosdede
Newbie Depuis le: 08 Août 2007 Pays: France Status: Inactif Points: 24 |
Options des messages
Thanks(0)
|
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 ! |
|
tymallus
Newbie Depuis le: 27 Mar 2011 Status: Inactif Points: 24 |
Options des messages
Thanks(0)
|
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.... |
|
MichelH
Newbie Depuis le: 16 Jan 2013 Status: Inactif Points: 26 |
Options des messages
Thanks(0)
|
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.
|
|
tymallus
Newbie Depuis le: 27 Mar 2011 Status: Inactif Points: 24 |
Options des messages
Thanks(0)
|
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.
|
|
Marie OE
Admin Group Depuis le: 05 Dec 2008 Pays: France Status: Inactif Points: 876 |
Options des messages
Thanks(0)
|
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.
|
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |