Share
Après le rachat de Tumblr par Yahoo!, Yahoo! a mis en œuvre une refonte complète de Flickr.com. Cela a suscité de vives critiques ainsi que de nombreux éloges, attribués en grande partie à la nouvelle dirigeante de Yahoo!, Marissa Mayer. Dans cet article, nous allons parler des décisions de conception et de certains détails d’implémentation dans la refonte, et ouvrir une conversation sur l’acquisition de Tumblr par Yahoo !..
Les critiques de Yahoo !, remettent souvent en cause le rôle de Flickr, Facebook le surpassant comme le service de téléchargement de photos en ligne le plus populaire. Dans cette refonte de Flickr, nous voyons un ensemble intéressant de priorités, que nous aborderons dans cette section..
Ces priorités reflètent le fait que Flickr cible un public de passionnés de photographie..
En regardant une sélection aléatoire de photos de Facebook, vous verrez probablement une collection de photos d'amis sur la plage ou de photos "selfie". Même dans les publicités de Facebook, nous voyons des images animées par un facteur: capturer des moments sociaux..
L'écrivain Justin Rocket Silverman apprend l'art du "selfie" Cependant, en regardant la page d'accueil de Flickr, nous ne voyons aucune image qui serait principalement considérée comme "sociale". Nous voyons plutôt une sélection d’images de la nature ou d’animaux domestiques, avec quelques autres photos posées. Ces images sont mieux comprises comme hautement intentionnelles, prises par les amateurs de photographie.
La page d'accueil de Flickr envoie quelques messages et un seul appel à l'action. Le message principal est le téraoctet gratuit et révolutionnaire de Flickr pour les images et les vidéos. Ils insistent sur ce point dans le message principal, "Sourire. Tout le monde reçoit un téraoctet gratuit", puis dans la deuxième diapositive "Biggr" située sous le rabat, qui permet à l'utilisateur de voir le nombre d'images d'une résolution donnée pouvant être téléchargées sur Flickr..
Le curseur mégapixels va de 0 à 16 mégapixels. La troisième diapositive explique que les utilisateurs peuvent télécharger leurs images dans leur résolution d'origine et ne peuvent s'attendre à aucune perte de qualité..
Ces messages parlent fortement aux passionnés de photographie. Il est important pour les photographes de disposer de suffisamment d'espace libre pour télécharger des images de haute qualité. En revanche, Facebook ne communique aucune implication en termes de qualité ou d'espace pour le téléchargement d'images..
Le nouveau Flickr est hyper concentré sur les expériences photo-centriques. Cela place généralement les comptes d'utilisateurs en tant qu'élément de contenu secondaire. Par exemple, lorsqu'un utilisateur se connecte, la page "accueil" affiche un flux d'images et leurs interactions associées avec d'autres utilisateurs. Les groupes d'utilisateurs connectés peuvent être vus à droite. En cliquant sur une photo ouvre une lightbox navigable.
Flickr a également créé une nouvelle expérience de diaporama. La barre de recherche se concentre sur les téléchargements des utilisateurs (plutôt que sur les "profils" des utilisateurs) par défaut. Les deux options suivantes sont votre flux de photos personnel, puis vos "photos de contacts". Enfin, le type de recherche peut être changé en groupes, et enfin pour les membres.
Comme effet secondaire de l'hypercentrisme de Flickr sur la photographie et les personnes qui s'y intéressent, nous pouvons rapidement constater que l'objectif de Flickr n'est pas de rivaliser avec Facebook. Au lieu de cela, il est de devenir la Service de photographie en nuage pour le passionné de photographie moyen et le photographe de carrière professionnel pour stocker et discuter des photos.
Cela ne doit pas diminuer les interactions rendues possibles par la nouvelle refonte. En fait, les interactions et les conversations sont davantage encouragées que le précédent Flickr, qui visait principalement à montrer à chaque utilisateur les dernières photos téléchargées. Mais les interactions sociales de Flickr tournent entièrement autour de les photos; en fait, sur la page de profil d'un seul utilisateur, il n'y a pas de "mur". Au lieu de cela, il existe un flux de photos téléchargées de cet utilisateur, qui peut facilement être lancé dans un diaporama. Si vous aimez un utilisateur en particulier, vous pouvez les "suivre" (Tumblr, qui que ce soit?), Ce qui amènera les photos et les commentaires associés de cet utilisateur dans votre fil d'accueil connecté..
Les utilisateurs peuvent accéder à FlickrMail, mais uniquement si des personnes ont été ajoutées à leurs contacts. de plus, l'accès à FlickrMail est quelque peu enterré.
Les groupes peuvent poster des "discussions" très simples, qui ressemblent à des messages de forum; toutefois, la communication ultérieure est relativement limitée aux commentaires sur les photos.
Flickr n'est pas confus ou flou; au lieu de cela, il est clairement axé sur la création d'un lieu de discussion et de stockage de photographies.
Comme d'habitude avec la série "Comment ils l'ont fait", nous allons passer un peu de temps à parler des aspects techniques de la nouvelle mise en œuvre. Cette section ne traite pas de la stratégie globale ni de son efficacité ou non; au lieu de cela, cette section regorge de trucs et astuces basés sur l'implémentation de Flickr.
La conception de Flickr n'a pas connu de mise à jour significative depuis environ sept ans. Au cours de cette période, l’informatique a beaucoup progressé, notamment un accès beaucoup plus large au haut débit, une augmentation générale de la vitesse du haut débit et un passage massif à la mobilité et à l’accessibilité multi-périphériques. Pour cette raison, Flickr de 2012 semblait assez daté, principalement basé sur un focus de vignettes à faible bande passante, affichant généralement une image de résolution supérieure à la fois. En outre, avant la refonte, Flickr ne tirait pas parti des nombreuses avantages des nouvelles technologies de navigation..
Flickr d'antan Nous avons déjà parlé de la parallaxe sur Tuts + beaucoup de fois auparavant. Lorsqu’on entame une conversation sur les techniques de parallaxe, l’un des premiers problèmes abordés est la performance. Trop souvent, la parallaxe est implémentée de manière naïve, comme une variation de ce qui suit (ou pire).
Remarque: cela suppose que le site utilise jQuery…
Accentsconagua
$ (fenêtre) .on ("scroll", fonction () $ (". élément parallax"). each (fonction () $ (this) .css (marginTop: $ (fenêtre) .scrollTop () * .5;);); Pour un exemple, consultez ce stylo!
Quel est le problème avec cette approche? Tout d'abord, chaque événement de défilement exécute la fonction appelée. Il n'y a pas de cache d'objets JavaScript, pas de limitation de défilement et, surtout, cela ne tire pas parti des transformations CSS3 ou de l'accélération matérielle..
Faire de simples changements peut aider à augmenter considérablement les performances d'interaction alimentée par des événements de défilement, et Flickr l'a fait précisément. Voici les principales fonctions JavaScript utilisées dans la technique de parallaxe. (Nous avons pris la liberté d'ajouter quelques commentaires pour comprendre.)
(function () // configuration des variables à utiliser dans var var useTransform = true; var useParallax = true; var ua = navigator.userAgent; var winLoc = window.location.toString (); // correspondance d'agent utilisateur pour les améliorations progressives var is_webkit = ua.match (/ webkit / i); var is_firefox = ua.match (/ gecko / i); var est \ _newer \ _ie = ua.match (/ msie (9 | ([1-9] [0- 9])) / i); var est \ _older \ _ie = ua.match (/ msie / i) &&! Est \ _newer \ _ie; var est \ _ancient \ _ie = ua.match (/ msie 6 / i); var is_mobile = ua.match (/ mobile / i); // pour voir les performances de la page avec des transformations 2D (au lieu de 3D), visitez le site http://www.flickr.com/#transform=2d var use2DTransform = (ua. match (/ msie 9 / i) || winLoc.match (/ transform \ = 2d / i)); var requestAnimationFrame = null; préfixes var, transform; var parallaxItems = []; var scrollHandler = null; var nœuds; var lastExec = new Date (); // Les deux prochaines vérifications potentiellement utilisées pour le débogage, ou pour des périphériques ou des liens spécifiques. // Pour afficher les performances de la page sans transformation sur), visitez le site http://www.flickr.com/#notransform if (winLoc.match (/ notransform / i)) useTransform = false; // Pour voir la page sans parallaxe, visitez le site http://www.flickr.com/#noparallax if (winLoc.match (/ noparallax / i)) useParallax = false; // Vérifiez les variables de l'agent utilisateur pour décider d'utiliser ou non la parallaxe. if (is_mobile || is \ _ancient \ _ie) useParallax = false; // Si l'URL contient "useraf", utilisez le cadre d'animation de requête if (winLoc.match (/ useraf / i)) requestAnimationFrame = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame); // configuration des préfixes de transformation prefixes = webkit: 'webkitTransform', firefox: 'MozTransform', c'est-à-dire: 'msTransform', w3c: 'transformation'; if (useTransform) if (is_webkit) transform = prefixes.webkit; else if (is_firefox) transform = prefixes.firefox; else if (is \ _newer \ _ie) transform = prefixes.ie; // La fonction principale des éléments de parallaxe // prend un paramètre containerNode, qui est le // parent à position relative de l'image de parallaxe à positionnement absolu. function ParallaxItem (containerNode) // configure des vars pour la mise en cache des valeurs dans un conteneur var, bgElements, offset, bgHeight, containerHeight, maxScrolls, height; // met en cache une instance du conteneur recouverte YUI, similaire à $ (containerNode) dans jQuery container = Y.one (containerNode); // récupère les éléments avec une classe de "parallax-background" à l'intérieur du conteneur. // la page d'accueil n'a qu'un seul élément par conteneur, mais cela pourrait être étendu pour avoir plusieurs éléments bg bgElements = container.all ('. parallax-background'); // fonction pour actualiser les variables pour chaque élément de parallaxe fonction refreshCoords () offset = container.getY (); containerHeight = container.get ('offsetHeight'); bgHeights = []; maxScrolls = []; bgElements.each (fonction (item) height = item.get ('offsetHeight'); bgHeights.push (height); // le défilement maximum de chaque conteneur est le // conteneur du décalageerHeight - hauteur du décalage de l'élément de parallaxe + 2 maxScrolls.push (containerHeight - height + 2);); // fonction de déplacement de parallaxe réelle function refresh (docScrollY) var i, j, scroll, transformParam; i = 0; bgElements.each (function (bgElement) // scroll est défini sur le maximum de maxscroll de l'élément et sur la position de défilement du // document moins le décalage du conteneur actuel // divisé par la hauteur du conteneur multipliée par le défilement max. scroll = -Math.round (((docScrollY - offset) / containerHeight) * maxScrolls [i]); scroll = Math.max (scroll, maxScrolls [i]); var transformParam; if (! Use2DTransform) transformParam = 'translate3d (0px , '+ scroll +' px, 0px) '; else transformParam =' translateY ('+ scroll +' px) '; if (transformation && transformParam) bgElement.setStyle (transformation, transformationParam); bgElement.setStyle ( prefixes.w3c, transformParam); else bgElement.setStyle ('marginTop', scroll + 'px'); i ++;); refreshCoords (); return 'refresh': refresh, 'refreshCoords': refreshCoords // lance la fonction "refresh" de déplacement de parallaxe s'il existe des éléments de parallaxe, // en passant la position de défilement actuelle de la fonction de document refreshParallaxItems () var docScrollY = Y.DOM.docScrollY (); if (! parallaxItems ||! parallaxItems.length) return false; pour (var i = 0, j = parallaxItems.length; i < j; i++) parallaxItems[i].refresh(docScrollY); function scrollWatcher() if (requestAnimationFrame) requestAnimationFrame(refreshParallaxItems); else refreshParallaxItems(); function addParallaxItem(containerNode) parallaxItems.push(new ParallaxItem(containerNode)); if (!scrollHandler) scrollHandler = Y.on('scroll', scrollWatcher); // finally, this actually goes through the parallax items and adds them to memory, // which sets up all of the event watching, etc if (useParallax) nodes = Y.all('#flickr-frames .parallax-item'); nodes.each(function (item) addParallaxItem(item); ); // Whenever a PhotoListView is rendered, // refresh the coordinates of the parallax pieces Y.on('PhotoListView:render', function () var now = new Date(); if (now - lastExec > 250) pour (var i = 0, j = parallaxItems.length; i < j; i++) parallaxItems[i].refreshCoords(); lastExec = now; ); // Load in the coordinates of the parallax pieces when the document loads refreshParallaxItems(); ()); Consultez les commentaires que nous avons ajoutés pour mieux comprendre ce qui se passe ici. Cela peut sembler un peu décourageant, surtout si vous n'êtes pas familier avec les utilitaires JS à nœud YUI de Yahoo! Au lieu de nous occuper de tous les détails de ce code, examinons quelques éléments importants qui importent.
Nous voyons d’abord l’utilisation intensive de la mise en cache des variables. Cela inclut la configuration des hauteurs maximales, des décalages, etc. dans une actualisation. Nous verrons ensuite l’utilisation de l’amélioration progressive pour définir quand utiliser des transformations 3D, 2D ou non. Cela améliore considérablement les performances des nouveaux navigateurs. En outre, les transformations 3D sont prises en charge dans tous les principaux navigateurs actuels (à l'exception d'Opera et Opera Mini), ce qui représente une amélioration significative des performances par le biais de l'accélération matérielle, qui intervient lors de l'utilisation de transformations 3D sur un élément donné. (Consultez cet article pour plus d'informations). Cela aide la page d’accueil à réaliser des cadences de prise de vue beaucoup plus élevées - généralement à 60 ips ou plus.
Il est intéressant de noter que l'équipe de développement de Flickr a laissé des éléments apparemment inutilisés dans le code source, tels que les commutateurs de fonctionnalités basés sur des URL qui permettent d'activer ou de désactiver des éléments tels que la parallaxe et les transformations. Ceci est peut-être utilisé pour certaines redirections de périphériques; c’est peut-être une technique de débogage que l’équipe de développement a oublié de supprimer. Cela pourrait également être une invitation pour les développeurs à jouer avec l'application et à voir les avantages en termes de performances de l'utilisation de ces différentes techniques. Quoi que ce soit, c'est une explosion de jouer avec une fois que vous l'avez trouvé, et n'a pratiquement aucun impact sur les performances.
Encore une note sur l'implémentation de la parallaxe: Flickr a complètement évité d'utiliser la taille de l'arrière-plan pour les conteneurs d'images, ainsi que le dimensionnement "en plein écran", en optant plutôt pour des éléments de conteneur de parallaxe généralement de hauteur minimale. Pourquoi? Performance de taille du fond: couverture est terrible, causant de faibles taux de tramage et généralement une expérience utilisateur dégradée. Au lieu de cela, Flickr a choisi de charger des images d’arrière-plan plus grandes; 2048x850, pour être exact. Cela couvre la largeur de presque tous les écrans et fournit une hauteur suffisante pour une implémentation efficace de la parallaxe. Les repeints de navigateur sont également considérablement réduits.
Dans une fonction d’observation du défilement étranglée, l’appel final à l’action situé au bas de la page d’accueil de Flickr s’effectue lorsque l’utilisateur fait défiler un mur de photos justifiées horizontalement. L'animation est optimisée par des transitions CSS3, notamment un filtre 12px pour le filtre flou, une opacité et une mise à l'échelle. L'appel à l'action comprend une typographie de grande taille (10em ou 144px pour être exact) et un bouton stylé de grande taille, de style CSS3..
Voici le CSS pour le bouton.
/ * Webdesigntuts + note: les préfixes spécifiques au navigateur ont été supprimés * / display: inline-block; remplissage: 0px 2em 5px 2em; taille de police: 2em; hauteur de ligne: 1,75 m; poids de la police: 400; texte-décoration: aucun; arrière-plan: # ff0084; couleur: #fff; box-shadow: 0px 2px 8px rgba (0,0,0,0,5); border-radius: 5px; image d'arrière-plan: gradient linéaire (en bas, rgb (215,0,104) 35%, rgb (243,0,111) 84%); clip d'arrière-plan: padding-box;
Assez simple, mais efficace. Une fois qu'un utilisateur s'est inscrit, le site interne comporte des éléments de même taille, comme le formulaire de téléchargement..
De petites améliorations sur la page d'accueil ont également pour effet d'améliorer l'expérience utilisateur. Par exemple, le curseur mégapixel utilise un uri de données en ligne pour la poignée, tandis que le curseur du curseur utilise uniquement les dégradés CSS et d'autres définitions. Aucune demande http n'est requise pour une partie du curseur autre que le code JavaScript associé..
De très légères ombres de texte sont utilisées sur les en-têtes pour les éloigner un peu des images d’arrière-plan qui leur sont associées. Des couleurs d'arrière-plan semi-transparentes (RGBa) sont utilisées pour la barre de navigation supérieure ainsi que pour les titres du mur d'images. Flickr utilise également des modèles Moustache pour le mur d'images. Tous ces éléments font allusion au fait que Flickr cherche à maintenir un design frontal beaucoup plus avancé..
Voici quelques réflexions sur les choses qui pourraient être meilleures avec le nouveau Flickr ou que vous pourriez prendre en compte dans vos pratiques de développement..
Pour le moment, la stratégie mobile adoptée par Flickr repose sur deux points principaux: les applications natives et un site spécifique aux mobiles. Le site spécifique aux mobiles est beaucoup moins attrayant que la version de bureau. Compte tenu du simple fait que le mobile croît plus rapidement que jamais, cette refonte pourrait et devrait être reconsidérée comme une opportunité d’adopter des stratégies réactives. La version de bureau du site n’est pas idéale à moins de 960 pixels. Cela jette beaucoup de petites tablettes et presque n'importe quel téléphone.
Les meilleures pratiques nous apprennent que les pages d'accueil et les pages de garde appelées à agir, axées sur le marketing, ne sont pas le meilleur endroit pour charger le contenu d'une application. Cependant, certains des scripts chargés sur la nouvelle page d'accueil de Flickr.com sont utilisés dans le reste de l'application. Au lieu de cela, il serait avantageux de créer un fichier JavaScript unique, plus petit, qui repose moins sur la bibliothèque YUI et davantage sur de simples écouteurs d'événements, des sélecteurs et des fonctions AJAX..
Ce fichier JavaScript doit également être réduit au minimum; Cependant, il se peut que ce ne soit pas le cas pour les développeurs qui veulent jeter un coup d'œil à la source. (Voir la légende du développeur à la fin de cet article.)
Le reniflement agent-utilisateur est une mauvaise nouvelle à moins de vérifier minutieusement chaque chaîne avec chaque périphérique (moins pratique qu'utile). Malheureusement, utiliser une simple chaîne telle que "mobile", comme le fait Flickr, ne suffit pas pour dire de manière définitive si nous sommes ou non sur un appareil mobile. Bien sûr, cela peut couvrir un pourcentage important d’appareils, disons même 99%, mais lorsque cela représente 99% des 200 millions de personnes, vous laissez 2 000 000 appareils de côté..
Il est également improbable que l'utilisation de quelque chose qui améliore considérablement les performances, comme les transformations, soit limitée par un simple reniflement de l'agent utilisateur. Au lieu de cela, utiliser une suite de détection de fonctionnalités telle que Modernizr serait plus bénéfique et plus précis des capacités du navigateur de l'utilisateur. Considérant que Modernizr est soutenu par certaines personnes de Google, il n’est pas surprenant de ne pas le voir inclus sur Flickr, mais le concept sous-jacent est simple et les tests sont facilement reproductibles..
Les tags OpenGraph sont essentiels pour partager un site sur Facebook. Le partage d'un site sur Facebook est une fonction de base du Web pour de nombreux utilisateurs. Malheureusement, si un site n'implémente pas spécifiquement les métabalises OpenGraph, l'élément de lien partagé est assez dépourvu sur un fil de nouvelles Facebook..
Si Flickr est effectivement en concurrence avec Facebook, cela peut être un pari que cela les aidera à retourner les gens contre Facebook, ou à dissocier Flickr de Facebook. Ou, cela pourrait simplement être un oubli. Quoi qu'il en soit, cela (ainsi que d'autres utilisateurs) évite de partager Flickr.com avec mes amis Facebook.
D'accord, nous constatons que Flickr (et Tumblr) n'aime pas les er. Mais, il arrive un moment où enlever des lettres de mots devient ennuyeux et ringard, et même difficile à lire. Flickr est sur la ligne. L'utilisation d'éléments tels que "Biggr", "Spectaculr" et "Wherevr" n'améliorera sans doute pas l'image de marque ou l'expérience utilisateur. Flickr est le nom du service. "plus gros" décrit une nouvelle fonctionnalité de ce service. Sinon, pourquoi ne pas changer aussi "suiveur" en "suiveur", ou "développeur" en "developr"? Parce que cela n'a pas de sens et semble étrangement étrange. Pensez à la rédaction publicitaire incroyablement efficace d'Apple; "iPad" ne se traduit pas par une copie du type "Emportez votre iMac avec vous, iAnywhere".
Un article intéressant Yahoo! Inclus dans la source pour Flickr est un appel aux développeurs front-end, avec des nouvelles que Flickr embauche. Ce logo Ascii cool peut être trouvé dans l'étiquette de tête.
ad88 88 88 88 d8 "88" "88 88 88 88 d88888d 88 88, adPPYba, 88, d8 8b, dPPYba, 88 88 88 a8" "" "88, a8" 88P '"Y8 88 88 88 8b 8888 [88 88 88 88 "8a,, aa 88 '" Yba, 88 88 88 88 "" Ybang "' 88 'Y8a 88 Vous lisez. Nous embauchons. http://flickr.com/jobs/
Connu pour son public plus jeune avec une propension à être plus téméraire que, par exemple, les utilisateurs de Blogger, mais moins téméraire que les Redditors, Tumblr occupe une position unique après avoir été acquis par un géant comme Yahoo.!.
Est-ce que Yahoo! tuer la nature libre de la création de contenu de Tumblr? Flickr et Tumblr seront-ils intégrés pour permettre aux utilisateurs de publier automatiquement des photos Flickr sur Tumblr? Ou bien Tumblr continuera-t-il d'exister de manière transparente, avec simplement de nouvelles conditions de service permettant à Yahoo! collecter et utiliser les données des 109 millions de blogs et 51,2 milliards de publications de Tumblr? Cela pourrait être une source incroyable de données pour Yahoo !, qui semble être en mode acquisition, acquérant PlayerScale plusieurs jours après l'acquisition de Tumblr.
Faites-nous savoir ce que vous pensez du nouveau Flickr et de l’avenir de Tumblr sous la direction de Yahoo!, dans les commentaires.!
