Så blev det tid til at opdatere bloggen igen, efter en lidt for lang pause.

I forbindelse med mit arbejde hos Aarhuskontoret Elektrisk har jeg været med til udviklingen af et nyt website til Nytsyn. Sitet er optimeret til at fungere på både desktop og iPad. Der udover er der også udviklet en lidt simplere mobil version af websitet, som bla. udnytter brugerens GPS position til at lokalisere butikker i nærheden.

Credit for det lækre design går til til min kollega Anders Nørbæk Rasmussen

Sitet er bygget i Umbraco CMS.

Så tjek det nye fede site ud her: www.nytsyn.dk

Jeg faldt lige over et blogindlæg på theFlashBlog af Lee Brimelow (fra gotoandlearn.com). Han omtaler et nyt værktøj til Flash, der er under udvikling. Værktøjet som stadig ikke er færdig udviklet, kan lave timeline animationer om til html5 animationer. En demo kan ses her http://blog.theflashblog.com/?p=2625 (klik på banneret for at se demoen).
Jeg synes det er et spændende værktøj, der har et godt potentiale. Hvis man er vant til at arbejde med Flash så ved man også hvor nemt og overskueligt det er at lave timeline animationer. Det er jo selvfølgelig relativt, men til f.eks. Flash bannere der tit består af enkelte animationer af en art, der ser jeg et stort potentiale i sådanne et værktøj. Jeg ved pr. erfaring at man tit ender med at skulle sidde og tweake sine animationer før det er perfekt, og jeg kan forstille mig det er noget mere overskueligt at have en timeline man kan sidde og justere i, og en række MovieClips (med egen timeline), fremfor at skulle sidde og tilpasse X-antal linjer kode i html/css/js for at få sin animation til at spille.
Så hvis dette værktøj kommer til at understøtte masker og effekter som dropshadow, blur osv. så tror jeg det kan blive et rigtigt nyttigt værktøj for mange.

Jeg synes det er tydeligt at Flash får det sværere og sværere mht. udbud og efterspørgsel, og derfor tror jeg at Adobe kommer til at satse meget på at Flash i fremtiden bliver et værktøj der kan eksportere flere forskellige formater ud. Molehill som er en af de kommende store ting til Flash, gør jo at Flash bliver en stor spiller på spil markedet, og dette bakkes jo også op af at Unity har meldt ud at de vil supporte AS3 og Flash inden længe. Så jeg tror at Flash kommer til at få en ny men større rolle inden for de kommende år. Som Flash nørd kan jeg jo kun sige at jeg synes at Flash er et fantastisk værktøj at udvikle i

Michael Brydebøl twittede lige til dette fede CSS gradient værktøj. Det er super simpelt at bruge, og man får returneret en omgang CSS der er lige til at copy/paste ind i sit stylesheet. Værktøjet kan findes her: http://gradients.glrzad.com/ . Eneste ulempe ved dette værktøj er at det ikke understøttes af IE 8 og ned efter. Men man kan også benytte dette værktøj http://projects.korrelboom.com/gradient-generator/#top der dog ikke er lige så fleksibelt, men det kan bruges i IE.

Ellers lige en kort opdatering! Jeg er stoppet hos Scanad Reklame Bureau i Århus, efter lige knap 3 år. Jeg er startet hos Århuskontoret Elektrisk, hvor jeg er blevet ansat som Creative Digital Developer. Jeg arbejder stadig med webudvikling, men er også kommet over app’s området. Stillingen byder på lidt andre udfordringer end jeg plejer at arbejde med, da jeg er mere med i den kreative proces fremfor ren kodning. Det er super spændende og sjovt

Jeg sidder til tider og skal udvikle diverse Flash bannere for forskellige kampagner, og i den forbindelse løber jeg tit ind i diverse problemer, som jeg er sikker på at andre Flash udviklere også møder når de laver bannere. Så jeg har gjort mig lidt tanker om hvad jeg synes der virker og ikke virker i en bannerkampagne.

Nogle af de problemer man tit løber ind i når man producerer Flash bannere er, man får en bannerspecifikations liste stukket i hånden og den siger typisk noget i stil med:
Producer 7 bannere i størrelser fra 300×250 px til 930×600 px. De må max fylde 30-50 kb stykket, og nogle af dem skal måske være ekspanderende.

Det næste der sker er så lidt afhængig af hvordan afdelingen man arbejder i/sammen med fungerer. Enten får man et design som man så skal lave bannerne ud fra, eller så får man selv lov til at designe bannerne. Lige meget hvad så sidder man tit med problemet at man skal lave noget rigtig fedt visuelt og det må fylde 50kb max. På et banner på f.eks. 300×250 px kan det nok godt lade sig gøre, men på et banner på måske 960×600 px kan det godt gå hen og blive lidt mere tricky. Mere plads = større billeder og plads til mere lir. Men et eller andet sted giver det jo ikke mening at man får flere pixels at lege på, men stadig 50kb  at lege med.
Ok det kan vi sikkert godt blive enige om kan være et problem, da man så tit må gå på kompromis med kvaliteten af billedematerialet brugt i banneret og måske også de fede effekter og lign. Der er diverse tricks man kan bruge for at bringe KB størrelsen på diverse ting ned, men det har jeg ikke tænkt mig at snakke om her. Det jeg egentlig hellere vil snakke om er “Kunne man gribe hele kampagnen anderledes an?”.

Hvorfor må et banner kun fylde omkring 50kb? Det er et økonomisk spørgsmål! Man kan sagtens købe flere KB hos dem der skal hoste/distribuere bannerne. Det vil selvfølgelig betyde at hvis du har 7 bannere der må fylde 50kb stykket, og de koster et fiktivt tal af 10.000 kr at få distribueret, så vil 7 bannere af 100kb måske koste 20.000 kr at få ud. Man kan selvfølgelig forhandle sig til en pris, men det er lige meget i dette eksempel.

Det jeg tænker er “har du egentlig brug for 7 forskellige bannere?”. Lad os tage et eksempel som ekstrabladet.dk. Du køber 1 dags visning, og det er lig med en eksponering på ca. 1.8 mio visninger i døgnet.
På en bannerproduktions liste vil det tit fremgå at 3 ud af de 7 bannere er 3 forskellige formater til Ekstrabladet.dk. 930×180 (kan være ekspanderende), 300×250 og 930×600.
Dvs. du har på en dag, 3 bannere der ligger klods op og ned af hinanden med samme budskab og sikkert samme layout. Er det godt? Jeg vil sige nej! Klik-raten på bannere er i forvejen ikke ret høj, så at du har 3 steder hvor der er i bund og grund det samme banner, hvor der står “Klik her!!” hjælper ikke på det. Og at de 3 bannere er mærket af at de har en 50kb max størrelse gør dem som regel ikke ret pæne, tvært imod.

Jeg vil derimod mene at man kan komme meget længere med 1 rigtig godt banner. Her mener jeg dog ikke at man skal sige “hey så sparer vi jo penge, da vi kun skal bruge producere 1 ud af 3 bannere!” Nej man skal istedet bruge pengene på det ene banner. Køb plads til 150kb (eller mere)  i et banner, og lav et rigtigt flot og godt banner, frem for 3 dårlige bannere.
Nu ved jeg godt at jeg lige skrev at klik-raten på bannere i forvejen er meget lav, og derfor er det måske logik at 3 bannere giver 3 gange større sandsynlighed for klik frem for 1 banner. Den påstand vil jeg mene er helt forkert!
Jeg vil påstå at der er større sandsynlighed for at brugeren klikker på et rigtigt lækkert banner, der har plads til et godt budskab, frem for 3 knap så elegante bannere. Jeg vil endda påstå at brugeren finder det negativt at blive spammet med det samme “KLIK HER!!” budskab. Tjek evt. denne artikel som handler om hvorfor folk falder fra brands Facebook/Twitter profiler, og afmelder sig nyhedsmails: http://www.markedsforing.dk/artikler/vis/artikel/derfor-skrider-dine-fans/. Jeg synes godt man kan overføre nogle elementer fra artiklen over til banner kampagne konceptet. Brugeren gider ikke spammes med et eller andet kedeligt budskab der bærer præg af noget uprofessionelt (læs dårlig kvalitet af billeder i bannere).
Jeg tror derimod på at du kommer meget længere ved at lave et rigtigt godt banner! Tænk på at klik-raten på Flash bannere er meget lav, så du skal ikke sigte efter at få mange klik. Misforstå mig ikke, det er godt at få mange klik, men læg hellere vægten på at sende et godt og positivt budskab til brugeren. De ser dit banner, og det kan godt være de ikke klikker på det, men underbevist får de et indtryk af afsenderen og budskabet. Så derfor er det vigtigt at lave et banner der giver brugeren et rigtigt godt indtryk!
Lige en side note. Personligt tror jeg at mange (inkl. mig selv) har et indbygget filter for banner reklamer. De er blevet en del af designet, og det er sjældent man lægger mærke til dem og husker dem. Derfor synes jeg at det super vigtigt at lave et banner der har fokus på at fange brugerens opmærksomhed på en positiv måde.

Jeg vil lige gennemgå nogle ting jeg synes er do’s & dont’s.

• Brug ikke expanderende bannere . Ja de var fede for 3 år siden, da det hele fløj rundt på sitet, og vi ikke havde set meget af den slags før. Nu er de bare irriterende når man kommer til at køre musen over dem, og de fylder hele siden. Det flytter brugerens fokus fra bannerets indhold over på “hvor fanden lukker jeg det lort??”.
• Film på bannere. Jo film kan være rigtigt godt, og lyd også. Men vær meget obs på hvilket budskab filmen har. Er det virkelig nødvendigt at have en 20 sek lang reklame film for at illustrere at der er 5L mælk på tilbud i Rema? Hvis du skal lave reklame for f.eks. en film eller en trailer for et computerspil, så synes jeg en film er et must. (Husk at film skal streames, og dette kan være en ekstra omkostning! Husk også at film bliver somregel leveret i bredformat, lav derfor også dette i oplægget/layoutet på banneret.
• Tekster som “Klik her for at se mere!!” er negative. Brugeren er mistroisk over for det meste på nettet, og betragter derfor sætninger i denne stil som spam. Det er ikke tydeligt nok hvem afsenderen er, og hvor man ender henne når man klikker på banneret. Består banneret også af billeder af lav kvalitet, er dette kun med til at styrke denne tro. Brug derimod sætninger som “Læs mere på Rema.dk”. Her er det tydligere hvem afsenderen er (selvfølgelig bakket op af et logo) og det er tydeligere hvor man ender hvis man klikker på banneret.  Brugeren ved godt at når de klikker på banneret kommer de et nyt sted hen, så “klik her” er bare at gøre dem dummere end de er (Negativt signal at sende).

Tænk over hvilket banner du vil vælge at købe. Skal det være 930×180 (top banner somregel), eller skal det være 930×600 (somregel banner nede midt på sitet?)
Det øverste banner har god eksponerings muligheder, da det er det første brugeren ser. Man kan måske godt argumentere at det også er lige præcis det banner brugeren ser oftest, og derved også har den største “filter effekt” på. Det har jeg ingen statistik på, men det er en teori. Jeg synes man skal overveje hvilket budskab man vil sende, og hvad man ønsker at vise. Skal der være en film på banneret så vil jeg mene at 930×600 er det bedste bud, da der er plads til højere opløsning af film på banneret.
Man skal være obs på at der nok på de fleste skærme skal scrolles lidt ned før brugeren ser banneret. Derfor vil evt. animationer i starten af banneret måske gå til spilde, da brugeren ikke når at se banneret før det er færdigt med at animere alt indhold ind. Så kan man evt. bruge krudtet på at lave animationer der er federe når de står på repeat.

Det er vigtigt at man får snakket godt med sin kunde, og får dem forklaret hvorfor man vil anbefale at bruge 1 banner frem for 3 bannere. Kunden tænker sikkert med det samme “3 bannere = flere sete budskaber. Større klik-rate. Alt sammen lig med flere penge i kassen”. Men som jeg lige har beskrevet så ser jeg det lige omvendt. Forklar dette til din kunde. Det er vores ansvar som de professionelle at sørge for at kunden for mest for sine penge, og derfor er det også vigtigt at kunden lytter til dig og hvad du vejleder dem til. Det skal ikke være dig der lytter til hvad kunden dikterer, for de tror de ved hvad de vil have, men det gør de somregel ikke

Det var hvad jeg lige havde på hjertet. Jeg hører gerne flere bud og kommentare. Er der andre der har lign. eller andre problemer når man laver bannere?

Alle os IT-nørder kender det alt for godt! Lige så snart man ved lidt om hvordan man genstarter en pc, installerer en printer, ved hvad en browser er og generelt bare har lidt forstand på computere, så er man pludselig hele familien og vennekredsens IT-Ekspert! Det kan tit resulterer i opkald kl. kvart over “F*** nu af, jeg gider ikke se på din 10 år gamle skod computer, der ikke engang kan trække minestryger!!”. Men suk… sådan hænger verden jo sammen..

Men jeg vil lige gøre opmærksom på et sejt værktøj der kan være til stor gavn! Teamviewer er et super smart værktøj til Fjernsupport, og man kan hente en gratis version (til privat brug). Det er ultra nemt at sætte op, og det kører lyn hurtigt! Man opretter en konto (gratis) og den konto kan man så knytte “partnere” til. Det virker således at man installerer programmet på de maskiner man skal kunne tilgå, og opretter en konto eller logger ind på eksisterende konto. Der er en masse smarte funktioner mht. at sende lyd direkte imens man giver support, og meget andet godt. Teamviewer er også kompatibelt mellem PC, MAC og Linux. Endnu mere smart er at man kan tilgå Computere via sin iPhone eller iPad. (man kan dog ikke dog ikke  tilgå  iPhone/iPad fra sin computer).

Dette fikse værktøj kan jo også være ret handy hvis man har en kunde der kræver support. Jeg oplever tit kunder der skriver “websitet ser sjovt ud på min computer! Gør noget!” Og så sidder man der og skal gætte sig frem til hvad det er, der er så morsomt på deres skærm.. Men med Teamviewer kan man jo hurtigt lige gå på, se deres skærmbillede, flytte rundt med musen og vise dem hvad de gør forkert, eller se hvad man selv har gjort forkert (det hænder jo).

Så næste gang jeg kommer hjem til mine forældre skal jeg have installeret Teamviewer på deres maskine! Så kan jeg hurtigt vise min mor hvad browseren er, selvom jeg har fortalt hende hun bare skal dobbelt klikke på ikonet jeg har navngivet “INTERNET!!”.

Endnu engang må jeg takke Michael Brydebøl for at dele fede links på Twitter, til fedt web-relateret stuff, som jeg så kan fortælle videre om her på bloggen!

Idag falder snakken på HTML 5! HTML 5 er jo nyt, og mange har ikke rigtig taget det i brug endnu, inklusiv mig selv. Har lavet lidt CSS 3 på en løsning, men det er så også ved at være deromkring det jeg har fået spyttet ud på et irl projekt. For mit vedkommende har det været lidt et spørgsmål om, hvor skal man starte? Et godt bud er her: http://initializr.com/. Initializr har lavet en smart lille service på sitet hvor man bare kan downloade en fin lille start-pakke, som man så kan bygge videre på. Og i løbet af meget kort tid, har man så skelettet til et HTML 5 site kørende. Det smarte er at man lige hurtigt kan afkrydse de ting man ønsker at bruge på sitet, f.eks. JQuery, server konfiguration og andet godt. Derefter trykker man bare download og voila, så har man en startpakke man kan begynde på! Nice & Easy

Jeg vil også lige anbefale www.lynda.com som efter min mening er et rigtigt godt sted at gå hen når man skal lære noget nyt inden for kode/animation/design osv. De har indtil videre lavet 4.5 timers HTML 5 video tutorials (på engelsk), som man kan finde her: http://www.lynda.com/home/DisplayCourse.aspx?lpk2=67161. Det kræver dog at man har et abonnement før man kan se dem alle, men det koster ca. 120 kr om mdr, og jeg synes bestemt det er det værd. Man kan evt. lokke ens chef til at betale det, da det jo kun gavner firmaet

Men nu ved jeg da hvad min tømmermænds plagede søndag kommer til at gå med, når jeg når så langt!

God weekend

Jeg samler lige et Twitter tweet op fra Michael Brydebøl og smider det i bloggen!  Isotope er et super fedt JQuery plugin, og du kan finde demo’er og dokumentationen her: http://isotope.metafizzy.co/demos/adding-items.html. Jeg har set lign. funktionalitet lavet i Flash, og har også selv leget med konceptet før. Men det her plugin får det til at ligne en leg at sætte op, og kan man slippe for at lave det i Flash, så er der nok nogle smartphone/tablet brugere der bliver glade.

Dagens fif er om JQuery!

Jeg er lige kommet forbi dette lækre site der byder på en masse fede ting for webdesignere og udviklere. Sitet indeholder en sektion med en masse fede og nyttige JQuery plugins, som er super alternativer til f.eks. Flash. Jeg er dog selv stor Flash fan, men hvis man kan lave tingene i JQuery synes jeg tit at man opnår flere fordele, specielt mht. mobile websites!

Så tjek det ud her: http://webdesignledger.com/freebies/10-useful-jquery-plugins-for-images

Dagens lille fif! Min tidligere kollega Thor Madsen-Holm gjorde mig for noget tid siden opmærksom på et godt lille website til folk der arbejder med XSLT. http://pimpmyxslt.com/ indeholder (indtil videre) 7 gode artikler om XSLT, med fokus på brug i Umbraco (CMS). Men noget af det fedeste er XPath Axes Visualizer’en der giver brugeren et hurtigt overblik over sin node-struktur! Det kan til tider være svært at overskue ens XSLT, og denne lille smarte “gadget” hjalp mig meget da jeg startede ud med at lære XSLT. Manden bag herligheden er Chriztian Steinmeier, som jeg dog ikke kender personligt. Men det er et fint sted at gå til hvis man er ny i XSLT, eller hvis man lige skal bruge et par gode XSLT fif

I fredags da jeg kom hjem havde jeg modtaget bogen #2 The Smashing Book som jeg havde bestilt, efter min kollega Michael Brydebøl’s anbefaling. Jeg har ikke fået læst hele bogen endnu, men jeg er så småt kommet igang, og vil give et lille foreløbig preview her.

#2 The Smashing Book

Bogen omhandler web/app design, usability og web development, nu hvor vi går ind i en ny tid med smartphones og tablets. Læseren bliver introduceret til emnerne via 10 kapitler der strejker sig over 355 sider. Sproget er på engelsk middel niveau.

Rent visuelt og helheds indtryk er bogen lavet i et lækkert design med hardback, og der er påsyet et diskret bogmærke, så man altid kan markere hvor man er kommet til. En lækker lille detalje! Bogen er godt dokumenteret med kilder i form  af fodnoter. Da jeg endnu ikke har læst hele bogen vil jeg nøjes med at liste overskrifterne på de 10 kapitler:

1. The Principles of Great Graphic Design

2. Visible vs. Invisible Design

3. Design Mobile User Experiences

4. Sketching, Wireframing and Prototyping

5. Red Flasg (Warning Signs) in Web Development

6. The Future of Web Typography

7. Applying Game Design Principals to User Experience Design

8. When They Click: Psychology of Web Design and User Behavior

9. Design Patterns in e-Commerce Websites (Study)

10. How to Make a Book (Like this one)

Jeg vil mene at bogen er et must have for webdesignere, frontend udviklere og egentlig kunne den også være god læse for projektledere inden for web.

Den kan købes her: https://shop.smashingmagazine.com/ og den koster ca. 27,40 EUR inkl. fragt. (ca. 200 kr). Så skynd dig ud og køb den