Les meilleures ressources pour développer
sereinement votre activité
Partager sur les réseaux sociaux

Meilleurs exemples de sites internet en responsive design

Que vous soyez coach, avocat, huissier, expert comptable, artisan, entrepreneur, professionnel libéral, professionnel de la santé ou du bien-être et bien d’autres métiers encore, cet article est fait pour vous.

Car comme nous allons le voir, vos futurs clients ou patients vont vous trouver en tapant votre nom ou en cherchant votre activité dans Google depuis leur smartphone. Aujourd'hui, c’est le principal réflexe pour quiconque cherche une information sur un professionnel ou une entreprise. D’où l’importance que votre site s’affiche aussi bien sur mobile que sur un ordinateur dont l’écran est, de fait, plus grand.

Or un site internet "classique", non responsive, va s'afficher de la même façon sur un ordinateur que sur un téléphone mobile. La lecture sur mobile dont l’écran est en général 3 fois plus petit va alors s’avérer très compliquée et pas pratique. C’est pour cela que votre site doit être responsive.

Sommaire interactif :

separateur définition responsive design

Qu’est ce que le responsive design ?

Le responsive design est un anglicisme un peu barbare qui définit très simplement une technique de conception de site web permettant d’ajuster automatiquement l’affichage d’une page internet ou d’une image à la taille de l’écran de l'appareil utilisé :

  • Ordinateur de bureau 
  • Smartphone
  • Tablette

Grâce à ce procédé, la présentation de la page peut également être adaptée en fonction du support. Par exemple, un contenu affiché sur trois colonnes sur un écran d’ordinateur le sera sur une seule colonne sur un téléphone portable tenu verticalement. 

Dans tous les cas, l’idée est que l’ensemble des blocs (texte, images, vidéos, nombre de colonnes) de contenus se redimensionnent et se repartissent de façon à être le plus lisible possible en fonction du support que vous utilisez.

Car sans doute, l’aurez-vous remarqué, les pages des sites internet s’affichent différemment suivant que l’on utilise un ordinateur ou un smartphone. C’est justement avec l’utilisation grandissante des smartphones que la technique du responsive design est toujours plus perfectionnée et se développe autant. Les sites sont même de plus en plus imaginés dès leur conception pour être compatibles avec le mobile. C’est ce qu’on appelle le Mobile First.

Grâce à la technologie du responsive design, les ajustements se font automatiquement, et l’expérience vécue sur le site n’en est que meilleure. La navigation sur votre site se fait alors naturellement depuis n’importe quel appareil.

Qu'est-ce que l'expérience utilisateur  sur un site internet ?

Ci-dessous une courte vidéo qui vous montre l'efficacité d'un site en responsive design.

REsponvSimplebo

separateur pourquoi créer site responsive design

Pourquoi il est important de créer un site optimisé pour l’affichage mobile ?

Dans sa dernière étude sur Internet en France, Médiamétrie chiffre à 92% le nombre de foyers connectés à Internet en France et à 53,1 millions le nombre d’internautes mensuels. Dans cet environnement hyperconnecté, c’est clairement le smartphone qui est l’outil le plus utilisé avec plus de 37,4 millions de mobinautes chaque jour. Mieux, 4 internautes sur 10 utilisent exclusivement leur mobile pour surfer sur le web, précise encore Bertrand Krug, Directeur du Département Internet de Médiamétrie dans ladite étude. 

Quelques éléments démontrant l’importance d’avoir un site internet en 2020 :

  • En 2019, un Français comptait en moyenne 3 appareils connectés et passait plus de 18 heures par semaine sur Internet, selon IHS.

  • 80% des Internautes déclarent avoir recours à Internet pour se renseigner avant d’acheter un produit ou un service. Ce chiffre grimpe à 87% en région parisienne et à 92% parmi les professions libérales et cadres supérieurs, selon l’Ifop.

  • Votre site internet est votre vitrine disponible 24h sur 24, 7 jours sur 7. Vos potentiels patients et clients peuvent ainsi trouver de jour comme de nuit toutes les informations qu’ils recherchent puis vous contacter ou prendre rendez-vous.

  • C’est un moyen d’attirer une nouvelle clientèle. Vous pouvez bénéficier du bouche-à-oreille et c’est un canal précieux à soigner. Pour autant, la personne renseignée par une autre personne aura pour réflexe de rechercher votre nom dans Google. Dès lors, un site internet bien construit et à votre image décuple votre crédibilité. Si cette même personne a été orientée par son entourage vers deux professionnels, elle choisira le profil qui la rassure le plus et notamment celui qui a un site structuré, clair, qui semble fiable et recommandé par d’autres internautes.

Quelques statistiques illustrant l’importance d’avoir un site internet compatible avec un smartphone :

  • Les détenteurs de mobiles sont plus nombreux que les détenteurs d'ordinateurs : 77% des Français possèdent un smartphone et 76% un ordinateur, selon le baromètre du numérique de l’ARCEP qui parle d’une première en France concernant cette inversion de tendance.

  • Le même baromètre indique encore que l’accès à Internet s’effectue le plus souvent à partir de smartphone (51%), puis d’un ordinateur (31%) et enfin d’une tablette (6%).

Comment être visible sur internet ?

Toutes ces données prouvent à quel point il est essentiel pour toutes les entreprises et tous les indépendants d’avoir un site internet et plus encore d’un site internet responsive.

Mais encore faut-il que votre site soit visible. Si un potentiel client ou patient vous cherche nominativement ou qu’il effectue une recherche dans Google à laquelle correspond votre produit ou votre service et que vous n’apparaissez qu’en 4ème page, votre site ne sera d’aucune utilité. 

Nous parlons de Google car plus de 9 recherches internet sur 10 en France (et globalement dans le monde) sont effectuées depuis ce moteur de recherches selon StatCounter. D’où l’importance de répondre aux exigences de Google, pas pour lui faire plaisir… mais pour être vu et développer votre patientèle ou votre clientèle.

Quelles sont les différentes façons d'apparaître sur Google ?

separateur éléments essentiels créer site responsive

Les éléments essentiels pour créer un site responsive efficace

Votre site internet qui a initialement été créé pour s’afficher sur un grand écran d’ordinateur de 13, 15 ou 19 pouces doit être parfaitement lisible sur un écran de smartphone d’environ 5 pouces, soit 3 fois plus petit. Que vous décidiez de créer ou de rénover votre site internet professionnel, il va falloir réfléchir aux éléments qui devront être ajustés sur mobile par rapport à la version initiale sur ordinateur.

Harmoniser les proportions sur le site

  • La taille de la police. Contrairement à ce qu’on pourrait croire, la taille de la police doit être plus grande sur mobile que sur ordinateur.

  • Le choix de la typologie est aussi primordial. Si elle doit être raccord avec votre univers, il faut avant tout qu’elle reste très nette et bien lisible.

  • Les espacements sont essentiels. On parle ici des espacements entre les lettres, pour éviter que les mots soient des blocs compacts ; mais aussi de bien aérer les paragraphes pour ne pas obtenir des blocs illisibles. En plus d’un bon réglage d’espacements, n’hésitez pas à jouer avec les sauts de ligne.

Faciliter la navigation sur mobile

  • Le menu de navigation. Dans un format de type ordinateur, le menu est souvent présenté de façon horizontale. À l’inverse, dans un format “mobile” ou “tablette”, il faut préférer un menu hamburger. Il s’agit de 3 lignes horizontales qui, lorsque l’on clique dessus, permettent d’ouvrir un menu déroulant, rendant plus simple le passage d’une page à une autre.

  • Les boutons d’appel à l’action. Ces boutons (ou bannières visuelles) sont le gage que vos visiteurs pourront se diriger vers les pages que vous leur recommandez. En format mobile, les appels à l’action seront plus grands, plus aisément cliquables du bout du doigt.
    Où mettre les boutons  d'appel à l'action sur son site ?
  • Les formulaires. Qu’il s’agisse des formulaires de contact, de téléchargement ou de demande de devis, la règle est la même : il doit être facile de les compléter sur mobile et tablette. Cela implique que les champs et leur description deviennent plus larges et que le clavier de l’appareil utilisé permette de passer facilement d’un champ à un autre.

  • De façon générale, il peut s’avérer opportun d’alléger vos contenus voire d’en supprimer certains en responsive. Ce sera le cas d’images ou d’une partie du texte non-nécessaires à la compréhension de votre message par exemple. Ceux-ci pourraient venir plus encombrer la navigation sur mobile qu’autre chose. À vous de juger quels éléments, sont indispensables pour comprendre votre activité. Sur l’outil Simplébo, un simple paramètre vous permet de déterminer si un élément est visible ou non en version mobile.

  • La barre latérale de votre blog va également disparaître sur mobile. On y trouve souvent des éléments très importants, tels que les “articles recommandés”, ou encore des appels à l’action pour s’inscrire à une newsletter, ou le partage sur les réseaux sociaux. Il vous faudra donc trouver un moyen pour que ces éléments-clés passent en dessous ou dans le corps de votre article.

Adapter la charte graphique

On ne surfe pas sur internet de la même manière sur mobile que sur ordinateur. Il est d’ailleurs prouvé qu’on passe significativement plus de temps à consulter une page sur écran de bureau que sur mobile.

D’où l’importance de repenser l’agencement de vos pages web en fonction du format mobile : vos clients potentiels, sur mobile, devront être encore plus rapidement convaincus de l’intérêt de faire appel à vous. 

  • Le logo. Votre logo aussi doit être responsive. L’idée n’est pas de le réduire à la petite place qui lui sera alloué sur votre site version mobile. S’il est simple et épuré, vous pourrez sans doute le conserver tel quel (en le réduisant), mais si sa composition est plus complexe, il faudra sans doute l’épurer, tout en respectant votre personnalité bien sûr, ou réaliser quelques ajustements.

  • Le nombre de colonnes. Le format mobile est plus harmonieux et lisible quand il est constitué d’une seule colonne. Compte-tenu de cette mono-colonne, il faut bien anticiper que vos visiteurs devront scroller, c’est-à-dire effectuer un mouvement de doigt pour faire défiler la page et accéder ainsi au reste du contenu. Pensez donc à bien déterminer les éléments-clés qui doivent apparaître en tout premier sur vos pages web en version mobile.

separateur exemples sites responsive design inspirant

3 exemples de sites responsive avec un design inspirant

exemple qualiair site internet responsive designQualitAir&Sea

  • Site web professionnel avec un design sur-mesure reprenant la charte graphique de l'entreprise.
  • Disposition des éléments personnalisés en fonction de l'appareil utilisé par l'internaute comme par exemple les deux boutons d'appel à l'action : "Track & Trace" et "Contactez-nous" en bas sur la version mobile pour faciliter la navigation depuis un smartphone. 
  • Une partie "Ressources" très complète avec des contenus pertinents et des document à télécharger afin d'optimiser les performances commerciales et marketing du site.

Exemple nova int site internet responsive designNova Integration

  • Sur mobile, un bandeau horizontal en haut de la page permet aux visiteurs d'accéder au menu, de voir l'emplacement du siège social, mais aussi d'appeler directement l'entreprise.
  • Les images sont redimensionnées en fonction du support utilisé par l'internaute afin d'éviter les effets de flou.
  • Ajustement des éléments du site (texte, pictogramme, visuel, etc.) pour optimiser la lisibilité sur mobile et tablette.

Exemple AAF site internet responsive designAaf La Providence

  • Adaptation des éléments visuels en fonction de l'appareil utilisé par l'internaute pour visiter le site.
  • Optimisation des pages pour améliorer la vitesse de chargement du site sur les appareils mobiles.
  • Très grande qualité des visuels et cohérence graphique parfaite des couleurs avec les images.
conseil creation site internet responsive designLe conseil Simplebo

Nous vous avons mis en avant des sites dont le design est inspirant et efficace. La principale qualité est qu’il faut être cohérent : l'internaute doit immédiatement comprendre où il est. Privilégiez les design épurés en mettant en avant les informations les plus importantes. Ne cherchez pas à être trop innovant, la simplicité est souvent la meilleure solution. Ainsi, il est recommandé de créer un menu extrêmement simple à comprendre pour l’internaute et Google, vous pouvez par exemple choisir un menu reprenant ce format : Accueil -  À propos - Services ou Produits - Blog ou Actualités - Contact.

7 pages indispensables pour  un site internet professionnel

separateur exemples sites responsive référencé Google

3 exemples de sites responsive très bien référencé sur Google en mobile

Avoir un site internet n’est utile que si on le retrouve dans les moteurs de recherches. Or sortir du lot est bien difficile quand on sait que Google prend en compte plus de 200 critères pour classer les sites web

Pour vous démarquer de vos concurrents et optimiser la visibilité de votre site, il faut jouer sur un maximum de critères. Sans connaissance en techniques de référencement, ce travail fastidieux ne produira que peu d’effets. C’est pourquoi il est recommandé de déléguer cette tâche laborieuse.

Voici 3 sites web bien référencés en mobile et quelques explications pour mieux comprendre ce qu’il en est :

Exemple site internet responsive SEO essen sophroAlexandra Essen, sophrologue à Boulogne-Billancourt

Dans les 3 premiers résultats suite à la recherche sur Google : "sophrologue Boulogne-Billancourt"

  • Menu déroulant présentant les différentes pages du site de façon illustrées et intuitives : prendre rendez-vous, en savoir plus sur la sophrologie, en savoir plus sur la micronutrition, etc.
  • Présence de nombreux contenus sur de nombreux thèmes. Ils apparaissent de façon naturelle à différents endroits du site et sont tous répertoriés dans l’onglet “Blog”.
  • Nombreux témoignages et avis de patients.

Exemple site internet responsive design SEO avocat

Maître Céline Tulle, avocat à Paris 17

Dans les 3 premiers résultats suite à la recherche sur Google : "droit de la famille Paris 17"

  • Bonne architecture du site pour le référencement Google.
  • Articles publiés sur un blog rattaché au site. Cela montre à Google que le site est complet, à jour, et intéressant pour les internautes.
  • Google décrypte la spécialité grâce au champ sémantique lié au droit qui est utilisé et répété partout sur le site.

Exemple site internet responsive coton

Le coton français, fabrication de produits en coton personnalisables

Dans les 3 premiers résultats suite à la recherche sur Google : "produits français en coton"

  • Le site est bien structuré, le menu est simple et les pages sont bien construites pour permettre aux visiteurs de tout de suite trouver la bonne page.
  • Les textes sur les pages du site comportent les informations essentielles pour les internautes et pour le bon référencement du site.
  • Les fiches produits sont complètes avec : une description, les caractéristiques du produit, les tarifs et des photos.
conseil site responsive design SEOLe conseil Simplebo

Pour être visible sur Google, il faut être bien référencé. Or le référencement est un travail de fourmi qui demande de la constance, des mises à jour régulières et de la production de contenus. Ce dernier point est un travail qui se fait en collaboration avec votre prestataire (qui s’occupe de tout ce qui est technique) et vous-même, qui produisez de temps en temps du texte pour alimenter votre site.

separateur choisir prestataire création site responsive

Comment bien choisir son prestataire pour la création de son site en responsive design ? 

Méfiez-vous des offres alléchantes qui vous promettent un positionnement en haut de Google. Ces prestataires n’ont aucune idée des efforts déployés par vos concurrents au même moment, ils ne peuvent donc rien vous promettre.

Remettez-vous plutôt à un prestataire honnête et compétent sur tous les aspects techniques relatifs à votre site internet.

Que fait Simplébo pour le référencement de votre site web ?

Pour créer un véritable site optimisé pour le mobile, il est essentiel de prendre en compte certains éléments lors du choix de votre prestataire. 

  • Vous devez choisir une offre clé en main. S’il est tentant d’opter pour une plateforme dont l’offre semble bon marché comme chez Wordpress ou Wix, il faut bien être conscient qu’il s’agit très souvent d’un modèle de site de base. Or, pour avoir un produit finalisé comme vous le souhaitez, il vous faudra ajouter des tas d’options payantes ce qui rend la facture finale assez onéreuse. Chez Simplébo l'offre est clé en main, sans engagement et sans frais supplémentaires, vous payez chaque mois pour un service complet et un accompagnement personnalisé.

  • Un site responsive est un site dont le temps de chargement est très rapide. Aussi, veillez à ne pas l’alourdir avec des fichiers inutiles (fichier vidéo ou audio téléchargeables très lourds, textes encombrants). Il faut bien faire attention au poids des éléments qui constituent votre site.

  • S’il est très utile de passer par un prestataire compétent et sérieux pour créer et gérer votre site internet sur la durée, il est important que vous ayez la main sur le logiciel de création du site (CMS). Gérer un site internet est un travail d’équipe entre vous et votre prestataire. Simplébo est là pour vous accompagner et vous aider à devenir autonome sur votre site.

  • Votre site doit être très régulièrement mis à jour, car les normes et les usages évoluent constamment. Au bout de quelques mois, seulement, un site peut devenir obsolète notamment sur mobile et disparaître des écrans de recherche. Il est donc primordial de faire de la maintenance sur son site et de le mettre à jour ou de confier ces tâches à un professionnel dont c'est le métier.

  • Nous avons vu combien le référencement était essentiel : avoir un site, c’est bien, mais s’il n’est consulté par personne, il ne sert à rien. C’est pourquoi choisir un prestataire qui s’occupe uniquement de la création du site et ne vous accompagne pas sur son référencement est d’un intérêt limité. Il est préférable de privilégier un partenaire qui vous accompagne de A à Z, c’est-à-dire de la création au référencement du site, mais aussi tout au long de la vie de votre site. Et tout cela sans engagement.

Quels sont les pièges à éviter  lors de la création d’un site web ?

separateur conclusion meilleurs exemples sites interne responsive

Pour développer votre activité et conquérir de nouveaux clients et patients, vous devez absolument avoir un site internet compatible avec le mobile.

Comme nous l’avons détaillé, les internautes ont comme réflexe de chercher une information dans Google et plus particulièrement depuis leur smartphone. Simplébo propose aux utilisateurs qui le souhaitent de personnaliser l’affichage de leur site sur mobile en quelques clics sur l'outil de gestion du site (CMS).

Avec un site clé en main et un logiciel facile d’utilisation, il est ainsi très simple pour un professionnel indépendant, une TPE ou PME d’avoir un site internet efficace adapté à tous les appareils. 

Si vous pensez rénover entièrement votre site, sachez que votre conseiller dédié Simplébo se charge de vous proposer 4 maquettes responsive personnalisées. Vous n’aurez qu’à choisir celle qui vous convient le plus.

Développez votre activité grâce à un site bien référencé sur Google et parfaitement lisible sur n'importe quel appareil.

cta creer site internet responsive

Nicolas
Article écrit avec passion par
Notez cet article :
Laissez un commentaire sur cet article :