Si vous comptez cr√©er un site internet (nous avons √©crit un article sur ce sujet pour vous guider : comment cr√©er un site internet) ou si vous poss√©dez d√©j√† un site web, vous avez certainement d√©j√† entendu ce terme : ¬ę¬†site responsive¬†¬Ľ.

On entend souvent qu’il est important que notre site soit responsive, mais pourquoi ? L’agence web SR Digitale vous explique tout dans cet article. Nous allons aussi vous guider pour rendre votre site responsive.

Afin de vous permettre de trouver plus facilement les informations que vous recherchez, voici le sommaire de cet article :

  1. Qu’est ce qu’un site internet responsive ?
    1. Définition
    2. Pourquoi votre site internet doit être responsive
  2. Comment rendre votre site web responsive ?
    1. Principes de base
    1. Techniques pour les entreprises / blogueurs
      1. Vérifiez si votre thème est responsive
      2. Optimisez votre site web pour les écrans tactiles
      3. Utilisez des interfaces simples
      4. Un site internet rapide
    1. Techniques pour les développeurs
      1. Rendre un site responsive avec les mediaqueries
      2. Tester un site internet responsive
      3. Outils responsive

I) Qu’est ce qu’un site internet responsive

1) Définition

Un site internet responsive correspond √† un site adapt√© √† chaque taille d’√©cran et √† chaque appareil. Il vous est certainement d√©j√† arriver de vous rendre sur un site internet, et de vous rendre compte qu’il est inutilisable sur votre smartphone :

  • Le texte est trop petit
  • Les images d√©passent de votre √©cran de t√©l√©phone, vous √™tes oblig√©s de naviguer pour voir l’image en entier
  • Plusieurs contenus se chevauchent
  • Les fonctionnalit√©s du site ne fonctionne pas ou mal

Ces site internet qui ne sont pas responsive font fuir un grand nombre de visiteurs et ainsi font perdre des potentiels clients et ventes.

2) Pourquoi votre site internet doit être responsive

Un site web responsive permet de rendre son site adapt√© √† toutes les tailles d’√©crans et appareils. Concr√®tement, cela vous permettra d’obtenir plus de visiteurs sur votre site internet car les moteurs de recherche pr√©f√®rent les sites responsives plut√īt que ceux qui ne le sont pas. Ainsi, votre site sera mieux positionn√© dans les recherches sur internet.

De plus, comme nous l’avons vu pr√©c√©demment, un site web responsive ne fera pas fuir les visiteurs s’ils sont sur smartphone ou sur un grand √©cran car votre contenu sera adapt√© √† leur √©cran. Les utilisateurs n’auront pas besoin de d√©filer pour lire votre contenu ou pour voir une image car elle sera adapt√©e aux dimensions de leur √©cran.

Site internet responsive de l'agence web SR Digitale

II) Comment rendre votre site web responsive ?

1) Principes de base

Il y a quelques années, les sites proposaient deux versions distincts pour répondre aux besoins des utilisateurs sur smartphone. Ainsi, les entreprises devaient développer et donc investir dans deux sites pour au final le même contenu.

De plus, il n’√©tait g√©n√©ralement pas pens√© pour les autres appareils (projecteurs, tv, etc.). Heureusement de nos jours, les m√©thodes ont chang√© et il n’est plus n√©cessaire de faire un doublon de son site pour l’adapt√© √† tout les √©crans.

Pour commencer, si vous n’avez pas encore de site internet, pensez au responsive avant m√™me la r√©alisation : pr√©parer les maquettes de votre site pour les diff√©rentes tailles d’√©cran et d’appareil. Nous avons √©crit un article qui vous explique comment cr√©er un site internet moderne.

Si vous poss√©dez d√©j√† un site, pr√©parez tout de m√™me les maquettes sur papier ou sur des outils num√©riques tels que Adobe XD, Photoshop, Figma, etc. Cela vous permettra d’avoir des directives lors du d√©veloppement.

Enfin, il y a différentes méthodes de faire pour créer un site internet responsive :

  • Soit vous commencez par d√©velopper la version mobile √† chaque √©cran, puis vous adaptez votre site aux √©crans plus grands. Cette m√©thode se nomme ¬ę¬†mobile-first¬†¬Ľ.
  • Soit vous commencez par la version ordinateur puis vous adaptez votre site aux autres tailles d’√©cran.

Chez SR Digitale, nous avons choisi la premi√®re m√©thode, le ¬ę¬†mobile-first¬†¬Ľ. Avec l’exp√©rience, nous nous sommes rendu compte qu’il √©tait souvent plus simple de commencer √† d√©velopper pour les petits √©crans (smartphones) puis d’adapter pour les plus grands.

Découvrez nos offres pour la création de votre site internet

Les deux chapitres qui suivant vont vous permettre de rendre votre site internet totalement responsive, pas à pas. Le premier correspond aux entreprises ou aux blogueurs qui ne sont pas développeurs. Si vous possédez déjà un site ou si vous comptez en créer un avec un CMS comme WordPress, le premier chapitre est fait pour vous. Sinon, si vous êtes développeur, le deuxième est pour vous.

2) Techniques pour les entreprises et les blogueurs

Si vous √™tes une entreprise, un blogueur ou si tout simplement vous n’√™tes pas d√©veloppeur, ce guide vous permettra de rendre votre site responsive.

a) Vérifiez si votre thème est responsive

Si vous utilisez un CMS comme WordPress, commencez par mettre √† jour votre th√®me ou tout simplement en choisir un r√©cent : comme nous l’avons dit dans les chapitres pr√©c√©dents, le responsive design a √©t√© mis en place il y a quelques ann√©es.

Donc si votre th√®me date de plusieurs ann√©es, il est probable qu’il ne soit pas responsive. V√©rifiez donc s’il est √† jour, et si ce n’est pas le cas, que sa derni√®re mise √† jour soit adapt√©e √† tout les √©crans. Dans le cas contraire, il sera n√©cessaire de changer de th√®me.

Exemple d'un thème wordpress responsive
Exemple d’un th√®me WordPress responsive

Si vous comptez acheter un nouveau th√®me, v√©rifiez que la mention ¬ę¬†Responsive¬†¬Ľ soit pr√©sente dans la description. Pensez √† tester le th√®me gr√Ęce √† la version de d√©monstration sur diff√©rentes appareils et tailles d’√©crans.

Demandez √† l’agence SR Digitale un audit gratuit de votre site

b) Optimisez votre site web pour les écrans tactiles

Un site internet ne s’utilise pas de la m√™me fa√ßon sur ordinateur et sur smartphone : sur l’un vous utilisez une souris et un clavier pour naviguer et √©crire, sur l’autre vous utilisez votre doigt ou un stylet et votre clavier int√©grer √† votre smartphone. Ainsi, pensez √† faciliter la navigation sur les √©crans tactiles.

c) Utilisez des interfaces simples

Si votre site contient des √©l√©ments qui clignotent et qui bougent dans tout les sens, veuillez les remplacer par d’autres √©l√©ments plus simples. Un site internet peut √™tre esth√©tiquement joli, avoir des √©l√©ments graphiques complexes, mais si ce n’est pas pratique √† utiliser, il faut les remplacer.

Les visiteurs recherchent avant tout une information pr√©cise lorsqu’ils arrivent sur votre site. S’ils ne trouvent pas cette information rapidement, ils quitteront votre site, m√™me si c’est le plus beau.

Nous ne disons pas non plus d’avoir un site sans √©l√©ments graphiques, mais sachez √©quilibrez l’esth√©tisme et le pratique.

Il est √©galement important d’utiliser des polices d√©di√©es aux web et qui soient lisibles sur tout les √©crans. Ce point rejoint le pr√©c√©dent : certaines polices peuvent √™tre int√©ressantes sur ordinateur, mais si elles ne sont pas lisibles sur les plus petits √©crans, ne les utilisez pas (ou changer la police sur ces √©crans).

d) Un site internet rapide

Un site internet consult√© sur ordinateur doit charger rapidement, c’est g√©n√©ralement le cas (si vous avez choisi un th√®me correct). Mais pensez aussi que les utilisateurs sur smartphones ne sont pas forcement chez eux avec une connexion internet correcte. Ils sont peut √™tre en train entre deux champs, en voiture dans un tunnel, ou tout simplement dans une zone o√Ļ il n’y a pas une bonne connexion.

Statistiques sur le temps de chargement des sites e-commerce
Statistiques sur le temps de chargement des sites e-commerce (source : Alexa.com et Pingdom.com)

Ainsi, votre site internet doit toujours charger rapidement. Pour cela, commencez par utiliser des images compress√©es avec des tailles adapt√©es. Si vous le pouvez, choisissez des th√®mes qui utilisent le ¬ę¬†lazy loading¬†¬Ľ : les √©l√©ments charges en fonction du d√©filement de l’utilisateur. Cela permet d’avoir un site rapide.

√Čvitez aussi d’utiliser des th√®mes ou des plugins trop lourds et qui utilisent des animations qui peuvent ralentir votre site. Ce point rejoint le point c.

Vous l’aurez comprit, m√™me si vous n’√™tes pas d√©veloppeur, vous pouvez tout de m√™me rendre votre site internet responsive et ainsi augmenter votre nombre de visiteurs.

3) Techniques pour les développeurs

La plus grande partie du travail pour rendre un site web reponsive pour un développeur se trouve dans les fichiers CSS.

Ce sont les mediaqueries qui vont vous permettre d’adapter votre style en fonction des appareils, de la taille de l’√©cran et de son orientation. Les mediaqueries sont apparues avec CSS3.

a) Rendre un site responsive avec les mediaqueries

Voici la liste de mediaqueries que nous utilisons pour les projets de nos clients :

@media (min-width:320px)  { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
}

@media (min-width:481px)  { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 
    or @ 640 wide. */ 
}

@media (min-width:641px)  { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones 
    */ 
}

@media (min-width:961px)  { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
}

@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
}

@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
}

Renforcez votre équipe de développeurs

Ainsi, nous commen√ßons par cr√©er le style pour les petits √©crans, puis nous adaptons pas √† pas pour chaque taille d’√©cran plus grande. C’est tr√®s simple, il vous suffit de modifier les √©l√©ments qui ont besoin d’√™tre adapt√©s dans chaque mediaqueries correspondantes.

b) Tester un site internet responsive

Pour tester les diff√©rentes tailles d’√©cran, vous pouvez utiliser plusieurs appareils, mais l’une des solutions les plus simples est d’utiliser les outils de votre navigateur. Par exemple sur Google Chrome, il vous suffit de faire un clic-droit sur votre page internet et de choisir ¬ę¬†inspecter¬†¬Ľ.

Inspecter un élément sur Google Chrome
Inspecter un élément sur Google Chrome

La console de d√©veloppeurs s’ouvre, cliquez-sur le petit ic√īne avec un t√©l√©phone.

Passer en mode "responsive" sur Google Chrome
Passer en mode ¬ę¬†responsive¬†¬Ľ sur Google Chrome

Vous pourrez ainsi choisir la taille de l’√©cran ou utiliser des tailles pr√©-d√©finies (iPhone 8, iPhone X, iPad, etc.).

Choisir les dimensions de la page sur Google Chrome
Choisir les dimensions de la page sur Google Chrome

c) Outils responsive

Il se peut que vous utilisez d√©j√† des outils comme Bootstrap, Materialize, Material UI, etc. Ce sont des frameworks CSS qui facilitent l’adaptation des sites internet et applications sur les diff√©rentes √©crans. Nous √©crirons bient√īt un article sur ces frameworks.

Conclusion

Il est indispensable d’avoir un site responsive de nos jours. La part des utilisateurs sur smartphone pour consulter rapidement des informations ne fait que de cro√ģtre. Ne perdez pas des visiteurs √† cause de probl√®mes d’adaptation sur les diff√©rents appareils.

Si vous souhaitez en savoir plus, nous vous invitons à nous contacter. C’est avec plaisir que nous répondrons à vos questions.