Créer un site pour les appareils mobiles

Vous avez été nombreux à nous solliciter par email et dans les commentaires du blog pour que nous rédigions un article sur la création de sites internet version appareils mobiles. La team WebAcappella s’est donc penché sur le sujet.

WebAcappella et les appareils mobiles

Pour qu’un site soit vu sur les appareils mobiles, que cela soit les smartphones ou même les tablettes tactiles, il faut absolument qu’il soit développé dans un langage qui répond aux standards du web. Actuellement, les sites sont en langage HTML5 et CSS3.

Pour s’adapter et vous permettre de créer des sites qui soient compatibles avec ces supports de plus en plus utilisés, WebAcappella a suivi le mouvement. Tous les sites créés avec WebAcappella 4 suivent ces standards et sont désormais automatiquement publiés en HTML5 et CSS3.

Si vous créez un site internet avec WebAcappella, préferez une mise en page dont la largeur sera au maximum de 1000 pixels. Votre site sera alors visible sur les tablettes mais l’affichage sera un peu moins adapté à un écran de smartphones comme l’IPHONE.

Voici quelques conseils pour réaliser un site qui s’adaptera aux écrans de smartphones et où l’utilisateur n’aura pas à zoomer pour pouvoir lire vos textes.

Concevoir un site spécial smartphone

Commencez par paramétrer la largeur de votre maquette à 900 pixels. Ainsi, il n’y aura pas de scroll (barre de défilement horizontal) sur l’écran de votre téléphone et l’affichage sera fixe.

Ajoutez un fond, un menu de navigation, des boutons, etc.

Ensuite, créez vos pages. Vous pouvez mettre autant d’éléments que vous souhaitez. Des images, des albums dynamiques, des blocs « Couleur ».

La seule contrainte importante est pour vos textes. Pour un bon confort de lecture, nous vous conseillons d’utiliser des tailles de police différentes :

> pour vos textes : taille 36 minimum

> pour vos titres : taille 44 minimum

Vous avez ensuite le choix de faire une version avec plusieurs pages ou, si vous le souhaitez, et c’est une tendance très actuelle, vous pouvez créer un site avec une page toute en hauteur et basée sur la navigation par défilement vertical (scroll vertical). Jouez alors avec l’élément « ancre HTML » pour naviguer dans votre page dont la hauteur pourra être de 7000 pixels par exemple si vous avez beaucoup de contenu. Il sera important de mettre des liens « haut de page » (une image par exemple qui fera un lien vers l’ancre « haut ») si votre menu est disposé de manière fixe dans le haut de votre page.

Sachez que vous pouvez aussi créer un menu flottant qui sera tout le temps visible et bougera en même temps que le défilement vertical de la page. C’est une astuce donnée par l’un de nos internautes (merci à Kezako Studio) et que vous retrouverez en commentaire dans l’article sur les ancres HTML.

Pour rediriger l’internaute vers la version mobile de votre site, vous pouvez ensuite soit mettre un lien « Version Mobile » sur votre site standard ou sinon, pensez au QR CODES, code-barres que vous pourrez générer gratuitement sur certains sites internet.

Si vous n’avez pas d’idée sur comment designer votre site version mobile, n’hésitez pas à visiter, depuis votre smartphone, des catalogues de templates en ligne pour vous en inspirer.

15 Comments

  1. teboul.net

    Merci beaucoup.
    J’ai commencé un site mobile et ça me réconforte de lire ce post 🙂

  2. Touareg

    Bonjour,
    N’y aurait-il pas 1 astuce pour que au chargement de la page il y ait 1 détection automatique qui fait basculer en mode « site mobile » ?

    • kezaco

      Moi j’ai trouvé ce code qui permet d’être reconnu directement par les smartphone et fait basculer la page du site vers le mobile. Par contre, il renvoie aussi les tablettes. Je ne sais si le code sera visible. voir ci-dessous :

      if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
      window.location = « http://nom-de-domaine-mobile.fr »;
      }

      • kezaco

        Bon effectivement il en manque un bout, mais si vous allez dans le code source de ma page vous trouverez le code complet en recherchant CUSTOM HTML CODE ou Android

      • Touareg

        Pas encore eu le temps de tester (d’autant que je ne suis pas bleu…). Mais je te remercie beaucoup…

  3. Henri

    Bonjour,
    Je réalise également une version mobile avec WA. Pouvez-vous nous donner une méthode pour une redirection automatique de la page accueil vers la page mobile, lorsque l’on est sur un smartphone.
    Merci beaucoup

    • Team WebAcappella

      Bonjour à tous !
      Notre équipe développement va commencer à travailler sur la détection automatique pour l’intégrer directement dans le logiciel.
      Nous vous tiendrons informés dans le blog ! 🙂

  4. antoine

    Pour la redirection automatique il faut éditer le htaccess : http://www.commentcamarche.net/faq/30950-rediriger-un-internaute-vers-un-site-mobile

    J’ai une question après avoir créer un sous-domaine m.domaine.com sur ovh comment publier dessus avec le logiciel ?

    • Team WebAcappella

      Bonjour Antoine,
      Vous pouvez contacter l’équipe technique directement sur votre espace client, rubrique support technique.
      😉

  5. designatic

    Bonjour,
    Pour ceux qui cherche la redirection, voici le texte à copier/coller dans la zone de modification du .htaccess sur Web Acappella (Site Web -> Propriétés -> « logo plume » -> Éditer le htaccess) :

    RewriteCond %{HTTP_USER_AGENT} « ipod|iphone|ipad|android|palm|googlebot-mobile » [NC]
    RewriteRule (.*) http://www.VOTRE-SITE-MOBILE.fr [R=301,L]

    Testé et fonctionne parfaitement sur Androïd, iPhone, iPad, tablettes…

    J’espère que mon commentaire vous aura été utile ! 🙂
    À bientôt.

  6. sebastien

    Voici le code que j’utilise pour mon site.

    if (document.location.search.indexOf(« skipmobile ») >= 0) {
    document.cookie = « skipmobile=1 »;
    }
    else if ((document.location.hostname.match(/\.mobi$/) || screen.width < 699)
    && document.cookie.indexOf("skipmobile") == -1)
    {
    document.location = "http://m.teboul.net&quot;;
    }

  7. MetalOS

    Merci pour le tuto. Sa serais bien d’avoir un ou deux template mobile intégrés à la future mise à jours.

  8. Carl

    Bonjours,
    Pouvez vous nous montrez comment intégrer le paiement via paypal dans la solution e commerce.
    Merci beaucoup et encore merci pour ce que vous faites.

    • Team WebAcappella

      Bonjour Carl,
      Paypal est intégré dans le module e-commerce de WebAcappella.
      Vous pouvez regarder dans les options e-commerce de l’inspecteur de propriétés du module.
      N’hésitez pas à contacter le support technique sur votre espace client si vous souhaitez plus de précisions.
      🙂

  9. Carl

    Merci Infiniment continuez ainsi !

Commentaires fermés