Banners och annonser i HTML5
Med Apples lansering av Iads till sin mobila plattform blir det allt viktigare att kunna producera annonsmaterial med tekniker som HTML5, CSS och javascript. Här går vi igenom vilka verktyg och tekniker som är mest intressanta.
När man talar om HTML5 som någon typ av interaktiv, multimedial teknik läggs även tekniker som CSS och javascript in i begreppet. Trots att de egentligen är helt separata från HTML och lika gärna kan användas tillsammans med andra versioner av HTML. Här använder vi det vidare begreppet och lägger alltså samman struktur (HTML), formgivning (CSS) och interaktivitet (javascript) och kallar hela paketet för HTML5.
Ett vanligt användningsområde för multimedia på nätet är, förutom spel, annonser. Vanligast idag är att man använder flash som format för annonserna, vilket tillåter både bild, ljud, video, animering och interaktivitet. Något som länge varit svårt eller omöjligt att göra utan att använda någon typ av insticksprogram i webbläsaren.
Nu har emellertid webbläsarna blivit så pass duktiga på att tolka CSS och snabba på att köra javascript att det går att åstadkomma mycket med de teknikerna. Med video- och ljudmöjligheterna i HTML5 tillsammans med javascript och CSS kan man skapa väldigt avancerade interaktiva annonser.
Anledningen till att man alls ska använda något annat än flash handlar om mobilitet. Den i skrivande stund största mobila plattformen Iphone saknar stöd för flash, och konkurrenten Android har heller inget fungerande stöd för tekniken. Både Adobe och Google har lovat att en spelare för flash kommer att komma till Android under året, men även om så är fallet är det oklart hur kraftfull den kommer att vara. Det är därför inte fel att titta på hur man kan använda andra tekniker för att producera digitala annonser istället.
Bra verktyg att använda
Eftersom det handlar om utveckling i standardtekniker för webb så går det bra att använda vilken textredigerare som helst. Några kompetenta är till exempel Dreamweaver, Coda, Textmate, Aptana Studio och CSS Edit, men det finns även massor av andra som fungerar lika bra.
De flesta sajter har en övre gräns på någonstans runt 40 kilobyte för en annons, vilket gör att man inte gärna kan använda javascriptbibliotek som Jquery. Det blir istället till att skriva funktionerna själv, och att göra dem så komprimerade som möjligt. Allt för att spara plats.
Aftonbladets annonstestsida
Sätt upp en testmiljö
När man levererar HTML5-annonser så kommer de att publiceras i en iframe på sajten. Det kan därför vara bra att sätta upp en testsajt som fungerar på samma sätt som målsajten under tiden som man utvecklar annonsen. På det viset kan man få formgivningen och funktionen på annonsen att anpassas till sajtens innehåll på ett bra sätt.
Ska man kunna dra nytta av alla de animeringsmöjligheter och multimediapubliceringen som är möjlig i HTML5 krävs en webbläsare som har stöd för dem. I dagsläget är det klent med det stödet i Internet Explorer, som är det överlägset mest använda webbläsaren. Men i mobiler är det läsare baserade på Webkit som Mobile Safari och Android Browser som regerar, vilka har betydande stöd för det mesta ögongodiset. I princip alla »smartphones« har idag antingen redan implementerat webkitbaserade läsare, eller planerar att göra det.
En bra idé är att ladda ner utvecklarpacketen från både Apple och Google för att få tillgång till simulatorerna av operativsystemen och därmed också webbläsarna. Att använda simulatorerna är inte helt representativt för hur en fysisk mobil känns och beter sig, men det är mycket användbart och lättare att hantera under utvecklingsprocessens första skede. När väl det mesta är på plats kan man använda riktiga mobiler för att kunna optimera sin annons (eller webbapp).
Iphonesimultorn
Androidsimulatorn
Ett annat program som kan användas är senaste versionen av Dreamweaver CS5 med tillägget HTML5 pack som har en funktion för att simulera mobila enheter i ett separat fönster. På det viset får man en webbvy som har rätt storlek och som läser CSS-regler för mobiler men som inte har hela operativystemet i bakgrunden på samma sätt som simulatorerna har.
Dreamweavers simulatorläge
Nackdelen med att använda Dreamweaver är att den inte klarar av att simulera enheten mot ett javascript som läser av webbläsarens identifieringssträn (user agent string) och skickar olika kommandon beroende på vilken enhet som används.
Å andra sidan är de senaste versionerna av webbläsaren i Iphone och Android så pass lika att det inte spelar så stor roll. Mobile Safari använder Nitro och Android Browser använder V8. Båda kan testas och köras i respektive webbläsare i datorn för att se eventuella skillnader i hur de hanterar koden.
Utveckling av annonser för Iads
Vill man ge sig på att göra annonser för distribution via Apples annonsprogram Iads till apps i Iphone och Ipad så tillhandahåller Apple ett paket med exempel och guider för hur det ska ske. Det finns också ett testprogram för att testköra annonserna både i simulatorn och i telefonen.
Även om man inte ska distribuera annonserna via Apple så är dokumentationen ändå bra genom att den visar vad som är »best practise« för annonser på mobiler. Mycket av det som finns där kan lätt anpassas eller direkt användas för annonser distribuerade på webben eller av tredje part.
Funktioner att titta närmare på
Av alla de möjligheter som finns för att skapa grafik, animeringar och interaktivitet med HTML5 så är det ändå en handfull som är mest intressant. Som vi berörde tidigare har de allra flesta sajtägare begränsningar för hur mycket en annons får väga. Därför är det av stor vikt att göra så utrymmessnåla annonser som möjligt. Mycket kan därför skötas av CSS istället för av bilder när det kommer an på grafiken. Ett exempel är att använda övertoningar i CSS istället för att lägga bakgrundsbilder med övertoningar i. Det går också att skapa reflektioner av bilder eller hela element med en enda regel i CSS.
Även animeringar kan skötas via CSS, och blir då också hårdvaruaccelererade på de mobila plattformarna. Något som gör att animeringar flyter betydligt mjukare än om man använder javascript för animeringen istället.
Ett mycket flexibelt element är canvas som fungerar ungefär som en tom bild som man kan rita i med hjälp av javascript. Något som gör att man dynamiskt kan skapa bilder utifrån användarens interaktioner. Till exempel kan man rita en färdväg på en karta, animera en klocka där visarna rör sig eller skapa filtereffekter på bilder.
En användbar funktion i mobila enheter är geografisk positionering. Ofta används en GPS eller assisterad GPS för positionering, vilket gör att man snabbt får ett ungefärligt svar på var enheten befinner sig. Den här datan kan man få tillgång till via javascript, och kan sedan använda för att presentera anpassad data för användaren. Ett typexempel är att användaren klickar på en annons för en produkt – låt säga spolarvätska till bilen – och får en lista på de närmaste bensinstationerna som säljer just den spolarvätskan.
Skärmdump på frågan om GPS-data får användas
Just positionering kräver att användaren godkänner att GPS-data lämnas ut till annonsen, så det gäller att använda den på ett för användaren rimligt och intressant sätt.
Banners och annonser i framtiden
Att webben är en stabil annonsplattform är ganska säkert, men exakt hur den kommer att fungera i framtiden är fortfarande öppet. Som alla medier utvecklas den ständigt, om än i högre takt än till exempel tryckt media. Men ska man kunna nå konsumenterna och fånga deras intresse gäller nog att man inte bara använder en traditionell envägskommunikation. Att erbjuda en större upplevelse och kanske till och med nytta för konsumenten kan vara det som gör att en annons verkligen ger ekonomiskt utfall.
I det läget är de mobila enheterna som telefoner och pekdatorer en plattform som med sin avancerade teknik kan erbjuda dig som annonsproducent eller annonsköpare fler sätt att engagera kunden i din produkt.
Framtiden är mobil, och då också annonserna.