Comment Apple adapte des pages pour mobile sur un site pas responsive

La semaine dernière, Apple fêtait les 30 ans du Mac avec une page dédiée. Je suis tombé sur cette page via John Gruber, qui s’extasiait qu’elle soit responsive. Ça m’a tout de suite surpris, car j’ai tendance à penser qu’Apple n’aime pas trop le responsive design (même s’ils ont fait quelques tentatives sur certains e-mails).

Aussitôt les 11,3 Mo de la page chargée sur mon ordinateur (sans commentaire), je me suis empressé d’assouvir mon TOC d’intégrateur et de redimensionner la page. Et là, surprise, il se passe bien quelque chose (les textes sont redimensionnés), mais la page n’est clairement pas responsive.

Je vais donc visiter la page sur mon iPhone, curieux de voir le rendu de cette page. Après tout, le gabarit du site d’Apple n’est pas responsive. Alors comment est-ce qu’Apple aurait pu rendre une page responsive sur un site non responsive ?

La réponse est simple : en trichant.

apple-30-years-mobile

Comme le dirait Cyril Lignac, « c’est très astucieux ». Plutôt que de rendre leur gabarit responsive (avec l’enfer que ça peut engendrer), les intégrateurs d’Apple ont préféré simplement mettre à l’échelle le header et le footer du site. Pour ça, ils utilisent simplement la propriété transform:scale(0.3125); (où 0.3125 est une valeur calculée en JavaScript le ratio calculé entre la taille du site, 1024px, et la largeur de l’écran d’un iPhone, 320px).

La page d'Apple vue dans l'inspecteur web de Safari Mobile

La propriété transform étant ce qu’elle est, Cyril Lignac s’exclamerait surement aussi « c’est très gourmand ».

Si ce n’est clairement pas une solution optimale (la navigation reste difficilement utilisable dans cet état), je trouve l’idée quand même très originale. À noter que la même chose avait été utilisé par Apple pour la page du Mac Pro.

  1. MathRobin, le

    C’est vraiment des guignols…

  2. Nico, le

    > je trouve l’idée quand même très originale

    J’aurais plutôt dit « nazebroque » ou « lamentable ».

  3. Rémi, le

    Et donc vous préconisez de faire quoi ?

  4. Alexandre B, le

    @Nico et Math Robin, je vous trouve très dur, voir même insultant, c’est très astucieux.
    Effectivement comme le dit Rémi c’est loin d’être une solution optimale, mais ça fonctionne, je ne suis pas pro apple, mais ils ont l’audace de proposer d’autre solutions qui fonctionnent.

  5. MathRobin, le

    De faire du vrai responsive pour le coup… Surtout qu’ils ont les moyens financiers/humains de faire le boulot. Une énième illustration de l’incapacité des mecs d’Apple à jouer en faveur de la performance plutôt qu’en faveur de l’astuce-arnaque pourrie. Ça me rappelle une vieille histoire toujours non résolue de consommation de bande passante particulièrement abusée de la part des terminaux pommés…
    Je veux bien croire que changer le gabarit de leur site pour du responsive/adaptative prendrait du temps, mais eux qui, si fièrement, revendiquent avoir le temps de contrôler chaque appli qui rentre sur leur store peuvent à priori forcément prendre le temps de refaire ce gabarit.

  6. MathRobin, le

    @Alexandre B : pas de problème, j’assume. Ce n’est pas une question de pro ou anti-Apple même si il est de notoriété publique que Apple me sort pas les naseaux et d’autres orifices moins propres.
    Là c’est juste un énorme foutage de gueule dans le sens où le responsive prévoit d’adapter le contenu à l’appareil navigant pour garder une expérience utilisateur maximale. Hors là tout ce qu’ils font, c’est tout diviser par un ratio prédéterminé pour que ça ne déborde pas.
    C’est un peu comme une compression de César. T’as toujours une voiture, dans un format plus petit, mais qui n’est plus utilisable, ce qui est, excuse moi le terme, complètement con.

  7. Max, le

    J’ai déjà utilisé ça sur le d’un site de 980px existant pour l’intégrer sans frais dans un onglet Facebook de 810px.
    J’en suis pas fier.

  8. Jack NUMBER, le

    Étrange… Comme-ci pour Apple le mobile était un intrus dans un web fait pour les ordinateurs.

    Pour le TOC des intégrateurs, il y a quelques années on masquait les styles pour voir si c’était un site en tableau et/ou avec les styles directement dans les balises ^^
    J’en ai un autre en ce moment : faire un clic droit sur une vidéo pour voir si c’est Flash ou HTML5 qui l’affiche (surtout quand le player est sympas).

    Petite typo (paragraphe sous la première image) :
    « Alors comment est-ce qu’Apple aurait pu rendre une page responsive sur un site responsive ? » => … sur un site NON-responsive ?

  9. Nico, le

    @Alexandre B : faut arrêter, sur un site qui devrait être de classe internationale, utiliser ce genre de bricolage du Dimanche. Surtout que d’autres éléments appuient cette critique, et Rémi les a donnés : 11,6 Mo, et du bricolage JavaScript avec la propriété scale.

    Je ne suis pas anti-Apple, je poste depuis mon iPad, mais franchement, ça manque d’ingéniosité et de bon sens.

  10. Arnaud, le

    Hum. Le site d’apple présente plusieurs centaines de milliers de pages, dont certaines sont en place depuis des années. Ce n’est pas que Apple ne veut pas rendre son site responsive, c’est que l’opération doit être absolument monumentale !

  11. Ben, le

    Me voilà rassuré! Mon toc existe ailleurs…
    Pour ma part, je ne me demande pas si c’est une solution à déplorer mais plutôt pourquoi ne font-ils pas de responsive tout simplement ?
    Ce n’est certainement pas une question de fegnantise car comme dit plus haut, ils ont les moyens humains pour appliquer ce qu’il faut!
    Certes, cette solution prend au final que très peu de temps…

  12. yosh, le

    hm… je ne pense pas que ça a été fait pour mépriser les solutions responsives ni même pour gagner de l’argent.

    je n’aime pas le responsive et j’ai toujours trouvé d’autres alternatives plus intelligentes. et elles existent c’est juste que vous êtes un peu trop aveuglé par cette solution « à la mode », et pire, vous en faites même une solution unique. c’est simplement une leçon d’humilité. tout est possible.