Magazine Internet

Responsive web design

Publié le 14 avril 2015 par Ugal

Aujourd'hui, environ 35% du trafic sur les sites UGAL vient d'appareils mobiles: 20% de smartphones et 15% de tablettes. Le trafic provenant des ordinateurs de bureau domine encore à 65%, mais la part des consultations à partir d'appareils mobiles va continuer à croître.

Il est temps pour UGAL pour répondre spécifiquement aux besoins de ces visiteurs qui surfent avec des écrans plus petits.  Le fait de répondre un peu tard à cette demande nous donne un fort avantage: pouvoir choisir en connaissance de cause, parmi les technologies disponibles, la meilleure solution. Nous avons ainsi décidé de rendre les sites UGAL responsive. Les changements seront disponibles dans les prochaines semaines.

Différentes technologies pour les sites sur mobiles

Il y a trois façons de créer des sites compatibles avec les mobiles:

  1. Créer une version mobile d'un site Web. Les utilisateurs mobiles sont redirigés vers un site dédié à leurs besoins. Seule une sélection du contenu. Un lien en bas de page propose de continuer sur le site complet.
  2. Utiliser la détection du navigateur pour générer différentes versions du code HTML / CSS pour la même URL,  et en fonction de ce que le navigateur a détecté.
  3. Utiliser le Responsive Web Design. Le même code et le même contenu est envoyé à tous les appareils, sous la même URL. C'est grâce au code que le contenu va s'adapter à l'appareil de lecture (ordinateur de bureau ou portable).

Les avantages et les inconvénients de chaque méthode ont été largement discutés et au fil des ans et le Responsive Design est apparu être la meilleure option:

  • La même URL fonctionne pour tous les appareils. Ce qui permet aux internautes de partager les URls sans problème et aussi aux moteurs de recherche d'indexer une seule page pour le même contenu.
  • L'ensemble du contenu du site est disponible pour les appareils mobiles, et pas seulement les quelques pages choisies pour être optimisées.
  • Il n'y a pas de détection de navigateur côté serveur, ce qui peut souvent générer deserreurs.
  • C'est le code HTML / CSS / Javascript lui-même qui contient les instructions sur la façon de s'adapter en fonction de la taille de l'écran. Ce qui signifie qu'il y a une seule base de code à gérer.

L'argument le plus fort contre le Responsive Web Design, consiste à dire qu'il n'est pas optimisé pour la bande passante limitée dont dispose les appareils mobiles, dans la mesure où les clients mobiles doivent télécharger la même quantité de données que les clients d'ordinateur de bureau. Nous ne croyons pas que ce soit vraiment un problème :  la bande passante disponible ne cesse de croître, y compris pour les appareils mobiles. Les quelques Ko supplémentaires de données à télécharger ne peuvent pas poser de problèmes. 

Evolution du design Web

Le Responsive Web Design est une évolution naturelle de la conception web. Il suit l'évolution des appareils que nous utilisons pour naviguer. Le Web design est enfin vu et compris différemment du design Print. Il ne s'agit plus uniquement de pixels et d'alignements des éléments. Il s'agit désormais de la capacité à s'adapter à la configuration de l'internaute et à rendre les informations accessibles, indépendamment de l'appareil utilisé.

Comment UGAL va gérer ce changement?

Rendre un site réalisé avec UGAL Responsive sera relativement facile:

  • La plupart du code HTML généré par UGAL ne changera pas. Le changement le plus notable sera l'ajout d'une balise meta dans les en-têtes HTML des sites..Le balisage HTML standard peut changer un peu sur certaines pages, comme la page de panier ou les pages de paiement, mais ce ne sera pas grand chose.
  • Les fichiers CSS pour les thèmes devront être modifiés : ajout des instructions media queries  et gestion des unités relatives (ems et pourcentages) pour la taille au lieu des unités fixes (pixels).
  • Nous allons limiter autant que possible l'introduction de code Javascript supplémentaire. 

Une fois que ces changements de code HTML seront en production, nous commencerons la mise à jour des thèmes standards UGAL pour les rendre Responsive. Si votre site utilise un thème personnalisé, vous serez en mesure de mettre à jour à de nouveaux fichiers CSS à ce moment. Nous prévoyons la mise en ligne du nouveau code HTML d'ici quelques semaines.

Notez que si vous ne voulez pas utiliser un thème Responsive, vous n'aurez pas à changer quoi que ce soit à votre site web, UGAL restera compatible avec votre thème actuel.

Nous espérons que cet post vous apporte des réponses que vous vous posez suite aux e-mails que vous avez reçus de Google concernant des "problèmes d'érgonomie mobile détectés". Votre site sera bientôt Responsive!

N'hésitez pas à nous contacter pour toutes questions concernant ce prochain changement.

Voir aussi


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Ugal 24 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossiers Paperblog

Magazine