Share
Frisk på hælene til Yahoo! 'S oppkjøp av Tumblr, Yahoo! har implementert et komplett redesign av Flickr.com. Dette ble møtt med sterk kritikk og sterk ros, og mange av disse er blitt tilskrevet Yahoo! S nye leder, Marissa Mayer. I denne artikkelen vil vi snakke om designbeslutningene og noen av implementeringsdetaljer i redesignet, og vi vil åpne en samtale om Yahoo !s oppkjøp av Tumblr.
Flickrs rolle blir ofte utspurt av kritikere av Yahoo !, som Facebook overgått den som den mest populære onlineopplastingstjenesten. I dette redesignet av Flickr ser vi et interessant sett prioriteringer reflektert, som vi vil diskutere i denne delen.
Disse prioriteringene gjenspeiler at Flickr er rettet mot et publikum av fotograferingsentusiaster.
Ved å se på et tilfeldig utvalg av bilder fra Facebook, vil du mest sannsynlig se en samling av venner-på-stranden eller "selfie" -bilder. Selv i Facebooks annonser ser vi bilder som drives av en faktor: fange sosialt drevne øyeblikk.
Forfatter Justin Rocket Silverman lærer kunsten til 'selfie' Men ser vi på Flickrs hjemmeside, ser vi ikke et enkelt bilde som hovedsakelig skulle betraktes som "sosialt". Vi ser i stedet et utvalg av primært natur- eller kjæledyrbilder, med noen andre stillede bilder. Disse bildene er best forstått som svært forsettlig, tatt av fotografentusiaster.
Hjemmesiden til Flickr skubber noen meldinger og en enkelt anrop til handling. Den primære meldingen er Flickrs banebrytende gratis terabyte med plass til bilder og videoer. De legger vekt på dette i primærlandingsmeldingen "Smil. Alle får en gratis terabyte" og videre i den andre "Biggr" -glasset under folden, noe som gjør at brukeren kan se hvor mange bilder av en bestemt oppløsning de kan laste opp til Flickr.
Megapixel-glidebryteren går fra 0 til 16 megapiksler. Det tredje lysbildet forklarer at brukere kan laste opp bildene sine i sin opprinnelige oppløsning, og kan ikke forvente noe tap av kvalitet.
Disse meldingene snakker sterkt til fotografentusiaster; Å ha nok ledig plass til å laste opp bilder av høy kvalitet er av betydning for fotografer. I motsetning til dette kommuniserer Facebook ikke noen kvalitets- eller romimplikasjoner for å laste opp bilder.
Den nye Flickr er hyperfokusert på fotocentriske erfaringer. Dette plasserer vanligvis brukerkontoer som et sekundært innholdselement. Når en bruker logger på, viser "Hjem" -siden for eksempel en feed av bilder og deres tilknyttede interaksjoner fra andre brukere. Den innloggede brukerens grupper kan ses til høyre. Ved å klikke på et bilde åpnes en navigerbar lysboks.
Flickr har også opprettet en ny lysbildeopplevelse. Søkefeltet fokuserer på brukeropplastinger (i stedet for brukerprofiler) som standard. De neste to alternativene er ditt personlige fotostrøm, deretter dine "kontakter" bilder ". Endelig kan søketypen endres til grupper, og til slutt for medlemmer.
Som en sekundær effekt av Flickrs hyperfokus på fotografering og de som bryr seg om det, kan vi raskt se at Flickrs mål ikke er å konkurrere med Facebook. I stedet er det å bli de fotograferingstjeneste for den gjennomsnittlige fotograferingsentusiasten og den profesjonelle karrierefotografen for å lagre og diskutere bilder.
Dette er ikke å redusere samspillet aktivert av det nye redesignet. Faktisk oppfordres samhandling og samtale mer enn den forrige Flickr, som primært var fokusert på å vise hver enkelt bruker sine senest opplastede bilder. Men Flickrs sosiale samspill dreier seg helt rundt bildene; Faktisk, på en enkelt brukeres profilside, er det ingen "vegg". I stedet er det en strøm av brukerens opplastede bilder, som lett kan lanseres i en lysbildefremvisning. Hvis du liker en bestemt bruker, kan du "følge" dem (Tumblr, noen?), Som vil bringe brukerens bilder og tilhørende kommentarer til din loggede hjemme feed.
Brukere kan få tilgang til FlickrMail, men bare hvis de har lagt til folk i deres Kontakter; Videre er tilgang til FlickrMail noe begravet.
Grupper kan legge inn svært enkle "diskusjoner", som er som foruminnlegg; Imidlertid er videre kommunikasjon relativt begrenset til kommentarer på bilder.
Flickr er ikke forvirret eller ufokusert; I stedet er det klart fokusert på å skape et sted å snakke om og lagre fotografier.
Som er skikken med "How they did it" -serien, skal vi tilbringe litt tid på å snakke om de tekniske aspektene ved den nye implementeringen. Denne delen handler ikke om den overordnede strategien, eller om den er effektiv eller ej. I stedet er denne delen fullpakket med tips og triks basert på Flickrs implementering.
Flickrs design har ikke sett en betydelig oppdatering i omtrent syv år. På den tiden har det vært store fremskritt i databehandling, inkludert mye mer utbredt tilgang til bredbånd, en generell økning i bredbåndshastigheter, og et stort skifte til mobilitet og tilgang til flere enheter. Av denne grunn så Flickr of 2012 så ganske datert, hovedsakelig basert på en liten båndbredde-miniatyrfokus, som vanligvis viser et bilde med høyere oppløsning om gangen. Videre utnyttet Flickr før redesignet ikke mange av fordelene ved nyere nettleserteknologi.
Flickr av yesteryear Vi har skrevet om parallax på Tuts + mange ganger før. Når du åpner en samtale om parallaxteknikker, er en av de første problemene som tas opp, ytelse. Altfor ofte blir parallax implementert på naive måter, som noen variasjon av følgende (eller verre).
Merk: Dette forutsetter at nettstedet bruker jQuery ...
Accentsconagua
$ (vindu) .on ("scroll", funksjon () $ ("parallax-element"). hver (funksjon () $ (dette) .css (marginTop: $ (window) .scrollTop () * .5););); For eksempel, sjekk ut denne pennen!
Hva er galt med denne tilnærmingen? For det første kjører hver rullehendelse funksjonen som kalles. Det er ingen caching av JavaScript-objekter, ingen rullestrømning og som viktigst, dette utnytter ikke CSS3-transformasjoner eller maskinvareaccelerasjon.
Å gjøre enkle endringer kan bidra dramatisk til å øke ytelsen i rullehendelse-drevet interaksjon, og Flickr har nettopp gjort det. Her er de primære JavaScript-funksjonene som brukes i parallax-teknikken. (Vi har tatt friheten til å legge til noen kommentarer for forståelsens skyld.)
(funksjon () // sette opp variabler som skal brukes over var useTransform = true; var useParallax = true; var ua = navigator.userAgent; var winLoc = window.location.toString (); // useragent matchende for progressive forbedringer var is_webkit = ua.match (/ webkit / i); var is_firefox = ua.match (/ gecko / i); var er \ _newer \ _ie = ua.match (/ msie (9 | ([1-9] [0- 9]) / i); var er \ _older \ _ie = ua.match (/ msie / i) &&! Er \ _newer \ _ie; var er \ _ancient \ _ie = ua.match (/ msie 6 / i); var is_mobile = ua.match (/ mobile / i); // for å se sidens ytelse med 2d transformer (i stedet for 3d), besøk http://www.flickr.com/#transform=2d var use2DTransform = (ua. match (/ msie 9 / i) || winLoc.match (/ transform \ = 2d / i)); var requestAnimationFrame = null; var prefikser, transform; var parallaxItems = []; var scrollHandler = null; var noder; var lastExec = Ny dato (); // De neste to kontrollene som potensielt brukes til feilsøking, eller for bestemte enheter eller koblinger. // For å se sidens ytelse uten transformasjoner (margin-implementer på), besøk http://www.flickr.com/#notransform hvis (winLoc.match (/ notransform / i)) useTransform = false; // for å se siden uten parallax, besøk http://www.flickr.com/#noparallax hvis (winLoc.match (/ noparallax / i)) useParallax = false; // Kontroller brukeragentvariabler for å bestemme om parallax skal brukes eller ikke. hvis (is_mobile || er \ _ancient \ _ie) useParallax = false; // Hvis url har "useraf" i det, bruk forespørsel animasjonsramme hvis (winLoc.match (/ useraf / i)) requestAnimationFrame = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame); // setting up prefix prefixes = webkit: 'webkitTransform', firefox: 'MozTransform', dvs.: 'msTransform', w3c: 'transform'; hvis (useTransform) if (is_webkit) transform = prefixes.webkit; annet hvis (is_firefox) transform = prefixes.firefox; annet hvis (er \ _newer \ _ie) transform = prefixes.ie; // Hovedfunksjonen for parallax elementer // tar en containerNode param, som er den relative posisjonerte // forelder av det absolutt posisjonerte parallaxbildet. funksjon ParallaxItem (containerNode) // sette opp noen vars for caching verdier gjennom var container, bgElements, offset, bgHeight, containerHeight, maxScrolls, height; // cache en YUI-innpakket forekomst av beholderen, ligner $ (containerNode) i jQuery container = Y.one (containerNode); // få elementene med en klasse av "parallax-bakgrunn" inne i beholderen. // hjemmesiden har bare ett element per beholder, men dette kan skaleres for å ha flere bg-elementer bgElements = container.all ('.parallax-bakgrunn'); // funksjon for å oppdatere variabler for hver parallax element funksjon refreshCoords () offset = container.getY (); containerHeight = container.get ('offsetHeight'); bgHeights = []; maxScrolls = []; bgElements.each (funksjon (item) height = item.get ('offsetHeight'); bgHeights.push (høyde); / / max rulle av hver container er // containerens offsetHight - parallax elementets offset høyde + 2 maxScrolls.push (containerHøyde - høyde + 2);); // den faktiske parallax flytting funksjonen oppdatering (docScrollY) var jeg, j, bla, transformParam; i = 0; bgElements.each (funksjon (bgElement) // scroll er satt til maksimum av elementets maxscroll og // dokumentets rullestilling minus offset for gjeldende beholder // delt med beholderens høyde multiplisert med maks rulle. scroll = -Math.round ((docScrollY-offset) / containerHeight) * maxScrolls [i]); scroll = Math.max (bla, maxScrolls [i]); var transformParam; hvis (! Use2DTransform) transformParam = 'translate3d (0px , '+ bla +' px, 0px) '; else transformParam =' translateY ('+ scroll +' px) '; hvis (transform && transformParam) bgElement.setStyle (transform, transformParam); bgElement.setStyle prefixes.w3c, transformParam); else bgElement.setStyle ('marginTop', bla + 'px'); i ++;); refreshCoords (); returnere 'refresh': refresh, 'refreshCoords': refreshCoords // dette kjører parallax mover "refresh" -funksjonen hvis det er parallax elementer, // passerer i gjeldende rulleposisjon for dokumentfunksjonen refreshParallaxItems () var docScrollY = Y.DOM.docScrollY (); hvis (! parallaxItems ||! parallaxItems.length) return false; for (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) for (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(); ()); Sjekk ut kommentarene vi har lagt til for å få en fullstendig forståelse av hva som skjer her. Dette kan virke litt skremmende, spesielt hvis du ikke er kjent med Yahoo! S YUI node JS verktøy. I stedet for å bli fanget opp på alle detaljene i denne koden, la oss se på noen få viktige viktige stykker som betyr noe.
Først ser vi den omfattende bruken av variabel caching. Dette inkluderer innstilling av maks høyder, forskyvninger, etc i en oppdatering. Deretter ser vi bruk av progressiv forbedring for å definere når du skal bruke 3D, 2D eller ingen transformasjoner. Dette forbedrer ytelsen betydelig for nyere nettlesere. Videre støttes 3D-transformasjoner i alle nåværende store nettlesere (unntatt Opera og Opera Mini), noe som betyr en betydelig ytelsesforbedring ved hjelp av maskinvareakselerasjon, som skaper inn når du bruker 3D-transformasjoner på et gitt element. (Sjekk ut denne artikkelen for mer informasjon). Dette hjelper hjemmesiden til å realisere mye høyere framerater - vanligvis på eller over 60 fps.
Det er interessant å merke seg at Flickr dev-teamet forlot noen tilsynelatende ubrukte brikker i kildekoden, som url-baserte funksjonalitetsbrytere som aktiverer eller deaktiverer ting som parallax og transformasjoner. Kanskje dette brukes til visse omdirigeringer av enheten; dette kan ha vært en feilsøkingsteknikk dev teamet glemte å ta ut. Det kan også være en callout til devs å leke med applikasjonen og se fordelene ved å bruke disse forskjellige teknikkene. Uansett hva det er, er det en blast å leke med når du finner den, og har nesten ingen ytelse innvirkning.
Et annet notat om parallax-implementeringen: Flickr har helt unngått å bruke bakgrunnsstørrelse for bildebeholdere, og har unngått "fullskjerm" -størrelsen også, og velger i stedet for generelt parallaxbeholderelementer med min høyde. Hvorfor? Ytelse av background-size: cover er forferdelig, forårsaker lave framerater og generelt en forringet brukeropplevelse. I stedet har Flickr valgt å laste inn større bakgrunnsbilder; 2048x850, for å være eksakt. Dette dekker bredden på nesten hvilken som helst skjerm, og gir nok høyde til å gjøre en effektiv parallax-implementering. Browser repaints reduseres også betydelig.
I en throttled scroll-watching-funksjon overgår den endelige oppkallingen til bunnen av Flickr-startsiden når brukeren ruller over en vegg med horisontalt begrunnede bilder fra brukere. Animasjonen drives av CSS3-overganger, inkludert et 12px webkit-slørfilter, opasitet og skalering. Oppfordringen til handling inkluderer stor typografi (10em eller 144px for å være eksakt), og en passende stor CSS3-stylet knapp.
Her er CSS for knappen.
/ * Webdesigntuts + notat: nettleser-spesifiserte prefiks fjernet * / display: inline-block; polstring: 0px 2em 5px 2em; skriftstørrelse: 2em; linjehøyde: 1,75em; font-weight: 400; tekst-dekorasjon: ingen; bakgrunn: # ff0084; farge: #fff; boks-skygge: 0px 2px 8px rgba (0,0,0,0,5); border-radius: 5px; bakgrunnsbilde: lineær gradient (bunn, rgb (215,0104) 35%, rgb (243,0111) 84%); bakgrunnsbilder: polstring
Ganske enkelt, men effektiv. Det interne nettstedet når en bruker har registrert seg, har også store elementer, som opplastingsskjemaet.
Små forbedringer gjennom hele hjemmesiden fungerer også for å forbedre brukeropplevelsen. For eksempel bruker megapikslers glidebryter en inline data uri for håndtaket, mens glidebryteren bare bruker css-gradienter og andre definisjoner. Ingen http-forespørsler kreves for noen del av skyvekontrollen, bortsett fra den tilhørende JavaScript.
Svært små tekstskygger brukes på hodene for å løfte dem av de tilhørende bakgrunnsbildene litt. Semi-transparent (RGBa) bakgrunnsfarger brukes til toppnavigasjonslinjen, samt bildeveggtitlene. Flickr bruker også mustasessmaler for bildemuren. Alle disse elementene tyder på at Flickr får et trykk mot å opprettholde en langt mer fremtidsfrontendesign.
Her er noen tanker om ting som kan bli bedre med den nye Flickr, eller at du kanskje vurderer i utviklingspraksis.
Akkurat nå er den mobile strategien vedtatt av Flickr avhengig av to hovedpunkter: innfødte applikasjoner og et mobilspesifikt nettsted. Mobilspesifikke nettstedet er mye mindre attraktivt enn desktopversjonen. Med tanke på det enkle faktum at mobilen vokser raskere enn noensinne, kan dette redesignet og bør bli revurdert som en mulighet til å vedta responsive strategier. Den stasjonære versjonen av nettstedet er mindre enn ideell til noe lavere enn 960px. Dette kaster ut mange mindre tabletter og nesten hvilken som helst telefon.
Best practices forteller oss at markedsføringsdrevne, handlingsfremmende hjemmesider og plaskesider ikke er det beste stedet å laste inn programinnhold. Noen av skriptene som er lastet på Flickr.coms nye hjemmeside, brukes imidlertid i resten av applikasjonen. Det ville være fordelaktig å isteden opprette en enkelt, mindre JavaScript-fil som avhenger mindre av YUI-biblioteket, og mer på enkle hendelseslyttere, selektorer og AJAX-funksjoner.
Den JavaScript-filen må også bli minifisert; Det kan imidlertid være tilfelle at det ikke er minifisert for utviklere som vil kikke ved kilden. (Se utviklerens callout på slutten av denne artikkelen.)
Bruker-agent sniffing er dårlige nyheter, med mindre du nøye sjekker hver streng med hver enhet (mindre praktisk enn det er nyttig). Dessverre, ved å bruke en enkel streng som "mobil" som Flickr gjør her er det ikke nok å definitivt si om vi er på en mobilenhet. Visst, dette kan dekke en betydelig prosentandel av enheter, la oss si 99%, men når det er 99% av 200 millioner mennesker, forlater du 2.000.000 enheter ut.
Det er også usannsynlig at bruk av noe som forbedrer ytelsen drastisk, som forvandlinger, bør begrenses av enkel UA sniffing. I stedet vil det være mer gunstig og mer definitivt av brukerens nettleseregenskaper ved hjelp av en funksjonsspesifikasjonspakke som Modernizr. Å se som Modernizr støttes av noen av folkene på Google, det er ikke overraskende at vi ikke ser det inkludert på Flickr, men det underliggende konseptet er enkelt, og testene kan enkelt kopieres.
OpenGraph-koder er avgjørende for å dele et nettsted på Facebook. Deling av et nettsted på Facebook er en grunnleggende funksjon av nettet for mange brukere. Dessverre, hvis et nettsted ikke implementerer spesifikt OpenGraph-metakoder, ser det delte lenkeelementet ganske nært ut på en Facebook-nyhetsfeed.
Hvis Flickr faktisk konkurrerer med Facebook, kan dette være en gamble at det vil hjelpe dem å slå folk mot Facebook, eller disassociere Flickr fra Facebook helt. Eller det kan bare være et tilsyn. Uansett, det gjør meg (og sannsynligvis noen andre brukere) unngår å dele Flickr.com med mine Facebook-venner.
Ok, vi skjønner at Flickr (og Tumblr) ikke liker det. Men det kommer et poeng hvor å fjerne bokstaver fra ord blir irriterende og cheesy, og enda vanskelig å lese. Flickr er kantet på den linjen. Bruk av ting som "Biggr", "Spectaculr" og "Wherevr" forbedrer kanskje ikke merkevaren eller brukeropplevelsen. Flickr er navnet på tjenesten; "større" beskriver en ny funksjon av den tjenesten. Ellers, hvorfor ikke også endre "tilhenger" til "followr" eller "developer" til "developr"? Fordi det ikke gir mening og høres utroligt merkelig ut. Vurder Apples utrolig effektive reklame copywriting; "iPad" oversetter ikke til kopi som "Ta iMac med deg, iAnywhere".
Et interessant stykke Yahoo! inkludert i kilden til Flickr er en callout til front-end devs, med nyheter som Flickr ansetter. Denne kule ascii-logoen finner du i hodetiketten.
ad88 88 88 88 d8 88 88 88 88 8888 888 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 8 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 "8a,, aa 88 '" Yba, 88 88 88 88' "Ybbd8" '88' Y8a 88 Du leser. Vi ansetter. http://flickr.com/jobs/
Kjent for sitt yngre publikum med en tendens til å være mer brash enn, si, Blogger-brukere, men mindre brash enn Redditors, sitter Tumblr i en unik posisjon etter å ha blitt kjøpt av en gigant som Yahoo!.
Vil Yahoo! drepe Tumblrs frie form naturens innholdsskap? Blir Flickr og Tumblr integrert, slik at brukerne kan publisere Flickr-bilder automatisk til Tumblr? Eller vil Tumblr gjennomsiktig fortsette å eksistere, med bare en ny servicevilkår som tillater Yahoo! å samle inn og bruke data fra Tumblrs 109 millioner blogger og 51,2 milliarder innlegg? Det kan være en utrolig kilde til data til Yahoo !, som ser ut til å være i oppkjøpsmodus, kjøper PlayerScale dager etter å ha kjøpt Tumblr.
Gi oss beskjed om hva du synes om den nye Flickr, og hva du synes om Tumblrs fremtid under Yahoo! S retning, i kommentarene!
