RESPONSIVE WEB DESIGN



Documents pareils
Les tablettes. Présentation tablettes Descriptif Fournisseurs Caractéristiques Comparatifs Conseils Perspectives Démonstration

Introduction à HTML5, CSS3 et au responsive web design

Comment télécharger et

LES TABLETTES : GÉNÉRALITÉS

LES TABLETTES TACTILES

LA DIVERSITE DES SUPPORTS ANDROID

LES OUTILS DE LA MOBILITE

L accès à Internet. Votre fournisseur d accès à Internet 1/2. Box internet. Box internet. Décodeur TV. Décodeur TV. Freebox. Livebox.

Routeur Gigabit WiFi AC 1200 Dual Band

La diffusion des technologies de l information et de la communication dans la société française

Solutions de paiement sur facture opérateur: bilan 2010 et perspectives avril 2011

Performance et usage. La différence NETGEAR - R7000. Streaming HD illimitée

Comment choisir sa tablette?

CHOIX ET USAGES D UNE TABLETTE TACTILE EN ENTREPRISE

Technologies mobiles & Tourisme: la révolution? Denis Genevois Marche-en Janvier 2011

SYSTÈME DE SURVEILLANCE VIDÉO À DISTANCE

L OUTIL NUMERIQUE CARACTERISTIQUES ET FONCTIONNALITES

Poste virtuel. Installation du client CITRIX RECEIVER


Table des matières. Module tablette

12 novembre 2012 Montauban MOBILITÉ, APPLICATIONS ET SITES MOBILES

Béatrice Bertrand CDDP de l Eure. Béatrice Bertrand CDDP de l'eure

Point sur les solutions de développement d apps pour les périphériques mobiles

Les supports de lecture et les formats des livres numériques JDD

Découverte des tablettes tactiles (ipad d'apple et Galaxy Tab de Samsung

Glossaire. ( themanualpage.org) soumises à la licence GNU FDL.

SYSTÈME DE SURVEILLANCE VIDÉO À DISTANCE

Page : N 1. Guide utilisateur Ma Banque

Le Paiement sur Facture Opérateur

CREER UNE APPLICATION MOBILE

Vodafone Mobile Connect

WINDOWS Remote Desktop & Application publishing facile!

... Cahier des charges Site Internet Office de Tourisme Lesneven - Côte des Légendes MAITRE D OUVRAGE

Foire aux questions sur Christie Brio

FAIRE COMMUNIQUER UNE TABLETTE AVEC UN PERIPHERIQUE SANS FIL POUR DUPLIQUER L ECRAN 22 avril 2015

Programme de formations 2012-S1

COMMENT CRÉER UNE APPLICATION MOBILE?

Créer un compte itunes Store

Les tablettes numériques en EPS. Repères. Les différents types de tablettes et leurs caractéristiques.

Syfadis. > Configuration du poste client. Nous vous aidons à réussir. REFERENCE : Syfadis LMS - 20/06/2007. AUTEUR : Equipe technique Syfadis

Le Web et Internet. A. Historique : B. Définitions : reliés entre eux via un système d interconnexion.

Les nouveaux comportements... 9

Optimiser pour les appareils mobiles

Atelier numérique. Développement économique de Courbevoie. Internet / Extranet / Mobilité : Prospection et Support d'aide à la vente

WINDOWS 8. Windows 8 se distingue par la présence de 2 interfaces complémentaires :

BAROMÈTRE DE L ÉCONOMIE NUMÉRIQUE

BAROMÈTRE DE L ÉCONOMIE NUMÉRIQUE

Plate formes mobiles. Utilisation. Contexte 9/29/2010 IFC 2. Deux utilisations assez distinctes :

L écran du marais : Comment configurer le viewer OpensSim

Note comparative entre les caractéristiques des tablettes numériques, smartphones et pocket PC pour la collecte de données naturalistes de terrain

Le Web de A à Z. 1re partie : Naviguer sur le Web

Dix bonnes raisons d essayer Office Professionnel Plus 2010

Panorama de l offre et des usages des tablettes

Club Idaho Consulting # 1

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

LA MOBILITE : ACTEURS, OUTILS,

LOGO Smartphones, tablettes, et autres gadgets quel impact sur notre métier d ASR

Le livre numérique. Découverte des nouveaux supports de lecture. Image Elliot Lepers - CC-BY-SA-NC

Comprendre les outils mobiles

Spétechs Mobile. Octobre 2013

Design adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH

L environnement de travail de Windows 8

Applications smartphones : enjeux et perspectives pour les communautés de l'eglise Catholique. Application Smartphone 1

Pc Portable ou Tablette tactile?

APPAREILS ACCESSIBLES

Environnement Zebra Link-OS version 2.0

Modifier les paramètres

Guide des fonctions avancées de mywishtv

ACCEDER A SA MESSAGERIE A DISTANCE

LES TECHNOLOGIES MOBILES POUR LA FORMATION DES ADULTES : AVANTAGES, IMPLANTATION ET ACCOMPAGNEMENT.

+33 (0) Sarl ISB Altipolis2 av. Du Général Barbot Briancon - France

GUIDE D UTILISATION LA DEPECHE PREMIUM

LES APPAREILS ÉLECTRONIQUES PORTABLES. Congrès 2013 du SBO - Nord Présentateur : Brian Alberton

Communiqué de presse

Solution de Mobilité SAP SUP & AFARIA. Meltz Jérôme

ACCÉDER A SA MESSAGERIE A DISTANCE

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014

VOS RESSOURCES NUMÉRIQUES PAS À PAS

Test Essentielb Smart tab 7800 : Une Bonne Surprise

LA BOX FIBRE DE SFR GUIDE D UTILISATION COMPLET (MAIS PAS COMPLEXE) SFR.FR

Travailler et organiser votre vie professionnelle

!" #$%&'(&)'*'+,--./&0'1&23,+2.)$4$%52'&%'6.%&2'

Preliminary Spec Sheet

Guide d utilisation du portail de formation en ligne LeCampus.com à l attention des partenaires de l APSM

Nous venons de voir que la tablette Kindle Fire est une excellente liseuse et un agréable

Automne Le guide ultime des tablettes

Administration de systèmes

Dématérialisation et mobilité

Emprunter et lire un livre numérique sur FRe BOOKS en français

Ma première visibilité sur le Web. en 60 min avec des outils gratuits

Dans nos locaux au 98 Route de Sauve NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur

INSTALLATION RAPIDE DU CONVERTISSEUR WRC-300 Version 1.1

QlikView sur Mobile : Au-delà du reporting

Focus sur. métiers du numérique. métiers. les. Contexte régional. La piste. des

Internet mobile : Etat de l art - Février Reproduction ou communication même partielle interdite sans autorisation écrite d ip-label.

Stratégies opérationnelles d APPS-CRM pour smartphones et tablettes

Transcription:

RESPONSIVE WEB DESIGN Enjeux, observations et préconisations Mémoire de Master 2 Web éditorial sous la direction de Yannis Delmas Maître de conférences en épistémologie-histoire des sciences et en informatique Enguerran Weiss Université de Poitiers - 2011/2012

Remerciements Cette dernière année de Master Web éditorial, vraisememblablement ma dernière année scolaire, a été doublement riche : du point de vue théorique, avec la formation dispensée au sein de l Université de Poitiers, et pratique avec l alternance au poste de webdesigner au sein de l agence web Milky Interactive, devenue récemment Milky Social Media Innovation. C est dans ce contexte que j ai donc dû réaliser ce mémoire, à cheval sur une chaise de classe et un fauteuil de bureau, sur un sujet qui me tient à coeur et que j espère ne pas avoir trop dénaturé. Je tiens donc à remercier en premier lieu Yannis Delmas, qui a su me conseiller et m encourager tout au long de la préparation et la rédaction de ce travail. De même, Olivier Pineda, directeur de création chez Milky, m a toujours soutenu dans mes recherches, et toujours apporté de précieux conseils et points de vues, dont certains sont retranscrits dans ce travail. Par ailleurs, j ai pu grâce à lui trouver assez de temps pour pouvoir rédiger ce mémoire selon les délais imposés par l Université. Il est donc évident que sans ses deux personnes, ce mémoire ne serait pas écrit. Par ailleurs, je tiens également à remercier Alex Roubinet, Samuel Laulhau (en qualité de co-auteur, évidemment) et Sébastien Poudat, de Milky, que je n ai pas hésiter à solliciter à chaque fois qu un problème lié au Responsive Web Design, ou au baby-foot, me trottait dans la tête. Toute l équipe de Milky, qui m a permis de travailler sur ces problématiques avec des projets et des problématiques concrètes, qui ont été au coeur de ma réflexion. Je tiens également à remercier Julie Métois, pour sa patience et sa relecture méthodique, sans laquelle ce mémoire aurait probablement été illisible. 1

A qui s adresse ce mémoire? Ce mémoire de Master Web éditorial vise à faire un état des lieux sur la mise en place du concept de Responsive web design. De ce fait, il traite plus particulièrement les problématiques de conception et de gestion de projet web, liées à la pratique assez récente de RWD proposée par Ethan Marcotte. En second lieu, il aborde des points essentiels d ergonomie des interfaces web, d expérience utilisateur et de technique web. De ce fait, ce mémoire s adresse : aux commerciaux qui veulent trouver des arguments de ventes, traiter des objections, pour proposer un produit avec de nouveaux standards de qualité aux chefs de projet qui se demandent comment concilier RWD, workflow d agence et discours avec le commanditaire aux concepteurs web qui cherchent quelques préconisations et guidelines ergonomiques pour différents supports aux directeurs artistiques et webdesigners qui veulent avoir une vue d ensemble sur la question et voir de quelle façon leur travail va, dans une certaine mesure, évoluer aux développeurs et intégrateurs qui veulent trouver quelques astuces Enfin, au final, aux agences web qui cherchent à créer des projets de qualité, respectueuses des standards comme de de leurs utilisateurs. 2

Table des matières Remerciements 2 A qui s adresse ce mémoire? 2 Introduction 7 I Terminaux alternatifs : historique, état des lieux et panorama technique 8 1 Historique et évolution des supports d accès au web 9 1.1 Rappel historique des modes d accès au contenu web............ 9 1.1.1 Tim Berners-Lee et l origine du web.................. 9 1.1.2 L arrivée de nouveaux terminaux : le web n est pas que fixe..... 11 1.1.3 WI-FI, haut débit et guerre des navigateurs : les années 2000, un web à plusieurs vitesses......................... 12 1.1.4 Les années 2005-2010 : les smartphones, Google et les standards web 14 1.2 Les accès au web actuels et à venir...................... 17 1.2.1 Smartphones, tablettes et e-readers : l explosion des terminaux mobiles................................... 17 1.2.2 Les outsiders : TV connectées, consoles de jeux, etc.......... 19 1.2.3 Prospective : les nouveaux supports à venir.............. 19 2 Terminaux alternatifs : nouveaux supports et enjeux du web 21 3

2.1 Les terminaux alternatifs : définition et typologie.............. 21 2.2 Nouveaux supports : une diversité technique................. 25 3 Responsive Web Design : un concept orienté utilisateur 28 3.1 Le web est fluide par nature!......................... 28 3.2 Responsive Web Design : définition du concept................ 30 3.2.1 Vers une définition générale...................... 30 3.2.2 Une définition technique : grille fluide, points de bascule, etc..... 32 3.2.3 La sacro-sainte trinité : l importance de la grille fluide, des images fluides et des points de bascule.................... 33 3.2.4 Une question de ciblage........................ 34 3.3 Les conséquences, avantages et inconvénients du RWD........... 35 3.3.1 Les conséquences du RWD....................... 35 3.3.2 Les points forts du RWD....................... 37 3.3.3 Les inconvénients identifiés....................... 38 3.4 Les possibilités du RWD............................ 39 4 L expérience utilisateur : le cadre de référence 43 4.1 Expérience utilisateur (UX) : définition du concept............. 43 4.2 Les enjeux de l UX dans le web........................ 45 4.3 RWD, une pratique orientée utilisateur.................... 46 II La question du Responsive web design aujourd hui 50 1 Un concept et une pratique encore marginaux 51 1.1 Définition et définitions d un site web réactif................. 51 1.2 Trente sites réactifs passés à la loupe..................... 56 1.2.1 Définition du corpus et de la grille d évaluation........... 56 1.2.2 Analyse des données reccueillies.................... 57 4

2 Les obstacles des sites RWD 64 2.1 Du web fixe vers le web fluide......................... 64 2.2 Le client, envers et contre tout......................... 65 2.2.1 Un coût de réalisation plus important................. 65 2.2.2 Refractaire à la flexibilité........................ 66 2.2.3 Un manque de pédagogie........................ 66 2.3 Un projet, plusieurs enjeux ergonomiques................... 67 2.4 Les mythes mobiles............................... 68 2.4.1 Les utilisateurs sur mobile sont pressés et distraits.......... 69 2.4.2 Mobile = moins............................. 69 2.4.3 La complexité est à bannir....................... 70 2.4.4 Il faut éviter de faire faire des clics à l utilisateur.......... 70 2.4.5 Le site dédié au mobile est la meilleure solution........... 71 2.5 Quel support privilégier?............................ 72 3 Mobile First : une méthode de conception adaptée au RWD 74 3.1 Une méthode de conception adaptée au web................. 74 3.2 Une expérience utilisateur harmonisée..................... 76 3.3 Les limites du Mobile First........................... 77 III Mise en place d un projet Responsive web design 80 1 Avant-vente 81 1.1 L étude de la cible............................... 81 1.2 Exploitation des données existantes...................... 82 1.3 Analyse des besoins............................... 83 1.4 Explicitation de la solution choisie....................... 84 2 Conception 87 2.1 Les smartphones................................ 89 5

2.2 Les tablettes tactiles.............................. 91 2.3 Les Smart TV.................................. 92 3 Création 93 4 Développement du produit 96 4.1 La définition technique de l appareil : viewport, device-width, etc...... 96 4.2 la grille fluide, les images et éléments fluides................. 98 4.3 La mise en place des points de rupture.................... 101 4.4 Les solutions de secours............................ 102 4.5 Les usages de Javascript............................ 103 4.6 Performances.................................. 103 5 Evaluation du produit 105 Conclusion et discussion 111 A Annexe 1 : Grille d analyse 112 Bibliographie 113 Quatrième de couverture 122 6

Introduction Alors que l on spéculait sur l avenir du web mobile il y a encore quelques années, son explosion est aujourd hui une réalité bien affirmée. A titre indicatif, selon Médiamétrie 1, plus de vingt millions de Français se sont connectés au web depuis leur appareil mobile. Cela représente une progression très nette dans les usages du web en général : la possibilité d accéder à de l information et à du contenu média depuis n importe où implique que l ordinateur traditionnel, fixe, n est plus le seul support de visionnage du web. Les ventes de smartphones et tablettes sont en très forte progression, au détriment de celles d ordinateurs de bureau et d ordinateurs portables, les surpassant même pour l année 2011. A ce propos, Google, qui s est donné pour mission d évangéliser la population sur les bonnes pratiques en manière de web mobile fait de la prospective et annonce : «en 2013, il y aura plus d accès au web via un mobile que depuis un PC», «d ici 2015, il y aura un terminal mobile pour chaque personne sur terre» 2. Sans discuter ces estimations, il ne fait aucun doute que pour la firme de Mountain View, l avenir du web est sur terminal mobile. Si ces terminaux sont de plus en plus évolués et proposent un rendu des sites web qui se rapproche de celui d un ordinateur portable ou de bureau, la taille de l écran et les possibilités d interaction de l appareil sont très différentes des machines traditionnelles. Pour cette raison, et depuis maintenant environ cinq ans, certains sites se dotent de version mobile pour faciliter l accès depuis les appareils mobiles. 1. ZDNet. Les Français surfent presque 4 heures par mois sur leurs smartphones. Consulté le 7 septembre 2012. Disponible à l adresse : http ://www.businessmobile.fr/actualites/les-francais-surfentpresque-4-heures-par-mois-sur-leurs-smartphones-39782274.htm#xtor=rss-1 2. Google. Reasons Mobile Matters. Novembre 2011. Consulté le 10 décembre 2011. Disponible à l adresse : http ://www.howtogomo.com/en/#reasons-mobile-matters 7

Cette méthode de conception est encore très présente aujourd hui : le site mobile est un site à part entière, dédié aux appareils mobiles, ou plutôt à un appareil mobile. En effet, comme le met en évidence Ethan Marcotte 3, les entreprises voulant s implanter sur le web mobile énoncent leur besoin en disant : «Je veux un site pour iphone». C est donc là que réside le problème de ces sites mobiles : ce sont des sites adaptés et dédiés le plus souvent à un seul support de visionnage. A partir de ce constat, Marcotte problématise : comment fait-on si l entreprise veut un site pour ipad, pour Nokia N90, ou un tout autre modèle? Peut-on continuer à produire des pages web limitées à un appareil? Ce questionnement date de mai 2010, il est encore plus vrai aujourd hui : les ventes d appareils mobiles explosent, le nombre de modèles ne cesse de croître, et les tailles d écran mises sur le marché sont très variables : il n existe aucun standard. De plus, les types d appareils pouvant se connecter au web se diversifient : tablettes, e-readers, Smart TV, etc. Face à ce problème, Marcotte, en s inspirant de l architecture responsive, propose le concept de Responsive Web Design (RWD). Tout comme son homologue en architecture qui propose des édifices s adaptant à la taille et aux besoins des individus qui l occupent, le RWD consiste à proposer une page web qui s adapte au support de visionnage, en utilisant des grilles de conception et des images flexibles, appuyées par des points de bascule, les Media Queries. Ainsi, la structure de la page et ses éléments graphiques se conforment à son support de visionnage. Ce concept de RWD semble donc être le plus adapté à l évolution actuelle des terminaux pouvant se connecter au web. Une fois cet état des lieux de la question du RWD dressé, on est amené à se poser plusieurs questions. En effet, si les statistiques des ventes de terminaux dits alternatifs, pour reprendre l expression de F. Cavazza, sont aussi prometteurs et que la technique permet de mettre en place des sites web réactifs, où sont ces sites à l heure actuelle? Les méthodes de conception actuelles, les chaînes de production web et leur workflow sont-ils adaptés à la mise en place de projets RWD? Que va devenir le support standard sur lequel concevoir un produit web? Cette notion de RWD ne peut-elle pas évoluer? 3. MARCOTTE E. Responsive web design. Consulté le 9 novembre 2011. Disponible à l adresse : http ://www.alistapart.com/articles/responsive-web-design 8

A partir de l ouvrage d Ethan Marcotte intitulé Responsive web design, à l origine de cette proposition, nous allons analyser ce concept de RWD et le replacer dans le contexte plus large de l histoire du web et des enjeux actuels auquel le RWD est confronté. Nous verrons que le concept de RWD, qui n a évidemment pas été créé à partir de rien, est pleinement dans la continuité de l histoire du web et s insère parfaitement dans une logique de conception orientée utilisateur. En effet, face au développement et aux ventes massives de terminaux alternatifs, le RWD semble être une solution adaptée à la fois aux problématiques matérielles que les concepteurs de sites rencontrent, tout en se focalisant sur les besoins de l utilisateur. Après cette analyse théorique du concept, nous tenterons d expliquer dans quelle mesure cette solution et ses différents éléments sont mis en place sur le web actuellement. Deux ans après la parution du livre, on verra quel usage en fait la communauté web aujourd hui, en terme de publications et de produits. Nous étudierons donc des articles français et anglophones afin de déterminer comment a été assimilé ce concept en 2012, et quelles distances ont été prises vis-à-vis de lui. Nous analyserons ensuite, à l aide d une grille d évaluation, trente sites web présentés comme des projets RWD et nous essaierons d en dégager des tendances. Après avoir vu la façon dont le RWD est mis en place aujourd hui, à partir de cet échantillon, nous verrons quels possibles freins et obstacles peut rencontrer la mise en place d un projet RWD à l heure actuelle. Enfin, nous étudierons la méthode de conception Mobile First, apportée par Luke Wroblewski, ses limites, et surtout, les apports que cette méthode peut apporter à un projet RWD. Enfin, après avoir vu dans quel contexte a émergé cette solution et après avoir fait un tour d horizon de la mise en place de projets RWD actuellement, nous pourrons voir de quelle façon il est possible de créer un produit RWD en agence web afin de concilier la méthode proposée par Marcotte et les exigences de la chaîne de production web. Le but de ce mémoire n est donc pas d être exhaustif sur la question. D une part parce que cela paraît impossible, le sujet étant continuellement discuté à l heure actuelle. D autre part parce que les changements apportés en gestion de projet, en marketing, etc. par le RWD devraient faire l objet d une étude à part entière. Mais surtout parce que l objectif de 9

cette étude est de faire un état des lieux du concept de RWD aujourd hui et d apporter une vision générale sur la façon dont on peut mettre en place un projet RWD pour le moment. 10

Première partie Terminaux alternatifs : historique, état des lieux et panorama technique 11

Chapitre 1 Historique et évolution des supports d accès au web 1.1 Rappel historique des modes d accès au contenu web 1.1.1 Tim Berners-Lee et l origine du web Mettons de côté les origines d Internet, pour nous concentrer sur celles du web. Il convient, pour aborder les usages du web actuel et ces différents modes d accès, de se pencher sur ses origines et donc sa nature. Le web et les principales technologies qui lui sont associées voient le jour au CERN en 1990 1. Sous l impulsion de Tim Berners-Lee, et sur les bases du protocole Internet, les URL / URI, le protocole HTTP, le langage balisé HTML et les liens hypertextes sont créés pour constituer le World Wide Web. Pour parcourir ces différents documents, le navigateur WorldWideWeb est mis au point. Même si ce web ne permet que de visionner du texte, ses fonctionnalités permettent aux utilisateurs de consulter et mettre en rapport des documents à distance, via des serveurs Internet. On peut dès lors échanger, 1. CERN. Le site Web du tout premier serveur Web du monde. Août 2012. Disponible à l adresse : http ://info.cern.ch/default-fr.html 12

classer et structurer de l information à distance. Le web est donc, dès son origine, une technologie conçue pour mettre en rapport des informations, des données, des documents, entre des terminaux : ceux-ci sont au départ des stations fixes, sous différents systèmes d exploitation. Pour Tim Berners- Lee, l enjeu est alors de pouvoir faire communiquer des terminaux sensiblement différents 2, tant au niveau matériel que logiciel. En effet, à l époque, l essentiel du parc informatique mondial ne dispose pas de standard. Le grand public est tiraillé entre Apple et compatible PC, tandis que la recherche travaille essentiellement sous systèmes Unix. Le succès du World Wide Web doit donc reposer sur son universalité et son libre accès depuis n importe quel terminal : c est pour cette raison qu en avril 1993, le CERN et Berners-Lee rendent le web libre de droits. C est sur cette base que, le 22 avril 1993 3, le premier navigateur web public voit le jour, sous la coupe de Marc Andreessen : Mosaic. Ce navigateur marque une évolution notable dans l usage du web, puisqu il introduit l affichage d images. Les premiers privilégiés ayant une connexion Internet peuvent désormais, via leur ordinateur, accéder aux contenus, textes mis en forme et images, du web. Cette technologie, complètement liée et dépendante des technologies informatiques, est au départ restreinte à un usage fixe : la taille des terminaux ne permet pas de les transporter (même si quelques ordinateurs portables font leur apparition comme le Macintosh Portable ou le Powerbook d Apple, respectivement en 1989 et 1991). Par ailleurs, la connexion au réseau nécessite de se brancher à une ligne téléphonique ou à un réseau local connecté à Internet. Le web à ses débuts est donc lié par la force des choses à une utilisation sédentaire, puisqu il faut une machine fixe reliée à un point d accès très localisé (une prise). Les débuts du web sont très enthousiastes et cette technologie bénéficie rapidement d apports extérieurs. Comme nous l avons dit précédemment, l arrivée de Mosaic marque l arrivée des contenus multimédias sur le web. Mosaic 2 ajoute une couche d interactivité 2. CERN. Le site Web du tout premier serveur Web du monde. Août 2012. Disponible à l adresse : http ://info.cern.ch/default-fr.html 3. NCSA. About NCSA Mosaic. Août 2012. Disponible à l adresse : http ://www.ncsa.illinois.edu/projects/mosaic.html 13

en proposant à l utilisateur d envoyer des requêtes au serveur via un formulaire. En 1994, Netscape pose sa pierre à l édifice en proposant des pages plus attractives, basées sur les CSS. Face à cette effervescence et la multiplication des propositions technologiques et formats associés, Berners-Lee, ayant quitté le CERN pour le MIT, fonde, le 1er octobre 1994 4, le W3C afin de conserver un poids dans l évolution du web à venir en promouvant la compatibilité et l interopérabilité des technologies. Dans ce but, le W3C pose successivement ses recommandations pour le HTML 2.0 (1996), HTML3 et 4 (1997). Comme on peut le voir, depuis ses débuts et encore par la suite, le web se veut une technologie ouverte, libre et interopérable, grâce aux efforts de Tim Berners-Lee et, ensuite, du W3C. 1.1.2 L arrivée de nouveaux terminaux : le web n est pas que fixe Si le web est libre et se veut interopérable, les contraintes technologiques lui imposent cependant des limites pendant ses premières années puisqu il est restreint aux machines fixes 5. Il faut attendre 1997 pour voir se regrouper les principaux acteurs des télécommunications au sein du WAP 6 Forum. La problématique de ce forum est de proposer les solutions apportées par les différents acteurs et de les adapter à la mise en place d un protocole permettant d accéder aux contenus web depuis un téléphone portable. Cette initiative marque la première avancée pour le web mobile : on peut désormais, grâce au WAP 1.0, accéder à des contenus web via un autre terminal que l ordinateur. Le terminal mobile se connecte au serveur, qui le renvoie, s il existe, au document WML (dérivé de HTML, dédié au WAP) qui présente les mêmes informations que le do- 4. CONNOLLY D. A Little History of the World Wide Web. 2000, août 2012. Disponible à l adresse : http ://www.w3.org/history.html 5. On peut toutefois noter la tentative d Apple en 1994 avec le Newton (et son navigateur PocketWeb) pour offrir la possibilité d accéder au web de façon mobile. Mais l échec commercial de ce produit et son usage très marginal ne peuvent que constituer les prémices du web mobile. 6. Wireless Application Protocol 14

cument HTML original, optimisé pour appareils mobiles et leurs contraintes spécifiques : connexion lente (bi-bande, tri-bande, et plus récemment, 3G), affichage très divers, mais essentiellement noir et blanc et polices à chasse fixe. Le WAP étend donc le champ des terminaux ayant accès au web aux téléphones mobiles, assistants personnels, etc. Ce web est toutefois limité, puisqu il s agit de sites dédiés, et conçus pour les appareils mobiles. Le web mobile, à ses origines, est donc, pour des raisons techniques, un web limité aux pages WML et ne répond pas vraiment à l ouverture et l interopérabilité voulue par Tim Berners-Lee. En effet, le WAP a été une réponse technique à la problématique d affichage de contenus web sur des supports qui n y sont pas destinés (il s agissait avant tout de téléphones). Quoiqu il en soit, cette segmentation de web «fixe» et mobile va perdurer, si bien qu aujourd hui, pour beaucoup de professionnels, cette distinction est encore nette. 1.1.3 WI-FI, haut débit et guerre des navigateurs : les années 2000, un web à plusieurs vitesses L adoption du web par la population est rapide : entre mai 2001 et mai 2005, le nombre d internautes en France est multiplié par deux 7. Dans le même temps, un nouveau type d accès voit le jour : le haut débit. Jusque là, le débit moyen d une connexion Internet atteignait les 56kbit/s, et nécessitait l occupation d une ligne téléphonique. Désormais, les particuliers peuvent accéder au web plus rapidement (entre 512kbps et 1024kbit/s) et cette connexion est permanente. Cette évolution technologique est très vite adoptée par la population : en avril 2000, 3% des Français disposent d une connexion Internet dite haut-débit, 3 ans plus tard, ce chiffre s élève à 16% 8. Cette évolution du web haut débit est en partie portée par une innovation majeure : l Internet sans fil, le Wi-Fi, en 1999 9 et la création de Hotspots. Le web, à l origine bien fixé 7. Journal du Net. Nombre d internautes en France. 26 juillet 2012, Juillet 2012. Disponible à l adresse : http ://www.journaldunet.com/ebusiness/le-net/nombre-internautes-france.shtml 8. FLETY L. - PRADEL B. La diffusion du haut débit en France, disponible à l adresse : http ://www.cairn.info/revue-flux-2005-2-page-116.htm. Consulté en août 2012 9. ref? 15

au bureau, se détache d un premier joug : le câble de connexion Internet. Par ailleurs, les progrès de l industrie informatique permettent aux particuliers de disposer d ordinateurs vraiment portables. En 1999, Apple sort son ibook, qui intègre un équipement Wi-Fi, le Airport. Le web des années 2000 s émancipe donc de ses premières contraintes : débit, contraintes matérielles (câblage, taille du matériel, etc...) et contraintes logicielles. L accès au web est plus rapide, les professionnels s autorisent à proposer des contenus plus importants en terme de taille, de type de contenu (son et vidéos streamés, animations et jeux flash). Si le web connaît une grosse évolution entre 1997 et 2005, cette évolution ne touche toutefois qu une petite partie de la population. En avril 2004, seulement 16% des Français disposent d une connexion haut débit. Toutes les régions en France ne disposent pas d une couverture ADSL suffisante, les zones les plus reculées n y ayant pas accès. L accès au web est à plusieurs vitesses : tous les contenus ne sont pas accessibles par tous les internautes. Il n est pas rare à l époque de voir émerger plusieurs versions d un même site : HTML simplifié, Flash, etc. suivant les humeurs du concepteur et du budget de son client. Au début des années 2000, plusieurs types de web cohabitent : le wap, comme on l a vu précédemment, permet aux utilisateurs avec un téléphone mobile d accéder aux contenus web simples : informations pratiques (horaires, météo, informations, etc...) le web depuis une connexion bas débit : permet également d accéder à des contenus et services web simples (articles, infos, chat, mail, etc...) le web haut débit : permet d accéder à tous types de contenus web (animations flash, vidéos et radio streamés, etc...) En parallèle à cette augmentation d utilisateurs et ses différents types d accès, le début des années 2000 est aussi le théâtre de la première guerre des navigateurs. Vu le nombre d utilisateurs qui afflue sur le web, deux acteurs majeurs se battent pour promouvoir l accès web depuis leur navigateur : Microsoft avec Internet Explorer (versions 5 et plus), Netscape Communications avec Netscape Navigator. Entre 1999 et 2003, les connexions depuis ces navigateurs totalisent plus de 90% de l audience Internet mondiale. Le souci majeur 16

de cette guerre entre Netscape et Microsoft a surtout été ressenti par les utilisateurs car chacun proposait alors sa propre interprétation du code HTML et CSS, aucun des deux ne respectant les standards proposés par le W3C. Chacun des deux acteurs présentait son interprétation de balises HTML et de propriétés CSS, avec, en supplément, de nouvelles propriétés propres à leur navigateur. Le but de la manuvre était de tabler sur l échec de son concurrent tout en imposant ses propres contraintes. Chaque webmaster ressentait donc le besoin d optimiser son site pour l un, au détriment du rendu sur l autre. De ce fait, les utilisateurs, selon le navigateur qu ils utilisaient, n avaient pas toujours accès à une version lisible du contenu qu ils cherchaient. Le web de ses années-là est donc en pleine effervescence, bénéficiant d avancées technologiques considérables dues à des acteurs majeurs des télécommunications, de l industrie informatique et de l industrie du logiciel. Mais comme on a pu le voir, c est aussi un web très hétérogène, suivant le mode de connexion, le terminal, le navigateur, etc. On constate donc autant de web que de combinaisons possibles entre tous ces éléments, au détriment de la compatibilité et l interopérabilité des contenus entre le web et ses utilisateurs. 1.1.4 Les années 2005-2010 : les smartphones, Google et les standards web Cette période "d anarchie" s achève avec le déclin très fort de Netscape, qui, périclitant, rend son code source libre. Cette dernière initiative est à l origine de la fondation libre Mozilla. Cette fondation, dès ses origines, a pour but de s «assurer qu Internet se développe d une manière qui bénéficie à tout le monde» 10. Après l éclatement de la bulle Internet, cette phrase a un double sens. Premièrement, Internet et le web n ont pas toujours profité à tout le monde, contrairement aux objectifs initiaux de Tim Berners-Lee et du CERN. Comme on a pu le voir précédemment, le web étant alors pour beaucoup de ses acteurs un nouveau marché avec de nouvelles opportunités de spéculation, chacun faisait la promotion de sa technologie au détriment d une autre, de son format au détriment d un 10. Mozilla. The Mozilla Manifesto. Juillet 2012. Disponible à l adresse : http ://www.mozilla.org/about/manifesto.fr.html 17

autre. Deuxièmement, il faut pour Mozilla s assurer activement que le développement du web profite à tous ses utilisateurs. Un des principes (le 8ème) à défendre pour Mozilla est le suivant : «La réalité d Internet en tant que ressource publique dépend de l interopérabilité (des protocoles, des formats de données, du contenu), de l innovation et d une participation décentralisée mondiale». Fin 2004, le navigateur tout récent de Mozilla, Firefox, est déjà en France à 12% d audience 11, avec une progression sur le mois de décembre de +4.55 points. La vision du web selon Mozilla fait donc également beaucoup d adeptes parmi les utilisateurs du web. Cette initiative de Mozilla n est pas isolée : dans le même temps, d autres acteurs du monde informatique, à différentes échelles, en appellent à un web plus ouvert, plus homogène, plus standardisé. Apple délaisse Microsoft Internet Explorer et lance Safari, basé sur le moteur de rendu libre KHTML du projet KDE ; les Norvégiens d Opera Software se fient aux recommandations du W3C en matière de standards CSS et HTML et produisent un nouveau moteur de rendu : Presto. Ces différentes initiatives apportent plus de poids à la voix W3C qui travaille de façon indépendante à la définition et la recommandation de standards web, et, petit à petit, vont grignoter les parts d audience du navigateur numéro 1 du web : Internet Explorer. L arrivée et la progression d un nouvel acteur du web vont participer également à la promotion de ces standards. Google, qui voit le jour en 1998, devient entre 2000 et 2005 le moteur de recherche de référence dans la majorité des pays occidentaux 12. Son succès est, en majeure partie, dû à sa simplicité d utilisation (contrairement au portails de l époque : Lycos, Aol, etc...) et son algorithme qui propose des résultats bien plus pertinents que ses concurrents. Celui-ci se base au fur et à mesure sur le modèle de formatage des données spécifié par le W3C. Google recommande donc très rapidement les standards web proposés par le W3C, car ils lui permettent de travailler sur une base sémantique commune pour tous les documents web traités par ses robots. A partir de 2005, les smartphones, qui ont fait apparition sur le marché quelques années plus tôt avec des fabricants comme Nokia, LG ou Blackberry, commencent à trouver leur 11. DUFFEZ O. Baromètre moteurs de recherche Décembre 2004. 26 janvier 2005, juillet 2012. Disponible à l adresse : http ://www.webrankinfo.com/actualites/200501-barometre-2.htm 12. BATTELLE J. 2006 18

public, d une part du fait de l évolution des télécomunications. En effet, en France, fin 2004, on assiste au déploiement du réseau 3G (UMTS). Utiliser un smartphone prend dès lors tout son sens : on peut accéder au web, ses contenus, ses services, en haut débit, comme sur un ordinateur. Vu la diversité des OS, des navigateurs disponibles, des différences de matériel, les mobiles embarquent très rapidement des navigateurs web basés sur des moteurs récents (Gecko, WebKit, Presto), et respectueux des standards web. Dans un secteur assez anarchique aux niveaux de l interopérabilité matérielle et logicielle, le web représente donc une plateforme commune de visualisation de contenus pour tous les supports mobiles. Les trois éléments que nous venons d aborder vont dans le même sens : le web des années 2005-2010 est un web en pleine mutation. Les utilisateurs se retrouvent au centre de l attention des éditeurs, les supports d accès au web se multiplient, les anciens monopoles se désagrègent. Les vrais vainqueurs de cette période sont les standards web qui sont vus par les professionnels comme la seule façon de proposer du contenu en prenant en compte les enjeux à venir du web : terminaux alternatifs, web sémantique, etc. Ce bref historique nous a permis d y voir un peu plus clair sur les origines du web. Ses valeurs d origine (interopérabilité, technologie libre, etc.) ont su perdurer, malgré les tentatives de certains acteurs des années 1990. Ce sont ces valeurs qui sont à l origine de la popularité du web et qui ont fait que, progressivement, chaque appareil issu de l industrie informatique devaient y être rattaché : puisque le web est demandé par les utilisateurs, l industrie s adapte et propose aux consommateurs de multiples appareils connectés au web. Cette dynamique, on a pu le voir, a été présente très tôt dans l histoire du web (avec l Apple Newton, par exemple, dès 1993 / la création du WAP, etc.). La problématique de l accès à un même contenu depuis différents types de terminaux s est révélé très tôt, sans trouver de solution vraiment satisfaisante. Aujourd hui, la question est désormais cruciale : le web, après avoir pris petit à petit ses distances avec les terminaux fixes, ne semble désormais plus la technologie d un seul type d appareil, mais d un ensemble de dispositifs dont l utilisation, l usage et les dimensions tendent à évoluer complètement. 19