//>

Créer son site internet en Responsive design

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 :

  • Notre site web

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, Time.com 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

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 :

responsive design

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 :

C’est de mieux en mieux ! Mais il faut encore faire quelques ajustements pour optimiser la surface d’affichage disponible. Toujours à la suite de notre code CSS, on peut spécifier :

@media (max-width: 480px) {

    .container h1 {

        font-size: 22px;

    }

}

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 !

Commencer un devis en ligne. C'est gratuit.
JE COMMENCE !
lire plus

Création de site web et Applications Android et IOS

  • Vous voulez créer votre site Web ?
  • Vous souhaitez développer votre business ?
  • Vous avez besoin de conquérir de nouveaux clients ?
  • Vous voulez doubler ou tripler les visiteurs de votre site ?

Nous avons une solution !

Vous avez une idée ou un projet et vous souhaitez collaborer ?

Appelez : 07 81 92 71 50

Optimisez votre entreprise dès aujourd'hui !

Obtenez une consultation gratuite

Nos Services

Ce que nous pouvons faire pour vous

Création de site e-commerce, vitrine, pro et audit de référencement naturel.

Nous mettons nos compétences à votre service pour vous aider à développer votre business et augmenter votre chiffre d’affaires.

Vous voulez une présence en ligne ? Nous sommes là pour vous aider !

CRÉATION DES SITES PRO

Vous voulez créer votre site internet pour promouvoir votre société ? Découvrez les secrets de la création de site internet intelligente !

CRÉATION DES SITES e-COMMERCE

Création de site e-commerce avec Magento, Prestashop, Shopify et Woocommerce

Site Vitrine WordPress

WordPress est le est le meilleur CMS pour mettre en valeur votre activité et vos services. WordPress est la solution parfaite à des frais raisonnables

h

Solution de Référencement

Avoir un site Web d’entreprise c’est génial… Avoir des clients qui trouvent votre entreprise en ligne est encore mieux !

Mettez votre proximité en valeur grâce au SEO local et devenez n°1 sur Google !

Facebook Ads

En quelques années seulement, la publicité sociale est devenue un levier d’acquisition majeur. Tout simplement parce qu’elle constitue l’un des canaux payants les plus efficaces en termes de génération de leads et de conversions en clients

Stratégie SMO (réseaux sociaux)

Nouveau canal d’acquisition à part entière, le levier SMO est devenu incontournable. Comment élaborer une bonne stratégie SMO ? Quelles sont les règles pour l’optimiser ?

Contactez-nous

Aix en Provence & Marseille
+33 7 81 92 71 50
[email protected]

Questions ou Demandes ? Chattez sur Whatsapp