09 73 73 88 54

Apparu il y a quelques années, le responsive design est vite devenu incontournable : vous pouvez priver votre site internet d’une bonne partie de son trafic si vous omettez de vérifier sa bonne lisibilité sur appareil mobile.

En effet, en janvier 2015, on estimait déjà que parmi les Français :

91 % possédaient un téléphone portable

62 % possédaient un smartphone

32 % possédaient une tablette

26% possédaient un téléviseur connecté à Internet

3 % possédaient une liseuse électronique (e-reader)

Source : Google Consumer Barometer

Le nombre d’appareils mobiles ne cessant d’augmenter, la demande en sites web adaptatifs et en applications est constante.

Je vous propose de faire un petit tour d’horizon du sujet avant de vous expliquer comment rendre votre projet Web adaptable à tous les supports.

1 – En bref : qu’est-ce que le responsive design ?

 

Il s’agit de concevoir un site en garantissant la meilleure expérience utilisateur possible à tous les visiteurs, quel que soit le type d’appareil qu’ils utilisent, de l’ordinateur de bureau au smartphone. Cette approche se focalise sur la lisibilité et la navigation : l’utilisateur ne doit pas avoir à redimensionner la fenêtre, zoomer ou faire défiler le texte sur un petit écran.

Les sites web adaptatifs sont généralement codés grâce aux CSS3 Media Queries, qui permettent de spécifier des styles CSS différents pour chaque appareil, en tenant notamment compte des dimensions du navigateur.

2 – Trois méthodes pour comprendre le design adaptatif

 

Testez les sites que vous visitez

Le meilleur moyen de découvrir les caractéristiques du design adaptatif, c’est de le manipuler. Faites l’essai avec tous les sites que vous visitez, jusqu’à ce que cela devienne une habitude.

Voici quelques exemples par lesquels vous pouvez commencer :

Pourquoi ne pas commencer avec la page que vous avez sous les yeux ?

Redimensionnez votre navigateur. Vous voyez comme l’agencement du site s’adapte à la diminution ou à l’augmentation de l’espace disponible ?

Lorsque vous réduisez la taille de la fenêtre, les spécifications CSS3 mentionnées plus haut entrent en scène : dès que la taille du navigateur correspond aux points de repères renseignés, l’affichage change pour permettre une utilisation optimale dans le format utilisé. Si le site peut s’adapter à de petites fenêtres, cela signifie qu’il sera adapté aux écrans réduits des smartphones Android et autres iPhones.

Notre site change de manière fluide et efficace car il a été optimisé pour un grand nombre de formats différents. Vous pouvez faire de même avec votre site web, vous assurant ainsi que votre site sera présenté sous son meilleur jour à tous vos visiteurs.

Comme d’autres médias de grande envergure, Le Figaro.fr adopte l’approche « responsive » et son dernier design intègre un large panel de dimensions spécifiques, qui lui permettent d’afficher son contenu de manière optimale sur des appareils mobiles comme les smartphones et les tablettes.

Google applique des feuilles de style radicalement différentes selon le type d’appareil utilisé par l’internaute. Cela requiert des codes additionnels, en plus du CSS, mais cette technique est utilisée par beaucoup de gros sites web : Google, Amazon, Yahoo…

Faites des recherches

Vous trouverez nombre d’informations et de tutoriels sur le responsive design sur des blogs et autres sites internet ; faites une recherche sur le CSS3 et les « media queries ».

Si vous voulez aller plus loin, n’hésitez pas à vous inscrire à un cours ou à suivre une conférence sur le sujet !

Mettez la main à la pâte

Vous avez observé le comportement de sites web adaptatifs, vous avez glané de précieuses informations théoriques… Mais compléter votre exploration, il faut passer à la pratique !

Inutile de vous lancer dans un projet pharaonique : montez un petit site web avec des codes HTML et CSS basiques, puis intégrez le CSS3. En manipulant vous-même les codes, vous comprendrez vite leur fonctionnement.

3 – Comment créer un site web adaptatif (CMS ou autre)

 

Vous pouvez facilement appliquer les spécifications CSS3 à votre site web, qu’il soit développé avec CMS ou un autre système.

Le code CSS3 typique se compose comme suit :

@media (max-width: 700px) {

.container {

width: 100%;

margin: 0 auto;

}

}

Grâce à l’élément @media, votre site adoptera différentes mises en page optimisées selon le média utilisé.

L’attribut max-width définit la taille de navigateur déclenchant l’application des adaptations CSS3 : dans notre exemple, la feuille de style s’applique si la fenêtre fait 700 pixels ou moins.

Ce code de base peut bien sûr être répété à l’envi pour définir plusieurs mises en page spécifiques, mais inutile d’en prévoir trop. La majorité des sites adaptatifs actuels comprennent quatre ou cinq entrées @media, ce qui leur permet de s’adapter aux smartphones, aux tablettes, aux écrans de taille standard et à l’impression.

Tutoriel : création d’une page adaptative

Entrons dans le vif du sujet : nous allons faire un peu de code HTML et CSS pour voir comment créer une feuille de style adaptative.

Il vous suffira de reprendre ces éléments dans votre fichier CSS pour modifier le design de votre site.

 Le code HTML ci-dessus est très simple. Notez toutefois que l’on a introduit une méta-donnée importante pour l’adaptabilité de l’affichage : viewport.

Cet élément indique au navigateur qu’il doit prendre en compte la largeur du média, que celui-ci soit un smartphone ou un ordinateur de bureau. La balise <viewport> comprend d’autres paramètres, mais nous verrons cela une autre fois.

Après cet élément vient une section <div> rassemblant une liste non hiérarchisée de liens.

Voici notre page web sans feuille de style telle qu’affichée par Chrome :

 Une merveille, n’est-ce pas ? Hum, vous avez raison, c’est plutôt… austère.

Donnons-lui un peu plus de style grâce au CSS :

 Voici notre page liée à cette feuille de style

Très bien, nous avons maintenant notre page web dotée d’une feuille de style.

Maintenant, prenons le temps d’imaginer ce que cette page donnerait, affichée sur un appareil mobile… Nos liens ne pourraient pas apparaître entiers sur un petit écran, et cela ne serait ni pratique ni agréable à l’œil !

C’est ici qu’entrent en jeu les « media queries » : nous allons dire aux navigateurs ce qu’ils doivent faire quand leurs dimensions atteignent certaines valeurs.

Ajoutons à la suite de notre code CSS :

Regardez, ça fonctionne ! L’affichage s’adapte au redimensionnement de la fenêtre :

Maintenant, la police de notre titre principal sera un peu moins grande, pour qu’il s’affiche correctement sur petit écran. Admirez le résultat :

 Parfait, notre petite page de démo est « responsive » !

Rien de sorcier, n’est-ce pas ? Vous pouvez désormais modifier votre site web en y intégrant des spécifications CSS3. Si vous utilisez un vieux site, n’hésitez pas à le personnaliser !

Mais attention, n’éditez pas votre site en direct : installez plutôt une copie locale (localhost) pour la bricoler sans risque.

Si vous ne savez pas comment faire, voyez les articles suivants :

Comment créer un site sur wampserver localhost locale

Et pour les images ?

La gestion des images en design adaptatif a provoqué de vifs débats dans le monde de la conception web.

Certains choisissent de se reposer sur les codes CSS classiques, d’autres préfèrent spécifier le comportement des images par rapport aux caractéristiques de l’appareil utilisé grâce au CSS3.

En général, on précise que les images sont affichées à 100 % de leur taille ainsi :

img {

max-width: 100%;

}

Et voici ce que cela donne à l’utilisation :

4 – Ce qui importe vraiment

 

Lisibilité

Peu importe la complexité de votre CSS3, l’objectif n°1 reste la lisibilité : tous vos visiteurs doivent accéder le plus confortablement possible à votre contenu.

Avant d’appliquer une feuille de style adaptative globale, réfléchissez, testez, ajustez : votre police de texte est-elle agréable à lire sur tous types d’appareils ? Vos titres et autres éléments courts ne sont-ils pas coupés de manière hasardeuse ? Tous vos éléments textuels méritent-ils la même visibilité ?

Ergonomie

Vos visiteurs ne vont pas seulement lire le texte présent sur votre page : ils vont devoir naviguer, cliquer sur un lien, remplir un formulaire… Si l’ergonomie de votre site est mauvaise sur appareil mobile, les utilisateurs n’insisteront pas et chercheront ailleurs l’information dont ils ont besoin. En revanche, si l’expérience utilisateur est vraiment bonne, vous avez de grandes chances de rejoindre leurs favoris !

Conclusion

 

Les sites web qui ne bénéficient pas d’un responsive design de qualité sont privés d’une bonne partie de leur public potentiel. Une bonne adaptabilité est un réel avantage dans un monde numérique proposant des supports matériels très divers.

Pour créer un site web adaptatif, vous pouvez utiliser UN CMS ou utiliser ce tutoriel pour créer votre propre feuille de style : dans tous les cas, les utilisateurs sauront apprécier vos efforts !

Pin It on Pinterest

Doublez votre trafic sur votre site.

Recevez des guides marketing gratuit sur le référencement et les réseaux sociaux !

You have Successfully Subscribed!

DEVIS GRATUIT