WEB RESPONSIVE Cultures numériques Vincent Mabillot. Master 1 Information & Communication Année Universitaire

Transcription

1 Master 1 Information & Communication Année Universitaire WEB RESPONSIVE Cultures numériques Vincent Mabillot Dossier crée par : Georgina Mougamadou Johnathan Wist Riadh Riahi

2 Table des matières Introduction... 2 I. Pourquoi ça marche? Le responsive d un point de vue communicationnel... 2 II. Comment ça marche?... 4 A. HTML, CSS : les bases d une page web Le sémantique, le HTML (1991) La mise en forme, le CSS (1994)... 4 B. HTML5, CSS3 : les bases du responsive... 5 III. Les fondamentaux du responsive : media queries, images flexibles et grilles fluides... 5 A. Media queries... 5 B. Images flexibles... 5 C. Grilles fluides... 5 Conclusion

3 Introduction Longtemps, on naviguait sur un ou deux ordinateurs. Désormais, on utilise trois ou quatre appareils dans une journée. L'objectif désormais pour tous ceux qui souhaitent étendre leur présence sur le web est de réussir à suivre une personne tout au long de la journée, et de ne pas le perdre, qu'il utilise un navigateur Internet ou application, sur un ordinateur, smartphone ou une tablette. Le développeur Josh Clark souligne l importance d être mobile-friendly (adapté aux mobiles) en faisant une analogie avec l eau qui a la capacité de prendre n importe quelle forme selon le contenant qui la contient. C est exactement le même principe pour le responsive design : les différents appareils modèlent le contenu afin de proposer une expérience utilisateur optimale peu importe l appareil utilisé en permettant de concevoir un site web unique qui s'adapte automatiquement à chaque support tout en gardant le même identité visuelle. Vidéo d un site web responsive : ou Le responsive design c'est cette capacité qu a un site web à adapter son contenu de façon ergonomique selon la taille de l écran. Si le responsive design est apparu c est d abord parce qu en 1997, le W3C, l organisation mondiale qui développe des standards pour le Web afin d'uniformiser le langage informatique, met en place le WAI Web Acccessibilty Initiative en Le projet a pour but de proposer des solutions techniques pour rendre le web accessible aux personnes en situation d handicap, plus globalement accessible à toute personne sans nécessiter de pré-requis particulier en informatique. Financé par l industrie de l informatique et organismes internationaux, on essaie là de créer un cadre normatif, une unicité dans la vision du web, peut-être afin de garder un œil sur les utilisateurs, de le contrôler? Avec les révolutions techniques du numérique, on est constamment amené à repenser le web. I. Pourquoi ça marche? Le responsive d un point de vue communicationnel Un site web responsive est devenu incontournable dans le cahier des charges d un projet web ordonné par un client. Cela est dû à une croissante expansion des pratiques Internet qui actionnent des leviers multi-canaux particulièrement à travers le smartphone. Le nombre d internautes continue ainsi à croître, on en dénombre 43,8 millions, soit une augmentation de 1,5% en un an. En France en 2014, 55,6% d individus sont équipés de smartphones, et 36,2% de foyers équipés de tablettes, ces chiffres sont en constante progression. Ce sont les populations mobinautes et tablonautes qui enregistrent les plus fortes progressions : 55,7% des Français sont aujourd hui mobinautes (+6 points par rapport à 2013) et 29,1% des internautes sont tablonautes (+7,2 points). Nouvelle tendance, davantage de personnes se connectent uniquement via leur smartphone : 4,6% des internautes en 2014 contre 2,8% en Si de plus en plus de personnes regardent des contenus TV ou VOD sur ordinateur, smartphone ou tablette, les Français sont aussi plus nombreux à utiliser un de ces écrans en même temps qu ils regardent la télévision, notamment pour commenter les programmes sur les réseaux sociaux : 27,8% des internautes. Nous constatons alors que la communication d aujourd hui passe majoritairement par l usage d un medium numérique. Nous devenons multitâches. 2

4 AVANTAGES INCONVENIENTS L adaptabilité Le référencement La fluidité de lecture, de navigation Homogénéisation Moins efficace qu un site dédié ou application Temps de téléchargement long Non duplication de contenus ADAPTATIBILITE SELON L ECRAN DU TERMINAL : par définition, un site responsive vient s adapter à l appareil que vous utilisez en identifiant la taille de l écran avant de faire apparaître le site. Avec la multiplicité des appareils et leur hybridation : les tablettes ressemblent à des smartphones, les smartphones sont de plus en à mi-chemin avec une tablette (phablettes), et les tablettes deviennent des ordinateurs grâce à un clavier amovible. Il est devenu nécessaire que votre site soit responsive afin de gagner en ergonomie. REFERENCEMENT : en rendant son site responsive on garde un seul et même site qui s adaptera en fonction de l écran du terminal utilisé, alors que si on crée plusieurs versions d un site donc mobile, ordinateur, tablette, on aura trois URL distincts. Cela pose alors un problème d indexation de ces adresses qui auront quasiment le même nom : c est un problème pour les moteurs de recherche comme Google qui n aime pas les doublons. Le problème réside dans le fait que le site existe en double, ce qui pose un problème de référencement, comme on l'a vu plus haut. Le référencement consiste à améliorer le positionnement et la visibilité d un site dans les pages de résultats d un moteur de recherche. Cela passe par des mots clés qui, existant en double dans les deux versions du site, peuvent se compromettre l un l autre. L'autre problème est que, si je consulte un article sur un site mobile dédié depuis mon smartphone et que je choisis de le partager, les personnes qui vont le consulter seront renvoyées vers le site mobile même si cellesci y accèdent depuis un ordinateur. Le résultat sur un écran haute définition n'est pas agréable à l œil. FLUIDITE : lorsque vous accédez à un site web non responsive depuis un terminal autre qu ordinateur, il n affichera que la partie haut-gauche du site, vous serez alors dans l obligation de devoir déplacer, défiler, zoomer afin de voir la page web dans son intégralité, ce qui rend la démarche longue et fastidieuse pour naviguer sur un site efficacement. Le responsive design donne au site un sens de lecture verticale, de haut en bas, ce qui facilite la navigation en la simplifiant par un seul geste. NON DUPLCATION DE CONTENU : lorsqu il existe plusieurs versions d un site, il y a alors plusieurs contenus à mettre à jour sur les différentes versions du site : par exemple, si pour un journal un article doit être publié, il faudra le faire à la fois sur le site ordinateur et à la fois sur le site mobile puisque ce sont deux sites web différents. Entretenir deux versions d un même site nécessite des moyens. En avril 2015, Google a pris la décision de pénaliser les sites non responsive en favorisant l ergonomie mobile, il indique que «les résultats de recherche que voient les mobinautes doivent diriger vers du contenu qu ils peuvent utiliser.» En d autres termes, si un mobinaute lance une recherche sur Google, celui-ci affichera uniquement les sites web facilement accessibles depuis un mobile. HOMOGENEISATION : nous assistons à une homogénéisation du web. C'est ainsi qu'on observe une tendance au flat design. Le design plat ou flat design est un style de design d'interface graphique caractérisé par son minimalisme. Il se base sur l'emploi de formes simples, d'aplats de couleurs vives et de jeux de typographie. Cet effet visuel est tellement répandu qu'une grande quantité de marque change peu à peu leur logo afin qu'il soit en harmonie avec le style visuel du site. Le flat design facilite la conception d'interfaces en s'adaptant à la surface d'affichage. Son usage d'aplats de couleurs permet de meilleurs taux de compression. Il se prête bien aux images vectorielles qui rejoignent ces avantages (changement de taille sans perte de qualité, 3

5 légèreté des fichiers). Le flat design, adopté par la majorité des sites web en raison de ses atouts pratiques, laisse moins de place à la créativité car il oriente vers des visuels préétablis. MOINS ADAPTE AUX INTERFACES MOBILES : avec un site dédié à un seul appareil, on a la possibilité d affiner, personnaliser plus précisément la structure du site et de ses contenus. Le site est adapté à 100% au terminal, de l ergonomie, à la performance jusqu à la densité de pixels des images. TELECHARGEMENT LONG : le responsive oblige à un chargement de tous les éléments de la page quelque soit le terminal utilisé, qui va aboutir à un affichage pas forcément optimisé : les images sont souvent simplement allongées, non redimensionnées. Les navigateurs mobiles doivent télécharger la même quantité de données que les navigateurs ordinateur, il y a donc un surplus de données à télécharger, et donc un temps d affichage plus long. Il est aujourd hui possible d identifier la résolution d un écran, mais pas sa taille physique. Or, sur des écrans de tailles très différentes, la résolution peut être la même. II. Comment ça marche? A. HTML, CSS : les bases d une page web 1. Le sémantique, le HTML (1991) Apparu au début des années 1990 grâce à Tim Berners-Lee apparaît le HTML «Hypertext Markup Language», Langage Hypertextuel à Balise est un langage de balisage standard qui permet de structurer sémantiquement, de mettre en forme les contenus des pages et d inclure des ressources multimédias dont des images, des formulaires de saisie, des programmes informatiques, etc pour dynamiser les pages. Ce langage va être interprété par les navigateurs qui vont alors afficher leur «traduction» (une page web peut s'afficher différemment d'un navigateur à l'autre). On est dans l'idée que nous sommes amenés à adopter les standards développés par le W3C pour être conforme. Le langage HTML est en réalité une recommandation, plus qu'une obligation, dans l'optique de créer un site web. De nombreux membres actifs du W3C font d'ailleurs partie des équipes de développement des navigateurs Microsoft, Mozilla, Apple, Opera, Google, etc. La balise HTML est l'élément de structure du document HTML. Les balises permettent d ajouter des éléments ou des programmes à la page (image, lien, tableau, liste, formulaire, etc.), ou de définir des styles (centrer un titre, etc.) mais celles-ci restent basiques et il vaut mieux les éviter. La balise est matérialisée généralement par un couple de balises, une ouvrante et une fermante qui délimitent l élément qu on veut faire apparaître. 2. La mise en forme, le CSS (1994) C'est dans la mise en forme de la page qu intervient le CSS («Cascading Style Sheets»). La feuille de style en cascade est un document externe permettant de gérer la mise en forme des éléments d une page HTML. Le premier document relatif aux feuilles de style rédigé par Håkon Wium Lie est publié en octobre La première version complète de CSS (CSS1) a été recommandée par le W3C en Même si l on peut toutefois agir directement sur le code source avec le HTML (déconseillé), travailler avec le CSS en déclarant une feuille de style externe reste la solution la plus optimale. Dans ce cas on crée un fichier.css (avec Notepad par exemple) qui va contenir plusieurs sélecteurs qui indiquent les éléments à styliser, puis on fait appel au fichier CSS directement dans le fichier HTML. 4

6 B. HTML5, CSS3 : les bases du responsive Toujours développés par le W3C, le HTML5 et CSS3 nous promettent une révolution technique et graphique. Repris par le W3C en mars 2007, la version HTML5 est finalisée en octobre Elle inclut de nouveaux éléments qui apportent une valeur sémantique inédite (nouveaux formulaires, nouvelles applications dynamiques, etc.) Avec le web responsive, la navigation depuis un smartphone sera plus optimale, par exemple grâce à la fonctionnalité du clavier adapté au type de contenu. Le CSS3 est développé dès 1999, mais il aura fallu plus de dix ans pour le finaliser. Il apporte des nouveautés graphiques comme par exemple des polices exotiques, des positionnements intuitifs, des effets décoratifs ou d animation, de nouvelles manières de spécifier les couleurs, des calculs dans les feuilles de style, etc. et surtout il permet une détection des caractéristiques de l appareil de l utilisateur avec une gestion des tailles d écran. III. Les fondamentaux du responsive : media queries, images flexibles et grilles fluides A. Media queries Les media queries sont apparus avec le CSS3, on les déclare dans le code CSS. Ce sont des éléments qui permettent d adapter la présentation de la page en mettant des conditions d affichage en fonction de la taille de l écran. C est ce qui rend un site web, responsive. Les medias queries exploitent les particularités des supports multimédia comme la largeur, la hauteur, la définition, l affichage des couleurs. Les medias queries sont nécessaires afin d appliquer des styles différents sur les écrans de plus petite taille. Le principe est de dire: «si l écran de l utilisateur est de la taille X alors afficher tels blocs avec telles caractéristiques». B. Images flexibles Les images et vidéos flexibles ont la propriété de s'adapter automatiquement au cadre défini par la taille de l'écran. Ce sont des médias qui ne sont pas fixés par une largeur en pixels et qui peuvent être redimensionnées proportionnellement par le navigateur. Les proportions de l'image sont définies en pourcentage dans la feuille CSS. Cela permet à ces contenus de ne pas «déborder de leur parent» lorsque celui-ci se restreint. Cependant, avec les medias queries, l image conserve sa taille ce qui peut poser des problèmes de téléchargement si on la consulte depuis un smartphone. Toutefois on peut créer l image en plusieurs versions en fonction de la taille, de façon à avoir une image pour chaque terminal. Les media queries font appel à la version de l image la plus adaptée à l écran utilisé. Mais cette fonctionnalité n est pas interprétable par tous les navigateurs. C. Grilles fluides Elles permettent une organisation de la page en lignes et colonnes. Cette "combinaison élastique" permettra à tous vos éléments de se recomposer correctement et de s'afficher avec un confort total, que cela soit sur un écran mobile, ou un écran d'ordinateur. Ainsi, les éléments de contenus vont pouvoir se placer les uns en-dessous des autres au fur et à mesure de la diminution de la largeur. Ce cas d utilisation était assez rare avant l apparition du CSS3 qui permet une adaptabilité nouvelle. 5

7 Conclusion Google a publié un sondage à destination des développeurs basé sur la question : Quelle configuration utilisez-vous pour créer un site mobile-friendly? 81% ont répondu un site web responsive. On peut dire que le web responsive constitue la meilleure technique actuelle face aux évolutions des pratiques Internet. Il y a des modules et des outils open source qui vous facilitent la conception tels que Bootstrap (solution de Twitter pour créer facilement des éléments responsive) et jquerypicture qui règle le problème de chargement de l image. Face aux quelques inconvénients du web responsive, la solution aujourd hui est le «mobile first», c est-à-dire concevoir le site en pensant d abord à la forme qu il prendra depuis un smartphone donc avec une disposition verticale. On optimise là l expérience utilisateur : plus de la moitié des internautes sont des mobinautes, il est donc important de concevoir un site en fonction des usages. Plutôt que de faire votre première maquette complète version "desktop", les webdesigners sont incités à commencer par proposer la version mobile, qui est généralement la plus simple. Le gros avantage de cette technique est qu'il vous fera développer d'abord la version mobile, puis ensuite des adaptations pour la version de bureau. Autre alternative, l application, différente d un vrai site en version mobile. Aujourd hui lorsque vous accédez à un site depuis votre mobile, on vous propose souvent de télécharger l application à l aide d une bannière prenant au meilleur des cas le quart de l écran qu il faut fermer pour voir l écran en entier. C est pourquoi ces sites sont parfois volontairement non responsive (comme Allocine) afin de vous rediriger vers l application. En revanche, le développement d une application est beaucoup plus coûteux et requiert des autorisations d'installation et de mise à jour. Finalement, si vous venez à créer un site web, on vous conseille de le faire mobile-friendly car le smartphone est le premier appareil utilisé, mais reste à savoir quel type de site (responsive? site dédié? app?). Il n y a pas de solution parfaite, mais adaptée. Tout dépendra en fait de l objet de votre site, ce qu il montre, ce qu il vend, ses besoins et usages. D un point de vue communicationnel, mettez-vous seulement à la place du visiteur de votre site en anticipant ses attentes et faites en sorte qu il ait la meilleure expérience utilisateur possible. Nous expliquons ce phénomène par la volonté des géants de l informatique tels que Google, Apple, ou Microsoft de fusionner l utilisation ordinateur et l utilisation téléphone en ne formant qu un, en d autres termes ils visent à uniformiser notre expérience web. C'est pourquoi les comptes et profils utilisateur sont toujours plus personnalisés et transposables. Faire en sorte que nous utilisateurs retrouvons notre personnalité, nos goûts et habitudes partout, tout le temps. 6