12 minutes
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é ! 🕵️♀️
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.
Démarrez gratuitement la création de votre site.
Aucun moyen de paiement requis, pas de limite de temps
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é.
La question qui s’impose dès lors : comment créer un site web responsive digne de ce nom ?
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.
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.
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) :
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.
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.
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 :
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 ?
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é :
Qu’est-ce que cela implique ?
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.
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.
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é.
Dans cette lignée d’optimisation du temps de chargement, veillez à ce que vos images ne soient pas trop lourdes.
Pour faciliter la navigation tactile, prenez quelques dispositions simples :
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…
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 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.
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.
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.
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 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).
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 !
Démarrez gratuitement la création de votre site.
Aucun moyen de paiement requis, pas de limite de temps
Dernière mise à jour : 06 février 2023
4 mois offerts* sur les abonnements annuels !
Boostez votre présence en ligne pour la rentrée ! 🚀