Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > NTIC > Ergonomie > Environnements utilisateurs > Sites « One Page » : « Long Scrolling » et « Infinite Scrolling (...)

Sites « One Page » : « Long Scrolling » et « Infinite Scrolling »

jeudi 5 janvier 2017, par François Daniel Giezendanner

Notez cet article
1 vote

Un bref article pour planter le décors des sites « One Page » ( « Long scrolling » et « Infinite Scrolling » ) qui favorisent le scrolling plutôt que le clic. L’internaute est maintenant familiarisé avec les réseaux sociaux et les écrans mobiles de toutes définitions et a l’habitude de découvrir intégralement les longues pages de haut en bas de façon intuitive en exploitant le scrolling.

Tapoter et scroller sont les deux gestes que l’utilisateur maîtrise pour naviguer dans n’importe quel site sur les mobiles, ainsi le Long Scrolling capitalise sur cette habitude utilisateur.


 Préambule

Les articles de la bibliographie ci-dessous décrivent de manière détaillée les divers aspects des sites « One Page ». Aussi nous ne donnons pas ici une énième présentation du sujet, nous nous limitons à planter le décors et renvoyons le lecteur à l’un ou l’autre de ces articles.


 La ligne de flottaison : un concept qui tombe doucement en désuétude

Aujourd’hui, les réseaux sociaux, les sites « Long scrolling » et les écrans tactiles & mobiles

ont profondément modifié les usages en imposant la lecture verticale. Nous avons pris l’habitude de scroller sans fin et l’essentiel de la vie d’un très grand nombre de sites se passe en dessous de « la ligne de flottaison » (« the fold » : « le pli ») [1]. C’est un fait établi depuis plusieurs années ainsi qu’en témoignent les nombreuses études citées dans l’article « Mythe 3 : On n’utilise pas le scroll » d’avril 2016, il n’est donc plus nécessaire de « faire tenir » l’essentiel du contenu en haut de la page dans la zone visible sans défilement, c-à-d au-dessus du fold.


 Les sites « One-Page »

Les sites « One-Page » ne présentent qu’une seule longue page (« Long scrolling ») pour l’ensemble du site web.

Ils sont souvent utilisés dans divers domaines pour des lancements de produits, des promotions, dans le cas d’un site vitrine pour présenter une entreprise, un produit ou encore un service.


 Les sites « Infinite Scrolling »

Les sites « Infinite Scrolling » sont « à scrolling infini », ils ont pour objectif de supprimer la pagination et de proposer l’ensemble du contenu sur une seule et même page sans préchargement. Ils permettent à l’internaute de faire défiler sans fin une très grande page (de longueur quasi infinie), les contenus de la suite de la page se chargeant automatiquement au fur et à mesure que l’internaute la fait défiler vers le bas. Ainsi l’internaute visualise un contenu de départ qui s’étoffe au fur et à mesure que la page est scrollée vers le bas. Ce contenu s’affiche à l’infini (ou presque), sans jamais atteindre le bas de la page.

La longueur de la page augmente en conséquence et la barre de scroll s’agrandit. Il n’y a plus vraiment de repère, ce qui encourage à rester et continuer à défiler tant que le contenu intéresse l’internaute. A chaque défilement vers le bas l’utilisateur pense se rapprocher de la fin de la page mais un nouveau contenu apparaît, n’arrêtant jamais l’utilisateur. C’est un moyen efficace pour parcourir un océan d’informations, sans avoir à attendre que la page soit préchargée. Il est adapté aux internautes qui ont une démarche de découverte, il n’est adapté qu’à une catégorie de sites, d’usage très spécifique.


 Atteindre le pied de page des sites « Infinite Scrolling » !

Le pied de page (footer) existe pour une raison : il contient du contenu dont l’utilisateur a parfois besoin. Mais généralement le script charge les nouveaux posts très tôt, à tel point que le pied de page en devient inatteignable. Ainsi chercher une information dans le footer et ne jamais pouvoir y parvenir peut être très agaçant.

Les sites qui implémentent le scrolling infini doivent donc rendre le pied de page accessible en le rendant collant ou en déplaçant les liens vers une barre supérieure ou latérale.


 Naviguer dans une « Long Scroll Page » ou une « Infinite Scroll Page »

Menus « sticky » et navigation « sticky »

Avec la technique du scrolling il est difficile d’accéder à la navigation placée en haut de page qui disparait lors du défilement si ce n’est avec un bouton « back to top », situé en bas de page.

La bonne solution est fournie par les « menu sticky » qui restent ferrés en haut (ou en bas) de la fenêtre du navigateur lors du scroll devenant ainsi toujours visibles et accessible à tout moment. Ils permettent une navigation permanente sur le site. Ainsi, le défilement de la page n’a plus d’effet sur la navigation dans le menu.

Indicateurs de scroll : le menu latéral
Certains sites, par exemple bootstrap, vont plus loin en proposant également un menu hiérarchique latéral ferré sur le coté de la fenêtre du navigateur, permettant ainsi de visualiser dans quelle section de la page l’utilisateur se trouve. Mais cette fois, la navigation porte sur le contenu de la page plutôt que sur la navigation globale du site.

Autres fonctions
Des éléments comme par exemple le bouton hamburger, des barres de navigation en largeur pleine ou partielle, des boutons de réseaux sociaux ou le pied de page peuvent également devenir « collants » (fixés à la fenêtre du navigateur) et donc toujours visibles et accessibles.


 Vocabulaire, taxonomie, volksonomie

Pour désigner les sites de type « One Page » de nombreuses expressions sont utilisées, elles sont déclinées avec divers substantifs, nous en donnons ici les déclinaisons avec les mots « Page » et « Website ». Voici donc deux listes indépendantes non exhaustives d’expressions utilisées, l’une en anglais, l’autre en français mais n’étant pas la traduction l’une de l’autre :

No Anglais Français
1 Continuous Page Scroll page longue à scroller
2 Continuous Page Scrolling pagination infinie
3 Continuous Scroll site à défilement infini
4 Continuous Scroll Page site à défilement vertical
5 Continuous Scroll Website site à page unique
6 Continuous Scrolling site à scroll infini
7 Continuous Scrolling Page site à scrolling infini
8 Continuous Scrolling Website site à une seule page
9 Endless Scrolling Website site en une page
10 Infinite Scroll site long scrolling
11 Infinite Scroll One Page Websites site one page
12 Infinite Scroll Page
13 Infinite Scroll Site
14 Infinite Scroll Website
15 Infinite Scrolling
16 Infinite Scrolling Page
17 Infinite Scrolling Website
18 Long Page Scroll
19 Long Page Scrolling
20 Long Page Website
21 Long Scroll Page
22 Long Scroll Website
23 Long Scrolling
24 long Scrolling Page
25 Long Scrolling Site
26 Long Scrolling Website
27 One Page
28 One Page Scroll
29 One Page Scroller Website
30 One Page Scrolling
31 One Page Website
32 Scroll Website
33 Scrolling Website
34 Single Page Vertical Scrolling Website
35 Single Page Website
36 Vertical Page Scroll
37 Vertical Page Scrolling
38 Vertical Scroll Page
39 Vertical Scroll Website
40 Vertical Scrolling
41 Vertical Scrolling Page
42 Vertical Scrolling Website
43 Website with Continuous Scrolling

 La compétence des internautes

Avec la grande popularité des réseaux sociaux (Facebook, Twitter, Tumblr, Instagram, Pinterest etc.) et des supports mobiles (tablettes et smartphones) les internautes ont maintenant l’habitude de découvrir une page de haut en bas intégralement de façon intuitive en exploitant le scroll (défilement de la page grâce à la souris ou au doigt pour les mobinautes [2]), révélant au fur et à mesure les différents contenus disposés par étages que propose la page. Il n’est donc plus nécessaire de concentrer toute l’information en haut de page pour être certain que les visiteurs ne passent pas à côté.

La verticalité (sites à défilement vertical) est devenue une constante du webdesign depuis plusieurs années. Sur mobiles la contrainte consiste à fournir un maximum d’informations au sein d’une interface relativement étroite et de permettre la consultation de toute la page Web à l’aide d’un simple geste du doigt.

Tapoter et scroller sont les deux gestes que l’utilisateur maîtrise pour naviguer dans n’importe quel site sur les mobiles, ainsi le Long Scrolling capitalise sur cette habitude utilisateur.


 Penser mobile first

« Desktop-first » versus « Mobile-first »
Depuis plusieurs années, les équipes web conçoivent et optimisent les sites web pour les ordinateurs de bureau (desktop) et ensuite ces sites sont adaptés aux autres appareils, en terminant par l’interface des smartphones. On décline donc vers le bas. C’est l’approche « graceful degradation » (dégradation progressive), ou « desktop-first ». Malheureusement, dans cette démarche l’optimisation pour desktop n’est pas toujours optimale sur un mobile.

Par contre avec le « mobile-first » ou « progressive enhancement » (amélioration progressive) on inverse l’approche de programmation des sites Web et on conçoit le design d’abord en parfaite adéquation pour les mobiles, puis le design est adapté vers le haut jusqu’à l’interface pour desktop. [3] Ainsi le processus de design prend en compte, dès le départ, les contraintes et les spécificités des mobiles en relation avec les éléments visuels et fonctionnels des sites web.

Remarque : D’autres expressions sont utilisées pour nommer ces deux processus que sont le « desktop-first » et le « mobile-first » [4].

  • Pour la Dégradation progressive on parle :
    1. de Mode dégradé,
    2. de Dégradation gracieuse,
    3. de Dégradation élégante et
    4. d’Approche top-down.
  • Pour l’Amélioration progressive on parle :
    1. d’Amélioration par couches successives,
    2. d’Enrichissement progressif,
    3. de Mode rehaussé,
    4. de Rehaussement progressif et
    5. d’Approche bottom-up.

Les courbes « Desktops » et « Mobiles » se croisent
En Octobre 2016 les courbes de % d’utilisation mondiale des « Desktops » et des « Mobiles » (y inclus les tablettes) de 2009 à 2016 se sont croisées, la navigation mobile a dépassé la navigation classique de bureau avec 51,3% des internautes qui utilisaient internet sur mobile. En 2017, le mobile a représenté un taux de pénétration du marché de 66% ce qui correspond à une augmentation de 5% depuis février 2016.

PNG - 142.3 ko
Oct 2016, la navigation mobile dépasse la navigation desktop avec 51,3% de mobinautes.
PNG - 123.6 ko
Parts de marché mondiales de Desktop vs Mobile vs Tablet, Jan 2014 à Dec 2017.
PNG - 67 ko
En 2017, 72% des internautes suisses sont des mobinautes

Statcounter indique les Part de marché dans le monde en Décembre 2017 pour Desktop vs Mobile vs Tablet : Mobile : 52.48%, Desktop : 43.26%, Tablet : 4.26%.

L’Office fédéral de la statistique (OFS, Confédération suisse) compare l’Utilisation d’internet en suisse hors de la maison et du lieu de travail : en 2017, 72% des internautes sont des utilisateurs mobiles (soit une progression de 29 points de pourcentage en comparaison avec 2010). Ce résultat illustre bien l’évolution actuelle de l’utilisation d’internet vers une mobilité toujours accrue.

Avec une telle domination du trafic internet mondial, il ne fait plus aucun doute : le mobile est roi !

Le web a basculé vers le mobile
Le web est ainsi devenu principalement mobile [5] et les écrans sont de toutes toutes dimensions et de toutes définitions [6]. Les designer réalisent donc des sites conviviaux capable de s’adapter à tous les écrans en faisant la part belle au mobile, au Long Scrolling, au responsive et à l’adaptatif design.


 Indexation Mobile First

Ainsi aujourd’hui, le terme « mobile first » prend tout son sens et lorsque l’on crée un site web, on pense le design d’abord sur mobile. Cela a incité Google à créer l’indexation Mobile First. Avant 2018 Google se basait sur la version affichée sur desktop des pages web pour classer ses résultats, y compris sur mobile. Mais cela va changer. Annoncé pour 2018, l’index Mobile First est finalement en avance et a commencé son déploiement en octobre 2017 sur un faible nombre de sites. Ainsi, c’est la version mobile qui va progressivement être prise en compte, même pour les résultats générés sur desktop.


 Du Mobile First au Mobile Always

Aujourd’hui, une nouvelle vague de consommateurs est entrée sur le marché, et leurs doigts touchent rarement, voire jamais, un clavier traditionnel [7]. Selon Harvard Business Review, le prochain milliard de personnes à se connecter le fera en utilisant uniquement des appareils mobiles. Le mobile est devenu un état d’être. Maintenant, les designers doivent recentrer les stratégies mobiles autour de toute l’expérience utilisateur et fournir un contenu pertinent à chaque point de contact.

Pour de nombreux consommateurs, la personnalisation est au sommet de leurs listes de souhaits. Il faut donner aux clients ce qu’ils veulent exactement au bon moment, par exemple proposer des offres, des recommandations ou des informations pertinentes à l’emplacement et aux préférences du consommateur (recommander une boutique ou un restaurant à proximité via une application mobile basée sur l’emplacement et l’historique des achats d’un consommateur). Comme les commerçants commencent à faire l’expérience de cette nouvelle démographie des consommateurs toujours mobiles, ils doivent être préparés avec des stratégies mobiles qui vont au-delà de la simple conception de sites et d’applications.

L’intégration, la pertinence et la personnalisation sont les clés du succès de la téléphonie mobile


 Quatre devises du « Long Scrolling » :

Scrolling is better than clicking

Mobile-First Design + Responsive Web Design + Long Scrolling = Multi-Screen Ready

Mobile-First Design + Adaptative Web Design + Long Scrolling = Multi-Screen Ready

Long Scrolling + Slogan + Humour = Communication en Directe

et pour ceux qui aiment les acronymes :

MFD + RWD + LS = MSR

MFD + AWD + LS = MSR


 Le meilleur format pour le storytelling digital

Le « story telling » c’est Raconter une histoire. Selon Wikipédia, le storytelling (en français la mise en récit ou l’accroche narrative) est une méthode de communication fondée sur une structure narrative du discours qui s’apparente à celle des contes, des récits.

Les sites à « longue page unique » et les « longues pages » en général donnent l’occasion de disposer les éléments de façon à raconter une histoire captivante, pour inviter les visiteurs à défiler la page et à cliquer sur les liens afin de les garder plus longtemps sur le site.

Ainsi, dans un contexte marketing cette technique de communication narrative vise à capter l’attention du client, le rendre plus réceptif aux produits, à générer des émotions fortes qui influenceront son comportement d’achat plutôt que tenter de le convaincre avec une argumentation commerciale plus conventionnelle.


 « Effet Parallaxe » ou « Parallaxe Scrolling »

L’effet Parallaxe est une technique de conception Web moderne où l’image et/ou les éléments du second plan bougent ou défilent plus lentement que ceux placés au premier plan, ce qui donne une sensation de profondeur.

On peut généraliser en citant Simon-K sur alsacreations : « il s’agit du déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Ce principe concerne au minimum deux éléments et peut être appliqué à plusieurs endroits : sur les images de fond, sur un en-tête ou un pied de page, sur des images... etc. »

Sur une longue page le designer peut ainsi créer des effets visuels de profondeur et de mouvement intégrant des éléments interactifs qui se marient parfaitement avec la narration interactive (storytelling). Le site web apparaît alors comme une animation 3D qui se déroule en faisant défiler la page vers le bas avec des éléments qui se déplacent à des rythmes différents.


 Bibliographie

  • Ergonomie web – Comment choisir entre scrolling infini et pagination ?
    www.lafabriquedunet.fr, 15 novembre 2017 Publié par La Fabrique du net
  • Un site internet à une page (long scrolling) est-ce le bon choix pour son entreprise ?
    snabb.ca
  • Infinite scrolling : si efficace qu’on le prétend ?
    pardiredaction.com, 5 janvier 2017 par Annie Lafrenière
  • Quels sont les avantages et les inconvénients d’un site one-page ?
    www.e-monsite.com, Le 02/01/2017 Par Thomas Desjardins
  • [Dossier] Webdesign : Scroller ou ne pas scroller
    www.olybop.fr, Corporate 30 septembre 2014
  • MYTHE #3 : ON N’UTILISE PAS LE SCROLL
    Mythe #3 : Les gens n’utilisent pas le scroll
    Avr 14, 2016, www.ux-republic.com
  • Web design : la mode du scrolling a-t-il coulé la ligne de flottaison ?
    Publié le 5 octobre 2012 par Chob, choblab.com/web-design
  • One Page Websites : L’immersion par le scrolling et la parallaxe
    web.smile.eu/Veille, Auteur de l’article Victoire DOUWES, Ergonome - Smile Digital
  • Zoom sur l’effet parallaxe
    Publié par Simon-K le 02 Mars 2012, mis à jour le 21 Décembre 2012, www.alsacreations.com
  • Qu’est-ce que l’effet Parallaxe et comment en faire bon usage ?
    19 Octobre 2015, fr.wix.com
  • Révolutionnaire ! 3 nouveaux effets Parallaxe pour animer votre site
    8 Août 2016, fr.wix.com
  • Tendance web design : page longue à scroller
    fr.wix.com, 10 Decembre 2013
  • Une tendance du webdesign : les sites one page
    La mise en page d’un site one page, tout sauf simpliste
    www.1and1.fr, 09.08.17 Web design
  • Sites one page, long scrolling : et les contenus défilent…
    24 juin 2015 par Frédérick, www.gazelle-du-web.com
  • Le long scrolling, la tendance web design orientée mobile
    Le long scrolling est l’une des tendances les plus récentes dans le domaine du web design. À découvrir sur WIS
    Publié le mardi 21 octobre 2014, www.wis-ecoles.com
  • La nouvelle tendance des sites web à défilement infini
    par Benoit Laporte , le 29 avril 2015, www.labemarketing.com
  • Long Scrolling : ça défile de haut en bas
    21/08/2014//par Jean Lagarrigue, freepixel.net
  • La tendance du long scrolling : 10 sites géniaux qui sortent du lot
    5 octobre 2015 / Laura, fr.tuto.com
  • Sticky navigation
    Définition : Que veut dire Sticky navigation ? blog.object23.fr
  • Avantages et inconvénients de la « sticky navigation »
    08 novembre 2013 par Harald Bröcker, www.amyma.lu
  • [Tutotoriel] CSS – Barre de navigation fixe (Sticky Nav)
    Published by Paul Gruson on 06/05/2014, paulgruson.fr
  • Le site de bootstrap
    Getting started : An overview of Bootstrap, how to download and use, basic templates and examples, and more.
    Excellent exemple de menu latéral dans une long page scroll, getbootstrap.com
  • L’infinite scroll, qu’en penser ?
    Écrit par Christophe le 29 octobre 2015, www.toopixel.swiss
  • Les 8 tendances Web design 2018 incontournables
    Tendances Web design 2018 : smartphones et contenus - 1&1 -
    28.11.17, www.1and1.fr
  • Site web : les grandes tendances 2017 du webdesign
    6 février 2017 ParEricNuevo, siecledigital.fr
  • 4 grandes tendances web design à adopter en 2017
    igencia – l’agence web – Valais/Vaud, www.igencia.ch
  • Quelles tendances graphiques et ergonomiques pour 2017 ?
    5 TENDANCES DU WEBDESIGN. Webdesign : quelles sont les tendances pour 2017 ?
    Publié le 3 janvier 2017 par Christophe, blog.jetpulp.fr
  • 9 tendances web design à suivre en 2017 - 99designs Blog
    20 Février 2017 par Joanna Krenz Kurowska & Jerzy Kurowski, 99designs.fr
  • Comment créer un site long scrolling impressionnant ?
    21 Septembre 2015, fr.wix.com
  • Défilement parallax | Ajoutez facilement des effets parallax à votre site Wix
    Ajoutée le 6 nov. 2016, Wix Français, https://youtu.be/QPlSj_jJFlI

Long scrolling : 11 sites de web designers qui méritent de défiler
https://fr.wix.com/blog/2015/05/20/long-scrolling-sites-web-designers/
20 Mai 2015 by WiXBlog

5 sites qui utilisent le Parallax Scrolling à merveille
https://fr.wix.com/blog/2015/12/03/5-sites-qui-utilisent-le-parallax-scrolling-a-merveille/
3 Decembre 2015 by WiXBlog

[Webdesign] Quelles tendances 2017 pour les sites e-commerce ? | Comarketing-News
https://comarketing-news.fr/webdesign-quelles-tendances-2017-pour-les-sites-e-commerce/
Publié il y a 9 mois le 5 avril 2017

Les tendances webdesign pour 2016
https://graphiste.com/blog/tendances-webdesign-2016
Février 2016 Publié par Fabien

Site Web pour Association : Les 7 Tendances du Design
https://www.assoconnect.com/articles/14898-les-7-tendances-du-design-a-appliquer-au-site-web-de-votre-association
Le 14 mars 2017 par Anaïs Limpalaer

Les tendances webdesign 2017 - Pitaya communication
https://mypitaya.fr/webdesign2017/
30 janvier 2017 Par Romain Jolivot

Créer et présenter son site internet : wix.com, solution cool et design !
http://prezz.fr/creer-et-presenter-son-site-internet-wix-com-solution-cool-et-design/
03 Mar 2015 Par prezz.fr

Wix, Squarespace, Weeby, Jimdo : le comparatif pour s’y retrouver parmi les générateurs de site
https://digitalinsiders.feelandclic.com/concevoir/wix-squarespace-weeby-jimdo-le-comparatif-pour-sy-retrouver-parmi-les-generateurs-de-site

Website Builders Comparison Chart for 2017
https://www.websitebuilderexpert.com/website-builders-comparison-chart/
Last updated on December 30, 2017 By Jeremy Wong

Wix ou Weebly ? Comparatif des deux leaders de la création de site clé en main
https://www.lancerunsite.com/wix-ou-weebly/

Créer un site internet : beau, facile et GRATUIT avec WebSelf !
https://www.webself.net/

Voici les nouveaux designs WebSelf !
https://www.webself.net/blog/2017/05/02/voici-les-nouveaux-designs-webself

Les questions les plus fréquentes concernant l’utilisation de WebSelf
https://www.webself.net/blog/2016/07/21/les-questions-les-plus-frequentes-concernant-lutilisation-de-webself

Comment créer un site internet professionnel - Wix.com
https://fr.wix.com/blog/2017/08/16/comment-creer-site-internet-debutants-2/
16 Août 2017

Et si vous testiez le scrolling infini sur vos pages de Catégories Produits ?
http://www.skeelbox.com/supprimer-pagination-pages-categorie-produits/
14 septembre 2013 Par Ludovic Passamonti - Directeur Associé
— -Spécifique au e-commerce

Et si on supprimait la pagination sur les sites e-commerce ?
par Benoit Gaillat - Janvier 2014
http://www.info-ecommerce.fr/7957/et-si-on-supprimer-la-pagination-sur-les-sites-e-commerce
— -Spécifique au e-commerce

Pourquoi la navigation en page unique et scroll (presque) infini pénalise le SEO ?
https://www.definitions-marketing.com/f-a-q-marketing/pourquoi-la-navigation-en-page-unique-et-scroll-presque-infini-penalise-le-seo/
le 24 avril 2017, Ecrit par B.Bathelot

Scroll, Scrolling, Scroller
https://www.1min30.com/dictionnaire-du-web/scroll-scrolling-scroller
14 avril 2014 Posté par Gabriel Dabi-Schwebel

Long scrolling
https://www.wearecom.fr/dictionnaire/long-scrolling/

Définition : Scroll infini
https://www.definitions-marketing.com/definition/scroll-infini/
Ecrit par B.Bathelot, mis à jour le 13 mars 2017.

Tendance Webdesign 2016
https://www.pulsar-informatique.com/actus-blog/entry/tendance-webdesign-2016
mercredi 5 octobre 2016

Infographie - Capturer une page à scroller
http://www.commentcamarche.net/faq/5002-infographie-capturer-une-page-a-scroller
Décembre 2017

[Traduction] Adaptive VS Responsive Design : quelle est la différence ?
Publié le 18 juin 2013 dans Mobile et Responsive Web Design
https://blog.stephaniewalter.fr/traduction-adaptive-vs-responsive-quelle-est-la-difference/

Adaptive VS Responsive Design | It Web Solution
08 janvier 2018 par Omar Thiam
http://www.it-web-solution.com/adaptive-vs-responsive-design

La différence entre adaptive et responsive design
http://www.site-web-formation.com/blog/difference-entre-adaptive-et-responsive-design/

Sites Web adaptatifs ou « Responsive Web design »
Un site Web qui s’adapte aussi bien aux appareils mobiles qu’aux ordinateurs de bureau.
https://www.penseweb.com/fr/responsive-web-design-site-adaptatif.htm

Le design responsive ou adaptatif : la différence
29 août 2017
https://mind.engineering/le-design-responsive-et-adaptatif/

Responsive vs. Adaptive Design : lequel est fait pour vous ?
05/09/2015 – Sybille De Poortere
https://www.ecrirepourleweb.com/responsive-vs-adaptive-design/

Étendue et prévisions de l’utilisation mobile en chiffres pour 2017
http://www.slapdigital.fr/blog/chiffres-et-tendances-du-mobile-en-2017

Mobile and tablet internet usage exceeds desktop for first time worldwide
Tuesday 1st November 2016
http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide

L’index Mobile First a commencé son déploiement !
27 octobre 2017 à 8:14 par Olivier Andrieu
https://www.abondance.com/actualites/20171027-18578-lindex-mobile-first-a-commence-deploiement.html

Définition et stratégie digitale du mobile first et web design
https://smart-seven.fr/definition-strategie-digitale-du-mobile-first-web-design/

Mobile-first, adaptatif et responsive : comment s’y retrouver ?
Frederic Gonzalo
http://fredericgonzalo.com/2017/02/21/mobile-first-adaptatif-responsive-sy-retrouver/

Pourquoi et comment penser mobile first aujourd’hui ?
http://www.slapdigital.fr/blog/pourquoi-comment-penser-mobile-first-aujourdhui

Le mobile-first : une nouvelle façon de penser les sites web
Bruno Guyot
http://www.chablais-web.fr/mobile-first-nouvelle-facon-de-penser-les-sites-web.php

7 conseils pour mettre en place une stratégie mobile first
27 février 2017 par Matthieu Cheminal
https://hubinstitute.com/2017/02/7-conseils-mettre-place-strategie-mobile-first/


[1La ligne de flottaison
La « ligne de flottaison », appelée « The fold » en anglais (littéralement : « le pli »), vient de l’expression « Above the fold » qui signifie « au dessus de la pliure ». Cette expression a pour origine la partie visible des journaux pliés sur les présentoirs de presse.

Aujourd’hui le fold est une ligne virtuelle qui est représentée par la limite basse de ce que nous voyons à l’écran quand nous affichons une page web. Pour en voir plus, nous devons naviguer verticalement en dessous du pli en « scrollant ». Malheureusement, la position de la ligne de flottaison varie en fonction de la définition de l’écran.

[2Mobinaute : Personne qui navigue sur Internet à partir d’un appareil mobile

[3Mobile-first, adaptatif et responsive : comment s’y retrouver ?
21 février 2017 par Frederic Gonzalo
http://fredericgonzalo.com/2017/02/21/mobile-first-adaptatif-responsive-sy-retrouver/

[4Vocabulaire complémentaire pour « desktop-first » et « mobile-first »

  • 1. Dégradation gracieuse
    • Responsive Web Design
      La Rochelle, Avril 2014, Mohamed Belmokhtar et Germain Souquet – Université de La Rochelle
      www.esup-portail.org
  • 2. Mode dégradé ou dégradation gracieuse et Mode rehaussé ou rehaussement progressif
    • Responsive web design
      indico.math.cnrs.fr
    • Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)
      Travailler directement dans le navigateur est l’occasion de pratiquer l’amélioration progressive ou la dégradation gracieuse selon le côté où l’on se place. L’amélioration progressive est une méthode de conception centrée sur le contenu : les effets graphiques sont ajoutés dans un deuxième temps pour les navigateurs modernes. La dégradation gracieuse privilégie l’apparence : utilisation des dernières technologies en première intention et mise en place de fallbacks pour que la page reste fonctionnelle sur les configurations plus modestes. Opposées en apparence, ces deux approches sont souvent complémentaires dans la pratique.
      Publié le 24 août 2010 par Bruno Bichet
      4design.xyz
    • Mode dégradé et mode rehaussé
      Le mode dégradé (ou dégradation gracieuse) et le mode rehaussé (ou rehaussement progressif) sont les deux côtés d’une même pièce. Dans ce contexte, ils concourent tous deux à rendre un site Web accessible à tout agent d’utilisateur, en procurant une esthétique et/ou une convivialité améliorées aux navigateurs capables de plus.
      Tommy Olsson. Article original publié le 6 février 2007, traduction le 7 mai 2007.

      www.yoyodesign.org
  • 3. A l’inverse de la dégradation gracieuse, l’amélioration progressive est une stratégie de conception web en couches successives
    • Amélioration progressive : Modernizr et sélecteurs CSS avancés
      A l’inverse du concept de dégradation gracieuse, le principe d’amélioration progressive (« progressive enhancement » en anglais) est une stratégie de conception web en couches successives, qui permet à chacun d’accéder au contenu et aux fonctionnalités de base d’une page web en utilisant n’importe quel navigateur, tout en offrant une version améliorée aux utilisateurs disposant de navigateurs plus récents ou plus évolués.
      Publié par Raphael le 22 Février 2011, mis à jour le 19 Avril 2014
      www.alsacreations.com
  • 4. Dégradation élégante, approche top-down. Amélioration progressive, approche bottom-up, par couches
    • Amélioration progressive vs. dégradation élégante
      1er cas : la dégradation élégante. Son approche est dite top-down, on développe d’abord pour une configuration précise, puis on s’efforce d’étendre le nombre de configurations capables de rendre le contenu correctement.
      2e cas : l’amélioration progressive : l’approche est dite bottom-up ou par couches ; les couches sont développées de la plus basique et la plus universelle à la plus spécifique.

      avril 2010 par saymoneu
      www.developpez.net
    • Amélioration progressive
      dégradation élégante : l’approche est dite top-down, on développe d’abord pour une configuration précise, puis on s’efforce d’étendre le nombre de configurations capables de rendre le contenu correctement ;
      l’amélioration progressive : l’approche est dite bottom-up ou par couches ; les couches sont développées de la plus basique et la plus universelle à la plus spécifique.

      fr.m.wikipedia.org
    • Dégradation élégante & Amélioration progressive
      Dégradation élégante et amélioration progressive sont les deux faces d’une même pièce. La dégradation élégante est le plus vieux des deux concepts. Le terme se retrouve aussi dans d’autres domaines que la conception Web, tel que la mécanique de précision ou les systèmes électriques.
      Par Tommy Olsson, Date de parution : février 2007, Traduction : Nicolas Nutten, Date de traduction : juin 2008
      www.pompage.net
  • 5. Enrichissement progressif
    • Mobile First définition
      ...Cette stratégie de conception consiste à penser d’abord la navigation, l’ergonomie et le contenu d’un site Internet pour les plus petits supports de consultation (écran de smartphone, tablette), pour ensuite les adapter aux plus « grands » supports (écran d’ordinateur portable, d’ordinateur de bureau). On parle généralement d’enrichissement progressif vs dégradation gracieuse...
      www.exclamative.com
    • L’approche « mobile first » dans une stratégie responsive design
      ...l’approche « mobile first »... consiste à penser d’abord la navigation, l’ergonomie et le contenu du site pour les plus petits supports de consultation, pour ensuite les adapter aux plus « grands » supports. On parle alors de « progressive enhancement vs graceful degradation » (enrichissement progressif vs dégradation gracieuse)...
      converteo.com
    • Menu de navigation avec amélioration progressive
      Publié par Raphael le 14 Août 2013, mis à jour le 25 Janvier 2017
      www.alsacreations.com
    • C’est quoi le Responsive Web Design ?
      Publié par Raphael le 25 Février 2014, mis à jour le 25 Janvier 2017
      ...Une philosophie « Mobile First » et « Enrichissement progressif » facilitant l’accessibilité, la compatibilité et la performance des pages produites...
      https://www.alsacreations.com/article/lire/1615-Cest-quoi-le-Responsive-Web-Design-.html

[5Le web est ainsi devenu principalement mobile

  • Chiffres & tendances du web 2018 : SEO, e-commerce, marketing, réseaux sociaux
    Sarah Laurent, jeudi 11 janvier 2018
    Vous le savez, notre environnement digital est en constante évolution.
    Les stratégies marketing, SEO et social media, ainsi que les façons dont les gens interagissent avec les appareils mobiles, effectuent des achats en ligne, consomment du contenu ou recherchent des informations sont ainsi autant d’enjeux à connaître pour mieux s’adapter aux nouveaux comportements et usages d’Internet.
    Voici donc une compilation des statistiques, faits et tendances du web les plus utiles pour 2018.

    https://www.alioze.com/web-2018
  • 100 statistiques stupéfiantes sur les sites internet en 2018
    09/01/2018 par Tsi-Fei Chan
    La liste ultime, sur les statistiques et chiffres clés, liés aux sites internet et à l’usage d’internet.
    Entrepreneurs, marketeurs, rédacteurs, community managers, vous cherchez des statistiques pour compléter vos articles, cet article est fait pour vous et rassemble près de 100 statistiques clés concernant la création de sites internet, l’internet mobile et les réseaux sociaux.

    https://blog-fr.orson.io/100-statistiques-sites-internet-2018#statistiques-sur-l-internet-mobile
  • Comment les Progressive Web Apps peuvent vous aider à (ré)engager vos utilisateurs
    Ecrit par Stéphanie Guerreiro le Dimanche 14 Janvier 2018
    Avec plus de la moitié du trafic internet mondial s’effectuant à partir d’appareils mobiles, il ne fait plus aucun doute : le mobile est roi !
    Le comportement des utilisateurs semble cependant se diriger vers un “ras-le-bol de l’installation d’application”. Malgré l’engouement général pour l’UX des applications natives, seulement environ un tiers des possesseurs de smartphone téléchargent des applications chaque mois.
    Face à ce paradoxe, les Progressive Web Apps sont bien parties pour contourner cet épuisement du téléchargement d’applications. La preuve par 4 à continuation.

    https://blog.goodbarber.com/fr/Comment-les-Progressive-Web-Apps-peuvent-vous-aider-a-re-engager-vos-utilisateurs_a851.html
  • État des lieux 2017 : l’usage d’Internet, des réseaux sociaux, des messageries et du mobile
    Thomas Coëffé, le 24 janvier 2017
    Comme chaque année, We are social publie son récapitulatif chiffré sur Internet et les réseaux sociaux. La première partie du document vient d’être mise en ligne. Elle rassemble de très nombreux chiffres, à jour, sur l’usage d’Internet, des réseaux sociaux, des messageries et du mobile à travers le monde. Dans quelques jours, l’agence publiera la seconde partie du document, qui permet de connaître les chiffres d’usage d’Internet et des réseaux sociaux dans presque tous les pays du monde.
    https://www.blogdumoderateur.com/etat-lieux-2017-internet-reseaux-sociaux/
  • Chiffres Internet – 2017
    Thomas Coëffé, le 13 avril 2017
    Nous rassemblons sur cette page toutes les statistiques liées à Internet : pourcentage d’internautes, nombre d’inscrits sur les réseaux sociaux, usages du web en France et dans le monde, sites et applications les plus populaires…
    https://www.blogdumoderateur.com/chiffres-internet/

[6La « Définition » d’un écran
La « Définition » d’un écran est « le nombre de pixels qui composent l’écran ». C’est donc le produit du nombre de pixels qui le compose selon la largeur multiplié par celui de sa hauteur.

Définition = ( nb pixel en Largeur ) x ( nb pixel en Hauteur )

La « Résolution » d’un écran
La « Résolution » d’un écran est une dimension de densité de pixel, c’est le nombre de pixel par inch (pouce). On parle par exemple d’écran de 72 pixels par inch :

Résolution = Définition sur la Longueur (px) / Longueur de l’écran (inch)
ou
Résolution = Définition sur la Hauteur (px) / Hauteur de l’écran (inch)
ou
Résolution = Définition sur la Diagonale (px) / dimension de la Diagonale de l’écran (inch)

Nous donnons ici ces précisions sur la « Définition » et la « Résolution » d’un écran car nombreux sont ceux qui utilisent « Résolution » pour « Définition », et étonnamment l’erreur est souvent commise par des spécialistes d’une discipline ou l’autre des médias, du design et/ou de l’informatique.

[7Mobile First to Mobile Always : Create the Right Customer Experience
by Scott Anderson , Op-Ed Contributor, May 22, 2017
https://www.mediapost.com/publications/article/301523/mobile-first-to-mobile-always-create-the-right-cu.html