Arkiv for juli 2007

Oh sidevisning hvor jeg dog hader dig!

mandag, 30. juli 2007

En af de mest benyttede indikator for et websitets popularitet har gennem de sidste 10 år været antallet sidevisninger, men med udbredelsen af nye teknologier som Ajax og Flash er man nået dertil, at fokuseringen på sidevisninger i høj grad kan være med til at skade brugernes oplevelse.

Lad mig komme med et konkret eksempel som jeg har været ude for for nyligt.

Vi blev bedt om at komme med et oplæg på en juleaktivitet til et website, og endte med at foreslå en quiz.
Det er for så vidt set mange gange før, men vores plan var at bruge Flash til at skabe en god sammenhængende oplevelse for brugeren, som udover at være en underholdende quiz også ville være med til at understøtte websitets image.

Men, da det kom til stykke var der fra pågældende firma mere fokus på at generere så mange sidevisninger som muligt, og dermed komme længere op på de diverse toplister, end på at give brugeren en optimal oplevelse og dermed på lidt længere sigt øge chancen for succes. En af de måder som Flash og Ajax kan være med til at optimere oplevelsen, er nemlig netop ved ikke at kræve en sidevisninge for at vise nyt indhold, men i stedet nøjes med at opdatere delelementer på sitet.

Dermed ikke sagt at alle websites bliver dårligere af at have sidevisninger. På en netavis fungerer det eksempelvis glimrende at siden skifter når man klikker på et link for at komme ind og læse en artikel, og sådan er der mange andre eksempler.

I eksemplet med quizzen svarer fokuseringen på sidevisninger til at tisse i bukserne.
Det kan godt være at det varmer lige nu, at man kortvarigt kommer højere op på en eller anden liste (eller at ens chef der har opstillet et mål for antallet af sidevisninger bliver glad), men hvis man gør det på bekostning af at oplevelsen for brugeren væsentligt forringes, så resulterer det i færre brugere og dermed giver det bagslag på den lange bane.

En bedre løsning: Tidsforbrug
Mit forslag til et bedre tal at måle på, er at kigge på det samlede tidsforbrug.
Hvis en bruger bruger lang tid på et website, så er det et klart tegn på at brugeren er glad for sitet.

Derfor, i stedet for at sige “Vi vil øge antallet af sidevisninger fra 100.000 til 120.000″ så sig hellere “Vi vil øge en brugers gennemsnitlige tidsforbrug fra 10 til 12 minutter”.

Det er lige så målbart, men skaber ikke nogen forhindringer for den gode brugeroplevelse.

Banneroptimering del 2: De kære, kære kilobytes

tirsdag, 24. juli 2007

I del 1 fik vi skaffet det rigtige materiale, så nu skal selve produktionen igang, og her kommer den største udfordring for langt de fleste bannere: At få klemt så meget budskab og indhold ned på så få kilobytes som muligt.

For at kunne se hvilke elementer i dit banner som det er der fylder, så skal du under File –> Publish Settings –> Flash sætte et flueben udfor “Generate size report”. Så vil der fremover, hver gang du publisher, blive genereret en lille rapport i Output-vinduet, som detaljeret viser hvad det er der fylder.

Med det slået til, så er det første, vigtigste og relativt indlysende råd til at spare på pladsen:
Hav kun det højest nødvendige med i Flash-filen

Konkrete eksempler på det er:

Skalér i Photoshop
Når man har importeret et stykke grafik ind i Flash, så findes der flere muligheder for at skalere det.
Man kan bruge Free Transform-værktøjet, selv rette procenterne i Transform-panelet eller bare ændre højde/bredde i properties.

Det man i den forbindelse skal huske på er, at uanset hvordan du skalerer grafikken, så vil det altid veje det samme. Hiver du et 200 kb billede ind og skalerer det ned til en størrelse på 10%, så vil det stadig veje 200 kb.

Den eneste måde at få gavn af at grafikken ikke skal bruges i så stor størrelse er derfor at skalere det i Photoshop.

Selv arbejder vi som oftest på den måde, at vi laver et designoplæg på banneret i Photoshop, som vi får godkendt inden vi begynder at lave det i Flash. Om man hellere vil lave det i Flash til at starte med er i høj grad et spørgsmål om smag og behag, men i relation til at spare på de kære kilobytes, så giver det den fordel at størrelsen på billeder og andre elementer er fastlagt inden vi begynder arbejdet i Flash.

Husk i øvrigt, at hvis billedet bruges i en animation, hvor det bliver skaleret op og ned, så behøver man ikke altid at have det med i den størrelse i animationen hvor det er størst.

Eksempel: Du har et billede der animerer ind fra en størrelse på 0×0 pixel til 100×100 pixel, og efter at have været på skærmen et par sekunder, så animerer det ud med en fade hvor det samtidig bliver 200×200 pixel stort.
I det tilfælde vil du ofte kunne nøjes med at have billedet med i størrelsen på 100×100 pixel, da brugeren ikke vil kunne se forskel, fordi den kun er i den store størrelse i kort tid og hele tiden er i bevægelse,

Klip ikke-synlige dele af billeder væk
Det lyder måske som en indlysende ting, men det er noget som jeg selv glemmer engang imellem.
Typisk hiver man et stykke grafik ind, eksempelvis et billede af en bil, og så ender man med for eksempel at placere den i et hjørne, hvor noget af bilen rent faktisk er “uden for billedet”.

Her er der igen mulighed for at spare nogle ekstra kilobytes ved at bruge Photoshop til at skære det væk som alligevel ikke kan ses.

Indstil komprimering individuelt for hvert billede
Som udgangspunkt er komprimeringen for alle billeder der hives ind i Flash sat til 80.
Det kan ses under: File –> Publish Settings –> Flash –> Jpeg quality.

Ved at ændre på det tale, kan du gøre alle billeder billeder større eller mindre på én gang, men husk på at intet er gratis, jo mindre de fylder, jo grimmere ser de ud.

Da forskellige billeder komprimeres forskelligt, kan det altid betale sig at indstille kvaliteten individuelt billede for billede.
Det gøres ved at højre-klikke på billedet i dit library og vælge Properties.

Her kan hvert stykke grafik komprimeres på to måder:
Lossless (PNG/GIF): Gælder kun for grafik der rent faktisk er importeret som png eller gif, og betyder at Flash ikke selv ændrer på komprimeringen. Hvis du vil ændre på komprimeringen skal den derfor ændres til Photo (JPEG)
Photo (JPEG): Standard indstillingen for al grafik som ikke er importeret som png eller gif.

Når Photo (JPEG) er valgt, skal fluebenet i “Use document default quality” fjernes, så kommer der et feltet frem hvor kvaliteten manuelt kan indstilles. Hvis man retter på tallet og trykket “Test” kan man med det samme se hvad det pågældende stykke grafik vil fylde, og i vinduet til venstre kan man se hvordan grafikken vil se ud med den valgte komprimering.

Så er det blot et spørgsmål om at prøve sig frem indtil man finder den rette balance mellem vægt og kvalitet.

Minimér antallet af skrifttyper
Flash er heldigvis på mange områder temmelig intelligent, hvis du eksempelvis bruger bogstavet “b” to gange i en tekst, så bliver formen af bogstavet “b” kun inkluderet én gang.

Men, hver gang man ændrer skrifttype eller gør teksten bold eller kursiv, så skal bogstavet inkluderes igen.
(Alt efter hvilken skrifttype der benyttes)
Til gengæld fylder det ikke mere, hvis du bruger det samme bogstav i flere størrelser.

Så, overvej om der virkelig er brug for en masse forskellige skrifte for at få budskabet til at gå klart igennem.

Embed kun det højst nødvendige antal tegn i dynamiske tekstfelter
Har du et dynamisk tekstfelt hvor du selv skifter teksten, eller et felt hvor brugeren kan indtaste et telefonnummer, e-mail, postnummer eller lignende, så skal de nødvendige tegn også embeddes.
Her kan man også spare plads ved kun at vælge de højest nødvendige.

Skal brugerne indtaste et postnummer, så er det fint kun at embedde tal.
Er der tale om en e-mailadresse, så har man kun brug for alle små bogstaver og tegnene @._-

Og sådan kan man blive ved, har man brug for at spare endnu mere plads, kan man også sætte feltet til “Use device fonts”, da man så bruger de skrifttyper brugeren i forvejen har installeret på sin maskine. Det betyder dog så samtidig også, at man kun bør vælge skirfttyper som man ved at alle har installeret, de såkaldt websikre fonte, men selv her skal man være opmærksom på, at de godt kan rendere en anelse forskelligt.

Du kan se en liste med nogle af fontene her:
Websafe fonts

Mavefornemmelse
En af de sværeste ting er fra start af i processen at have en fornemmelse for hvor meget af det materiale man har fået, som man kan få plads til i banneret.
Desværre kan man ikke stille nogen formel eller lignende op for det, der er kun en ting at gøre, og det er at prøve sig frem og med tiden få opbygget noget erfaring.

Det var slut på del 2, del 3 kommer til at handle om den tekniske optimering af banneret, for at undgå at det laver ulykker.

Skal du med til Flash on the Beach?

mandag, 23. juli 2007

Flash on the Beach 07Flashforum.dk laver nemlig en forumudflugt, og både jeg og min kollega Janus tager med.

Flash on the Beach er en 3 dages konference i Brighton, England med lang række fede præsentationer af en masse topfolk i brancen, så det er her man kan blive opdateret på det nyeste og generelt bare få en masse inspiration.

Du kan læse mere om FOTB her:
Flash on the Beach

Og der står mere om forumudflugten her:
http://www.flashforum.dk/forum/viewtopic.php?t=2997

Håber vi ses!

Dril din designer - positionér movieclips tilfældigt!

fredag, 20. juli 2007

Det er jo fredag, så hermed et link til et stykke ActionScript som på tilfældig vis ændrer _x og _y en lille smule på alle movieclips.
Ikke meget, men lige akkurat nok til at frustrere din designer helt vildt:
Practical jokes to play on Flash designers - randomize _x, _y position

Banneroptimering del 1: Få det rigtige materiale

onsdag, 18. juli 2007

Godt begyndt er halvt fuldendt siger de kloge, og den sandhed gør sig også gældende ved bannerproduktion, og en god start kræver at man har får det rigtige materiale.

Og hvad er så det rigtige materiale?
Det er det materiale som giver dig det optimale udgangspunkt for at lave et godt banner, både med hensyn til kreative muligheder og kvalitet.

Det materiale der typisk vil være tale om er:
- Logoer
- Skrifttyper
- Billeder
- Eksisterende annoncemateriale
- Evt. brandmanual eller design guidelines

Det der er kunsten er at få fat i så meget materiale som muligt i bedst mulig kvalitet.

For billeder vil det sige at man ikke bare napper det billede med jpg-komprimering 30 som de har liggende på deres website, men derimod beder om at få adgang til originalen. Gerne også billeder som de ikke nødvendigvis selv bruger nogen steder, men som kunne være relevante, eksempelvis den samme ting fra flere vinkler.

For logoer, og andre tegnede objekter, vil det sige at man får materialet i vektor-format, som eksempelvis eps eller ai-filer.
Vektor har den fordel at det ofte fylder mindre, samt at det altid skalere pænt, både op og ned, hvilket kan være en kæmpe fordel når man skal lave animationer, og gør det nemmere at fin tune designet direkte i Flash.

Har kunden ikke adgang til det logo du skal bruge, eller er du måske i en pitchfase hvor du ikke har den direkte kontakt endnu, så kan Brands of the World anbefales:
http://www.brandsoftheworld.com

Et andet godt sted at gå på logo- og billedjagt er på firmaernes pressesites. Er du igang med en opgave for den danske afdeling af et internationalt firma, så husk endelig også at kigge på modersitet, da det ofte er væsentligt bedre end de lokale versioner.

Husk i øvrigt at det altid er en fordel at være konkret. Hvis du har en god ide til banneret, som kræver et billede fra en bestemt vinkel, så spørg specifikt efter det.

Har selv prøvet at have følgende dialog:
Mig: “Har i ikke flere billeder end dem her?”
Kunden: “Nej, du har fået dem alle sammen.”
Mig: “Det var ærgeligt, for hvis jeg havde et fra siden, så kunne jeg gøre sådan her” (Indsæt selv fantastisk kreativ ide i stedet for sådan her)
Kunden: “Nåå, et fra siden, jamen det har jeg da, sender det lige til dig.”

Vær stædig!
Materialejagt er for så vidt en ganske banal ting, men også et kritisk punkt i processen som kan være afgørende for kvaliteten af det produkt du kan leverer til kunden. Og, lets face it, om et halvt år, når kunden sammenligner det banner som du har lavet med et fra en konkurrent, så tænker hun jo ikke: “Nå nej, han havde jo heller ikke det bedste materiale at arbejde med.”

Derfor, gør dig selv, og ikke mindst kunden en tjeneste, vær stædig!

Det var slut på den første, og mindst tekniske del, af artikelserien om banneroptimering.
Næste del kommer inden for de nærmeste par dage.

Kunsten at optimere et banner - ny artikelserie

tirsdag, 17. juli 2007

Jeg var i sidste uge med til at slukke to ildebrande, og begge af dem var relateret til bannermateriale, produceret af andre bureauer, der ikke opførte sig som det skulle, og det på trods af at de tilsyneladende var produceret inden for specifikationerne.

Det fik mig til at tænke på, at jeg egentlig aldrig har set nogen artikler eller indlæg der handler specifikt om kunsten at optimere et banner.
På trods af de stadigt hurtigere internetforbindelser, så er det et vigtigt område, og derfor vil jeg over de næste par uger lave en artikelserie om emnet.

Ved ikke helt hvor mange artikler det bliver til, da det afhænger af hvordan jeg ender med at gruppere tricksene, men jeg har en liste med 15-20 tips klar, så der skulle være til et til et par stykker eller tre.

Så, følg med fra i morgen :-)

I øvrigt så handler denne artikelserie kun om den tekniske optimering, ikke om optimering af budskab eller klikrater, det må blive en anden god gang.

Yeah teaser

mandag, 16. juli 2007

Til de nysgerrige kan jeg lige fortælle at vi netop har smidt en teaser-side for Yeah online:
www.yeah.dk

Dertil er der også knyttet en seperat blog, hvilket betyder at der bortset fra launch ikke kommer sikkert ikke kommer flere indlæg om Yeah herinde.
Så, vil du holde dig updateret, så foregår det fremover på www.yeah.dk.

Upload af video på Yeah

mandag, 9. juli 2007

Yeah logoJeg skrev for halvanden måned siden om Yeah, et stort projekt vi er igang med for Jubii, og nu er tiden kommer til at fortælle lidt mere.

En af de vigtigste ting når man laver et site der baserer sig på brugergenereret indhold, er at gøre det nemt og overskueligt for brugerne at lægge indhold ind. Det giver måske lidt sig selv, men i forhold til tilsvarende sites, syntes vi at det er et punkt hvor vi har mulighed for at gøre det bedre.

Og det har vi så forsøgt, hvilket dette indlæg handler.

Upload af indhold
Det første skridt i forbindelse med upload er naturligvis at vælge hvad man vil uploade, og på Yeah kan der vælges mellem video, billeder og links. Herefter skal man vælge den konkrete fil og sende den afsted:
Screen 1 section
(Klik på billedet for at se et større udsnit)

Ventetid
Når man sender video afsted, så er der typisk tale om halvstore filer, og selv på hurtige forbindelser betyder det, at upload sagtens kan tage rigtigt mange minutter.

Derfor har vi valgt at man på første skærmbillede kun skal vælge den fil man vil uploade, og så kan man efterfølgende indtaste overskrift, vælge kategori m.m. mens den uploader. På den måde udnyttes ventetiden optimalt.

Da der kan være tale om en lang ventetid, er det også vigtigt at brugeren får et tydeligt feedback på hvordan det går, sådan så de ikke tror at siden er gået død. Udover at vise hvor mange procent og MB der rent fysisk mangler, så forsøger vi også at regne ud hvor mange minutter det omtrent vil tage. Så kan man jo lave en kop kaffe, hente en pizza, ja eller måske endda optage endnu en film, mens der uploades:
Screen 2 section
(Klik på billedet for at se et større udsnit)

Mere ventetid
Inden videoen kan vises på nettet skal den konverteres fra det format den kom i og til flv (Flash Video Format), og det betyder at der igen vil være tale om lidt ventetid. Men, heldigvis er det i denne omgang bare vores servere der skal knokle, brugeren kan lave lige hvad han har lyst til imellemtiden, så derfor tilbyder vi at sende en mail når videoen er konverteret og klar til at blive vist:
Screen 3 section
(Klik på billedet for at se et større udsnit)

Det var et par de ting som vi har gjort for at gøre forløbet så enkelt og smertefri som muligt.
Hvis du har andre gode forslag, så smid endelig en kommentar, er ikke umuligt at det kan nå at komme med endnu.

Hvis du klikker på et eller flere af de små udsnit, så kan du i øvrigt se nogle flere detaljer.
Bloggen var desværre ikke bred nok til at vise dem i naturlig størrelse, og den slags bliver altid noget fnidrede hvis man skalerer dem ned.

Undgå suboptimering - både i din kode og alle andre steder!

onsdag, 4. juli 2007

Viden kan både være en lyksagelighed og en hæmsko, alt efter hvordan man bruger den.

Suboptimering når man koder
Et eksempel er når man sidder og koder, og måske går efter den på papiret optimale løsning i første hug.
Med andre ord, så begynder man måske at performance optimere på delelementer af koden lang tid før man har det fulde overblik over hvad løsningen samlet kommer til at indeholde.

Umiddelbart lyder det måske smart, løbende at performance optimere, ekstra performance er jo altid godt, og hvorfor gøre noget til sidst som kan gøres med det samme?

Den aller, aller vigtigste grund er, at det på forhånd er meget svært at sige præcis hvilken del af koden, eller projektet som helhed, der vil være flaskehalsen: Måske er det en funktion der kaldes ofte, måske er det en gennemsigtig gradient, måske er det et dårligt indeks på databasen, måske måske måske.

4 timer brugt på optimering et sted giver måske kun en samlet hastighedsforøgelse på 1%, mens 1 time brugt et andet sted kan fordoble performance. Det har jeg i hvert fald selv været ude for.

Det er klart, at det er godt at have performance overvejelser med fra første færd, og har man fundet en ny måde at gøre en given ting på, som både er lige så hurtig at kode og som stadig producerer overskuelig kode, så er det naturligvis oplagt at bruge den.
Men, mærker man at man begynder at lave krumspring for at optimere, så gem det til senere.

Suboptimering andre steder
Men, det er ikke kun når man koder at man kan være tilbøjelig til at optimere de forkerte ting, også uden for computerens verden kan der være gevinster at hente.

Prisjagt
Forestil dig f.eks. at du skal ud og købe en ny dvd-afspiller, og du har fundet ud af hvilken model det skal være.
Hvor lang tid skal du så bruge på at lede efter den billigste pris?

Hvis der er tale om noget til under 1000 kroner, så er svaret: Ikke ret længe.
Bruger du eksempelvis 1 time og opnår at spare 150 kr, så er det jo en underskudsforretning hvis den samme time kunne have givet dig en indtægt på 300 kroner.

Parkeringsjagt
Et andet eksempel kunne være, at du arbejder i udkanten af København og skal til et møde inde i byen.
Skal du så tage din egen bil eller en taxa?
Husk på, det tager tid at finde en parkeringsplads (tid=penge) og det koster også noget at parkere.

Svaret vil afhænge af mange variabler, men selvom man har egen bil er det en overvejelse værd.

Aftensmaden
Lad os sige at du står for aftensmaden og skal lave spaghetti med kødsovs.
Du ved at magert kød er sundt og at økologi er godt for dyrene, så derfor bruger du 35 kr. på noget godt fars.
Men samtidig tager du måske den første og bedste pasta til 5 kr. og det på trods af at man i løbet af måltidet rent faktisk spiser mere pasta end kød.

Spørgsmålet er jo så, hvor meget du får ud af at der er tale om noget bedre, eller om det ville være bedre at bruge 25 kr. på kød og 15 kr. på pasta?

Igen, så kender jeg ikke svaret, men det er værd at tænke over.

Pointen bag alle eksemplerne er, at man ikke skal fokusere på den enkelte handling, men på det store billede.
Det er nemlig den eneste måde at undgå suboptimering.