Académique Documents
Professionnel Documents
Culture Documents
Respons If
Respons If
L’internet étant de plus en plus accessible à partir d’appareils mobiles, il ne suffit plus d’avoir
un site web statique dont la conception n’a d’intérêt que sur un écran d’ordinateur.
Sans oublier qu’il faut aussi tenir compte des tablettes, des ordinateurs portables 2 en 1 et
des différents modèles de smartphones avec des dimensions d’écran différentes lors de la
conception d’un design.
Donc, le fait de mettre votre contenu dans une seule colonne et en rester là ne va pas suffire.
Grâce à un design web responsive, vous pouvez faire en sorte que votre site web soit le plus
attrayant possible sur les téléphones portables, les tablettes, les ordinateurs portables et les
écrans d’ordinateurs de bureau.
Ce guide vous donnera tout ce que vous devez savoir sur la conception de sites web
responsives, y compris des définitions, une présentation étape par étape, des exemples, et
plus encore.
Consultez notre guide vidéo sur la conception web responsive :
Par exemple, votre contenu peut être séparé en différentes colonnes sur les grands écrans,
car elles sont suffisamment larges pour s’adapter à ce design.
Si vous séparez votre contenu en plusieurs colonnes sur un appareil mobile, il sera difficile
pour les utilisateurs de le lire et d’interagir avec lui.
Ce sont deux tendances cruciales de la conception web qui aident les webmasters à contrôler
l’apparence de leur site sur différents écrans, mais l’approche est différente.
Grâce à un design responsive, les utilisateurs accéderont au même fichier de base par le
biais de leur navigateur, quel que soit l’appareil, mais le code CSS contrôlera la mise en page
et la rendra différemment en fonction de la taille de l’écran. Avec le design adaptatif, il existe
un script qui vérifie la taille de l’écran, puis accède au modèle conçu pour cet appareil.
— Part de marché des téléphones portables, des tablettes et des ordinateurs de bureau
Lorsque plus de la moitié de vos visiteurs potentiels utilisent un appareil mobile pour naviguer
sur l’internet, vous ne pouvez pas vous contenter de leur servir une page conçue pour un
ordinateur. Elle serait difficile à lire et à utiliser, et conduirait à une mauvaise expérience
utilisateur.
Mais ce n’est pas tout. Les utilisateurs d’appareils mobiles représentent également la majorité
des visites sur les moteurs de recherche.
— Trafic de recherche mobile
Enfin, ces dernières années, le mobile est devenu l’un des plus importants canaux
publicitaires. Même dans un marché post-pandémique, les dépenses publicitaires sur les
mobiles augmentent de 4,8 % pour atteindre 91,52 milliards de dollars.
Que vous choisissiez de faire de la publicité sur les réseaux sociaux ou d’utiliser une
approche organique comme le référencement YouTube, la grande majorité de votre trafic
proviendra des utilisateurs mobiles.
Si vos pages d’atterrissage ne sont pas optimisées pour le mobile et faciles à utiliser, vous ne
pourrez pas maximiser le retour sur investissement de vos efforts de marketing. De mauvais
taux de conversion entraîneront une diminution du nombre de prospects et des dépenses
publicitaires inutiles.
Si vous utilisez un thème WordPress par défaut, comme Twenty Twenty, le design est
responsive, mais comme il s’agit d’un design à colonne unique, vous ne vous en rendrez
peut-être pas compte en le regardant sur différents écrans.
Si vous utilisez un autre thème WordPress, vous pouvez tester s’il est responsive ou non en
comparant son apparence sur différents appareils ou en utilisant les outils de développement
Chrome.
CSS et HTML
Le HTML contrôle principalement la structure, les éléments et le contenu d’une page web.
Par exemple, pour ajouter une image à un site web, vous devez utiliser un code HTML
comme celui-ci :
Vous pouvez définir une « classe » ou un « id » que vous pouvez cibler plus tard avec du
code CSS.
Vous pouvez également contrôler les attributs primaires tels que la hauteur et la largeur dans
votre HTML, mais cela n’est plus considéré comme une bonne pratique.
Le CSS est utilisé à la place pour modifier la conception et la mise en page des éléments que
vous incluez dans une page avec du HTML. Le code CSS peut être inclus dans une section
<style> d’un document HTML, ou dans un fichier de feuille de style séparé.
Par exemple, nous pourrions modifier la largeur de toutes les images HTML au niveau des
éléments comme ceci :
img {
width: 100%;
}
.full-width-img {
width: 100%;
}
Media queries
Une media query est une partie fondamentale de CSS3 qui vous permet de rendre le contenu
pour l’adapter à différents facteurs comme la taille de l’écran ou la résolution.
— Media queries pour ordinateur de bureau, tablette, smartphone
Cela fonctionne de la même manière qu’une clause «if » dans certains langages de
programmation, c’est-à-dire qu’il vérifie si la fenêtre de visualisation d’un écran est
suffisamment ou trop large avant d’exécuter le code approprié.
Si l’écran fait au moins 780 pixels de large, les images de la classe « full-width-img »
occuperont 90% de l’écran et seront automatiquement centrées par des marges de même
largeur.
Une mise en page fluide est un élément essentiel d’un design moderne et responsive. Dans
le bon vieux temps, on fixait une valeur statique pour chaque élément HTML, par exemple
600 pixels.
Une mise en page fluide repose plutôt sur des valeurs dynamiques comme un pourcentage
de la largeur de la fenêtre de visualisation.
Si une mise en page basée sur un pourcentage est fluide, de nombreux concepteurs et
développeurs web ont estimé qu’elle n’était pas assez dynamique ou flexible. Flexbox est un
module CSS conçu comme un moyen plus efficace de disposer plusieurs éléments, même
lorsque la taille du contenu à l’intérieur du conteneur est inconnue.
Un conteneur flexible permet d’agrandir les articles pour remplir l’espace libre disponible ou
de les rétrécir pour éviter le débordement. Ces conteneurs flex ont un certain nombre de
propriétés uniques, comme le contenu justifié, que vous ne pouvez pas modifier avec un
élément HTML ordinaire.
— Conteneur Flexbox
C’est un sujet compliqué, donc si vous voulez l’utiliser dans votre conception, vous devriez
lire le guide flexbox de CSS Tricks.
Images responsives
L’itération la plus élémentaire des images responsives suit le même concept qu’une mise en
page fluide, en utilisant une unité dynamique pour contrôler la largeur ou la hauteur.
L’exemple de code CSS dont nous avons parlé plus haut permet déjà d’atteindre cet objectif :
img {
width: 100%;
}
Le problème de cette approche est que chaque utilisateur doit télécharger l’image en taille
réelle, même sur son téléphone portable.
Pour servir différentes versions mises à l’échelle pour différents appareils, vous devez utiliser
l’attribut HTML srcset dans vos balises img, pour spécifier plus d’une taille d’image parmi
lesquelles choisir.
WordPress utilise automatiquement cette fonctionnalité pour les images incluses dans les
articles ou les pages.
Vitesse
Lorsque vous essayez de créer un design adapté à votre site web, la vitesse de chargement
doit être une priorité absolue.
Les pages qui se chargent en 2 secondes ont un taux de rebond moyen de 9 %, tandis que
les pages qui prennent 5 secondes ont un taux de rebond de 38 %.
Votre approche du responsive ne doit pas bloquer ou retarder le premier rendu de votre page
plus qu’il n’est nécessaire.
Il existe plusieurs moyens de rendre vos pages plus rapides. L’optimisation de vos images, la
mise en cache, la minification, l’utilisation d’une mise en page CSS plus efficace, le fait
d’éviter le blocage du rendu JS et l’amélioration de votre chemin critique de rendu sont autant
d’excellentes idées que vous devriez envisager.
Les clients de Kinsta ont accès à un moyen rapide et facile d’accomplir cela en utilisant la
fonction de minification du code qui est intégrée directement dans le tableau de bord
MyKinsta, permettant aux clients d’activer la minification automatique de CSS et JavaScript
d’un simple clic.
Vous pourriez également essayer d’implémenter Google AMP pour vos pages mobiles, mais
dans notre étude de cas Google AMP, nos prospects mobiles ont chuté de 59 %.
Si vous choisissez une approche de design axée sur le mobile, avec une seule colonne et
des tailles de police plus petites comme base, vous n’avez pas besoin d’inclure des points de
rupture mobiles – sauf si vous voulez optimiser le design pour des modèles spécifiques.
Vous pouvez donc créer un design sur une base responsive avec seulement deux points de
rupture, un pour les tablettes et un pour les ordinateurs portables et de bureau.
Les points de rupture responsive de Bootstrap
En tant que l’un des premiers, et des plus populaires, framework responsives, Bootstrap a
mené l’assaut sur la conception de sites web statiques et a contribué à établir la conception
de sites mobiles comme norme industrielle.
C’est pourquoi de nombreux créateurs suivent encore aujourd’hui les points de rupture de
Bootstrap en matière de largeur d’écran.
Ils utilisent les media queries pour cibler les téléphones en mode paysage (576px), les
tablettes (768px), les ordinateurs portables (992px) et les écrans de bureau extra larges
(1200px).
Définissez vos plages de media query en fonction des besoins uniques de votre design. Par
exemple, si nous voulions suivre les normes Bootstrap pour notre design, nous utiliserions les
media queries suivantes :
La première étape, et la plus importante, consiste à définir différentes tailles pour différents
éléments de mise en page en fonction de la media query ou du point de rupture de l’écran.
Le nombre de conteneurs de mise en page dont vous disposez dépendra du design, mais la
plupart des sites web se concentrent sur les éléments listés ci-dessous :
Wrapper ou Container
Header
Content
Sidebar
Footer
— Mise en page commune
En utilisant une approche mobile first, vous pouvez styliser les principaux éléments de la mise
en page de cette manière (sans media query pour les styles de base pour les téléphones
portables) :
#content {width:100%; }
#sidebar {width:100%; }
#footer {width:100%; }
Dans une approche basée sur le pourcentage, l’attribut « float » contrôle de quel côté de
l’écran un élément apparaîtra, à gauche ou à droite.
Si vous voulez aller au-delà des bases et créer un design reposnive de pointe, vous devez
vous familiariser avec la mise en page flexbox CSS et ses attributs tels que la box-sizing et
flex.
Une façon de s’assurer que vos images ne se cassent pas est simplement d’utiliser une
valeur dynamique pour toutes les images, comme nous l’avons vu plus tôt.
img {
width: 100%;
}
Mais cela ne réduira pas la charge imposée à vos visiteurs sur mobile lorsqu’ils accèdent à
votre site web.
Veillez à toujours inclure un srcset avec les différentes tailles de votre image lorsque vous
ajoutez des images à vos pages.
Faire cela manuellement peut prendre beaucoup de temps, mais avec un CMS comme
WordPress, cela se produit automatiquement lorsque vous téléversez des fichiers média.
La conception de sites web responsive est principalement axée sur le fait que les blocs de
mise en page les éléments et les médias soient responsives. Le texte est souvent traité
comme une réflexion secondaire.
Mais pour une conception vraiment responsive, vous devez également ajuster la taille de vos
polices de caractères pour qu’elles correspondent à la taille de l’écran.
Le plus simple est de fixer une valeur statique pour la taille de la police, par exemple 22 px, et
de l’adapter dans chaque media query.
Vous pouvez cibler plusieurs éléments de texte en même temps en utilisant une virgule pour
séparer chacun d’entre eux.
body, p, a, h4 {
font-size: 14px;
Tester le responsive
Tout d’abord, vous voulez tester si votre site est adapté aux mobiles avec le test de Google. Il
vous suffit de saisir l’URL de votre site web et de cliquer sur le bouton « tester l’URL » pour
obtenir les résultats.
Ne vous inquiétez pas si la recherche de votre site prend du temps. Cela ne reflète pas la
vitesse de chargement de votre page.
Si vous avez suivi les étapes décrites dans cet article, cela devrait signifier que vous avez un
site web adapté aux téléphones mobiles.
Ensuite, vous voulez tester votre site sur plusieurs tailles d’écran avec un outil comme les
outils de développement Chrome.
Appuyez sur CTRL + Shift + I sur les ordinateurs Windows, ou sur Commande + Option + I
sur les Macs pour ouvrir la vue du périphérique concerné. À partir de là, vous pouvez
sélectionner l’appareil mobile ou la tablette de votre choix pour tester si votre design est
reposnive.
PX – un seul pixel
EM – unité relative basée sur la taille de la police de l’élément.
REM – unité relative basée sur la taille de la police de l’élément.
VH, VW – % de la hauteur ou de la largeur de la fenêtre.
% – le pourcentage de l’élément parent.
Un nouveau concepteur ou développeur web devrait probablement s’en tenir aux pixels pour
le texte car ils constituent l’unité de longueur la plus simple en CSS.
Mais lorsqu’il s’agit de définir la largeur et la largeur maximale des images et autres éléments,
l’utilisation de % est la meilleure solution. Cette approche permettra de s’assurer que les
éléments s’adaptent à la taille de l’écran de chaque appareil.
Sur un ordinateur, la mise en page du NYT rappelle celle d’un journal traditionnel, avec des
visuels et différentes lignes et colonnes de contenu. Il semble y avoir une colonne ou une
ligne séparée pour chaque catégorie de nouvelles.
Sur mobile, il est conforme à la norme de la colonne unique et ajuste également le menu pour
qu’il soit au format accordéon afin d’être plus facile à utiliser.
2. Blog : The Art of Non-Conformity
Le blog de Chris Guillebeau « The Art of Non-Conformity » est en plein essor depuis plus
d’une décennie. Bien que le design ne soit pas des plus avant-gardistes, il est responsive et
adapte la colonne latérale à deux colonnes et la présentation du contenu principal à un
design à une seule colonne sur les appareils mobiles.
3. Ecommerce : Amazon
Si Amazon est un leader mondial du commerce électronique, c’est pour une bonne raison :
son interface utilisateur est parfaitement fluide sur tous les appareils.
La mise en page sur tablette supprime simplement une partie de l’espace blanc et ajoute une
section d’icônes déroulantes pour faire tenir plus de contenu dans un espace plus petit.
Leur mise en page mobile permet de regrouper les informations sur une seule colonne, en se
concentrant sur l’essentiel, comme l’historique des achats récents, plutôt que sur les
différentes icônes de liens de section de leur page d’accueil principale.
4. Site vidéo : YouTube
Le cœur de la conception de la page d’accueil de YouTube est une grille flexible de vidéos
qui sont pertinentes pour chaque utilisateur. Sur les tablettes, le nombre de colonnes dans
chaque ligne descend à trois. Sur les mobiles, il est réduit à une seule colonne.
La version mobile déplace également le menu principal vers le bas de l’écran, plus près des
pouces des utilisateurs de leurs smartphones. Ce simple déplacement améliore la navigation
et l’UX.
5. Online Magazine: Wired
L’approche de Wired en matière de design web responsive est axée sur l’implémentation
d’une mise en page à colonne unique sur tous les petits écrans, à commencer par les
tablettes.
Il s’agit d’une mise en page de base, mais qui permet d’attirer plus facilement l’attention des
utilisateurs sur les grands sujets et leur CTA à s’abonner.
Résumé
Il y a beaucoup d’éléments différents qui entrent dans la conception de sites web
responsives. Sans une compréhension de base du HTML et du CSS, il peut être facile de
faire des erreurs.
Mais en vous familiarisant avec les différents éléments de base, en analysant les exemples à
l’aide d’outils de développement web et en testant au fur et à mesure le code d’exemple, vous
devriez être en mesure de rendre votre site web responsive sans aucun problème majeur.
Si cela semble trop difficile à réaliser, vous pouvez toujours soit engager un développeur
WordPress, soit simplement vous assurer que votre thème est déjà responsive.