Retour

7 conseils pour réaliser son site en responsive design

La marque à l'ère numérique 30/03/2015 Scala Dream Team

Le responsive web design, ou conception de sites web adaptatifs, est devenu incontournable, c’est même presque un standard. Du point de vue pratique, il s’agit d’un ensemble de techniques permettant de réorganiser automatiquement l’information en fonction du terminal avec lequel l’internaute visualise un site web.

Pourquoi concevoir son site en « responsive design » ?

En 2014, le nombre de mobinautes a dépassé celui des utilisateurs de Desktop, et l’étude Comscore qui révèle cet état montre que la tendance n’est pas prête de s’inverser.

Méfiants, nous avons tout de même été vérifier sur les statistiques Google Analytics de nos clients. Ce qui nous permet d’apporter une petite nuance et de voir par exemple qu’il existe de grandes disparités d’un secteur d’activité à l’autre. Mais quel que soit le site choisi nous constatons systématiquement que le mobile, qui n’était qu’anecdotique en 2012 (et ce n’est pas si loin), atteint des proportions qui vont en moyenne de 15 à 35% du trafic en 2015.

Sur les illustrations suivantes, on voit en vert la part des smartphones, et en orange celle des tablettes, dans la navigation sur les sites de deux de nos clients. On parle là de plus d’un quart et plus d’un tiers du trafic, et ce n’est pas prêt de s’arrêter.

statistiques
desktop vs mobile statistiques

Autre fait connu, les emails sont désormais plus souvent ouverts sur un mobile que sur un ordinateur. On comprend donc dans ce contexte que la question « faut-il un site responsive » ne peut plus amener qu’une seule sorte de réponse : évidemment !

Encore faut-il adopter les bonnes pratiques pour passer son site en responsive. Voici 7 étapes pour ne rien oublier et faire en sorte que l’adaptation de votre site sur mobile ait une vraie valeur ajoutée en termes de confort de navigation.

Quelles bonnes pratiques adopter ?

Une mise en page simple

La première étape d’une conception adaptative, est une mise en page simple : il est nécessaire de penser les contenus en bloc pour un réagencement facile selon les supports.

Il est aussi important que le code HTML soit léger et propre :

  • éviter trop d’imbrications de divs
  • mettre le style dans une feuille css à part (cela va de soi)
  • éviter les positionnements absolus
  • utiliser le doctype HTML5 et respecter les normes W3C (bien entendu)

Il peut être très pratique, aujourd’hui, d’utiliser un système de grilles et/ou un framework (librairie) responsive, car, ils vous éviteront de réinventer la roue lors du développement, et prévoient déjà certains aspects ergonomiques (adaptation du menu de navigation pour utilisation sur écrans tablettes et mobiles, passage du contenu sur plusieurs colonnes en une seule colonne etc…).

De plus, certains frameworks, comme Bootstrap, peuvent s’utiliser avec des langages dynamiques permettant de générer des feuilles de styles CSS, comme, par exemple, LESS, SASS. Ces langages facilitent la maintenabilité et l’évolution du style de votre site.

Une bonne utilisation des media queries et des points de rupture

Idéales pour adapter la forme de votre site aux différents supports mobiles, les media queries sont des règles CSS permettant de faire des déclarations de styles conditionnées par des plages de tailles d’écran : Si taille x = afficher style y.

Les points de rupture représentent le moment où l’affichage d’un site responsive design change en fonction de la largeur/hauteur de la fenêtre du navigateur. Ces points de rupture sont comme des paliers qui, une fois franchis, permettent d’adapter le design ou le contenu à la nouvelle largeur de la page web.

Généralement les résolutions les plus populaires sont regroupées en 3 points de rupture :

smartphone
ipad
pc

Ciblez les smartphones avec une règle < 768px

Utilisez les règles entre 768px et 1024px pour les smartphones modernes et tablettes orientées portrait

Optez pour une condition > 1024px pour les grandes tablettes et ordinateurs de bureaux.

Cependant, on observe avec certains systèmes de grilles et/ou frameworks utilisent un plus grand nombre de points de rupture :

Par exemple pour Bootstrap 3 :

bootstrap grid

Une mise en page et des images flexiblesNotez que si vous utilisez un framework responsive, les points de rupture sont déjà définis, il suffit de les respecter dans vos déclarations CSS.

Utiliser une mise en page fluide permettra à votre design de s’adapter à toute taille d’écran et orientation.

Systèmes de grilles recommandés :

960 Grid System

Gridset

Columnal

Golden Grid System

Si vous utilisez un framework responsive comme Bootstrap, ce dernier possède d’ores et déjà son système de grilles.

Les images doivent, elles aussi, être flexibles. Un seul style est nécessaire pour rendre les images fluides :

img {max-width :100% ;height :auto ;}
Il est possible d’empêcher votre design de s’élargir ou de se réduire à des proportions ridicules sur des appareils très larges ou très petits :

Par exemple, si l’on veut que notre design soit fluide mais pas moins large que 768px et pas plus large que 1024px :

.container {min-width :768px; max-width :1024px;}

Des valeurs relatives dans les feuilles de style

Cela signifie que l’on définit une unité au début du contenu et qu’on l’utilise pour calculer le reste :

Définir une taille fixe ou fluide sur un conteneur principal, et décliner toutes les dimensions des enfants en % (pour les systèmes de grilles et frameworks responsive, c’est déjà le cas normalement).

Définir une font-size sur le body, et utiliser des unités en em pour le calcul des éléments.
Le em (cadratin) provient de la typographie, et représente la force de corps (font-size). En css, si le font-size n’est pas spécifié, il sera défini par défaut à 16px (donc 1em égalera 16px).

Un design, contenu & ergonomie adaptés à l’usage du mobile

Il faut réussir à organiser le contenu pour les mobiles de basse résolution en une seule colonne tout en restant attentif à conserver une taille de page raisonnable. Il ne faut pas hésiter à retirer du texte si nécessaire. L’idée est de mettre l’essentiel !

Il faut adapter les zones d’interaction tactile : sur un site adapté pour mobiles, les boutons seront plus grands afin de faciliter l’accessibilité aux doigts de l’utilisateur, par exemple.

On peut aussi supprimer certaines sections non indispensables à la version mobile avec, par exemple, une classe CSS :

@media screen and (max-width:300px) {
.not_mobile{display:none;}
}

Ou, comme sur Bootstrap par exemple, avec plusieurs classes :

css bootstrap

Un nombre de fonctionnalités adapté pour le mobile

Il n’est pas utile de mettre un trop grand nombre de fonctionnalités sur la version mobile d’un site, car certaines risquent de ne pas être adaptées à ce support donc inutilisées par l’internaute.

Par contre il est possible d’adapter certaines fonctionnalités aux usages des smartphones : par exemple : ajouter un bouton de géolocalisation, scanner un code barre, partager sur les réseaux sociaux…

Vérifier la balise meta viewport

La plupart des navigateurs mobiles simulent une vue desktop en affichant les pages web en pleine résolution dans un écran de mobile (donc de petite taille).

La balise meta viewport permet d’afficher la vraie taille de votre site.

<meta name=”viewport” content=”width=device-width, initial-scale=1”>
Il est donc indispensable d’utiliser cette balise correctement.

Le lien ci-dessous vous permettra de bien comprendre le viewport, la balise meta viewport et ses différents attibuts : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Le responsive design connaît aussi des limites

Dans beaucoup de cas, adapter un site Web à une version responsive design peut suffire, au moins dans un premier temps, à offrir à vos visiteurs un confort attendu dans la navigation. Mais la question est peut être plus profonde : faut-il juste adapter les tailles et les colonnes (design adaptatif avec une grille fluide) ou faut-il en plus repenser complètement le zoning et les interfaces ?

On peut même aller plus loin et s’interroger sur le fait de penser le site d’abord pour le Mobile puis enrichir ensuite pour les grand écrans (méthode dite “Mobile First”).

Bien évidemment c’est souvent une question d’objectifs, de cibles et… de moyens. Chez Scala, nous pouvons vous accompagner dans la démarche globale, depuis l’analyse initiale de l’évolution des besoins de vos utilisateurs jusqu’à la réalisation de vos nouveaux supports de communication. Prenez rendez-vous avec votre interlocuteur préféré ou envoyez-nous un message pour en discuter !

Avatar auteur
Écrit par ,
Consultants Scala
Ça vous a plu ? Faites tourner !

À lire aussi

say hello !

un projet ? des infos ? un devis ?

on est partout.

Marseille - Siège social
Scala Marseille

11 avenue André Roussin
Immeuble Grand Ecran

13 016 Marseille
+33 (0)4 91 46 84 60
Paris
Scala Paris

8 Rue Euler

75 008 Paris
+33 (0)1 56 68 77 80
Tarascon
Scala Tarascon

18 bis rue Edouard Millaud

13 150 Tarascon
+33 (0)4 91 46 84 60
Tunis – Tunisie
Scala Tunisie

Rue du Lac Biwa, Immeuble Fraj
3ème étage, Lac 1,
Les Berges du Lac

1053 Tunis – Tunisie
+216 71 657 451
Et même Londres, Bruxelles, NY, Montréal et Casablanca.Voir carte.

on recrute !

Venez voir toutes nos offres ici.

contact
le blog