HTeuMeuLeu

Je l’ai posté sur Twitter cette semaine, mais je le redis ici. Je trouve ce comparateur de portefeuille absolument génial.

Cette semaine, je suis tombé sur le site de Wired UK et cet article sur Tim Berners-Lee qui fait la une du numéro de mars. Et je suis resté jouer un petit moment avec la fonctionnalité d’agrandissement de l’image accompagnant l’article.

 

Quiz : à votre avis, en cliquant sur ce bouton « Enlarge« , que va-t-il se passer ?

1. L’image va s’agrandir à partir de son emplacement actuel
2. La page va scroller pour revenir tout en haut et afficher l’image

Évidemment, c’est la réponse 2. Si c’est comme ça, c’est parce que sur des petites résolutions, l’image en question se trouve en haut de l’article. Sauf que sur mobile, l’agrandissement de l’image ne sert à rien puisque l’image prend déjà toute la largeur de l’écran.

Ou comment une fonctionnalité mal conçue en mobile first vient pourrir l’expérience desktop.

J’aime bien les casse-tête. Et quand je dis j’aime bien, je veux en fait dire que ça a le don de m’énerver et de me rendre complètement fou. Il y a quelques temps j’avais posté un joli casse-tête en intégration. Raphaël Goetter avait aussi publié sur son blog trois défi « T’es pas cap ! » (un, deux, trois). Hier soir, je suis tombé sur un nouveau problème bien casse-tête en intégration. Je l’ai posté sur Twitter afin de m’assurer que je n’étais pas passé à côté d’une solution évidente. En voyant ce matin le titre d’une solution inachevée proposée par Kaelig ou certains tweets nocturnes, j’ai ma confirmation que c’est bien un nouveau joli casse-tête.

Voici le casse-tête en question :

1. Les éléments (ici en orange) ont une largeur fixe de 200px.
2. La grille est fluide et contient 4 éléments par ligne.
3. Les « cellules » de la grille (ici en gris) ont une marge de 10px à gauche et à droite, sauf :
   • La première cellule de chaque ligne, qui n’a pas de marge à gauche
   • La dernière cellule de chaque ligne, qui n’a pas de marge à droite
4. Les éléments sont centrés horizontalement dans leur cellule, sauf :
   • Le premier élément de chaque ligne, qui est aligné à gauche
   • Le dernier élément de chaque ligne, qui est aligné à droite
5. Les éléments sont répartis équitablement sur chaque ligne. Les rectangles gris sont de la même largeur partout.
6. Le premier élément et le dernier élément de chaque ligne sont collés respectivement à gauche et à droite de la grille.
7. Toutes les cellules ont le même parent direct. Le code HTML doit donc ressembler à quelque chose comme : .grille > .cellule > .element. Vous pouvez ajouter des classes spécifiques en plus si besoin.
8. Pas de JavaScript, que du HTML et CSS.
9. La solution doit fonctionner à partir d’IE9 (et se dégrader gracieusement pour les plus vieux navigateurs).

Pour vous aider à démarrer, j’ai mis à votre disposition un exemple de code HTML et CSS sur CodePen. Vous êtes libre de modifier le code HTML et CSS, tant que vous respectez les règles ci-dessus.

Je vous invite à partager vos réalisations dans les commentaires. Je publierais la solution que j’ai trouvé dans le courant de la semaine. Amusez-vous bien !

Même pas deux ans après le rachat effectif de Motorola Mobility par Google pour 12,5 milliards de dollars, Google annonce la revente de Motorola Mobility à Lenovo pour 2,91 milliards de dollars. Ce sont 9,59 milliards de dollars partis en fumée en moins de vingt-quatre mois. Google conserve les brevets de Motorola, brevets qui s’étaient révélés devant un tribunal valoir deux fois moins que ce que Motorola estimait.

J’aime bien le commentaire de John Gruber sur ce rachat :

Je parie que ça prendrait littéralement plus de temps pour jeter 9,5 milliards de dollars en petites coupures par les fenêtres qu’il n’en a fallu à Google pour faire ça au sens figuré avec l’acquisition de Motorola.

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.

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 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.