Exigez un site en « responsive Web design »

site optimisée sur écran, tablette et iphone

Une approche novatrice pour s’assurer d’une visibilité optimale du site internet sur tous les supports d’aujourd’hui et de demain !

Smartphones, tablettes, ordinateurs portables, netbooks… les moyens d’accéder à internet se sont multipliés. Difficile maintenant de concevoir un site sans s’assurer d’une bonne visibilité sur supports mobiles et d’une bonne ergonomie tactile.

Pour un site WordPress, nous avons alors plusieurs options :

  • Avoir un site aux standards HTML qui s’affiche à l’identique sur tous les supports. Satisfaisant, mais cela peut induire une lecture fastidieuse et lente avec un petit écran
  • Développer une version mobile. Cela peut être judicieux de proposer à ses clients une version simplifiée du site pour smartphone avec un accès immédiat aux informations importantes : contact, accès, horaires…
    C’est ce que j’ai fait pour l’hôtel Continental car ils avaient déjà un site récemment refait par un autre prestataire…
  • Utiliser un plugin dédié comme wp-touch, pratique pour un site avec beaucoup de contenu
  • Développer un site qui s’adapte automatiquement à la largeur de l’écran : c’est le « responsive web design »

Le responsive web design. Qu’est-ce que c’est ?

C’est une technique qui consiste à construire un site qui s’adaptera aux différentes résolutions d’écran tout en modifiant sa structure. On parle de mise en page fluide ou « fluid layout ».

Voilà quelques avantages de cette technique :

  • La barre de navigation horizontale devient sur un iPhone un menu déroulant.
  • Un site sur 3 colonnes passe sur une seule afin de ne proposer qu’un scroll vertical.
  • Les images se dimensionnent automatiquement à la largeur du support

Les intérêts du responsive web design ?
Un seul site, une seule mise à jour, mais surtout l’assurance de choix techniques qui garantissent une visibilité sur TOUS les supports actuels mais aussi sur les supports du FUTUR. C’est aussi l’assurance d’une expérience utilisateur maximale avec par exemple un bon fonctionnement des menus déroulant en tactile, la possibilité d’agir sur un slider avec le doigt…

Comment ça marche ?
On va utiliser les  » CSS3 Media Queries « , une technique qui va permettre de détecter la largeur de la fenêtre du navigateur et d’appliquer la feuille de style CSS adaptée (Source AlsaCreation).

Des instructions CSS différentes pour deux largeurs d’écran : moins de 540px et moins de 999px

Pour tester le fonctionnement, il suffit de prendre le coin inférieur de cette fenêtre et de varier la largeur, vous verrez la structure et le menu changer.
Faîtes le test !

Et combien ça coûte ?

C’est là l’excellente nouvelle : pas plus cher ! Il suffit lors du choix d’un thème WordPress de s’assurer que le thème possède bien cette caractéristique. Et comme c’est une tendance qui se développe, le choix est de plus en plus vaste, c’est là l’autre bonne nouvelle.

Quelques exemples de chez ThemeForest

[slider]

 

Voir des thèmes WordPress « responsive »

Ma sélection de thèmes ThemeForest Woothemes Peaxlr

 

4 Responses to “Exigez un site en « responsive Web design »”