Accueil  /  Actualités  /  Responsive Web Design (RWD) : comment y aller ?

Responsive Web Design (RWD) : comment y aller ?

Aujourd’hui incontournable dans les projets Web, le Responsive Web Design (ou RWD) demeure toujours aussi confus pour certains professionnels. Peu importe la taille de l'entreprise ou son secteur d’activité, posséder un site Responsive Web Design est devenu incontournable pour se développer. Aussi, pour en savoir plus sur le Responsive Web Design, suivez ce guide !

Les principes Responsive Web Design

L’art de la rupture

Le Responsive Web Design se base sur des breakpoints ou points de rupture. Ils correspondent aux résolutions d’écran.

 

Comment ça marche ?

En Responsive Web Design, le code HTML de la page Web reste le même. Ce qui évoluent, ce sont les feuilles de style (CSS). Ces dernières gèrent la mise en page des pages Web et comment elles s'affichent suivant plusieurs paramètres.

Pour cela, depuis la norme CSS3, sont utilisées les media-queries. Celles-ci permettent de spécifier des règles d’affichage propres à chaque résolution d’écran mais aussi à chaque périphérique de consultation : écran, imprimante, projecteur...

Responsive Web Design : 2 approches

L'approche Responsive Degradation

L'approche Responsive Degradation consiste à conserver l'ergonomie du site Web sur un écran large (projecteur, écran, ordinateur de bureau...) puis à masquer progressivement les éléments sur les écrans plus petits (le mobile par exemple).

 

L'approche Mobile First

A l'inverse, l'approche Mobile First consiste à penser d'abord l'ergonomie du site Web pour les mobiles afin de se focaliser sur les contenus et services primordiaux. Ces éléments se verront alors enrichis sur les périphériques plus grands.

Responsive Web Design : ses avantages

Voici une liste récapitulant les différents avantages du Responsive Web Design, à la fois du point de vue de l'internaute et du point de vue pour le propriétaire du site Web.

1

Les avantages pour l’internaute

  • Une navigation adaptée reprenant les classiques de chaque périphérique
  • L’utilisateur n’a pas à utiliser les fonctions de zoom de l'écran sur mobile
  • Le site Web s’ajuste automatiquement à n’importe quel écran
  • Côté accessibilité : aucune application tierce à télécharger et utiliser
  • Liens externes : une adresse de page unique pour les liens entrants
  • Réseaux sociaux : une adresse de page unique pour tous les partages
2

Les avantages pour le propriétaire du site Web

  • Une audience plus vaste car constituée de multiples périphériques
  • Plus de business potentiel si les taux de conversion suivent
  • Un site Web mieux référencé sur les moteurs de recherche
  • Des campagnes webmarketing plus simples à gérer et à analyser
  • Un seul site Web : des frais de création et de maintenance optimisés
  • Des traceurs et mesures d’audience simplifiés et unifiés

Responsive Web Design : comparaison

Pour rappel en matière de terminologies :

  • Responsive Web Design : site capable de s'adapter à différentes résolutions et périphériques (bureau, mobile...)
  • Site mobile dédié : site accessible en parallèle de la version bureau, destiné à la navigation sur mobile
  • Application mobile native : application installée sur mobile à partir de l'App Store (iOS) ou Google Play (Android)
  • Application Web : application mobile accessible au travers d'un navigateur Web
 

Responsive Web Design VS site mobile dédié et application Web

RESPONSIVE WEB DESIGN SITE MOBILE DEDIÉ ET APPLICATION WEB
+
  • Une maintenance plus simple
  • Un retour sur investissement plus intéressant
  • Des adresses de page unique
  • Davantage optimisé pour le référencement naturel
  • Totalement adapté aux interfaces mobiles
  • L'expérience utilisateur peut-être bien plus poussée
  • Rapide à charger
  • Dédié aux petits écrans
-
  • Le temps de téléchargement est plus long
  • L'ergonomie doit être pensée pour chaque résolution
  • La phase de test bien plus conséquente
  • La créativité est plus limitée
  • Plusieurs maintenances différentes
  • Frais de maintenance plus élevés
  • Développement plus long et plus coûteux
  • A prévoir : mises à jour plus régulières
 

Responsive Web Design VS application mobile native

RESPONSIVE WEB DESIGN APPLICATION MOBILE NATIVE
+
  • Plus ouvert et accessible
  • Les mises à jour sont facilitées
  • La technologie est beaucoup plus répandue
  • Les coûts de développement sont moindres
  • Dédiée aux petits écrans
  • Meilleure interaction et immersion (jeux, sport...)
  • Lorsque l'application est déjà installée, presque aucun temps de téléchargement supplémentaire
  • Les push d'informations sont très utiles
  • Disponibilité : App Store (iOS) et Google Play (Android)
-
  • Le temps de téléchargement est plus long
  • L'expérience utilisateur moins riche
  • Maintenance applicative plus complexe : compilation de l'application, dépôts sur les stores, etc.
  • Développement au global plus complexe et plus long
  • La mise à jour du système d'exploitation peut rendre l'application inopérante et nécessiter de la maintenance supplémentaire

Responsive Web Design : comment ?

Bootstrap : un responsive facilitateur

Pour faciliter la mise en œuvre du Responsive Web Design, des cadres de développement existent. Parmi eux, le framework CSS Bootstrap tient le haut du pavé. Développé par les équipes de Twitter puis diffusé en Open Source, Bootstrap :

  • Garantit la compatibilité multi-navigateur
  • Intègre nativement le Responsive Web Design avec une approche Mobile First
  • Permet de gagner du temps sur l'intégration technique
  • Facilite les interventions de maintenance
  • Donne accès à de nombreux widget HTML / JS : carrousel, menu en accordéon, infobulle, banque d’icones...

Bootstrap : ses avantages

Bootstrap est un framework CSS très puissant pour développer et concevoir le frontend (visible par le visiteur) et le back-end (visible par l'administrateur) d'un site Web.

1

Les grilles

Ces grilles subdivisent la page en 12 colonnes. En fonction de la résolution de l’écran, les blocs de contenus vont occuper entre 1 et 12 colonnes.

bootstrap-grille
2

Les menus

Les menus sont conçus et pensés pour s’afficher de manière optimale quel que soit la résolution de l’écran ou le périphérique.

bootstrap-menu
3

Les formulaires

Les formulaires causent souvent des difficultés sur mobile. Bootstrap a été pensé pour mobile et adapte les formulaires aux contextes d'affichage.

bootstrap-formulaire
4

Les widgets

Des composants sont déjà prêts à l’emploi :

  • Carrousel
  • Menu en accordéon
  • Infobulle
  • Fenêtre modale
  • Banque d’icones
bootstrap-widgets

Le pôle design

Fondamental dans la réussite de votre projet digital, la conception du parcours utilisateur et des écrans qui le compose se doivent d’être particulièrement soignés. De ce constat, notre pôle design vous offre un accompagnement étapes par étapes aboutissant sur des interfaces graphiques attrayantes et accessibles à tous.

Découvrir notre pôle design

Vous souhaitez repenser votre site Web ?

Notre agence Web et Mobile à Orléans répond à toutes vos questions. Analyse de projet et étude de vos besoins est déjà un bon point de départ.

Pour nous contacter, complétez le formulaire ci-contre ou téléphonez-nous au 02 38 21 55 21.

*champs obligatoires

Les informations personnelles saisies dans ce formulaire sont facultatives. Elles serviront exclusivement le traitement de votre demande (en savoir plus).