Rendre mon site CMS mobile friendly pour Google

Résolu

Tiger46 Messages postés 247 Date d'inscription Statut Membre Dernière intervention -
Tiger46 Messages postés 247 Date d'inscription Statut Membre Dernière intervention - 30 avril 2015 à 12:38

Bonjour,

j'ai créé un site ( annuaire en CMS ) qui vient d'un script dont le propriétaire a disparu et qui n'est donc plus mis à jour etc ... Or dans les pages, le code etc n'est pas prévu le mobile friendly ( récente mis à jour de l'algorithme de Google qui demande à ce que les sites soient adaptés en taille de police, largeur de page etc aux smartphones ), ce qui pénalisera le référencement sur mobile ...

Or ayant installé un CMS tout prêt et n'étant pas un spécialiste du code etc je ne sais pas quelles sont les modifications à faire etc ...

Je me demandais donc si quelqu'un pouvait m'aider ( m'expliquer, me le faire, m'indiquer un site bien qui explique comment faire par exemple ou autre etc ... ) svp ...

Merci d'avance ...

Voici mon site : ICI

Le CMS est Arfooo pour ceux qui connaissent ...

Merci :-)

A voir également:

Rendre mon site CMS mobile friendly pour Google
Google maps satellite - Guide
Dns google - Guide
Google maps - Guide
Site comme coco - Accueil - Réseaux sociaux
Site de telechargement - Accueil - Outils

2 réponses

Réponse 1 / 2

dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention 1 452

Bonjour,

Tu peux appliquer ce tutoriel, trouvé sur le site de alsacreations.com
Rubrique : "Astuces"
Catégorie : "CSS"
Article : "Une feuille de styles de base pour le Web mobile"

C'est ce que j'ai fait pour mon site personnel, ça semble bien fonctionner.

Je ne connais pas Arfooo, mais je pense qu'il faut ajouter la balise meta dans le fichier templates/postage-sydney/includes/header.tpl

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Par exemple, après la balise :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Et modifier le CSS du fichier templates/postage-sydney/css/style.css

En ajoutant le code CSS à la fin du fichier.

@media (max-width: 640px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

    element1,
    element2 {
        float: none;
        width: auto;
    }
    
    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé */

    body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }
}
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}