: 11 + 15 =

Bienvenue, Invité
Nom d'utilisateur : Mot de passe : Se souvenir de moi

SUJET : Comment créer une version mobile de son site Web

Comment créer une version mobile de son site Web il y a 3 ans 5 mois #74

  • Abderrahim
  • Portrait de Abderrahim
  • Hors ligne
  • Administrator
  • Rankadmin
  • Messages : 138
  • Remerciements reçus 2
  • Karma: 1
h175986e.jpg


Il n'est pas question ici de créer un deuxième site pour les mobiles, car cela doublerait le travail ultérieur de mise à jour des pages. Ce sont bien les mêmes pages qui s'afficheront sur tous les types d'écrans, mais de façon différente et au moyen de quelques aménagements, ceci grâce à la performance des feuilles de styles CSS.

Je vous propose dans ce post quelques solutions offertes par CSS pour adapter une présentation existante aux mobinautes : gérer la largeur, redimensionner les éléments, passer à une seule colonne, gérer les débordements, supprimer le superflu, adapter les liens et les tailles de polices selon l'orientation.

Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces.

Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide d'une règle media query de type @media (max-width: 640px) {...}.

L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels.

Préambule : fixer le Viewport
Pour être efficient au maximum, il convient de définir au sein du code HTML un élément méta Viewport de type
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cette étape a pour principal avantage d’éviter le redimensionnement automatique de la mise en page, qui rend les contenus trop petits, de fixer la largeur du mobile et de pouvoir s’y adapter par la suite. Cette instruction court-circuite le viewport par défaut, souvent bien trop large, et fournit une base commune plus proche de la réalité.

Pour tout savoir sur le Viewport, n'hésitez pas à parcourir l'article "Comprendre le Viewport dans le Web mobile".

Feuille de styles mobile
A placer directement au sein de la feuille de style CSS dédiée aux écrans...
@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;
    }
}
La touche finale : réduire de façon harmonieuse toutes les tailles de polices en orientation paysage pour qu'elles s'affichent correctement sur tous les écrans.
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}

Sachez que cette feuille de styles, à adapter selon vos besoins, est opérationnelle sur un très large panel de smartphones : iPhone, Android, Blackberry, Nokia, etc. Elle constitue la base des versions mobiles de la plupart des sites connus.
Si vous voulez aller encore plus loin, je vous conseille d'utiliser le Framework CSS "BOOTSTRAP".
(Framework utilisé par ce site ISLART.COM)
L'administrateur a désactivé l'accès en écriture pour le public.
Temps de génération de la page : 0.306 secondes

Haut