Responsive Web Design : votre site compatible mobile et tablettes

Nous développons des sites adaptés à la visualisation sur tout type de mobile présent et à venir, aussi bien que sur une tablette ou un ordinateur "normal". Ce résultat est obtenu grâce à une conception rigoureuse des squelettes des pages, suivant les principes du "Responsive Web Design" (RWD).

Nous ne développerons pas une "version pour mobile" de votre site, mais il sera compatible avec tout type de mobile et de tablette présent et à venir [1].

C’est au navigateur du système cible qu’il est demandé d’adapter la page [2] : il n’y a pas une "page pour mobile", mais une "page vue de mobile". Il en résulte que, pour les moteurs de recherche tels que Google, chaque page n’existe qu’à une adresse (URL) unique, ce qui est excellent pour le référencement.

En particulier, dans le cas où nous aurions à adapter un site existant, les pages "vues de mobile" hériteraient immédiatement de la notoriété du site existant. De plus, les liens externes existants sont bien évidement conservés.

 


La version "mobile", vue sur un iPhone, de la page présentée sur un grand écran.

 

Cela est rendu possible grâce à la conception rigoureuse des squelettes et des feuilles de styles, qui ne préjuge pas de l’identité de l’appareil, mais se fonde seulement sur les caractéristiques de l’affichage.

La visualisation est adaptée aux écrans de dimensions réduites [3] de la façon suivante :
- adaptation de la taille des polices,
- retrait des éléments non essentiels,
- simplification des éléments complexes, en particulier des hauts et bas de page,
- suppression des colonnes multiples,
- redimensionnement des images de façon à laisser de la place au texte enroulé, y compris en tenant compte de l’orientation de l’appareil,
- redimensionnement des dialogues et des boutons pour une navigation tactile aisée,

etc.

Ces deux illustrations montrent le redimensionnement des images pour permettre l’enroulement du texte à droite. Il est tenu compte compte de l’orientation du mobile : en position verticale (portrait) l’image est moins large qu’en position horizontale (paysage) afin de réserver au texte une largeur toujours adaptée [4].


Une nécessité : adapter le design à l’application

Chaque application a ses exigences : les techniques mises en œuvre doivent permettre de contrôler exactement comment sont adaptées les largeurs de chaque zone. Dans l’application suivante, la priorité est donnée parfois au texte, parfois aux images selon le type de page : sommaire, listes ou détail.

Cliquez sur l’image pour voir l’application prototype photo.degoy.com sur votre appareil

Est-ce tout ?

Non : pour tenir compte de la limitation des débits de communication en mobilité, il faut aussi améliorer la vitesse de navigation. DnC est en pointe sur deux actions indispensables : ne pas charger les images avant d’en avoir besoin, réduire la dimension des images envoyées aux mobiles.

Et pour un site de vente en ligne ?

Dans le cas d’un site de vente en ligne, il faut revoir toute la signalétique du site, notamment pour offrir des dialogues adaptés à la sélection tactile (de grosses touches). Nous conseillons de réaliser deux versions du site de vente en ligne : "normal" et "mobile". Voir : Web Mobile.

Une idée, un projet?

Degoy net Consultants
76 avenue du Général Leclerc
92340 - Bourg la Reine

SARL au capital de 7500 €