Transformez votre site en site "RESPONSIVE". 
Autor: Gerard L.Uniquement pour ceux qui s'impatientent de rendre leur site "RESPONSIVE".
Voir mon site en exemple https://www.vindebacchus.com (je viens de terminer la page d'accueil). Je vous donne la procédure pour 1 page. A la fin de cette procédure vous aurez tout compris pour faire toutes les pages de votre site.
Vous avez besoin de modifier 3 fichiers et pas plus et... beaucoup de patience.
1 - Copiez collez les fichiers "Template.CSS" (qui contient les élèments permanents de votre page comme le menu.) "index.CSS" (qui contient les élèments propres à la page) et index.html, dans un dossier à part.
2- Pour index.html
Remplacez votre meta name="viewport" par:
<meta name="viewport" content="width=device-width, initial-scale=1/" />
Puis à tous les WIDTH supérieur à 320px placer des /* et des */ ce qui donne
/* width:1244*/
Sauvegardez et transférez votre index.html sur votre serveur, c'est terminé pour ce fichier.
3 - Allez sur la page d'accueil de votre site via Google Chrome et faites F12 pour ouvrir l'inspecteur. A gauche dans l'onglet "ELEMENT", vous retrouvez l'HTML de votre page d'accueil. En cliquant sur les lignes, les parties correspondantes de votre site se mettent en surbrillance et dans la partie droite dans l'onglet "STYLE" apparaissent les élèments du CSS à cocher ou à décocher selon la résolution désirée.
Dans l'onglet "SOURCES" vous retrouverez votre fichier Templates.CSS, ajoutez pour chaque dimension souhaitée le code suivant ( Ici exemple en 667px pour l'Iphone 6 et en 320px pour Iphone 5):
A vous bien sûr de l'adapter selon votre site tout en réduisant la page de votre navigateur pour voir évoluer le résultat.
Commencez par mettre selon les résolutions d'écran désirées (ici 667px et 320px):
@media screen and (max-width:667px){
Puis modifier votre page selon vos besoins les élèments permanents (menu, bandeau, pied de page etc...) en ajoutant ceci: (j'ai mis entre /* et */ ce à quoi cela correspond).
/* Reglage hauteur Menu */
#imMnMn { height: 80px; width: 300px; margin-left: 20px;}
/* Reglage hauteur du fond haut arriere */
#imHeaderBg {height: 290px; width: 667px;}
/* Hauteur du texte haut */
#imPage {padding-top: 285px; margin: 0px auto 0px auto; width: 667px; position: relative;}
/* Retrait du bandeau */
#imHeader {display: none; }
#imContent {min-height: 380px; position: relative; width: 667px; }
#imContentGraphics {min-height: 380px; position: absolute; top: 180px; bottom: 300px; left: 0; width: 667px; }
#imFooter {height: 300px; width: 667px; }
@media screen and (max-width:320px){
/* Reglage hauteur Menu */
#imMnMn { height: 80px; width: 300px; margin-left: 20px;}
/* Reglage hauteur du fond haut arriere */
#imHeaderBg {height: 290px; width: 320px;}
/* Hauteur du texte haut */
#imPage {padding-top: 285px; margin: 0px auto 0px auto; width: 320px; position: relative;}
/* Retrait du bandeau */
#imHeader {display: none; }
#imContent {min-height: 380px; position: relative; width: 320px; }
#imContentGraphics {min-height: 380px; position: absolute; top: 180px; bottom: 300px; left: 0; width: 320px; }
#imFooter {height: 300px; width: 320px; }
}
Sauvegardez et transférez votre Template.CSS dans le dossier STYLE sur votre serveur c'est terminé pour ce fichier.
4 - Dans l'onglet "SOURCES" de l'inspecteur Faites de-même pour le index.CSS.
Mettez les codes suivants selon la résolution recherchée.
@media screen and (max-width:320px){
Puis réglez chaque élèment propre à la page tout en réduisant votre navigateur pour voir le résultat.
/*bandeau image*/
#imCell_724 { display: none; }
}
("none" c'est pour enlever un élèment).
Sauvegardez et transférez votre index.CSS sur votre serveur dans le dossier PCSS et c'est fini. Votre site est RESPONSIVE.
Si vous n'y arrivez pas ou si vous abandonnez (ce que je comprendrais) retransférez votre site de WEBSITE X5 vers votre serveur et vous retrouverez votre site comme avant mais... non RESPONSIVE.
Good Luck
Gérard L.
Le menu ne doit pas cacher le texte, les éléments doivent se placer les uns sous les autres.
Utliser le simulateur: http://mobiletest.me/
J'ai tester X5 pro , il fait un scrollbar, ce qui acceptable, mais ce n'est pas ça non plus...
clodius
Bonjour!
...meilleur chance la prochaine fois !
Pardon, mais après avoir tester ton site https://www.vindebacchus.comdanshttp://mobiletest.me/ il n'est pas responsive mobile.
Est-ce qu'il y en a d'autre qui ont des sites responsive a me montrer pour me convaincre de me mettre à websitex5 ? Merci.
X
Autor
Il l'était... mais comme il s'agit d'un site commercial et qu'il est quotidiennement modifié, la solution responsive n'était pas adéquate (gestion trop mourde en terme de codes) et j'ai opté pour la solution "Multi" sites à savoir un site en 3 version (Ordi, Ipad et Mobile) avec des redirections automatiques vers chaque URL (www.ipad.vindebacchus.com et www.mobile.vindebacchus.com).
En revanche pour un site "vitrine" et terminé dans sa conception avec WebsiteX5 et ne nécessitant pas de mise à jour trop souvent... pourquoi pas !
Pour ceux qui seraient en phase de CRÉATION de sites RESPONSIVE: oubliez WebsiteX5.
Désolé Gendron D. mon post s'adressait à tous ceux qui ont un site terminé avec WEBSITEX5, qui ont passé énormément de temps et d'investissement sans vraiment pouvoir changer de logiciel et sûrement pas à ceux qui pas vont créer un site Responsive.
La chance est hors sujet ici. Il s'agit d'apporter des solutions concrètes pour les plus anciens utilisateurs de WebsiteX5.
Pour Gendron D. :
Voici 3 sites que j'ai dupliqués et modifiés pour les mobiles (grâce aux conseils d'Arnaud !) :
www.assistante-34.com dupliqué en www.assistante-34.com/mobile/index.html
www.equiserv.fr dupliqué en www.equiserv.fr/mobile/index.html
www.sunbeachcafemeze.com dupliqué en www.sunbeachecafemeze.com/mobile/index.html
Le concepteur de Sculptures Modernes m'a contactée à ce sujet et a priori il a pu adapter son site http://www.arts-sculptures.com/index.html avec la même procédure.
Bien cordialement à tous en attendant la solution Responsive d'iIncomedia
Autor
Bonjour Danielle F.
J'attire votre attention au déférencement de vos sites car Google prend des mesures contre les mauvaises redirections vers les versions smartphone des sites web.
Que faire pour préserver votre référencement Google ?
D'abord annoter dans le code HTML pour chaque URL
Sur la page pour ordinateur http://assistante-34.com/page-1, ajoutez :
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://<span>assistante-34.com/mobile</span>/page-1" >
et sur la page mobile http://assistante-34.com/mobile/page-1, l'annotation doit être la suivante :
<link rel="canonical" href="http://www.<span>assistante-34.com</span>/page-1" >
Il est obligatoire d'utiliser cette balise rel="canonical" sur l'URL mobile qui renvoie vers la page pour ordinateur.
Puis annoter dans les sitemaps
L'annotation rel="alternate" des pages pour ordinateur peut être incluse directement dans les sitemaps comme suit :
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://wwwassistante-34.com/page-1/</loc> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://<span>assistante-34.com/mobile</span>/page-1" /> </url> </urlset>
La balise rel="canonical" obligatoire pour l'URL mobile doit toujours être ajoutée au code HTML de la page mobile.
Voir les explications détaillées sur
https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls?hl=fr
Cordialement
Gérard.L
Bonsoir Gérard,
Je viens seulement de prendre connaissance de votre post du 3 juillet dernier
en désirant tester votre procédure citée en tête de ce post sur un projet test pour mon site .... Veuillez m'excuser pour ce loupé et par voie de conséquence pour mon silence.
Je suis un peu (bcp) néophite concernant le langage des codes et mon ignorance m'a très vite rattrapée quand il a fallu modifier les fichiers index.css et templates.css. Je suis allée les chercher via l'explorateur windows puis directement depuis WSX5 mais je coince ; impossible de trouver l'élément meta name="viewport".
Inutile de vous dire que votre post ci-dessus m'a laissée ce soir avec un grand ? et je suis allée dans la foulée vérifier le référencement de mon site par google et a priori tout va bien. Je suis allée également consulter la page developers.google pour tenter de comprendre.
Auriez-vous l'amabilité de m'indiquer comment accéder à la modification des fichiers ?
Je vous remercie vivement pour votre aide.
Bien cordialement,
Danielle F.