Share
Sulla scia dell'acquisizione di Tumblr da parte di Yahoo!, Yahoo! ha implementato una riprogettazione completa di Flickr.com. Ciò è stato accolto da alcune forti critiche e da forti elogi, molti dei quali sono stati attribuiti al nuovo leader di Yahoo !, Marissa Mayer. In questo articolo parleremo delle decisioni di progettazione e di alcuni dettagli di implementazione nella riprogettazione, e apriremo alcune conversazioni sull'acquisizione di Tumblr da parte di Yahoo!.
Il ruolo di Flickr è spesso messo in discussione dai critici di Yahoo !, poiché Facebook lo ha superato come il più popolare servizio di caricamento di foto online. In questa riprogettazione di Flickr, vediamo un interessante insieme di priorità riflesse, di cui parleremo in questa sezione.
Queste priorità riflettono il fatto che Flickr si rivolge a un pubblico di appassionati di fotografia.
Guardando una selezione casuale di foto da Facebook, molto probabilmente vedrai una raccolta di foto "amici in spiaggia" o "selfie". Anche nelle pubblicità di Facebook, vediamo le immagini guidate da un fattore: catturare momenti socialmente guidati.
Lo sceneggiatore Justin Rocket Silverman impara l'arte del "selfie" Tuttavia, guardando la homepage di Flickr, non vediamo una singola immagine che sarebbe considerata principalmente "social". Vediamo invece una selezione di immagini principalmente di natura o animale domestico, con poche altre foto posate. Queste immagini sono meglio comprese come altamente intenzionali, prese dagli appassionati di fotografia.
La home page di Flickr invia pochi messaggi e un singolo invito all'azione. Il messaggio principale è l'innovativo terabyte di spazio gratuito di Flickr per immagini e video. Lo sottolineano nel messaggio di atterraggio principale, "Smile. Ognuno riceve un terabyte gratuito" e più avanti nella seconda diapositiva "Biggr" below the fold, che consente all'utente di vedere quante immagini di una data risoluzione possono caricare su Flickr.
Il cursore megapixel va da 0 a 16 Megapixel. La terza diapositiva spiega che gli utenti possono caricare le loro immagini alla loro risoluzione originale e non aspettarsi alcuna perdita di qualità.
Questi messaggi parlano fortemente agli appassionati di fotografia; disporre di spazio libero sufficiente per caricare immagini di alta qualità è importante per i fotografi. Al contrario, Facebook non comunica alcuna implicanza di qualità o spazio al caricamento delle immagini.
Il nuovo Flickr è iper-focalizzato sulle esperienze foto-centriche. Questo in genere pone gli account utente come un elemento di contenuto secondario. Ad esempio, quando un utente accede, la pagina "home" mostra un feed di immagini e le loro interazioni associate da altri utenti. I gruppi dell'utente connesso possono essere visti a destra. Cliccando su una foto si apre una lightbox navigabile.
Flickr ha anche creato una nuova esperienza di presentazione. La barra di ricerca si concentra sui caricamenti degli utenti (piuttosto che sui "profili" dell'utente) per impostazione predefinita. Le prossime due opzioni sono il tuo photostream personale, quindi le tue "foto dei contatti". Infine, il tipo di ricerca può essere cambiato in gruppi e infine per i membri.
Come effetto secondario dell'iper-focus di Flickr sulla fotografia e delle persone a cui importa, possiamo rapidamente vedere che l'obiettivo di Flickr non è quello di competere con Facebook. Invece, è diventato il servizio di fotocopie per l'appassionato di fotografia medio e il fotografo professionista di carriera per archiviare e discutere foto.
Questo non è per diminuire le interazioni abilitate dalla nuova riprogettazione. In effetti, l'interazione e la conversazione sono incoraggiate più del precedente Flickr, che era principalmente incentrato sul mostrare ad ogni singolo utente le loro foto caricate più di recente. Ma le interazioni sociali di Flickr ruotano interamente attorno le foto; infatti, nella pagina del profilo di un singolo utente, non esiste un "muro". Invece, c'è un flusso di foto caricate da quell'utente, che possono essere facilmente lanciate in una presentazione. Se ti piace un determinato utente, puoi "seguirlo" (Tumblr, chiunque?), Che porterà le foto di quell'utente e i commenti associati al tuo feed home connesso.
Gli utenti possono accedere a FlickrMail, ma solo se hanno persone aggiunte ai propri Contatti; inoltre, l'accesso a FlickrMail è in qualche modo nascosto.
I gruppi possono pubblicare "discussioni" molto semplici, che sono come post di un forum; tuttavia, l'ulteriore comunicazione è relativamente limitata ai commenti sulle foto.
Flickr non è confuso o non focalizzato; invece, è chiaramente incentrato sulla creazione di un luogo in cui parlare e memorizzare le fotografie.
Come è consuetudine con la serie "Come hanno fatto", passeremo un po 'di tempo a parlare degli aspetti tecnici della nuova implementazione. Questa sezione non riguarda la strategia generale o se sia efficace o meno; invece, questa sezione è ricca di suggerimenti e trucchi basati sull'implementazione di Flickr.
Il design di Flickr non ha visto un aggiornamento significativo per circa sette anni. A quel tempo, ci sono stati grandi progressi nel campo dell'informatica, incluso un accesso molto più ampio alla banda larga, un aumento generale della velocità della banda larga e un massiccio spostamento verso l'accessibilità della mobilità e dei dispositivi multipli. Per questo motivo, Flickr del 2012 sembrava piuttosto datato, principalmente basato su un focus di miniature a larghezza di banda ridotta, generalmente mostrando un'immagine a risoluzione più alta alla volta. Inoltre, Flickr prima della riprogettazione non ha approfittato di molte delle nuove tecnologie del browser.
Flickr di ieri Abbiamo pubblicato sulla parallasse su Tuts + un sacco di volte prima. Quando si apre una conversazione sulle tecniche di parallasse, uno dei primi problemi affrontati è la prestazione. Troppo spesso, la parallasse è implementata in modo ingenuo, come alcune variazioni dei seguenti (o peggio).
Nota: questo presuppone che il sito stia usando jQuery ...
Accentsconagua
$ (window) .on ("scroll", function () $ (". parallax-item"). each (function () $ (this) .css (marginTop: $ (window) .scrollTop () * .5););); Per un esempio, dai un'occhiata a questa penna!
Cosa c'è di sbagliato in questo approccio? Innanzitutto, ogni evento di scorrimento esegue la funzione chiamata. Non c'è memorizzazione nella cache di oggetti JavaScript, nessuna limitazione di scorrimento e, cosa importante, questo non sfrutta le trasformazioni CSS3 o l'accelerazione hardware.
Apportare modifiche semplici può aiutare a incrementare sensibilmente le prestazioni nell'interazione basata sugli eventi di scorrimento e Flickr ha fatto proprio questo. Ecco le principali funzioni JavaScript utilizzate nella tecnica della parallasse. (Ci siamo presi la libertà di aggiungere alcuni commenti per la comprensione).
(function () // impostazione delle variabili da utilizzare in var useTransform = true; var useParallax = true; var ua = navigator.userAgent; var winLoc = window.location.toString (); // useragent matching per i miglioramenti progressivi var is_webkit = ua.match (/ webkit / i); var is_firefox = ua.match (/ gecko / i); var è \ _newer \ _ie = ua.match (/ msie (9 | ([1-9] [0- 9])) / i); var è \ _older \ _ie = ua.match (/ msie / i) &&! È \ _newer \ _ie; var è \ _ancient \ _ie = ua.match (/ msie 6 / i); var is_mobile = ua.match (/ mobile / i); // per vedere le prestazioni della pagina con le trasformazioni 2d (anziché 3d), visitare http://www.flickr.com/#transform=2d var use2DTransform = (ua. match (/ msie 9 / i) || winLoc.match (/ transform \ = 2d / i)); var requestAnimationFrame = null; var prefissi, transform; var parallaxItems = []; var scrollHandler = null; var nodi; var lastExec = new Date (); // I prossimi due controlli potenzialmente usati per il debug o per dispositivi o collegamenti specifici // Per vedere le prestazioni della pagina senza trasformazioni (implementate margin-top) on), visitare http://www.flickr.com/#notransform if (winLoc.match (/ notransform / i)) useTransform = false; // per vedere la pagina senza parallasse, visitare http://www.flickr.com/#noparallax if (winLoc.match (/ noparallax / i)) useParallax = false; // Controlla le variabili degli user agent per decidere se usare o meno la parallasse. if (is_mobile || is \ _ancient \ _ie) useParallax = false; // Se l'url ha "useraf", usa frame di animazione della richiesta if (winLoc.match (/ useraf / i)) requestAnimationFrame = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame); // impostazione prefissi di trasformazione prefixes = webkit: 'webkitTransform', firefox: 'MozTransform', ovvero: 'msTransform', w3c: 'transform'; if (useTransform) if (is_webkit) transform = prefixes.webkit; else if (is_firefox) transform = prefixes.firefox; else if (is \ _newer \ _ie) transform = prefixes.ie; // La funzione principale per gli articoli di parallasse // assume un parametro containerNode, che è il parent padre relativo posizionato dell'immagine di parallasse posizionata in modo assoluto. function ParallaxItem (containerNode) // imposta alcune vars per i valori di caching in var container, bgElements, offset, bgHeight, containerHeight, maxScrolls, height; // memorizza nella cache un'istanza YUI del contenitore, simile a $ (containerNode) in jQuery container = Y.one (containerNode); // ottiene gli elementi con una classe di "parallax-background" all'interno del contenitore. // la homepage ha solo un elemento per contenitore, ma questo potrebbe scalare per avere più elementi di bg bgElements = container.all ('. parallax-background'); // funzione per aggiornare le variabili per ciascuna funzione di articolo parallasse refreshCoords () offset = container.getY (); containerHeight = container.get ('offsetHeight'); bgHeights = []; maxScrolls = []; bgElements.each (function (item) height = item.get ('offsetHeight'); bgHeights.push (height); // scroll massimo di ogni container è // offset'sHeight di un container - altezza offset parallax + 2 maxScrolls.push (containerHeight - height + 2);); // l'aggiornamento della funzione della funzione di parallasse effettiva (docScrollY) var i, j, scroll, transformParam; i = 0; bgElements.each (function (bgElement) // scroll è impostato sul massimo del maxscroll dell'elemento e // sulla posizione di scorrimento del documento meno l'offset del contenitore corrente // diviso per l'altezza del contenitore moltiplicato per lo scroll massimo. 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 (transform && transformParam) bgElement.setStyle (transform, transformParam); bgElement.setStyle ( prefixes.w3c, transformParam); else bgElement.setStyle ('marginTop', scroll + 'px'); i ++;); refreshCoords (); return 'refresh': refresh, 'refreshCoords': refreshCoords // questo esegue la funzione "refresh" del parallasse del parallax se ci sono elementi di parallasse, // passando nella posizione di scroll corrente della funzione del documento refreshParallaxItems () var docScrollY = Y.DOM.docScrollY (); if (! parallaxItems ||! parallaxItems.length) return false; per (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) per (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(); ()); Controlla i commenti che abbiamo aggiunto per avere una comprensione più completa di ciò che sta accadendo qui. Questo può sembrare un po 'scoraggiante, specialmente se non si ha familiarità con le utility JS del nodo YUI di Yahoo !. Invece di rimanere intrappolati in tutti i dettagli di questo codice, diamo un'occhiata ad alcuni pezzi importanti che contano.
Innanzitutto vediamo l'uso estensivo del caching variabile. Ciò include l'impostazione di altezze massime, offset, ecc. In un aggiornamento. Successivamente, vediamo l'uso del miglioramento progressivo per definire quando utilizzare trasformazioni 3D, 2D o nessuna. Ciò migliora notevolmente le prestazioni per i nuovi browser. Inoltre, le trasformazioni 3D sono supportate in tutti i principali browser attuali (ad eccezione di Opera e Opera Mini), il che significa un significativo miglioramento delle prestazioni grazie all'accelerazione hardware, che interviene quando si utilizzano trasformazioni 3D su un determinato elemento. (Controlla questo articolo per ulteriori informazioni). Questo aiuta la homepage a realizzare framerate molto più alti - di solito pari o superiore a 60fps.
È interessante notare che il team di sviluppo di Flickr ha lasciato alcuni pezzi apparentemente inutilizzati nel codice sorgente, come gli switch di funzionalità basati su url che abilitano o disabilitano cose come la parallasse e le trasformazioni. Forse questo è usato per alcuni reindirizzamenti di dispositivo; questa potrebbe essere una tecnica di debug che il team di sviluppo ha dimenticato di eliminare. Potrebbe anche essere un richiamo agli sviluppatori per giocare con l'applicazione e vedere i vantaggi prestazionali dell'uso di queste diverse tecniche. Qualunque cosa sia, è uno scherzo giocare con una volta che lo trovi, e non ha praticamente alcun impatto sulle prestazioni.
Ancora una nota sull'implementazione della parallasse: Flickr ha completamente evitato di utilizzare la dimensione di sfondo per i contenitori di immagini e ha evitato anche il ridimensionamento a "schermo intero", optando invece per elementi di parallasse generalmente min-height. Perché? Performance di background-size: copertina è terribile, causa bassi framerate e generalmente un'esperienza utente degradata. Invece, Flickr ha scelto di caricare immagini di sfondo più grandi; 2048x850, per essere precisi. Questo copre la larghezza di quasi tutti gli schermi e fornisce un'altezza sufficiente per eseguire un'implementazione di parallasse efficace. Anche i rinvii del browser vengono ridotti in modo significativo.
In una funzione di osservazione a scorrimento limitata, l'ultimo invito all'azione nella parte inferiore della home page di Flickr passa in secondo piano mentre l'utente scorre su un muro di foto giustificate orizzontalmente dagli utenti. L'animazione è alimentata da transizioni CSS3, tra cui un filtro sfocatura Webkit 12px, opacità e ridimensionamento. L'invito all'azione include una tipografia di grandi dimensioni (10em o 144px per la precisione) e un pulsante in stile CSS3 opportunamente grande.
Ecco il CSS per il pulsante.
/ * Webdesigntuts + note: prefissi specifici per browser rimossi * / display: inline-block; imbottitura: 0px 2em 5px 2em; font-size: 2em; altezza della linea: 1.75em; font-weight: 400; decorazione del testo: nessuna; sfondo: # ff0084; colore: #fff; box-shadow: 0px 2px 8px rgba (0,0,0,0,5); border-radius: 5px; background-image: linear-gradient (bottom, rgb (215,0,104) 35%, rgb (243,0,111) 84%); sfondo-clip: padding-box;
Abbastanza semplice, ma efficace. Il sito interno una volta che un utente si è iscritto ha elementi altrettanto grandi, come il modulo di caricamento.
Piccoli miglioramenti in tutta la homepage funzionano anche per migliorare l'esperienza dell'utente. Ad esempio, il cursore megapixel utilizza un uri di dati in linea per il manico, mentre il cursore a scorrimento utilizza esclusivamente gradienti css e altre definizioni. Non sono richieste richieste HTTP per nessuna parte del cursore, oltre al suo JavaScript associato.
Sulle intestazioni vengono utilizzate ombre di testo molto lievi per sollevarle un po 'dalle immagini di sfondo associate. I colori di sfondo semitrasparenti (RGBa) vengono utilizzati per la barra di navigazione superiore e per i titoli dei muri immagine. Flickr usa anche i modelli di baffi per il muro di immagini. Tutti questi elementi alludono al fatto che Flickr sta ottenendo una spinta verso il mantenimento di un design front-end molto più avanzato.
Ecco alcuni pensieri su cose che potrebbero essere migliori con il nuovo Flickr o che potresti prendere in considerazione nelle tue pratiche di sviluppo.
In questo momento, la strategia mobile adottata da Flickr si basa su due punti principali: applicazioni native e un sito specifico per dispositivi mobili. Il sito specifico per cellulari è molto meno attraente della versione desktop. Considerando il semplice fatto che il mobile sta crescendo più velocemente che mai, questa riprogettazione potrebbe e dovrebbe essere riconsiderata come un'opportunità per adottare strategie reattive. La versione desktop del sito non è l'ideale per qualcosa di inferiore a 960px. Questo elimina molti tablet più piccoli e quasi tutti i telefoni.
Le best practice ci dicono che home page di invito all'azione e inviti al marketing e pagine splash non sono il posto migliore per caricare il contenuto dell'applicazione. Tuttavia, alcuni degli script caricati nella nuova home page di Flickr.com vengono utilizzati nel resto dell'applicazione. Sarebbe utile, invece, creare un singolo file JavaScript più piccolo che si basi meno sulla libreria YUI e altro su semplici listener di eventi, selettori e funzioni AJAX.
Anche quel file JavaScript deve essere minimizzato; tuttavia, potrebbe essere il caso che non sia minimizzato per il gusto degli sviluppatori che vogliono dare un'occhiata all'origine. (Vedi la callout dello sviluppatore alla fine di questo articolo.)
Lo sniffing degli user-agent è una cattiva notizia a meno che non controlli accuratamente ogni stringa con ogni dispositivo (meno pratico di quanto sia utile). Sfortunatamente, usare una stringa semplice come "mobile" come fa Flickr qui non è sufficiente per dire definitivamente se siamo su un dispositivo mobile o meno. Certo, questo può coprire una percentuale significativa di dispositivi, diciamo anche il 99%, ma quando si tratta del 99% di 200 milioni di persone, stai lasciando fuori 2.000.000 di dispositivi.
È anche improbabile che l'uso di qualcosa che migliora drasticamente le prestazioni, come le trasformazioni, dovrebbe essere limitato dal semplice sniffing UA. Invece, l'uso di una suite di rilevamento delle caratteristiche come Modernizr sarebbe più utile e più definitivo delle capacità del browser dell'utente. Visto che Modernizr è supportato da alcuni degli utenti di Google, non sorprende che non lo vediamo incluso su Flickr, ma il concetto di base è semplice ei test sono facilmente replicabili.
I tag OpenGraph sono essenziali per condividere un sito su Facebook. La condivisione di un sito su Facebook è una funzione di base del web per molti utenti. Sfortunatamente, se un sito non implementa in modo specifico i meta tag OpenGraph, l'elemento di collegamento condiviso appare abbastanza nudo su un feed di notizie di Facebook.
Se Flickr è effettivamente in competizione con Facebook, questo potrebbe essere un azzardo che li aiuterà a trasformare le persone contro Facebook, o a separare completamente Flickr da Facebook. O potrebbe essere solo una svista. Ad ogni modo, mi fa (e probabilmente altri utenti) evitare di condividere Flickr.com con i miei amici di Facebook.
Ok, capiamo che Flickr (e Tumblr) non gli piacciono. Ma arriva un punto in cui si ottiene la rimozione delle lettere dalle parole fastidioso e scadente, e anche difficile da leggere. Flickr sta bordeggiando su quella linea. L'uso di cose come "Biggr", "Spectaculr" e "Wherevr" probabilmente non migliorano il marchio o l'esperienza utente. Flickr è il nome del servizio; "più grande" descrive una nuova funzionalità di quel servizio. Altrimenti, perché non cambiare anche "follower" in "followr", o "developer" in "developr"? Perché non ha senso e suona stranamente straniante. Considera il copywriting pubblicitario incredibilmente efficace di Apple; "iPad" non si traduce in copia come "Porta iMac con te, iAnywhere".
Un pezzo interessante di Yahoo! incluso nella fonte per Flickr è un richiamo agli sviluppatori front-end, con le notizie che Flickr sta assumendo. Questo logo ascii può essere trovato nell'etichetta principale.
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" "Ybbd8" '88' Y8a 88 Stai leggendo. Stiamo assumendo. http://flickr.com/jobs/
Conosciuto per il suo pubblico più giovane con una propensione ad essere più sfacciato di, ad esempio, gli utenti di Blogger, ma meno sfacciato di Redditors, Tumblr si trova in una posizione unica essendo stata acquisita da un gigante come Yahoo!.
Sarà Yahoo! uccidere la natura in forma libera della creazione di contenuti di Tumblr? Flickr e Tumblr saranno integrati, in modo che gli utenti possano pubblicare automaticamente le foto di Flickr su Tumblr? Oppure Tumblr continuerà ad esistere in modo trasparente, con semplicemente nuovi termini di servizio che consentono a Yahoo! raccogliere e utilizzare i dati di Tumblr da 109 milioni di blog e 51,2 miliardi di post? Potrebbe essere un'incredibile fonte di dati per Yahoo !, che sembrano essere in modalità acquisizione, acquisendo PlayerScale giorni dopo aver acquisito Tumblr.
Facci sapere cosa pensi del nuovo Flickr e cosa pensi del futuro di Tumblr sotto la direzione di Yahoo !, nei commenti!
