Når timing er viktig - fungerer nedtelling i e-post

Av APSIS

2013-06-17

I invitasjonen til årets Email Marketing Evolved ville vi gjerne være ekstra tydelig med hvor lenge det var igjen til arrangementet begynte. Vi tok i litt ekstra og lyktes med å lage en animert nedtelling som holdt hele veien. Er du nysgjerrig på hvordan teknikken fungerer?

Å jobbe med animerte gif-bilder er i og for seg ikke helt nytt, men å få til en animasjon som strekker seg over flere uker er en utfordring utenom det vanlige. Kult, tenkte vi!

Denne artikkelen henvender seg først og fremst til deg som er interessert i hvordan teknikken fungerer bak kulissene. Så vi beklager hvis vi nå blir litt for ”nerdete”!

 

Vår målsetning var at vi med sekundpresisjon kunne vise mottakerne av en e-post helt nøyaktig hvor lang tid det var igjen til vårt arrangement. Fordi vi ville ha en levende nedtelling ble en animert GIF nødvendig. For å få vist riktige tall, hadde vi to hovedutfordringer:

1.    Fordi mottakerne skulle åpne mailen på ulike tidspunkt (med ulik tid igjen til arrangementet), kunne ikke alle få det samme bildet. Da hadde ikke timingen blitt riktig. De bildene som skulle vises i utsendelsen måtte hele tiden endres.

2.    Vi måtte lage en animering som skulle holde i ukesvis frem til arrangementet gikk av stabelen.

Slik gjorde vi det:

Starttid:

Istedenfor å lagre statiske bildefiler på en server, laget vi en programvare som hele tiden leverte oppdatert bildedata. Fordi programvaren vet hva klokken og tidspunktet for arrangementet er, kan den hele tiden lage bilder med riktig tid som gjenstår til arrangementet.

Programvaren var i og for seg veldig effektiv, men fordi belastningen etter e-postutsendelser kan bli veldig høy i løpet av kort tid, var vi nødt til å koble programvaren til et CDN (som står for Content Delivery Network). Fordelen med dette er at bildefilene lagres og distribueres fra et stort nettverk av geografisk spredte servere som avlaster den opprinnelige serveren.

Samtidig avkorter vi nedlastningstiden for mottakere over hele verden (vi bruker denne teknikken for alle bilder i nyhetsbrev fra våre servere) fordi bildene blir hentet opp fra en server nær hver mottaker. På denne måten slipper programvaren å gjøre samme oppgave 100 ganger om 100 personer åpner mailen samtidig. Serveren blir mindre belastet og mottakerne får se bildene raskere.


Den lange animasjonen:

Den lange animasjonen viste seg til en viss grad å være enklere å få på plass enn vi opprinnelig trodde, av den enkle grunn at det ”bare” handler om tall som skal settes i loop i ulike hastigheter. Det var derfor vi laget de animerte ringene, for altfor enkelt skulle det jo heller ikke være…

Programvaren fikk derfor i oppgave å lage et antall bilder som med ulik timing talte ned de ulike tallene og senere fikk de synkronisert til å begynne om igjen, samtidig som tallene ved siden av talte ned enda et tall om gangen. Når 0 sekunder skulle bli til 59 igjen, måtte dette skje samtidig som det siste minuttallet ble talt ned et trinn. Totalt er det 8 ulike tall som skal samhandle med hverandre og med de animerte ringene. Som en liten bonus brukte de ulike tallene forskjellig tid på å laste ned (filene hadde ulik størrelse), noe vi måtte kompensere for ved beregning av bildene.

Dette var ytterligere en grunn til at vi måtte ha en veldig smart programvare som hele tiden holdt styr på hva klokken er, men også hvordan alle bildene skal synkronisere med hverandre.

PS! For deg som er veldig teknisk, kan vi nevne at vi også tittet på multipart boundary push for å få dette til å fungere (denne teknikken kan bl.a. benyttes for å få til ”levende” film i e-post), men vi valgte bort teknikken fordi den ga veldig høy belastning på servernivå. DS.

Men; vi synes uansett at det ble veldig bra (se selv øverst på denne siden), og håper at vi snart kan komme tilbake med flere spennende eksempler som kan løfte din e-post til et høyere nivå.