Share
Vers op de hielen van Yahoo! 's overname van Tumblr, Yahoo! heeft een compleet herontwerp van Flickr.com geïmplementeerd. Dit werd met enige sterke kritiek en sterke lof ontvangen, waarvan een groot deel is toegeschreven aan Yahoo! 'S nieuwe leider, Marissa Mayer. In dit artikel zullen we het hebben over de ontwerpbeslissingen en enkele implementatiedetails in het herontwerp, en we zullen een gesprek openen over de overname van Tumblr door Yahoo!.
De rol van Flickr wordt vaak in twijfel getrokken door critici van Yahoo !, zoals Facebook het heeft overtroffen als de meest populaire dienst voor het online uploaden van foto's. In dit herontwerp van Flickr zien we een interessante reeks prioriteiten weerspiegeld, die we in deze sectie zullen bespreken.
Deze prioriteiten weerspiegelen dat Flickr gericht is op een publiek van fotografieliefhebbers.
Als je naar een willekeurige selectie van foto's op Facebook kijkt, zie je waarschijnlijk een verzameling vrienden-aan-het-strand of "selfie" -foto's. Zelfs in de advertenties van Facebook zien we beelden die worden aangedreven door één factor: het vastleggen van sociaal gedreven momenten.
Schrijver Justin Rocket Silverman leert de kunst van de 'selfie' Als we echter naar de startpagina van Flickr kijken, zien we geen enkele afbeelding die primair als 'sociaal' wordt beschouwd. We zien in plaats daarvan een selectie van voornamelijk natuurfoto's of dierenfoto's, met een paar andere geposeerde foto's. Deze afbeeldingen worden het best begrepen als zeer opzettelijk, gemaakt door fotografieliefhebbers.
De startpagina van Flickr duwt een paar berichten en een enkele oproep tot actie. Het belangrijkste bericht is Flickr's baanbrekende gratis terabyte aan ruimte voor afbeeldingen en video's. Ze benadrukken dit in de primaire bestemmingsboodschap: "Smile, iedereen krijgt een gratis terabyte" en verder in de tweede "Biggr" -dia onder de vouw, waardoor de gebruiker kan zien hoeveel afbeeldingen van een bepaalde resolutie ze naar Flickr kunnen uploaden.
De megapixelslider gaat van 0 tot 16 Megapixels. In de derde dia wordt uitgelegd dat gebruikers hun afbeeldingen in de oorspronkelijke resolutie kunnen uploaden en geen kwaliteitsverlies kunnen verwachten.
Deze berichten spreken sterk aan fotografieliefhebbers; het hebben van voldoende vrije ruimte om afbeeldingen van hoge kwaliteit te uploaden is van belang voor fotografen. Facebook communiceert daarentegen geen enkele implicatie van kwaliteit of ruimte voor het uploaden van afbeeldingen.
De nieuwe Flickr is hyper gefocust op foto-centrische ervaringen. Dit plaatst gebruikersaccounts over het algemeen als secundair inhoudselement. Wanneer een gebruiker bijvoorbeeld inlogt, toont de "home" -pagina een feed met afbeeldingen en de bijbehorende interacties van andere gebruikers. De groepen van de aangemelde gebruiker kunnen rechts worden weergegeven. Als u op een foto klikt, wordt een navigeerbare lightbox geopend.
Flickr heeft ook een nieuwe ervaring met diavoorstellingen gecreëerd. De zoekbalk is standaard gericht op gebruikersuploads (in plaats van gebruikersprofielen). De volgende twee opties zijn uw persoonlijke fotostream en vervolgens de foto's van uw "contacten". Ten slotte kan het zoektype worden gewijzigd in groepen en ten slotte voor leden.
Als een secundair effect van Flickr's hyperfocus op fotografie en de mensen die erom geven, kunnen we snel zien dat Flickr's doel niet is om te concurreren met Facebook. In plaats daarvan moet het worden de fotografie-cloudservice voor de gemiddelde fotografieliefhebber en de professionele carrière-fotograaf om foto's op te slaan en te bespreken.
Dit moet niet de interacties verminderen die mogelijk worden gemaakt door het nieuwe herontwerp. In feite wordt interactie en conversatie meer aangemoedigd dan de vorige Flickr, die er voornamelijk op gericht was om elke individuele gebruiker zijn meest recent geüploade foto's te laten zien. Maar de sociale interacties van Flickr draaien volledig rond de foto's; in feite is er op de profielpagina van een enkele gebruiker geen "muur". In plaats daarvan is er een stroom van de geüploade foto's van die gebruiker, die gemakkelijk in een diavoorstelling kan worden gestart. Als u van een bepaalde gebruiker houdt, kunt u deze 'volgen' (Tumblr, iemand?), Die de foto's en bijbehorende opmerkingen van die gebruiker naar uw ingelogde homefeed brengt.
Gebruikers hebben toegang tot FlickrMail, maar alleen als ze mensen hebben toegevoegd aan hun contacten; bovendien is de toegang tot FlickrMail enigszins begraven.
Groepen kunnen zeer eenvoudige "discussies" posten, die op forumberichten lijken; verdere communicatie is echter relatief beperkt tot opmerkingen over foto's.
Flickr is niet verward of ongericht; in plaats daarvan is het duidelijk gericht op het creëren van een plek om over te praten en foto's op te slaan.
Zoals gebruikelijk is met de serie 'Hoe ze het deden', gaan we wat tijd besteden aan het praten over de technische aspecten van de nieuwe implementatie. Dit gedeelte gaat niet over de algemene strategie of het al dan niet effectief is; in plaats daarvan zit deze sectie boordevol tips en trucs op basis van de implementatie van Flickr.
Het ontwerp van Flickr heeft ongeveer zeven jaar geen belangrijke update gezien. In die tijd zijn er grote vorderingen gemaakt op het gebied van informatica, waaronder een veel bredere toegang tot breedband, een algemene toename van breedbandsnelheden en een enorme verschuiving naar mobiliteit en toegankelijkheid voor meerdere apparaten. Om deze reden leek Flickr van 2012 behoorlijk verouderd, voornamelijk gebaseerd op een lage-bandbreedte thumbnail-focus, over het algemeen het weergeven van een hogere resolutie afbeelding tegelijk. Bovendien heeft de Flickr vóór het herontwerp geen gebruik gemaakt van veel van de voordelen van nieuwere browsertechnologieën.
Flickr van weleer We hebben al meerdere keren over parallax op Tuts + gepost. Bij het openen van een gesprek over parallaxtechnieken, is een van de eerste problemen die worden aangepakt, prestatie. Te vaak wordt parallax geïmplementeerd op naïeve manieren, zoals een variatie op de volgende (of erger).
Notitie: dit gaat ervan uit dat de site jQuery gebruikt ...
Accentsconagua
$ (window) .on ("scroll", functie () $ (".parallax-item"). each (function () $ (this) .css (marginTop: $ (window) .scrollTop () * .5););); Bekijk bijvoorbeeld deze pen!
Wat is er mis met deze aanpak? Eerst voert elke scroll-gebeurtenis de functie uit die wordt opgeroepen. Er is geen caching van JavaScript-objecten, geen scroll-throttling en, wat belangrijker is, dit maakt geen gebruik van CSS3-transformaties of hardwareversnelling.
Door eenvoudige wijzigingen aan te brengen, kunt u de prestaties van door scrollen door gebeurtenissen aangedreven interactie drastisch verbeteren, en Flickr heeft precies dat gedaan. Hier zijn de belangrijkste JavaScript-functies die worden gebruikt in de parallax-techniek. (We hebben de vrijheid genomen om enkele opmerkingen toe te voegen terwille van het begrip.)
(functie () // instellingsvariabelen die overal in var gebruikt worden useTransform = true; var useParallax = true; var ua = navigator.userAgent; var winLoc = window.location.toString (); // useragent-overeenkomst voor progressieve verbeteringen var is_webkit = ua.match (/ webkit / i); var is_firefox = ua.match (/ gecko / i); var is \ _newer \ _ie = ua.match (/ msie (9 | ([1-9] [0- 9])) / i); var is \ _older \ _ie = ua.match (/ msie / i) &&! Is \ _newer \ _ie; var is \ _ancient \ _ie = ua.match (/ msie 6 / i); var is_mobile = ua.match (/ mobile / i); // om de prestaties van de pagina te bekijken met 2D-transformaties (in plaats van 3d), ga naar http://www.flickr.com/#transform=2d var use2DTransform = (ua. match (/ msie 9 / i) || winLoc.match (/ transform \ = 2d / i)); var requestAnimationFrame = null; var-prefixen, transform; var parallaxItems = []; var scrollHandler = null; var nodes; var lastExec = new Date (); // De volgende twee controles die mogelijk worden gebruikt voor foutopsporing of voor specifieke apparaten of koppelingen // Om de prestaties van de pagina zonder transformaties te zien (margin-top implementati on), bezoek http://www.flickr.com/#notransform if (winLoc.match (/ notransform / i)) useTransform = false; // om de pagina zonder parallax te bekijken, ga naar http://www.flickr.com/#noparallax if (winLoc.match (/ noparallax / i)) useParallax = false; // Controleer variabelen van gebruikersagenten om te beslissen om parallax al dan niet te gebruiken. if (is_mobile || is \ _ancient \ _ie) useParallax = false; // Als de URL "useraf" bevat, gebruik dan request-animatieframe if (winLoc.match (/ useraf / i)) requestAnimationFrame = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame); // instellen van prefixen van transformaties prefixen = webkit: 'webkitTransform', firefox: 'MozTransform', dwz: '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; // De hoofdfunctie voor parallaxitems // neemt een containerNode -parameter, de relatieve-gepositioneerde // parent van de absoluut gepositioneerde parallax-afbeelding. function ParallaxItem (containerNode) // stel enkele vars in voor het cachen van waarden in var container, bgElements, offset, bgHeight, containerHeight, maxScrolls, height; // cache een YUI-verpakt exemplaar van de container, vergelijkbaar met $ (containerNode) in jQuery-container = Y.one (containerNode); // haal de elementen met een klasse van "parallax-achtergrond" in de container. // de homepage heeft slechts één element per container, maar deze kan worden geschaald om meerdere bg-items te hebben bgElements = container.all ('. parallax-background'); // functie om variabelen voor elke parallax-itemfunctie te vernieuwen refreshCoords () offset = container.getY (); containerHeight = container.get ('offsetHeight'); bgHeights = []; maxScrolls = []; bgElements.each (functie (item) height = item.get ('offsetHeight'); bgHeights.push (height); // max scroll van elke container is de // container's offsetHeight - offset-hoogte van parallaxitem + 2 maxScrolls.push (containerhoogte - hoogte + 2);); // de actuele parallax bewegingsfunctie functie verversen (docScrollY) var i, j, scroll, transformParam; i = 0; bgElements.each (functie (bgElement) // scroll is ingesteld op het maximum van de maxscroll van het element en de scrolpositie van het document van het // minus de offset van de huidige container // gedeeld door de hoogte van de container vermenigvuldigd met de 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 (transform && transformParam) bgElement.setStyle (transform, transformParam); bgElement.setStyle ( prefixes.w3c, transformParam); else bgElement.setStyle ('marginTop', scroll + 'px'); i ++;); refreshCoords (); return 'refresh': refresh, 'refreshCoords': refreshCoords // dit voert de "refresh" -functie van de parallax-mover uit als er parallax-items zijn // passeren in de huidige schuifpositie van de documentfunctie refreshParallaxItems () var docScrollY = Y.DOM.docScrollY (); if (! parallaxItems ||! parallaxItems.length) return false; voor (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) voor (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(); ()); Bekijk de opmerkingen die we hebben toegevoegd om meer inzicht te krijgen in wat hier gebeurt. Dit lijkt misschien een beetje angstaanjagend, vooral als je niet bekend bent met Yahoo! 'S YUI-knooppunt JS-hulpprogramma's. In plaats van verstrikt te raken in alle details van deze code, laten we eens kijken naar enkele specifieke belangrijke stukken die er toe doen.
Eerst zien we het uitgebreide gebruik van variabele caching. Dit omvat het instellen van max. Hoogte, verschuivingen, enz. Tijdens een verversing. Vervolgens zien we het gebruik van progressieve verbetering om te definiëren wanneer 3D-, 2D- of geen transformaties moeten worden gebruikt. Dit verbetert de prestaties voor nieuwere browsers aanzienlijk. Bovendien worden 3D-transformaties ondersteund in alle huidige grote browsers (behalve Opera en Opera Mini), wat een aanzienlijke prestatieverbetering betekent door middel van hardwareversnelling, die van start gaat wanneer 3D-transformaties op een bepaald element worden gebruikt. (Bekijk dit artikel voor meer informatie). Dit helpt de homepage om veel hogere framerates te realiseren - meestal op of boven 60 fps.
Het is interessant om op te merken dat het Flickr-dev-team een aantal schijnbaar ongebruikte stukken in de broncode achterliet, zoals op url gebaseerde functionaliteitswitches waarmee dingen zoals parallax en transformaties kunnen worden in- of uitgeschakeld. Misschien wordt dit gebruikt voor bepaalde apparaatomleidingen; dit kan een foutopsporingstechniek zijn geweest die het dev-team vergeten is uit te schakelen. Het kan ook een uitkomst zijn voor ontwikkelaars om met de applicatie te spelen en de voordelen van het gebruik van deze verschillende technieken te zien. Wat het ook is, het is geweldig om mee te spelen als je het eenmaal hebt gevonden, en heeft vrijwel geen invloed op de prestaties.
Nog een opmerking over de parallaximplementatie: Flickr heeft het gebruik van de achtergrondgrootte voor de beeldcontainers volledig vermeden en heeft ook de "full-screen" dimensionering vermeden, door in plaats daarvan te kiezen voor over het algemeen min-height parallax containerelementen. Waarom? Prestaties van background-size: deksel is verschrikkelijk, veroorzaakt lage framerates en over het algemeen een gedegradeerde gebruikerservaring. In plaats daarvan heeft Flickr ervoor gekozen om grotere achtergrondafbeeldingen te laden; 2048x850, om precies te zijn. Dit bestrijkt de breedte van vrijwel elk scherm en biedt voldoende hoogte om een effectieve parallaximplementatie uit te voeren. Browser-repaints worden ook aanzienlijk verminderd.
In een gesmoorde functie voor bladeren bekijken wordt de laatste call-to-action onder aan de Flickr-startpagina doorgevoerd wanneer de gebruiker over een wand van horizontaal gemarkeerde foto's van gebruikers bladert. De animatie wordt mogelijk gemaakt door CSS3-overgangen, waaronder een 12px filterfilter voor webkit, dekking en schaalvergroting. De call-to-action bevat grote typografie (10em of 144px om precies te zijn) en een behoorlijk grote knop in CSS3-stijl.
Hier is de CSS voor de knop.
/ * Webdesigntuts + opmerking: browser-specifieke prefixen verwijderd * / weergeven: inline-block; opvulling: 0px 2em 5px 2em; font-size: 2em; regelhoogte: 1.75em; font-gewicht: 400; tekstdecoratie: geen; achtergrond: # ff0084; kleur: #fff; box-shadow: 0px 2px 8px rgba (0,0,0,0.5); grensradius: 5px; achtergrondafbeelding: lineaire gradiënt (bodem, rgb (215,0,104) 35%, rgb (243,0,111) 84%); achtergrond-clip: padding-box;
Vrij eenvoudig, maar effectief. De interne site zodra een gebruiker zich heeft aangemeld, heeft eveneens grote elementen, zoals het uploadformulier.
Kleine verbeteringen op de homepagina werken ook om de gebruikerservaring te verbeteren. De megapixelslider gebruikt bijvoorbeeld een inline gegevens-uri voor de handle, terwijl de schuifregelaar alleen css-gradiënten en andere definities gebruikt. Er zijn geen http-verzoeken vereist voor enig deel van de schuifregelaar, anders dan het bijbehorende JavaScript.
Er worden zeer kleine tekstschaduwen op de kopteksten gebruikt om ze een beetje van hun bijbehorende achtergrondafbeeldingen te tillen. Semi-transparante (RGBa) achtergrondkleuren worden gebruikt voor de bovenste navigatiebalk en de wandtitels van afbeeldingen. Flickr gebruikt ook Moustache-sjablonen voor de afbeeldingsmuur. Al deze elementen verwijzen naar het feit dat Flickr een duwtje in de richting van het onderhouden van een veel meer toonaangevend front-end ontwerp krijgt.
Hier zijn een paar gedachten over dingen die beter zouden kunnen zijn met de nieuwe Flickr, of die u in uw ontwikkelingspraktijken kunt beschouwen.
Op dit moment vertrouwt de mobiele strategie van Flickr op twee hoofdpunten: native applicaties en een mobiele specifieke site. De mobiele specifieke site is veel minder aantrekkelijk dan de desktopversie. Gezien het simpele feit dat mobiel sneller dan ooit groeit, kan en moet dit herontwerp worden heroverwogen als een kans om responsieve strategieën te gebruiken. De desktopversie van de site is minder dan ideaal voor alles onder de 960px. Dit gooit veel kleinere tablets en bijna elke telefoon weg.
Volgens best practices zijn marketinggebaseerde call-to-action-startpagina's en splash-pagina's niet de beste plek om de app-inhoud te laden. Sommige van de scripts die zijn geladen op de nieuwe startpagina van Flickr.com worden echter in de rest van de toepassing gebruikt. Het zou handig zijn om in plaats daarvan een enkel, kleiner JavaScript-bestand te maken dat minder afhankelijk is van de YUI-bibliotheek, en meer op eenvoudige gebeurtenislisteners, selectors en AJAX-functies.
Dat JavaScript-bestand moet ook verkleind worden; het kan echter zijn dat het niet wordt verkleind omwille van ontwikkelaars die naar de bron willen kijken. (Zie de ontwikkelaarscall aan het einde van dit artikel.)
Snuiven van gebruikersagenten is slecht nieuws, tenzij u elke reeks grondig controleert met elk apparaat (minder praktisch dan handig). Helaas is het gebruik van een eenvoudige reeks zoals "mobiel" zoals Flickr hier doet niet genoeg om definitief te zeggen of we wel of niet op een mobiel apparaat zijn. Natuurlijk kan dit een aanzienlijk percentage apparaten dekken, laten we zeggen zelfs 99%, maar als dat 99% van de 200 miljoen mensen is, laat je 2.000.000 apparaten weg.
Het is ook onwaarschijnlijk dat het gebruik van iets dat de prestaties drastisch verbetert, zoals transformaties, moet worden beperkt door eenvoudig UA-snuiven. In plaats daarvan zou het gebruik van een functie voor het detecteren van functies, zoals Modernizr, voordeliger en definitiever zijn voor de browsercapaciteiten van de gebruiker. Aangezien Modernizr wordt ondersteund door een aantal van de mensen bij Google, is het niet verrassend dat we het niet op Flickr zien staan, maar het onderliggende concept is eenvoudig en de tests zijn eenvoudig repliceerbaar.
OpenGraph-tags zijn essentieel voor het delen van een site op Facebook. Het delen van een site op Facebook is voor veel gebruikers een basisfunctie van internet. Helaas, als een site niet specifiek OpenGraph-metatags implementeert, ziet het item voor de gedeelde link er vrij kaal uit op een Facebook-nieuwsfeed.
Als Flickr inderdaad met Facebook concurreert, kan dit een gok zijn dat het hen zal helpen mensen tegen Facebook te keren of Flickr volledig van Facebook te scheiden. Of het zou gewoon een vergissing kunnen zijn. Hoe dan ook, het maakt dat ik (en waarschijnlijk sommige andere gebruikers) het delen van Flickr.com met mijn Facebook-vrienden vermijd.
Oké, we zien dat Flickr (en Tumblr) niet houden van er's. Maar er komt een moment dat het verwijderen van letters uit woorden wordt gedaan irritant en cheesy, en zelfs moeilijk te lezen. Flickr is op die regel aan het afronden. Het gebruik van dingen zoals "Biggr", "Spectaculr" en "Wherevr" kunnen de branding of gebruikerservaring waarschijnlijk niet verbeteren. Flickr is de naam van de service; "Groter" beschrijft een nieuw kenmerk van die dienst. Anders, waarom niet ook "volgeling" veranderen in "volg", of "ontwikkelaar" in "ontwikkelen"? Omdat het niet logisch klinkt en vervreemdend vreemd klinkt. Overweeg Apple's ongelooflijk effectieve adverterende copywriting; "iPad" vertaalt zich niet in een kopie als "Neem uw iMac mee, iAnywhere".
Een interessant stuk Yahoo! opgenomen in de bron voor Flickr is een call-out voor front-end ontwikkelaars, met nieuws dat Flickr aan het huren is. Dit coole ascii-logo is te vinden in de head-tag.
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 U bent aan het lezen. We nemen aan. http://flickr.com/jobs/
Bekend om zijn jongere publiek met de neiging om meer onbezonnen te zijn dan, laten we zeggen, Blogger-gebruikers, maar minder onbezonnen dan Redditors, zit Tumblr in een unieke positie, overgenomen door een gigant zoals Yahoo!.
Zal Yahoo! de vrije vorm van de contentcreatie van Tumblr om zeep helpen? Worden Flickr en Tumblr geïntegreerd, zodat gebruikers Flickr-foto's automatisch kunnen publiceren naar Tumblr? Of blijft Tumblr transparant bestaan, met simpelweg een nieuwe servicevoorwaarden die Yahoo! om gegevens te verzamelen en te gebruiken van Tumblr's 109 miljoen blogs en 51,2 miljard berichten? Het zou een ongelooflijke bron van gegevens kunnen zijn voor Yahoo !, die zich in de acquisitiemodus lijkt te bevinden, en PlayerScale dagen na het verwerven van Tumblr heeft gekocht.
Laat ons weten wat je vindt van de nieuwe Flickr, en wat je denkt over de toekomst van Tumblr onder Yahoo! 'S richting, in de comments!
