Dans un contexte de forte augmentation des connexions depuis des supports mobiles et à l'heure où Google développe un label "site mobile" pour privilégier les sites "mobile-friendly" dans sa page de résultats, le travail autour des problématiques de l'internet mobile est en cours à AMU. Cet article revient sur les différents moyens qui permettent d'être "mobile-friendly" et particulièrement sur l'un de ces moyens : le responsive web design.

Si vous possédez un smartphone ou une tablette, vous avez certainement déjà fait l’amère expérience de naviguer sur un site qui, de toute évidence, n’était pas adapté à ce type de support : champs de saisie minuscules, clics involontaires, éléments qui sortent de l'écran... 

Trois moyens existent aujourd’hui pour véhiculer le contenu web sur des appareils connectés :

  • le site dédié : site développé spécifiquement pour mobile ou tablette.
  • l’application native : produit développé spécifiquement dans divers "langages" (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store" (AppStore, Google Play, Windows store).
  • la version responsive de site web : la page html et la feuille de styles CSS intègrent directement les technologies permettant au site de s’adapter aux différents supports.

Apparu en 2010, le terme responsive signifie littéralement « réactif ». Le responsive web design peut être considéré comme un ensemble de techniques visant à adapter la maquette du site pour optimiser l’expérience utilisateur quel que soit la taille, la résolution d’écran ou la marque de l’appareil utilisé. 

Responsive web design

Les ingrédients du responsive web design sont :

  • Une grille fluide, où les largeurs des éléments de structure sont débarrassées des unités de pixels (unités fixes)
  • Des images, des médias et des contenus flexibles leur permettant de ne pas "déborder de leur parent" lorsque celui-ci se restreint
  • Des CSS3 Media Queries permettant d'appliquer différentes règles de styles CSS selon la taille, l'orientation ou le ratio du support (le CSS est le langage qui permet de définir l’apparence, la présentation des pages HTML. Le HTML permet de structurer le contenu. En résumé, le HTML représente le fond et le CSS la forme)

Aujourd'hui la tendance forte est la philosophie "Mobile First" où l'on conçoit d'abord une interface mobile que l'on enrichit progressivement pour l'adapter à un écran de plus en plus large plutôt que l'inverse.

Aujourd'hui, seuls 36% de la totalité des sites web français et 27% des sites administratifs seraient adaptés aux mobiles selon une étude du cabinet Yooda en avril 2015. Pourtant, depuis quelques mois, Google privilégie dans ses résultats de recherche sur mobile les sites qui bénéficient de son label « mobile-friendly » ou site mobile. Pour bénéficier de ce label, les sites doivent éviter ce qui pénalise l’utilisation d’un site sur mobile : textes trop petits, liens trop rapprochés favorisant des clics involontaires, contenu trop large pour l’écran… La prise en compte de ces problématiques va donc se révéler de plus en plus importante pour qui souhaite optimiser son référencement naturel. 


Lisez aussi

Texte fondateur sur la notion de responsive web design, article rédigé par Ethan Marcotte en 2010

C'est quoi le responsive web design, Alsacréations, février 2014