Site responsive design : comment le créer ?

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 et 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 responsive 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 design : pourquoi est-ce devenu incontournable ? 

En 2021, osons le dire, on ne peut plus parler de création de site sans intégrer le responsive design et 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é.

Pour aller plus loin

En 2022, près d’une transaction en ligne sur deux se fait depuis un smartphone. Jetez un coup d'oeil à l'étude Payplug sur le sujet, une infographie sur les tendances et usages du mobile en 2022. 👀

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 optimisé pour mobiles, smartphone et tablettes, 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 matière 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.

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.

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 internet

Faire un site responsive design facilement avec SiteW

Sur SiteW, nous avons voulu faire de la création d’un site responsive 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.

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 ce qui concerne les 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 et il a besoin d’une information concise et rapide.

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 internet

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é.

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.

Et maintenant, nous ne sommes pas peu fiers de vous présenter quelques jolis exemples de sites responsive au top niveau, conçus sur notre plateforme de web design…

Exemples de sites web responsive réussis

Comme nous venons de l’expliquer, sur SiteW, il est facile de créer un site internet responsive :

👍 Soit en un clic, pour obtenir une version mobile très rapidement,

👍 Soit de façon manuelle, personnalisée pour chaque type d’écran.

Nos utilisateurs sont bourrés de talent, et nous allons vous le montrer immédiatement avec ces beaux exemples de sites internet responsive réalisés chez nous !

• Camélopard, vêtements made in France

Camélopard est une marque 100% française et engagée éthiquement : les produits sont fabriqués dans des conditions respectueuses des personnes et de l’environnement, et de façon qualitative et durable.

Leur superbe site internet marchand est parfaitement travaillé, et possède une version mobile permettant une expérience-utilisateur des plus agréables, quel que soit le type de support.

☝️ L’équipe de Camélopard a personnalisé sa barre mobile, en ajoutant un bouton-icône permettant d’accéder directement au panier. On peut remarquer la parfaite adaptation de la page qui inclut des photos larges sur la version PC, et des photos découpées en longueur pour la version mobile.

La version smartphone a également été synthétisée, afin de permettre un visionnage rapide; clair et limpide.

De plus, bon point supplémentaire pour eux, on peut remarquer qu’il s’agit d’un site multilingue, puisqu’il a été entièrement traduit en anglais.

• Mon Bouc, par Caroline Chinal

Du fond de sa campagne occitane, qui la nourrit et l’inspire, Caroline Chinal travaille en tant que designer graphique indépendante. Son site, créé sur notre plateforme, est tout simplement un magnifique portfolio, qui met merveilleusement en valeur ses talents d’illustratrice.

Et la version mobile de son site n’est pas en reste, comme vous pouvez le constater. 👇

Un menu mobile de type hamburger a été ajouté, dans le but d’épurer le design et de faciliter la navigation.

Les modules Texte sont centrés pour ajouter plus de symétrie et d’harmonie, et la galerie d’images s'adapte automatiquement, en superposant les illustrations, afin de permettre une grande lisibilité sur petit écran.

En ce qui concerne le footer, on peut remarquer le même phénomène d’alignement vertical des éléments, qui apporte de clarté et accessibilité dans l’appréhension des informations.

• Le Champ des Vignes, restaurant du terroir auvergnat

En plein cœur d’Aurillac, glorieuse préfecture du Cantal, le restaurant Le Champ des Vignes vous offre des produits frais de saison, sélectionnés et cuisinés avec soin.

Sur demande, le chef vous concoctera même des petits plats végétariens ou sans gluten.

La version mobile du site internet a été travaillée, afin d’offrir une expérience de navigation confortable au futur client de l’établissement.

La page d’accueil présente toutes les informations indispensables en un rien de temps, avec : un bouton-lien direct à la carte du restaurant, un accès immédiat vers l’appel téléphonique et la localisation sur Google Maps.

Autant vous dire que vous ne perdrez pas un instant sur ce site, pour trouver ce que vous cherchez !

👆 On retrouve encore une fois, un footer impeccablement composé avec un rappel, en peu d’espace, de toutes les données les plus importantes : adresse, horaires, numéro de téléphone pour réserver. On remarque à nouveau que la version mobile a été résumée, afin de ne présenter que l’essentiel.  

• Coucou Savon, des savons botaniques et bio

Lisa est originaire du Canada anglophone, et elle a toujours été passionnée par les plantes. En apprenant le français, le mot “coucou” est rapidement devenu l’un de ses préférés (parce que c’est facile et fun 🤪).
Installée dans le sud-ouest de la France, Lisa a commencé à fabriquer des savons et à les colorer avec des plantes, dans le but de s’aligner avec ses valeurs profondes : le respect de la nature et du vivant.

Regardez son superbe site internet : le design est clair, net et plein de pep’s, avec toutes ces belles teintes, douces et punchy à la fois.       

La version PC est très chouette, et la version mobile n’a rien à lui envier ! 👇

On remarque une barre mobile avec un menu hamburger tout simple, et un rappel du menu de la boutique, avec des liens sous forme d’images évocatrices. Pour un maximum de dynamisme et de sobriété à la fois !

• Main Office, agence de services administratifs

Main Office prend en charge toutes vos tâches professionnelles les plus rébarbatives : gestion comptable, commerciale, administrative, des ressources humaines, organisation d’événements, conseil & accompagnement. 

En vous remettant entre leurs mains, vous pouvez, en toute sérénité, vous consacrer à votre cœur de métier.

C’est un site internet très pro et très complet que celui de l’agence Main Office ! 

La page d’accueil annonce d’emblée la couleur : un menu riche et détaillé contenant toutes les informations nécessaires par catégories, et une grande et belle photo, en pleine largeur d’écran, qui évoque le calme, le sérieux et l’organisation. Vous l’avez compris : vous pourrez collaborer avec Main Office en toute confiance.

Leur site mobile est tout aussi bien confectionné que la version pour poste fixe. 👇

Avec un lien direct vers la messagerie et l’appel téléphonique, l’agence ne perd pas de temps et va droit au but. 

L’ajout d’une section Questions / Réponses est un bon point pour l'expérience utilisateur, car cela permet de fournir des informations efficaces et précises, mais également pour le référencement, car la page fourmille de mots-clés ciblés et spécifiques.
La version smartphone de la FAQ est limpide et sobre, avec une taille de police suffisamment importante, pour faciliter la lecture et le clic (qui permet d’afficher la réponse).

• Temps de paws, des photos de nos petites boules de poils

Antoine est un jeune homme d’une trentaine d’années qui a décidé de conjuguer deux de ses passions en une seule : la photo et les animaux.

C’est donc tout naturellement qu’il tire le portrait de nos petits amis à plumes, à poils, à deux ou à quatre pattes…

En plus de cela, Antoine reverse 5% de son chiffre d’affaires à deux refuges partenaires.

Son portfolio en ligne, réalisé, comme tous les autres sites cités dans cet article, avec notre outil, est tout simplement splendide.

Et la version mobile est également une réussite.

👆 La page “A propos” est particulièrement bien construite, aussi bien dans sa version PC que smartphone. En effet, voyez comme le choix des photos est différent, afin de s’adapter parfaitement au format réduit des appareils portatifs.

Des conseils, des astuces, un tuto, des exemples… 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 !