Créer site internet facile
Créer son site web pour les nuls

Site responsive design : comment le créer ?

10 minutes 377 vues

Aujourd’hui internet, c’est avant tout la navigation mobile. Plus les technologies évoluent, et plus les habitudes des internautes changent : on consulte le web de plus en plus, de n’importe où, n’importe quand, sur tout type d’appareils. Dans la rue, à l’étranger, chez des amis, dans la salle d’attente chez le médecin, au restaurant, dans le train…

Une présence significative sur le net n’est donc plus du tout envisageable, sans la création d’un site parfaitement adapté à tous les dispositifs mobiles.

Comment créer un site responsive design vraiment efficace, qui permette une expérience-utilisateur vraiment mémorable et agréable sur tablettes ou smartphones ? Étudions ensemble cette question plus que jamais d’actualité ! 🕵️‍♀️

Créer un site internet responsive design : en quoi cela consiste exactement ? 

Avoir un site responsive design, c’est avoir un site qui :

👉 S’affiche correctement sur tout type d’appareils connectés, y compris les dispositifs mobiles

👉 Correspond aux critères exigés par Google pour un bon référencement

👉 Présente une navigation confortable pour l’utilisateur, que ce soit sur ordinateurs fixe ou portable, smartphone ou tablette.

Créer un site web responsive

Créer un site web responsive design : pourquoi est-ce devenu incontournable ? 

En 2020, osons le dire, on ne peut plus parler de création de site, sans intégrer le responsive design.

Ce, pour au moins deux raisons corrélées :

👉 Les internautes naviguent majoritairement sur appareils connectés portatifs

👉 Google favorise les sites responsive dans son classement, et a annoncé qu’il référencerait les versions mobiles de façon prioritaire, c’est le mobile first.

Aujourd’hui, avoir un site responsive design, n’est plus un atout : c’est devenu une nécessité, sans laquelle vous serez pénalisé.

La question qui s’impose dès lors : comment créer un site web responsive digne de ce nom ?

Comment créer un site responsive design ? 

Pour concevoir un site internet responsive design, vous avez plusieurs possibilités, à sélectionner principalement selon votre niveau en informatique, mais aussi selon vos besoins.

Comment rendre mon site responsive design, si je sais coder ?

Si vous connaissez les langages HTML et CSS, vous pouvez utiliser un framework adapté, en open source donc gratuit, par exemple en vous rendant sur Twitter Bootstrap ou Foundations.

Un framework est une sorte de boîte à outils virtuelle, qui vous permet de construire un site, en créant la mise en page que vous désirez, grâce à un système de grille présentant des colonnes, dans lesquelles vous pouvez ajouter vos contenus. Ces frameworks permettent également d'insérer toutes sortes d’éléments personnalisables à votre site, tels que menus ou boutons.

Pour réaliser la version mobile de votre site, vous adaptez ensuite la mise en page aux différentes tailles d’écran. Nous vous conseillons de commencer par la version desktop, que vous pourrez ensuite simplifier pour l’ajuster aux smartphones et tablettes.

Faire un site internet responsive design avec un CMS

  • Si vous avez construit votre site avec Wordpress, Joomla ou Drupal… et que vous souhaitez le rendre responsive,
  • Ou alors si vous avez de bonnes connaissances en informatique, et que vous désirez lancer une création web avec un CMS

Sachez que ces logiciels vous laissent une grande liberté de personnalisation, mais restez néanmoins très prudent, car étant très largement utilisés dans le monde, ces outils connaissent des évolutions constantes et nécessitent de ce fait des mises à jour extrêmement fréquentes, notamment en termes de sécurité. Ces actualisations ne sont pas automatiques : c’est vous qui devez vous en charger par vous-même, il convient donc d'être très vigilant.

Voici comment procéder pour créer un site adapté aux mobiles avec template web dédié, sur un Système de Gestion de Contenu (CMS) :

  • Vous pourrez trouver un template qui vous convient sur une place de marché comme Themeforest, par exemple
  • Vérifiez sous quel type de licence fonctionne le template que vous avez choisi
  • Soyez sûr que le thème sélectionné soit garanti responsive design
  • Assurez-vous que votre template soit compatible avec la version de votre CMS
  • Renseignez-vous sur la popularité du thème désiré. Plus un thème est répandu, plus il sera sophistiqué : les possibilités de paramétrage seront plus importantes, et nécessiteront donc un peu plus de temps de configuration.

 

templateSiteW.png

Si vous êtes dans le cas où vous avez déjà construit un site et souhaitez le rendre responsive, vous pourrez migrer vos contenus vers un nouveau template.

En utilisant un CMS, vous devez gérer entièrement seul, la maintenance de votre site, en cherchant, par vous-même, les indications et les réponses à vos questions sur les différents forums, ou en vous renseignant auprès d’autres utilisateurs.

💡 Si vous êtes novice en informatique ou que vous n’avez ni le temps ni le goût de passer des heures à fouiller le net à la recherche d’informations, sachez qu’il existe une solution beaucoup plus simple pour bâtir un site responsive design : il s’agit des website builders - comme celui que nous proposons chez SiteW.

Faire un site web responsive design avec un website builder

Sur un website builder, c’est beaucoup plus facile : à vrai dire, vous n’avez aucune question à vous poser. En créant votre site, vous choisissez préalablement un template (modèle de site) pré-établi qui est nativement responsive, et donc automatiquement adapté à la navigation sur mobiles. Mais également “Mobile-friendly”, c’est-à-dire optimisé pour un meilleur référencement sur Google.

Sur certaines plateformes (c’est le cas sur SiteW), vous avez la possibilité de :

👉 Créer un site mobile automatiquement, pour aller au plus pressé, et au plus efficace rapidement,

👉 Mais également une version mobile personnalisée individuellement, pour chaque type de dispositif connecté, de sorte à mettre en place un affichage absolument impeccable.

Dans ce cas, vous ajustez votre contenu, élément par élément : en montrant / dissimulant, redimensionnant, modifiant ou repositionnant tel ou tel module, selon vos besoins.

Créer un site responsive

Faire un site responsive design facilement avec SiteW

Sur SiteW, nous avons voulu faire de la création d’un site optimisé pour mobiles, smartphone et tablettes, quasiment un jeu d’enfant. (Youpi ! ✌️)

Voici comment procéder pour concevoir une version mobile tirée au cordeau, pour vos pages web.

Sur notre outil de création de site, vous pouvez personnaliser différentes vues pour votre site : mobile vertical, mobile horizontal ou tablette. En quelques étapes simples, vous aurez créé une version mobile personnalisée :

  • Activez le mode Site Optimisé pour la vue que vous souhaitez personnaliser. La nouvelle vue s’affiche alors en superposition, sur votre écran.
  • Vous pouvez dès lors déplacer et redimensionner vos “modules” (nous appelons ainsi les composants de votre page). Utilisez la fonction de multi-sélection, si vous souhaitez effectuer une même action, sur plusieurs éléments à la fois.
  • Des outils de déplacement / positionnement des modules, sont à votre disposition si besoin, afin de vous faciliter la tâche et d’aller plus vite.
  • Vous pouvez dissimuler des éléments sur la vue mobile, si nécessaire, en cliquant sur le bouton ad hoc.
  • À l’inverse, il est également possible d’ajouter des composants uniquement visibles sur appareils portatifs.
  • Enfin, personnalisez la “barre mobile” si vous le désirez. Ce menu spécifique, qui s’affiche en mode smartphone uniquement, permet de présenter une série d’icônes donnant accès à des raccourcis (appel téléphonique, envoi d’un email, lien vers une de vos pages web ou vers un autre site, etc.). Vous pouvez modifier la barre mobile comme bon vous semble, en personnalisant les boutons : leur apparence, leur fonction et leur positionnement.

 

versionmobile.png

Création de site responsive design : comment être vraiment efficace ? 

On pourrait être tenté de croire que pour créer un site responsive efficace, il suffit de réduire la taille de la page web originelle (celle que l’on a conçue pour l’ordinateur).

C’est une erreur ! Car la navigation mobile présente des particularités auxquelles il faut idéalement s’adapter, afin de garantir une expérience-utilisateur optimale.

Commençons donc par le commencement, à savoir se demander quels sont les aspects qui caractérisent la navigation sur appareils mobiles ?

Conception de site responsive : les spécificités de la navigation mobile

La toute première chose à faire, avant de se lancer dans la conception d’un site web responsive, c’est de définir exactement les caractéristiques spécifiques liées à la navigation mobile. 

Ces éléments sont à prendre en compte avant de démarrer. Nous verrons que ces constats simples vont nous aider à établir un affichage bien plus adapté :

  • Sur smartphone, on consulte généralement un site internet en mode vertical. Ce qui réduit d’au moins 3 fois la largeur de l’écran, par rapport à un ordinateur.
  • La navigation mobile est de nature tactile.
  • On est souvent amené à consulter internet sur son smartphone, hors de chez soi.
  • Ce qui signifie que l’on est potentiellement pressé et inconfortable.
  • Quand on navigue sur le web à partir d’un dispositif mobile, c’est souvent pour trouver rapidement une information (rechercher un itinéraire, un nom ou une adresse de commerce, réserver un trajet Uber…)

Qu’est-ce que cela implique ?

  • Des pages plus étroites, donc plus longues
  • Un contenu plus petit, mais qui doit néanmoins rester aéré (accessible pour les doigts), clair et lisible
  • Une navigation facilitant un accès rapide à l’information
  • Un contenu simplifié, pour ne pas perdre de temps
  • Des performances de chargement des pages optimisées

Construction de site responsive : adapter son contenu à la navigation mobile

En termes de textes, nous vous conseillons de créer une version résumée, plus synthétique, de vos messages : comme on l’a vu, l’internaute mobile est souvent mal installé, il n’est pas là pour flâner, il a besoin d’une information concise et rapide.

 

responsivedesignmobile.png

Rendre son site responsive : un menu spécifique

Un menu déroulant de type “hamburger” (les trois traits verticaux) permet de gagner de l’espace, et d’être plus facile à cliquer sur les petits écrans des appareils mobiles. 

Créer un site responsive

Réduire le temps de chargement

Si le temps de chargement doit être réduit au minimum sur une page web traditionnelle, eh bien, sachez que c’est encore plus important sur une page web mobile !

Les utilisateurs de smartphones sont généralement pressés, et n’ont ni le temps ni la patience d’attendre de longues secondes qu’un site un peu trop lent veuille bien se donner la peine de s'afficher. Ils vous auront quitté bien avant ! Et vous, vous l’aurez plutôt mauvaise. :-p

C’est pourquoi vous devez faire attention à ce que vos pages ne soient pas trop chargées, et à ce que le code informatique de votre site soit optimisé.

 

chargementsiteresponsivedesign.png

Construire un site responsive design : quid des images ?

Dans cette lignée d’optimisation du temps de chargement, veillez à ce que vos images ne soient pas trop lourdes.

Concevoir un site responsive : une mise en page ajustée

Pour faciliter la navigation tactile, prenez quelques dispositions simples :

  • Créez des boutons et liens suffisamment gros et accessibles,
  • Réduisez éventuellement la taille des formulaires et questionnaires,
  • Privilégiez les QCM aux champs de saisie libres.

 Voilà, vous savez tout ! (Hourra ! 🙌)

Ok, peut-être pas tout, mais en tout cas suffisamment pour réaliser un site internet responsive au top niveau !

Avec un peu de dextérité, un brin de créativité, et un soupçon de sagacité, c’est sûr : vous allez faire des étincelles, et combler tous vos visiteurs, quel que soit leur support de navigation !

Frédérique Biau
Une pincée de grammaire, un brin de curiosité, un soupçon de nouvelles technologies, pas mal de rigueur, beaucoup de plaisir, et un peu de fantaisie : c’est ma recette pour partager avec vous, le fruit de mes recherches autour de la création de site !

Dernière mise à jour : 09 novembre 2020

Quoi de neuf ?
Les dernières mises à jour et nouveautés sur notre outil, après un décryptage poussé auprès de nos développeurs.