Ce n’est pas du web

Au hasard de mes pérégrinations sur Awwwards (l’équivalent des Darwin Awards pour le web), je suis tombé sur My Provence Festival 2013, un site pour un événement touristique des Bouches-du-Rhône organisé dans le cadre de Marseille-Provence 2013, capitale européenne de la culture. J’ai été séduit par la charte graphique colorée et joliment illustrée du site. Mais mon enchantement est vite retombé.

Le site coupé sur mon Macbook Air

 

Le Festival débute chaque fin d’année par un concours de création sur internet ouvert à tous. À l’issue de ce concours, les lauréats et les artistes membres du jury viennent partager une résidence artistique éphémère afin de produire des

Afin de produire des quoi ?

Voilà tout ce que je peux voir sur mon Macbook Air 11″, configuré dans sa résolution maximale de 1366x768px. Le site utilise un défilement spécifique en JavaScript qui ne s’adapte non pas au contenu, mais aux différentes parties de la page. Ce qui signifie que sur mon écran, je ne pourrais jamais lire la suite du texte de présentation.

Motivé, je tente alors ma chance sur mon iPhone.

Mode portrait bloqué

Pas de chance, le site est totalement bloqué en mode portrait. En bon élève, je prends donc la peine de désactiver le verrouillage automatique de la rotation de mon iPhone, et je le tourne en mode paysage.

iPhone en mode paysage

Dommage pour moi, je ne peux toujours pas lire le contenu de ce site web. Désespéré, je tente ma chance sur un vieux PC que j’ai sous la main (avec un bon vieux IE7 des familles).

Vous utilisez une ancienne version de votre navigateur

Au final, le seul et unique moyen pour moi de lire le contenu de ce site, c’est d’en désactiver les styles.

My Provence sans CSS

Ceci n’est pas du web.

On ne doit pas faire de discrimination sur le web, c’est mal. Bloquer les gens selon leur appareil, c’est mal. Selon la taille de leur écran, leur système d’exploitation ou leur navigateur, c’est mal.
(à lire dans la voix de La Classe Américaine)

Faire ça, c’est passer à côté de l’essence même du web, un moyen de communication destiné à tous. Si vous créez une page HTML, par défaut, elle sera responsive, optimisée retina, compatible de Mosaic à Chrome 25 en passant par Lynx. Le travail d’un concepteur web, c’est de partir de cette base et de la rendre encore meilleure. Le travail d’un concepteur web, ce n’est pas de tout casser pour essayer d’arriver à un quelconque contrôle.

Pour paraphraser Christian Heilmann, si votre site web ne fonctionne qu’à partir d’une certaine résolution, ce n’est pas du web. C’est stupide.

  1. Nico, le

    Même si je suis d’accord avec le fond, sur la forme, attention à ne pas pousser ce raisonnement à l’extrême : un client peut avoir un budget mini, et du coup, on ne fait qu’une version « desktop » fixée à une résolution, pas d’adaptation particulière pour les smartphones.

    Le site reste consultable même si ça n’est pas confortable dans tous les cas de figure.

  2. shavounet, le

    Budget mini ok, mais si le site est pas trop mal conçu il doit être consultable sur mobile quand même (en mettant le confort de l’utilisateur entre parenthèses, si nécessaire).

    Il n’y a rien de plus irritant que de tomber sur un site qui bloque l’accès à partir d’un mobile car « non-compatible ». C’est pas de la coquetterie, pas de la classe.

  3. NimS, le

    Intégrer pour un maximum de plateforme, ok.
    Et que pensez-vous de l’information avec ce genre d’outil? http://browserawarenessday.com/

  4. Superbiche, le

    Article très pertinent.
    Après il faut pouvoir et surtout savoir expliquer au client « bling bling » que s’il veut des fioritures à tous les étages il faut soit du budget soit oublier un rendu harmonieux sur toutes les plateformes.
    Et idéalement les deux!

  5. mulk, le

    De mon côté, je pense que si le site est simplement conçu, pour ne pas dire correctement conçu (ah, si, je l’ai dit), il DOIT être lisible sur tout support. Par lisible j’entends que son contenu est accessible. Et n’allez pas me dire qu’il y ait besoin d’un budget spécifique mobile pour lire du texte!… bon sang de bon soir, même un site fait avec l’ignoble Frontpage passe sur un mobile. Désolé, mais ce genre de truc ça me rends dingue (et on est lundi, ça aide pas…)!

    Par contre, à Mr Remi: gros über LOL, mais vos tentatives successives pour finir de lire la phrase m’ont trop fait penser à une demande dans « l’Administration » : « ah?! non, désolé, mais il vous faut le formulaire 3AD-5V », « Ah non, désolée, mais pour le formulaire 3AD-5V, il faut une demande du bureau DRM666″, »… » etc… genre « joueur 1 joue encore… » :D

  6. mulk, le

    NimS-> vraiment pas convaincu par la chose… cela me fait trop penser aux messages (bientôt disparus) « télécharger Flash Player pour voir ce site ».

  7. Adrien Leygues, le

    Salut,

    Je rejoins Nico.

    Shavounet, oui c’est crispant mais c’est la réalité, on aimerait tous faire des sites qui soient aux ptits oignons et c’est un idéal vers lequel on doit tendre. Maintenant, dans la réalité, il y a tout un tas de raisons qui font que l’on sort des sites à un état donné qui ne répond pas à tous nos critères de Qualité : du budget, du temps, des niveaux d’intervenants dans les équipes inégaux. En tout état de cause c’est difficile de juger sur un site comme celui-ci sans connaître les tenants et les aboutissants.

    Maintenant, tout ce qu’on peut espérer c’est que des remarques constructives arrivent aux admins de ce site et qu’ils prévoient une V2 permettant une accessibilité pour tous.

    Adrien

  8. gael, le

    Nico => L’article ne dit pas le contraire. L’objectif n’est pas d’optimiser tous les sites pour tous les écrans. Tous les clients n’ont pas le budget pour faire du responsive design. L’objectif est que l’on puisse lire le contenu sur n’importe quelle plateforme sans être un technicien du web.

    NimS => L’outil que tu présente revient à peu près au même que le message du site MyProvence qui demande de tourner son téléphone pour lire le contenu. Je n’ai pas visité le site MyProvence mais il y a fort à parier qu’on aurait pu obtenir un résultat graphiquement équivalent mais lisible sur toutes les configurations avec un peu d’optimisation.

    hteumeuleu => Encore un super article, bravo !

  9. tex-el, le

    C’est bien la première fois que je vois un site optimisé sur mobile avec pour seul objectif de bloquer la navigation (et c’est complètement absurde). En revanche je ne comprends pas ce qui fait que la page ne défile pas, ce passage reste obscur : « Le site utilise un défilement spécifique qui ne s’adapte non pas au contenu, mais aux différentes parties de la page. »
    En css ça veut dire quoi ?
    Sinon, bon article.

  10. a. nonym, le

    Je témoigne à visage couvert : je suis un freelance qui développe ce genre de sites.

    Pourquoi à visage couvert ?
    Parce que j’ai honte.

    Pourquoi, si j’ai honte, je continue à pondre des sites que je méprise au fond de moi pour leurs animations inutiles, leur accessibilité douteuse et leur support navigateur aléatoire ?
    Parce que mes clients ne demandent que ça. Les agences « awardesques », obsédées par les fwa, en ont rien à battre du web. Jadis ils voulaient du flash qui pète, maintenant du html5 qui pète. Une régression, le flash était au moins omniprésent sur les navigateurs.

    Alors ouais, j’essaye de sauver l’honneur au maximum (progressive enhancement, fallbacks, requètes http, gzip, etc) mais y’a des limites à ce que je peux faire dans le budget, surtout avec le cahier des charges imposé et des décideurs qui préfèrent aucun affichage sous IE8 à une absence de coins ronds !

    Et je vous passe les sites mobiles « iPhone only » sans accès au site non mobile et pesant 1mo, (après une lutte héroïque de ma part hein, sans ça c’est diaporama fullscreen de dix PNG retina en home) je vous passe les sites responsives (parce que c’est désormais à la mode) avec quinze breakpoints donnant quinze itérations d’un design en fixed width et une font-size à douze pixels…

    Pourquoi je change pas de clients ?
    Parce que ces mecs payent très cher un mec qui roxe le JavaScript, et que dalle un intégrateur spé accessibilité.

    Ouais, je suis un vendu.

    M’enfin je vous rassure, ce site-là il est quand même bien grave, je fais moins pire.

  11. a. nonym, le

    PS : le plus drôle, c’est que sur une Nexus 7 en mode paysage le site Provence machin demande de tourner sa tablette en mode… paysage.

  12. mulk, le

    a. nonym -> Eh ben merde alors! Tu vis un enfer et je compatis… Faudrait-il « dénoncer » ou tout du moins pointer du doigt ce genre clients ? Faudrait-il les éduquer à grand renfort de Darwin awards du web ?

    En tout cas, il semblerait que d’autres domaines du web que l’intégration soient également sujet à cela, comme le « community management » (genre: je mets un lien sur facebook, donc je suis un community manager, ou encore je fais du social marketing, parce-que j’achète des followers…), ou encore les « publicitaires » qui n’ont pas su (et ne savent toujours pas) s’adapter au web (genre: le nombre de fois où une banner s’affiche est ce qui compte…. perso, en tant que client, le nombre de vue de ma banner m’importe moins que le nombre de personne qui achète mon produits…).

    Il faudrait dénoncer ce genre de pratique et démonter la réputation de ceux qui détruisent le web et nos métiers. Surtout que faire du web de qualité n’apporte certes pas plus de bénéfices à court termes, mais énormément à long termes…

  13. Stéphane Deschamps, le

    « Eh ben merde alors! Tu vis un enfer et je compatis… »

    C’est affaire de choix, la compassion n’y trouve pas son compte. Pour ma part j’ai déjà changé de boîte pour pouvoir faire mon travail dans des conditions que j’espérais meilleures.

    a.nonym tu m’envoies ton CV quand tu veux. :)

  14. RomSoul, le

    Ce genre de résultat ubuesque signifie que l’intervenant web a échoué à faire comprendre l’importance de l’accessibilité à son client. Tout le budget est passé dans le beau graphisme, le JS sexy etc, et il ne reste même pas une petite journée de taf facturable pour mettre au point une version simple et lisible sur petits écrans ou navigateurs vintages ??… J’en ai mal au clavier, et honte pour eux.
    Je serais curieux de savoir si les moteurs de recherche sont à même de détecter ce type de pages en poil de chèvre et spray coiffant : dans la mesure ou c’est inaccessible à une bonne moitié d’internautes, ça mériterait d’être dans les catacombes des résultats, non ?
    Ultime ironie du sort : c’est vraisemblablement un budget public. J’encourage les assos de déficients visuels de Provence à demander des comptes à leurs élus.

  15. Nico, le

    @gael : c’est pour cela que j’ai bien mis que j’étais 100% d’accord sur le fond, mais attention à ne pas pousser ce raisonnement trop loin.

    @a. nonym : ce genre de témoignage ne me surprend pas du tout (même si ça me donne la gerbe) : certaines agences de communication (et parmi les plus connues) ne se posent pas la moindre question et n’ont AUCUNE culture du Web : le but est d’en mettre plein la vue.

    Le pire, c’est que quand tu arrives et que tu dis : « ok pour votre shop en 3D, mais ça va vous coûter un saladier, et aussi à chaque mise à jour », tu passes pour le méchant emmerdeur : le client te voit comme celui qui dit non, et l’agence te voit comme le « brimeur » de leur créativité et de leurs concepts… fussent-ils totalement débiles et non-sensiques.

    Va expliquer ensuite qu’un shop en 3D sera impossible à référencer, que le super module flash ne s’affichera pas sur iPad, et je ne parle même pas de l’accessibilité de base de ce bouzin…

  16. Intégrateur, le

    Sans vouloir faire le vieux c…, il est aujourd’hui plus facile de télécharger et d’installer des thèmes responsive design qu’il y a 10 ans, et pour cause… Je suis bien d’accord qu’il ne faut pas bloquer les utilisateurs selon leur configuration, mais je suis également d’accord avec le message d’a.nonym sur la question de la rentabilité et de l’investissement. Difficile de tout concilier, et le monde idéal n’existe pas Away From Keyboard ;-)

  17. shavounet, le

    @Adrien, je fais surtout cette remarque après avoir failli perdre 50€ ce week-end (une sombre histoire d’erreur billet de train…). Je m’en foutais d’avoir un affichage tout moche, je voulais juste cliquer sur le bouton annuler le plus vite possible et poser une option pour un autre billet. Je me suis pris une claque en tombant sur un écran « desktop only ».

    Heureusement que mon bon vieux Firefox (<3 <3 <3) propose une option "Voir la version ordinateur", qui m'a permis d'accéder au site (pas si moche que ça).

    Ya probablement des histoires de com' derrière, mais j'ai fortement l'impression que c'est du budget perdu inutilement. Et si vraiment c'était nécessaire, un bandeau aurait fait le même effet sans bloquer l'utilisateur. Ou alors c'est vraiment prendre les gens pour des cons.

  18. A.nonym, le

    Je peux difficilement démissionner, étant freelance :)
    (un vrai freelance avec plein de clients hein, pas un néo-freelance salarié déguisé d’une agence radine.)

    Alors oui, j’essaye petit à petit de transformer ma clientèle d’agences pour aller vers des projets plus conformes à mes idéaux webesques, mais ce n’est pas facile : je ne supporte pas la prospection, les clients sont toujours venus d’eux-même me trouver, or fort logiquement ceux qui me trouvent sont ceux qui ont A D O R É le dernier site tout plein d’awards et d’animations (j’assume ma paresse.)
    Sans compter que l’agence de base pas très technique, elle a tendance à payer ce qui se voit. Ils vont sortir le chéquier pour des transform3d, pas pour un Grade A sous Yslow.

    Seconde possibilité, l’éducation du client (donc de l’agence et du client de l’agence.)
    Je vous répondrai : « Lol, malheureux ! »

    Il faut comprendre la pyramide d’incompétence-web régissant un projet : chez le client, un directeur -> un responsable du marketing -> un chef de projet web -> son assistant-stagiaire. C’est la base, parfois c’est moins, souvent c’est pire. Bien sûr 90% de ces gens n’y pigent que dalle, ce qui peut se comprendre pour certains.
    Chez l’agence, au mieux un commercial-chef de projet qui en a RIEN A BATTRE + un ou deux graphistes (pardon, un Directeur Artistique et son fidèle éxésclave) nostalgiques du Flash qui mesurent leur bite au nombre de FWA.

    Mettons que par miracle, petit à petit, j’arrive à inculquer deux trois principes de base au graphiste, de manière subtile. Toujours par miracle je fais comprendre au chef du commerce que l’accessibilité c’est bankable. On est à deux miracles, et il reste encore trois ou quatre personnes à convaincre chez le client final. Sauf que ces gens je ne les vois pas. Je n’aurais jamais l’occasion de les convaincre. Et que le commercial (pardon, le chef de projet) il va pas se battre pour les malvoyants.

    Exemple :
    un site web bien bling et, bien sûr, pas de budget (le genre de client final qui claque deux million d’euros dans de l’achat d’espace mais qui a moins de 15k de budget web. Déjà ça pose le con.) L’agence décide de sacrifier IE8 (« personne n’a IE8 chez le client ! ») pour ajouter PLUS (y’en avait déjà) d’animations (faut que ça soit dynamique… tautologie préférée des DA.)

    Bibi développe le site. Bonne poire je fais un effort sur IE8, vu que de toutes façon IE9 oblige à prévoir des animations JQuery en plus du CSS3. Je castre un peu les animations à coup de browser sniffing (une classe conditionnelle détectée en JS, mais PAS BIEN quand même), le site marche très correctement sous IE8 donc, sans la mesure d’IE8.
    Tout le monde il est heureux. L’agence, le client…
    Sauf que soudain le grand chef du client s’intéresse à son site. Le grand chef a IE8 chez lui.
    Devastascion ! Catastropha ! Ça marcha pas chez los grandchefos ! Los granchefos il a pas les coins ronds !

    Résultat ? Budget débloqué d’urgence pour adapter le site sous IE8 à grand coup de dd_roundies. Je peux vous dire que je leur ai fait raquer ce coup là.

    Bref, c’est peine perdue. J’assume hein, je suis pas prêt à prendre le risque d’un grand saut (financier et professionnel) vers des projets plus honorables.
    Ma seule limite c’est le ecommerce : je ne fais pas de ecommerce. Trop de fric en jeu, et on sait très bien qui est toujours coupable d’un échec au final.

  19. PH de Kaliseo, le

    Tiens ça me rappel vaguement cette discussion : http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/

    Je dois dire que je ne suis absolument pas d’accord avec toi. Tu peux très bien dire a toute une frange des internautes d’aller se faire foutre. Et peu importe le critère. Un site web n’est pas un parc publique qui doit forcément être accessible au handicapés. C’est plutôt comme un bar, ou si t’es pas zappé en hugo boss avec une rolex, tu rentre pas (c’est pour l’exemple). C’est même bien ça l’ironie dans la classe américaine.

    De toute façon de la discrimination tu en fera que tu le veuille ou non : moi j’utilise souvent Lynx et je l’ai dans le cu* pour la plupart des sites. Je m’en plain pas, j’assume.

    P.S : je sais ce que tu va me répondre : « Moi je peux pas blairer les Nazis » et tu aura bien raison :)

    ++

  20. A.nonym, le

    Premièrement, un mec sapé en Boss avec une Rolex appartient à un certain milieu bien ciblé au niveau marketing.
    Le navigateur installé par un internaute n’informe que très peu sur ses caractéristiques hormis sa branchitude technologique. Critère utile si tu as une boutique de gadget geek ou si tu es un développeur freelance ne visant que des agences web, critère inutile dans 99% des cas. Et même quand tu le sens utile, tu peux te planter, par exemple un site pour vieux non compatible mobile « les vieux n’ont pas de smartphone ! » alors que le prescripteur s’avère être le petit-fils et son Galaxy SIII…

    Deuxièmement, un bar a une capacité d’accueil limité qu’il doit optimisé. Un site internet a une place pour tous.

    Bref, même en méprisant l’idéologie communiste du web et en se contentant d’une bonne vieille idéologie libérale d’optimisation du RoE, il y a très peu de raisons rationnelles de ne pas supporter IE8 (coût du support faible par rapport à sa part de marché), les téléphones portables ou les personnes en situation de handicap (10% de la population.)

    Et même si tu en trouves, il faudra t’en méfier.

    C’est quand même triste qu’une agence web faisant du prestashop ne connaisse pas les bases du marketing enseignées en première année d’école de commerce… :(

  21. mulk, le

    boarf.. à mon avis, le ciblage précis de profiles dépend du projet. Mais le Web n’étant pas un média (contrairement à la TV, la Presse, etc…), il nous permet de toucher plus de monde et de cibler des profiles plus génériques sans investir des sommes mirobolantes. D’où sa croissance fulgurante et les sommes générées…

    PH de Kaliseo-> ^^ Attention!
    c’est pour toi: http://variae.com/wp-content/uploads/godwin.jpg ^^

  22. PH de Kaliseo, le

    Dommage qu’il n’y ai pas d’abonnement pour les commentaires.

    @A.nonym : je ne suis pas contre « l’idéologie communiste » du web (si tenté qu’elle existe), je suis sous Debian, je traine ma peau sur savannah.gnu.org, je suis un grand défenseur du logiciel Libre, en partie pour que les petits Tanzaniens puissent eux aussi superviser avec Nagios s’ils le souhaitent/peuvent.

    Sauf que le client est libre. C’est quand même son site. Il peut mettre un mot passe sur son site pour autoriser que les internautes de son club, de même qu’il peut mettre un design Web 6.24 full screen machin truc pour dégouter les mamies, ou afficher F*CK YOU à ceux qui utilisent IE. C’est son droit le plus stricte.

    Ça te choque quand un hammam est réservé aux femmes ? Ou quand un bar est réservé aux gays (si tu es hétéro) ? Ou quand une mosquée est réservée aux Muslims ? Ou quand une course de voiture n’est accessible qu’à ceux qui peuvent se payer une F-3000 ?

    Quand je dis ça, ça ne veut pas dire que je suis « contre » l’accessibilité, bien au contraire, mais il ne faut pas non plus cracher sur la liberté individuelle du client, quoi qu’on en pense Et oui je trouve ça stupide, de mon point de vue, de ne pas rendre un site accessible au plus grand nombre, mais j’essaye de respecter un minimum les choix liés aux libertés individuelles.

  23. shavounet, le

    @PH http://www.hteumeuleu.fr/ce-n-est-pas-du-web/feed/ :)