Créer un seul site pour toutes les plates-formes
146 pages
Français

Vous pourrez modifier la taille du texte de cet ouvrage

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus

Créer un seul site pour toutes les plates-formes

-

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus
146 pages
Français

Vous pourrez modifier la taille du texte de cet ouvrage

Description


Le Graal du développeur web : un seul site pour toutes les plates-formes



Pourquoi développer plusieurs versions d'un site web pour les mobiles, les ordinateurs (portable ou de bureau), voire des applications dédiées ? Il est possible de concilier les usages autour d'un seul site et d'une seule URL : c'est ce que propose l'approche One Web, en respect avec les standards du Web.



Avec cette approche, l'intégrateur web pourra utiliser les meilleures techniques de développement côté client aux sources du responsive web design et de l'adaptive web design. De quoi garantir une compatibilité optimale des sites web sur tous les écrans !



Destiné aux webdesigners, intégrateurs, développeurs web, chargés de marketing et responsables de communication, cet ouvrage revient donc à un principe fondamental du développement web : fournir un contenu universellement accessible quel que soit l'appareil cible (smartphone, ordinateur, tablette...) !




"Des millions de nouveaux capteurs, appareils et autres terminaux de grandes et petites tailles mèneront très bientôt le Web vers de nouveaux horizons. Je suis à là fois enthousiaste et préoccupé."

Tim Berners-Lee - Inventeur du World Wide Web



"La vision d'un Web unique et intégré de façon transparente reste l'objectif à long terme de l'initiative Mobile Web. [...] L'hypothèse selon laquelle l'accès se fait principalement du moyen d'un navigateur d'ordinateur portable ou de bureau, et qu'il s'agit de l'expérience web par défaut, est très contestable."

Groupe de travail "Mobile Web Best Practices" au W3C




@ Site compagnon 

http://onecake.syllab.fr/




  • Approche One Web


  • Normalisation


  • Contextualisation


  • Approche responsive


  • Approche adaptive


  • Combiner les approches


  • Outils d'aide au développement


  • Glossaire


Sujets

Informations

Publié par
Date de parution 11 juin 2014
Nombre de lectures 274
EAN13 9782212256925
Langue Français
Poids de l'ouvrage 3 Mo

Informations légales : prix de location à la page 0,0105€. Cette information est donnée uniquement à titre indicatif conformément à la législation en vigueur.

Exrait



Avec cette approche, l'intégrateur web pourra utiliser les meilleures techniques de développement côté client aux sources du responsive web design et de l'adaptive web design. De quoi garantir une compatibilité optimale des sites web sur tous les écrans !



Destiné aux webdesigners, intégrateurs, développeurs web, chargés de marketing et responsables de communication, cet ouvrage revient donc à un principe fondamental du développement web : fournir un contenu universellement accessible quel que soit l'appareil cible (smartphone, ordinateur, tablette...) !




"Des millions de nouveaux capteurs, appareils et autres terminaux de grandes et petites tailles mèneront très bientôt le Web vers de nouveaux horizons. Je suis à là fois enthousiaste et préoccupé."

Tim Berners-Lee - Inventeur du World Wide Web



"La vision d'un Web unique et intégré de façon transparente reste l'objectif à long terme de l'initiative Mobile Web. [...] L'hypothèse selon laquelle l'accès se fait principalement du moyen d'un navigateur d'ordinateur portable ou de bureau, et qu'il s'agit de l'expérience web par défaut, est très contestable."

Groupe de travail "Mobile Web Best Practices" au W3C




@ Site compagnon 

http://onecake.syllab.fr/




  • Approche One Web


  • Normalisation


  • Contextualisation


  • Approche responsive


  • Approche adaptive


  • Combiner les approches


  • Outils d'aide au développement


  • Glossaire


' />

R sum
Le Graal du développeur web : un seul site pour toutes les plates-formes
Pourquoi développer plusieurs versions d’un site web pour les mobiles, les ordinateurs (portable ou de bureau), voire des applications dédiées ? Il est possible de concilier les usages autour d’un seul site et d’une seule URL : c’est ce que propose l’approche One Web , en respect avec les standards du Web.
Avec cette approche, l’intégrateur web pourra utiliser les meilleures techniques de développement côté client aux sources du responsive web design et de l’ adaptive web design. De quoi garantir une compatibilité optimale des sites web sur tous les écrans ! Destiné aux web designers, intégrateurs, développeurs web, chargés de marketing et responsables de communication, cet ouvrage revient donc à un principe fondamental du développement web : fournir un contenu universellement accessible quel que soit l’appareil cible (smartphone, ordinateur, tablette…) !
AU SOMMAIRE
Décryptez l’approche One Web et ses différentes alternatives stratégiques, et choisissez la meilleure option pour votre projet applicatif multi-plates-formes Contournez ou résolvez les défauts de standardisation des navigateurs web (règles CSS, bogues du navigateur…) grâce aux techniques de normalisation Adaptez votre site grâce à la contextualisation et donnez-vous les moyens de le personnaliser selon de nombreux critères (taille d’écran, performances de l’appareil, qualité du réseau…) Allez vers l’approche adaptive pour personnaliser l’expérience utilisateur tout en réduisant la quantité de données téléchargées Combinez-la avec l’approche responsive pour disposer d’une mise en page souple et intelligente Testez votre site sur tous les appareils et déboguez-le à distance.

« Des millions de nouveaux capteurs, appareils et autres terminaux de grandes et petites tailles mèneront très bientôt le Web vers de nouveaux horizons. Je suis à la fois enthousiaste et préoccupé. »
Tim Berners-Lee Inventeur du World Wide Web http://www.w3.org/People/Berners-Lee/
« La vision d’un Web unique et intégré de façon transparente reste l’objectif à long terme de l’initiative Mobile Web. […] L’hypothèse selon laquelle l’accès se fait principalement au moyen d’un navigateur d’ordinateur portable ou de bureau, et qu’il s’agit de l’expérience web par défaut, est très contestable. »
Groupe de travail « Mobile Web Best Practices » au W3C http://www.w3.org/TR/mobile-bp-scope
Biographie auteur
Sylvain Pollet-Villard est ingénieur d’études et développement expert en web front-end (HTML5/CSS3/JavaScript). Après avoir travaillé sur de nombreux projets web desktop puis en tant que développeur web mobile, il a choisi de se spécialiser dans le développement de sites web multi-plates-formes. Son souhait est de mettre fin à la fragmentation du Web apparue avec l’essor des smartphones.
www.editions-eyrolles.com
Sylvain Pollet-Villard
Créer un seul site
pour toutes les plates-formes
AUX SOURCES DES APPROCHES RESPONSIVE ET ADAPTATIVE
ÉDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
Remerciements à Anne Bougnoux pour sa relecture.
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.
© Groupe Eyrolles, 2014, ISBN : 978-2-212-13986-0
Avant-propos

Le Web évolue drastiquement ces dernières années. Il a été poussé par la popularisation et la montée en puissance des smartphones. Les réseaux mobiles sont de plus en plus performants et nous sommes de plus en plus connectés. Accéder à Internet n’a jamais été aussi facile avec les réseaux Wi-Fi et 3G/4G. L’e-commerce et les services en ligne sont en plein essor.
Au début de la démocratisation de la smart-mobilité, les erreurs stratégiques de positionnement et de choix techniques furent nombreuses. Aucune pérennité n’était alors envisageable dans un environnement aussi concurrentiel où l’innovation est une question de survie. Parier sur des technologies émergentes peut s’avérer très gratifiant, ce qui justifie la prise de risque. Cependant, à se concentrer sur la technologie, on oublie parfois que la véritable valeur se trouve dans le contenu ou le service proposé. Les périphériques connectés sont des vecteurs de diffusion et il s’agit d’en extraire leur potentiel maximum pour présenter ce contenu et cette interaction de la manière la plus efficace et attrayante possible.
Aujourd’hui, le marché est installé, les clients équipés. Les constructeurs sont tenaillés entre leur inextinguible besoin de faire évoluer l’offre et les exigences croissantes de leurs clients quant au nombre d’applications disponibles et à leur rétrocompatibilité. Ce contexte est propice à la standardisation. Parallèlement, les développeurs web doivent faire face à la multitude d’appareils et de systèmes présents sur le marché. Pour parvenir à être présents partout, ils s’aident de procédures de tests de plus en plus rigoureuses et d’un outillage logiciel de plus en plus sophistiqué.
Il est difficile pour une entreprise ou un particulier d’être présent partout à la fois. Le virage de la mobilité était à peine amorcé que la révolution mobile est déjà passée en seconde phase : l’heure est au multi-écran. Les périphériques intermédiaires et hybrides viennent déjà combler les vides laissés par cette migration des usages.
Cet ouvrage a pour objectif de prendre du recul sur cette diversité des appareils connectés au Web et de vous donner les moyens techniques d’aborder tous ces différents contextes d’utilisation dans votre site, tout en vous préparant à ceux à venir.
Contexte et enjeux

Ces dix dernières années, les équipements connectés se sont multipliés pour faire partie intégrante de notre vie quotidienne. De nouveaux types de périphériques et de nouvelles plates-formes système sont apparus et se sont développés très vite. Avant de se lancer dans la création d’une nouvelle application ou d’un nouveau service en ligne, il est essentiel de faire le point sur le contexte actuel.
À présent, il n’est plus question de concevoir un site web en négligeant complètement l’usage mobile. Toutes les statistiques de consultation des grands sites sont formelles : la part de clients « mobiles » ne cesse d’augmenter de manière exponentielle. Le phénomène est particulièrement prononcé pour les réseaux sociaux et les sites d’actualité ou de météo. Facebook a annoncé en mars 2014 disposer d’un milliard d’utilisateurs mobiles actifs (au moins une connexion par mois), soit 75 % du total d’utilisateurs actifs sur le réseau social. Le marché mobile comptait en 2012 plus d’un milliard de smartphones en circulation, soit un quart de tous les téléphones actifs. En 2013, les smartphones représentaient 55 % des ventes de téléphones mobiles, d’après Gartner.

S OURCES Statistiques
http://newsroom.fb.com/company-info/
http://slideshare.net/MicrosoftTag
http:​//gs.statcounter.​com/#mobile_vs_​desktop-​IN-monthly​-201101​-​201309
La révolution mobile se retrouve globalement dans tous les pays, mais ce sont avant tout les pays émergents qui sont responsables de cette forte accélération de l’usage mobile. En effet, c’est de ces pays que provient la grande majorité des nouveaux internautes. Ceux-ci s’équipent majoritairement de smartphones et de tablettes, au détriment des ordinateurs fixes et ordinateurs portables. Ainsi, en Inde, le trafic Internet est majoritairement issu de l’usage mobile depuis mai 2012, d’après StatCounter.
Ne nous y trompons pas : l’usage mobile n’a pas vocation à remplacer l’usage desktop . Certes, le marché du PC a beaucoup chuté en 2013, mais principalement parce que les foyers sont déjà bien équipés. En Europe, les statistiques de consultation des grands sites montrent que le desktop reste et restera sans doute encore pour plusieurs années la classe d’appareils la plus utilisée pour surfer sur le Web. Néanmoins, la part des mobiles est suffisamment importante pour que l’on ne puisse plus les ignorer. Il est important de considérer les smartphones, non pas comme les successeurs des ordinateurs traditionnels, mais plutôt comme un usage complémentaire ancré dans notre quotidien.

Figure 1 Répartition en Inde du trafic web global entre terminaux mobiles et fixes
Cette logique de complémentarité transparaît clairement avec l’apparition et les bonnes ventes de périphériques intermédiaires. La tablette tactile a ainsi bénéficié d’un regain d’intérêt de la part du grand public à la sortie de l’iPad en 2010. Elle se place en juste milieu des usages entre le smartphone et le laptop . Les acheteurs déclarent pour la plupart l’utiliser dans leur canapé ou pendant les voyages, quand le laptop est trop encombrant et le smartphone trop petit pour être confortable lors d’une utilisation prolongée ou pour des usages multimédia. On pourrait croire qu’il s’agit d’un cas d’usage minoritaire ; pourtant, il a suffi à convaincre les consommateurs. Ce sont 195 millions de tablettes qui ont été vendues en 2013, 68 % de plus qu’en 2012. En comparaison, 316 millions de PC et 968 millions de smartphones ont été vendus cette même année.

S OURCES Statistiques
Gartner, février 2014
D’autres périphériques intermédiaires apparaissent également dans les magasins. Sont proposés des claviers en périphérique externe à connecter aux tablettes ; des tablettes dites « hybrides » qui sont en fait des ordinateurs portables dont l’écran est escamotable ; des ordinateurs portables dits « transformables » ou « convertibles » dont l’écran peut se replier grâce à des charnières pour adopter un format tablette. Du côté des téléphones, il s’en vend avec des écrans toujours plus grands, parfois accompagnés d’un stylet. Pour les écrans supérieurs à 5 pouces de diagonale, on les dénomme « phablettes », mot-valise composé de « phone » et « tablette ». Pour les tablettes, on observe la tendance inverse : le format 7 pouces de diagonale devient ainsi de plus en plus populaire. Résumons tout cela avec une illustration.

Figure 2 La variété des périphériques, du smartphone à l’ordinateur de bureau
Ceci montre clairement que la révolution mobile est passée et que l’heure est aujourd’hui à la continuité d’usage. Les foyers français sont suréquipés et disposent d’ores et déjà d’un grand nombre d’écrans : 6,5 en moyenne d’après une étude Médiamétrie de février 2014. 74 % des foyers possèdent à la fois un téléviseur, un ordinateur (desktop ou laptop) et un téléphone mobile. Et si l’on sélectionne ceux dont le chef de foyer a entre 25 et 50 ans, ce chiffre monte à 9 écrans en moyenne à la maison.
Cet engouement pour l’équipement high-tech s’accompagne naturellement d’exigences de plus en plus strictes de la part des utilisateurs en ce qui concerne les applications et les services. Les consommateurs choisiront de préférence des services dont ils peuvent profiter depuis le plus grand nombre de leurs équipements. Ils veulent pouvoir continuer à utiliser un service lorsqu’ils passent d’un équipement à un autre ou renouvellent leur matériel. C’est pourquoi il devient très préjudiciable de ne pas être en mesure de proposer un service grand public sur certaines classes d’appareils ou de systèmes.
Qu’en est-il des futurs périphériques connectés ? Les tiroirs débordent d’idées d’inventeurs. Avec des produits comme Google Glass ou Samsung Galaxy Gear, les lunettes et les montres connectées sont déjà là. Le vêtement connecté ou cloud clothing occupe beaucoup les départements Recherche & Développement de plusieurs grandes compagnies. Et ce sont tous les équipements de la maison (domotique, cuisine, électroménager) qui se connectent peu à peu au réseau Internet du domicile. Tous ces nouveaux usages restent encore à déterminer, mais il faut néanmoins les anticiper et se tenir prêt.
C’est dans ce contexte à la fois prospère et intransigeant que se retrouvent aujourd’hui les fournisseurs de contenu et de services sur Internet. Alors de quelles solutions disposent-ils pour être présents sur tous ces appareils afin de s’assurer une bonne visibilité et un maximum d’utilisateurs ? Cet ouvrage vous en présente une : l’approche One Web, un site web unique et ubiquitaire.
Prérequis et public

Cet ouvrage s’adresse aux personnes ayant déjà développé la partie front-end d’un site web et désireuses d’en apprendre plus sur les meilleures pratiques et les solutions techniques à utiliser pour améliorer le confort d’utilisation de leur site sur la multitude de périphériques connectés existant aujourd’hui sur le marché.
Un niveau de connaissance intermédiaire en HTML, CSS et JavaScript est recommandé. Avoir déjà utilisé des requêtes dynamiques Ajax, de l’injection de scripts et de feuilles de styles aidera beaucoup à la compréhension du chapitre « Approche adaptive ».
Pour tester les différents éléments adaptatifs du site exemple ( http://onecake.syllab.fr ), il vous faudra disposer d’un smartphone et d’une tablette tactile. Il est possible de simuler ces périphériques sur ordinateur, par exemple via des émulateurs ou simplement en adaptant la taille de la fenêtre et en surchargeant les méthodes de détection ; néanmoins, cela ne remplace pas l’usage d’un véritable appareil pour bien percevoir l’expérience utilisateur finale.
Périmètre abordé

Le sujet étant très vaste, il est important de délimiter quelles parties seront traitées dans cet ouvrage et lesquelles ne le seront pas.
• Aucun framework ou bibliothèque ne sera présenté en détail ; on préférera se concentrer sur les bases et laisser au lecteur le choix de son outillage par la suite.
• Ne seront pas traitées les différentes technologies utilisées côté serveur pour la récupération et le traitement des données, ainsi que la génération des pages. Les exemples pourront s’appliquer qu’importe le back-end utilisé par le lecteur.
• Tous les points techniques abordés seront basés autant que possible sur les standards tels que décrits par le W3C ou le WHATWG. Plusieurs entorses seront cependant nécessaires dans le cas de défauts de conformité, d’API encore non standardisées, ou de valeurs propriétaires suffisamment utiles et utilisées pour ne pas être ignorées.
• Certaines spécifications présentées sont au stade expérimental et peuvent être modifiées voire abandonnées à l’avenir par le W3C. Restez informés sur leurs évolutions sur w3.org et whatwg.org .
• Les meilleures pratiques en matière d’accessibilité et de SEO ne seront pas abordées ; mais pas d’inquiétude, les différentes composantes techniques présentées ici ne devraient pas aller à l’encontre de celles-ci et, si c’est le cas, il existera presque toujours une parade.
• Les techniques abordées nécessitent pour la plupart que vos clients utilisent un navigateur avec JavaScript activé. D’après les statistiques de Yahoo en 2011, moins de 1 % des requêtes entrantes provenaient d’un navigateur avec JavaScript désactivé. Pensez toutefois à indiquer un message approprié à l’intérieur de balises <noscript> dans le code HTML de toutes vos pages. Le contenu de ces balises s’affiche uniquement lorsque JavaScript est désactivé ou non pris en charge par le navigateur.
Concernant les différentes classes de périphériques abordées, si l’objectif premier de cet ouvrage est de vous aider à en atteindre le plus grand nombre, certaines devront néanmoins être écartées car trop hétéroclites, immatures ou non conformes aux standards actuels du Web : c’est le cas des téléviseurs connectés, des montres et lunettes connectées, des écrans intégrés aux bornes de service et équipements d’électroménager. Il y a cependant bon espoir que ces périphériques convergent dans quelques années vers une standardisation suffisante pour pouvoir les cibler non spécifiquement.
Organisation de l’ouvrage

L’ordre des chapitres a été pensé pour entrer progressivement dans le sujet, en commençant par les aspects les plus théoriques pour ensuite aborder des points de plus en plus techniques et terminer par la mise en pratique de tous les acquis. Toutefois, aucun cheminement n’est imposé et il est possible de sauter des chapitres selon vos connaissances initiales.
Le premier chapitre présente l’ approche One Web et ses différentes alternatives stratégiques. Ce chapitre est le moins technique, mais il est néanmoins essentiel pour le reste de l’ouvrage, car il pose les bases de la méthodologie à employer et des objectifs à atteindre. Il vous permettra également de vous forger votre propre point de vue sur les différentes options qui se présentent à vous avant de débuter un projet applicatif multi-plate-forme et ainsi vous assurer d’avoir fait le bon choix.
J’aborderai ensuite dans le chapitre 2, Normalisation , l’ensemble des techniques qui traitent ou contournent les défauts de standardisation des navigateurs. Qu’il s’agisse des règles CSS de base appliquées aux éléments, de bogues du navigateur ou de certaines API ou propriétés non prises en charge, vous équiperez votre site de différents outils qui vous éviteront quelques surprises et gagnerez en confiance quant au rendu de votre site sur un navigateur non testé.
Il ne s’agira pas pour autant d’annihiler toute différence de comportement entre navigateurs, puisque le chapitre 3, Contextualisation , vous donnera les moyens d’adapter votre site selon tout un ensemble de critères pouvant influencer l’expérience utilisateur. Taille d’écran, type de contrôles, performance de l’appareil ou qualité du réseau sont autant de facteurs que vous pourrez exploiter pour ajuster le contenu et l’ergonomie.
Les chapitres 4 et 5 exposent deux approches techniques complémentaires pour adapter votre site à un maximum d’appareils. Avec l’ approche responsive , vous apprendrez à concevoir des composants d’interface et des modèles de page capables de se déformer et de modifier leur disposition automatiquement selon vos règles. Vous disposerez ainsi d’une mise en page souple et intelligente pour présenter votre contenu de manière optimale.
Avec l’ approche adaptive , vous chercherez à identifier et distinguer plusieurs contextes d’utilisation en choisissant de charger du contenu et des éléments d’interface différents selon les cas. Ainsi, l’expérience utilisateur sera davantage personnalisée tout en réduisant la quantité de données téléchargées.
Le chapitre 6 illustrera par des exemples concrets comment les deux approches précédemment vues peuvent être mises en pratique et combinées intelligemment.
Enfin le chapitre 7 sera consacré aux méthodes et outils de développement à utiliser pour vous aider dans le cadre d’un projet web multi-plates-formes. Cela devrait répondre à plusieurs problématiques auxquelles vous ferez face dans ce genre de projets : comment tester son site sur tous les appareils et navigateurs existants, comment déboguer son site web sur un smartphone, que faire pour automatiser mes tests et éviter les régressions…
Un glossaire termine l’ouvrage et liste tous les termes complexes abordés. Plusieurs de ces termes peuvent avoir un sens différent selon le contexte, alors n’hésitez pas à vous y référer en cas de doute. Parmi ces termes, vous trouverez beaucoup d’anglicismes. Cela est dû au fait que la langue anglaise est majoritairement employée pour la documentation, les articles et les conférences diffusés sur Internet. Aussi, il est parfois délicat de s’accorder sur une traduction unique et non équivoque en français.
Site de démonstration

Tout au long de cet ouvrage, un site web sera développé et complété progressivement avec les apprentissages de chaque chapitre. Seules les parties du code jugées les plus intéressantes pour l’exemple seront abordées, mais vous pourrez retrouver l’intégralité du site exemple et des sources associées en ligne à cette adresse : http://onecake.syllab.fr .
L’exemple sera un site de recettes de gâteaux. Il permettra de rechercher des recettes à partir d’ingrédients, de générer des listes de courses interactives et de suivre les instructions des recettes étape par étape. L’expérience sera personnalisée selon le type d’appareil utilisé, afin d’illustrer au mieux la méthodologie et les techniques abordées dans l’ouvrage.

Figure 3 Capture d’écran du site de démonstration sous son affichage desktop

À PROPOS Auteur
Je m’appelle Sylvain Pollet-Villard et je suis ingénieur spécialisé dans le développement web front-end multi-plates-formes. Je travaille actuellement chez Worldline dans le Nord de la France. Passionné par le Web, mon souhait est de faire tomber les barrières technologiques en permettant de créer et partager facilement des services et contenus universellement accessibles.
Jetez un œil à mon site web personnel pour en apprendre plus sur moi et mon travail :
syllab.fr
Remerciements
Je tiens à remercier Dominique Buraud sans qui je ne me serais jamais lancé dans l’écriture de cet ouvrage et qui m’a guidé et soutenu tout au long de ce projet. Merci également à mes relecteurs et amis Quentin Focheux et Nicolas Lefebvre pour leurs précieux conseils.
Table des matières
1. A PPROCHE O NE W EB
Un site web desktop et des applications natives pour les smartphones et tablettes
Un site web version desktop et autre version mobile
Un site web unique conciliant tous les usages
Les règles de l’approche One Web
2. N ORMALISATION
Uniformiser les styles
Feuilles de styles de normalisation
Préfixes vendeurs
Homogénéiser la prise en charge des navigateurs
Polyfills, shims, fallbacks
Tests des navigateurs
Exemple complet de polyfill
Polyfills courants
Unifier les événements tactiles et souris
Ce que font déjà les navigateurs
Principe de fonctionnement et exemples
PointerEvents
3. C ONTEXTUALISATION
L’importance du contexte d’utilisation
Taille et résolution d’écran
Largeur et hauteur : quelles propriétés ?
Le piège des pixels virtuels
Gérer l’orientation
Gérer les différents moyens de saisie
Qualité de la connexion
Autres données de contexte
Connaître l’état de la batterie
Envoyer un contenu différent selon l’heure et le jour de consultation
Géolocaliser vos utilisateurs
4. A PPROCHE RESPONSIVE
Qu’est-ce que le responsive web design ?
Définition du viewport
Dimensionnement et positionnement flexibles
Privilégier les unités relatives
px
cm, mm, in : non recommandé
em : recommandé
Pourcentages (%) : recommandé
vw, vh, vmin, vmax : à utiliser avec polyfill
rem : à utiliser avec polyfill
Délimiter les tailles minimum et maximum
Media queries
Historique et spécifications
OU inclusif
ET
NON exclusif
OUI exclusif
Organisation des media queries
Par composant
Par points de rupture
Par surcharges successives
Exemples de composants responsive
Colonnes de largeur fluide
Tableaux responsive
Barres de menu extensibles
Formulaires responsive
5. A PPROCHE ADAPTIVE
Qu’est-ce que l’adaptive web design ?
Définitions retenues
Avantages et inconvénients d’une approche adaptive
Méthodes de conception
La relation entre URL et adaptive web design
Le Web et la notion de ressource
Architecture REST
Adapter en préservant la cohérence entre ressources, URI et représentations
Chargement adaptatif
Injection dynamique de script
Injection dynamique de styles
Ajax pour un HTML adapté
Images à qualité adaptative
Adaptations post-chargement
6. C OMBINER LES APPROCHES
Liste de résultats
Formulaire de recherche
Fonction liste de courses
7. O UTILS D ’ AIDE AU DÉVELOPPEMENT
Préprocesseurs CSS
Scripts d’automatisation des tâches
Chargement adaptatif de polyfills
Débogage
L’API console
Outils de débogage à distance
Tests automatisés
Tests unitaires
Tests comportementaux : spécification Web Driver
Tests de non-régression visuelle automatisés
8. G LOSSAIRE
I NDEX
Approche One Web 1
La fracture technologique introduite par la révolution mobile a donné naissance à ce qu’on a nommé le « Web mobile ». L’approche One Web tente de recoller les morceaux.

SOMMAIRE
Qu’est-ce que l’approche One Web ?
Quelles sont les alternatives ?
Pourquoi faire un seul site web pour tous les usages ?
Pour être présent sur tous les fronts numériques, plusieurs stratégies d’approche ont émergé. Certaines ont été plus populaires que d’autres selon leur temps. Nous allons passer en revue les trois principales, puis j’expliquerai pourquoi avoir sélectionné la dernière, l’approche One Web, pour cet ouvrage.
Un site web desktop et des applications natives pour les smartphones et tablettes

Par application native, on entend une application développée spécifiquement pour une plate-forme, souvent dans un langage et via un kit de développement (SDK) qui lui est propre. Les entreprises ont largement fait ce choix au début de la démocratisation des smartphones, entre 2007 et 2010, pour porter leurs services existants vers la mobilité. Si un service disposait d’un bon site web abouti et fiable pour un usage desktop, il pouvait être considéré comme fastidieux et peu prudent de vouloir l’adapter pour un usage mobile. Développer une application native avec le SDK de la plate-forme ciblée permettait de repartir de zéro et de repenser complètement le service spécifiquement pour cette plate-forme.
Cependant, ce choix de stratégie est beaucoup moins évident aujourd’hui. En effet, celle-ci impose de développer autant d’applications natives que de plates-formes ciblées. Malgré la domination actuelle d’Android, il serait dommageable d’exclure les autres plates-formes comme iOS, Windows Phone ou BlackBerry OS. Et ce sont autant d’applications qu’il faudra gérer, tester et maintenir. Se pose aussi le problème de la fragmentation de versions : tous les téléphones ne font pas tourner la même version du système et il n’est pas rare de devoir faire évoluer les applications à l’arrivée d’une nouvelle version majeure. Rappelons également qu’il s’agit d’un marché extrêmement concurrentiel et instable ; on ne peut raisonnablement pas se baser sur les parts de marché actuelles pour parier sur le futur nombre d’utilisateurs d’une plate-forme à long terme. Preuve en est avec la croissance phénoménale d’Android et la chute de BlackBerry OS.
Les constructeurs mettent en avant leurs magasins d’applications et la grande facilité avec laquelle l’utilisateur peut ajouter et conserver un service dans son téléphone. En 2007, l’iPhone d’Apple était de loin le modèle le plus populaire. Or, les applications téléchargées s’affichent sur l’écran d’accueil sur iOS. Disposer d’un affichage du service sur l’écran d’accueil des téléphones des utilisateurs est très séduisant et considéré comme une aubaine pour les équipes marketing.

R EMARQUE La visibilité des magasins d’applications
Aujourd’hui, bien qu’il soit possible de mettre un site web en raccourci sur l’écran d’accueil de la plupart des systèmes mobiles (dont iOS et Android), la visibilité reste un argument en faveur des applications natives. Toutefois, cette idée reçue est amenée à évoluer, et ce pour plusieurs raisons :
• Les magasins d’applications les plus populaires commencent à être engorgés : plus d’un million d’applications sur l’App Store (iOS) et sur Google Play (Android). Il est difficile de rester visible au milieu de la masse.
• Android, le système mobile à 80 % de parts de marché au mois d’août 2013, est un produit de Google, une entreprise qui surclasse mondialement toutes les autres en matière de services web. Il paraît logique qu’Android évolue pour adopter plus naturellement les sites web. Google semble d’ailleurs préparer depuis longtemps cette transition. Citons par exemple le Chrome Web Store, un app-store de Google dédié aux applications web.
• La dénomination « applications web » ou « web-app » illustre bien le rapprochement entre sites web et applications natives, avec les conséquences qui en découlent pour les futurs systèmes.
La frontière entre sites web et applications natives devient floue. On voit de plus en plus d’applications dites hybrides, qui sont en fait des sites web encapsulés dans des conteneurs d’applications natives. Cela permet de profiter de la visibilité des magasins d’applications tout en gardant l’avantage de la facilité de portabilité. De plus, le framework PhoneGap, référence pour les applications hybrides, propose des API JavaScript pour exploiter des fonctionnalités ou du matériel spécifique aux plates-formes mobiles. Ce flou entre les notions est volontairement entretenu par les gros acteurs mobiles et web. Ainsi, Google a récemment regroupé tous ses services web dans un menu avec l’appellation Applications . Il s’agit là d’une convergence non seulement technologique, mais aussi stratégique.
Un site web version desktop et autre version mobile

Faire précéder l’URL d’un site par m. pour un accès optimisé mobile, ou changer l’extension du nom de domaine par .mobi , cela vous rappelle peut-être quelque chose. L’idée est de proposer une copie d’un site web existant adaptée aux petits écrans et au tactile, avec un contenu et un style extrêmement épurés. Ce site web mobile, bien que distinct du site d’origine sur de nombreux points, est souvent rattaché au même nom de domaine et utilise le même back-end que son grand frère desktop.
Avant les smartphones, les téléphones mobiles disposaient pour la plupart de navigateurs utilisant le protocole WAP. Développer un site distinct à ce format était alors la seule option envisageable. Quand les navigateurs mobiles furent suffisamment évolués pour interpréter du HTML 4, cette approche de site distinct ne fut pas abandonnée pour autant. En effet, les résolutions d’écran restaient alors trop faibles et les téléphones trop peu performants pour qu’on leur présente les sites desktop.
Pour guider l’utilisateur vers cette version spécifique au mobile, on détecte l’usage d’un téléphone mobile par différents moyens en JavaScript lors de la connexion au site. L’utilisateur se voit alors proposer de basculer sur la version mobile du site. Dans le pire des cas, il n’a parfois pas le choix, la redirection étant automatique. Or, aujourd’hui, il n’est pas rare de voir un utilisateur de smartphone préférer consulter la version desktop jugée plus jolie, plus riche en contenu et davantage maintenue que la version mobile. Les navigateurs web des smartphones sont maintenant extrêmement perfectionnés et proposent de nombreuses fonctions comme le zoom assisté pour rendre plus facilement consultable les sites prévus à l’origine pour un affichage desktop.
Parallèlement, les périphériques intermédiaires sont venus semer la zizanie dans cette approche. Utilisateur d’une phablette, quelle version suis-je censé choisir ? Il ne faut plus raisonner en fractionnant mobile et fixe à l’ère de la continuité d’usage. Il existe certes encore un certain nombre de téléphones mobiles basiques pour lesquels ces versions mobiles seront davantage adaptées, mais il s’agit d’une proportion trop faible et trop décroissante pour que développer une version spécifique au mobile en vaille encore la peine. C’est pourquoi ce genre de sites mobiles est progressivement abandonné et remplacé par des refontes des sites Web desktop d’origine pour essayer de mieux s’accorder à la consultation mobile. Cela nous amène à l’approche One Web, sur laquelle est basé cet ouvrage.
Un site web unique conciliant tous les usages

Oui, il est aujourd’hui possible de concevoir un unique site web proposant une expérience utilisateur convaincante pour toutes les classes de périphériques vues précédemment.
D’aucuns diront que cette promesse a déjà été faite par le passé et qu’il y a eu de quoi être désappointé. Le choix du Web a souvent été critiqué pour les problèmes de performance. Pourtant, les différents navigateurs se sont livrés à la course aux performances pour tenter de convaincre le public par les chiffres. Les moteurs de rendu ont été optimisés et peuvent exploiter l’accélération matérielle pour composer et dessiner plus rapidement les pages web. Entre 2008 et 2013, Mozilla, Google et IE ont tous annoncé des gains énormes pour leurs moteurs d’exécution JavaScript : entre 500 et 2 000 % selon les benchmarks .
S’il est vrai que JavaScript, en tant que langage interprété, ne sera jamais en mesure de rivaliser avec les langages compilés, cette différence est devenue suffisamment mince pour ne plus justifier à elle seule les ralentissements de certains sites web.
Dans la majorité des cas, la faute revient davantage à de gros défauts d’optimisation de la part des développeurs ; JavaScript est un langage de script simple et de haut niveau qui n’encourage pas spécialement à l’optimisation, surtout avec l’abstraction apportée par des frameworks comme jQuery.
Outre les gains de performance des moteurs de rendu et moteurs d’exécution JavaScript, la situation s’est considérablement améliorée depuis cinq ans grâce à plusieurs facteurs :
• les améliorations des navigateurs en termes de conformité aux standards et en ergonomie ;
• les nombreux ajouts aux langages structurants du Web, HMTL, CSS et JavaScript, que vous aurez l’occasion de découvrir dans les prochains chapitres ;
• l’évolution des réseaux mobiles avec la 3G/3G+/4G, ainsi que la connectivité Wi-Fi intégrée directement à un nombre croissant de périphériques ;
• la montée en puissance des éléments matériels des téléphones mobiles.
Tout l’intérêt de cette approche est bien sûr d’augmenter le nombre d’utilisateurs ciblés tout en centralisant la gestion et le contenu au sein d’un seul service. Un seul site à maintenir et à faire évoluer, c’est l’assurance d’une homogénéité et donc d’une plus grande maîtrise de la qualité de service. Avoir un seul point d’entrée permet également aux consommateurs de plus facilement identifier et partager un service.
Concilier les usages, qu’est-ce que cela signifie ? Avant tout, il est essentiel de préciser qu’un site web unique n’est pas un site web uniforme. Les usages diffèrent selon la classe du périphérique utilisé par vos clients, car le contexte d’utilisation n’est pas le même. Il s’agit d’adapter le site à ces changements de contexte : c’est ce qu’on appelle la contextualisation. On peut faire une analogie avec une chaîne de magasins disposant de grands hypermarchés et de petites boutiques. Les clients retrouveront la même identité visuelle et la même qualité de service ; cependant, la taille, l’organisation et le contenu des rayons seront adaptés au contexte, car un client ne se rend pas dans une petite boutique ou dans un hypermarché avec les mêmes intentions.
Cette idée de concilier les usages autour d’un seul site, d’une seule URL, c’est ce qu’on appelle l’approche One Web. Ce nom est en soi un pléonasme, car le Web a été créé dans ce sens : pour rendre accessible universellement du contenu. Ce qu’on a appelé « Web mobile » n’a aucun sens pratique. Les mobiles ont aujourd’hui accès au même Web que les ordinateurs fixes ; il s’agit des mêmes langages, des mêmes protocoles, des mêmes URL. C’est donc juste un jeu d’esprit qui a fragmenté le Web en deux, au mépris de la philosophie dans laquelle il a été inventé.

C ITATIONS Universalité du Web
Citation extraite de Long Live the Web: A Call for Continued Open Standards and Neutrality ; Scientific American :
The primary design principle underlying the Web’s usefulness and growth is universality. (…) it should be accessible from any kind of hardware that can connect to the Internet : stationary or mobile, small screen or large. (Le premier principe de conception qui sous-tend l’utilité et la croissance du Web est l’universalité. (…) il devrait pouvoir être accessible depuis n’importe quelle sorte de matériel connecté à Internet : fixe ou mobile, avec un écran petit ou grand.)
Citation de Tim Berners-Lee, inventeur du World Wide Web, extraite de l’interview US backing for twotier Internet , BBC News, 7 septembre 2007. Le contexte ne s’appliquait pas au Web mobile mais à la discrimination de contenus, cependant l’idée reste la même :
What's very important from my point of view is that there is one web … Anyone that tries to chop it into two will find that their piece looks very boring. (Ce qui est très important de mon point de vue, c’est qu’il y a un seul web. Quiconque essaie de le couper en deux trouvera que son morceau semble très ennuyeux.)

Figure 1–1 Illustration créée à l’occasion du One Web Day, qui a lieu chaque 22 Septembre (Paul Downey, sous licence Creative Commons, http://owd.whatfettle.com )
Derrière cette approche conceptuelle, il existe différentes approches méthodologiques pour que les développeurs s’adaptent de manière pratique à ce mode de pensée. La plus connue est le concept « mobile first » inventé par Luke Wroblewski, ancien architecte design chez Yahoo. Il consiste à concevoir son site en le pensant prioritairement pour un usage mobile. Ainsi, des efforts supplémentaires sont faits en matière de performance, d’épuration de contenu et de flexibilité. Et pour les clients desktop, selon l’adage « qui peut le plus, peut le moins », l’expérience reste satisfaisante. On pourra également pour ces derniers ajouter du contenu et des éléments plus complexes en suivant un principe d’amélioration progressive.

Luke Wroblewski, Mobile First , Eyrolles, 2012
Cette méthodologie a pour avantage d’aller à contre-courant des vieilles méthodes, de forcer les concepteurs et développeurs à sortir de leur cadre habituel en leur imposant les enjeux et contraintes de l’usage mobile. Néanmoins, elle ne fait que retourner le problème au lieu de le résoudre. Car en pensant de cette manière, on continue à fragmenter le Web, à se confronter aux mêmes obstacles, à ne pas savoir quoi faire avec les périphériques intermédiaires. Certains internautes PC ont d’ailleurs une très mauvaise opinion du mobile first (ou par association d’idée erronée du responsive web design) car mécontents des refontes mobile first de leurs sites web favoris.
La première chose à faire pour bien comprendre l’approche One Web est de ne plus se concentrer sur le conteneur, mais sur le contenu, puis de prendre conscience que ce contenu, quel qu’il soit, sera amené à être présenté sous des formats, situations et environnements très divers que vous ne pourrez pas tous appréhender. Plutôt que de chercher un contrôle total du rendu de votre site, présentez-le sous une forme simple puis agrémentez-le de petits plus qui amélioreront globalement l’expérience utilisateur.
Les règles de l’approche One Web

Voici quelques règles que je vous suggère d’adopter pour suivre correctement l’approche One Web :
• Toujours distribuer le même contenu pour la même URL. Ne pas discriminer les appareils. Si l’on souhaite adapter le contenu selon le contexte, il faut faire en sorte que ce soit le navigateur qui le demande en modifiant la requête.
• Aucun postulat sur les terminaux de vos clients : qu’il s’agisse de la taille de leur écran, du type d’interaction, de la performance du réseau… partir du principe que d’un utilisateur à l’autre, ces données seront radicalement différentes et que vous devez toutes les traiter.
• Ne pas réfléchir avec des résolutions d’écran standard isolées dans des silos propres à chaque classe de périphériques. Penser continuité et flexibilité.
• Ne pas chercher à contrôler ce qui n’est pas de votre ressort, comme l’affichage de la barre d’URL ou le niveau de zoom du navigateur. Bien que cela soit difficile du fait d’un tumultueux passé pour certains navigateurs, il faut lâcher du lest et essayer de faire confiance au navigateur et aux choix faits par vos utilisateurs.
Il est assez paradoxal de s’apercevoir que ces règles sont bien trop souvent bafouées, et ce depuis les débuts du Web. Par exemple, la discrimination selon le navigateur. Avec le succès et la montée en complexité des frameworks serveur, l’analyse du User-Agent a été grandement facilitée et automatisée. Elle s’est généralisée au point de devenir un réflexe chez certains développeurs lorsqu’ils font face à un bogue spécifique à un navigateur ou un système. Ceci va directement à l’encontre de la première règle et explique toutes les bizarreries que l’on trouve aujourd’hui dans les User-Agent des navigateurs.

À PROPOS Anecdote sur les User-Agent
Déjà en 1994, les sites se servaient du User-Agent pour identifier leurs visiteurs sous Mosaic de ceux sous Netscape (ou de son ancien nom Mozilla pour Mosaic Killer). Selon que le User-Agent contenait ou non le texte « Mozilla », le HTML envoyé était différent. En effet, Netscape était alors le seul navigateur à gérer les framesets , ces éléments de structuration des pages jugés à l’époque très intéressants. Quand Microsoft a créé son propre navigateur, le bien connu Internet Explorer, celui-ci reconnaissait les framesets mais les sites existants ne lui renvoyaient pas la version « avec frames ». C’est pourquoi Microsoft a décidé de se faire passer pour ce qu’il n’était pas en ajoutant « Mozilla » dans le User-Agent d’Internet Explorer. Voilà la raison historique pour laquelle on trouve Mozilla en première place dans le User-Agent de tous les navigateurs populaires encore aujourd’hui !
http://webaim.org/blog/user-agent-string-history/ ( History of the browser user-agent string , Aaron Andersen)
L’hégémonie d’Internet Explorer au début du siècle n’a pas été oubliée par les développeurs qui ont dû faire face à ses innombrables bogues et non-respect des standards, en particulier pour la version 6 qui connaît aujourd’hui plusieurs campagnes pour en éradiquer les derniers utilisateurs.

F IN DE VIE Internet Explorer 6
Microsoft lui-même a lancé une campagne pour encourager les développeurs à abandonner la prise en charge d’Internet Explorer 6 :
http://www.modern.ie/ie6countdown
Ce monopole a eu des conséquences désastreuses sur les sites web et les outils de développement de l’époque : beaucoup de sites imposaient l’utilisation d’Internet Explorer, voire présumaient qu’il s’agissait du navigateur utilisé sans prendre la peine de vérifier le bon fonctionnement du site sur les autres. Par ailleurs, cette période a coïncidé avec la conception des intranet de nombreuses grandes entreprises dans tous les secteurs d’activité. Les environnements de travail étant souvent très homogènes dans ce cadre, cela a donné naissance à des applications web extrêmement fermées et difficiles à faire évoluer. C’est la raison pour laquelle beaucoup de gens utilisent encore IE6 dans leur environnement de travail et forment une bulle isolée des autres internautes par les dix ans de retard de leur navigateur. C’est précisément le genre de fragmentation que l’on vise à éviter à tout prix avec l’approche One Web.
Toutefois, les éditeurs de navigateurs ne sont pas seuls responsables de tous les maux du Web. Les concepteurs et intégrateurs web ont également commis leur lot d’erreurs. On pourrait parler de la règle des 960 pixels, présentée à l’époque comme une bonne pratique, qui consistait à faire des sites d’une largeur fixe de 960 pixels, jugée comme optimale pour la majorité des écrans… jusqu’à ce que le 16/9 se généralise et que les diagonales et résolutions de nos moniteurs augmentent. Vous avez déjà probablement tous vu un site bien encadré de ces deux larges bandes latérales, comme un vieux téléfilm 4/3 sur notre écran panoramique. Impossible de ne pas mentionner également les table layouts consistant à utiliser des éléments tableaux à toute occasion pour être certain de contrôler pleinement la disposition des éléments à l’écran. Outre l’aberration sémantique, cette volonté de contrôle absolu et rigide de la disposition est radicalement opposée aux recommandations actuelles prônant les mises en page « liquides » et la souplesse des règles de formatage du contenu.
Fort heureusement, le Web a depuis fait son deuil de toutes ces erreurs qui ne sont plus que des mauvais souvenirs refaisant surface de temps à autre au détour d’un surf. Il faut désormais apprendre de ces erreurs pour ne pas les commettre à nouveau. L’approche One Web n’est pas la solution qui conviendra à tous vos projets d’applications multi-plates-formes, mais elle remet sur la table les fondamentaux en matière de développement web, en rappelant ce que doit et aurait dû être le Web depuis son origine : concentré sur son contenu, sémantisé et agnostique de l’environnement des utilisateurs.

  • Accueil Accueil
  • Univers Univers
  • Ebooks Ebooks
  • Livres audio Livres audio
  • Presse Presse
  • BD BD
  • Documents Documents