Motion Designers & HTML5 banners
Webcreationz breidt graag zijn diensten uit. Met nieuwe technieken zoals HTML5 en software van Adobe kunnen er in een handomdraai prachtige animaties en banners worden opgezet, die tablet- en mobile-proof zijn! Geen flash meer, geen grote bestanden om in te laden, klaar voor de toekomst. Daniel van Veldhoven helpt ons hierbij en schrijft hier zijn verhaal. Een aantal jaar geleden begon ik mijn carrière als Motion Designer* en Webcreationz was mijn allereerste klant als ZZP’er. Hij vroeg me of ik een aantal animaties in Flash of Gif kon maken. Helaas was flash geen optie. GIF-jes waren wel een optie en je kan het zelf terug vinden op deze website bij de Slicing/Basing pagina. Het nadeel van GIF-jes zijn het aantal kleuren dat je kunt gebruiken. Ze zijn niet echt geschikt voor een webpagina, en nemen ook behoorlijk wat ruimte in, vergeleken met andere media. Flash verliest zijn populariteit en begint langzamerhand van het web te verdwijnen. Niet lang geleden deed HTML5 zijn intreden en de voordelen kun je er nu al van ontdekken. HTML5 is nog steeds in ontwikkeling en het houdt niet alleen de aandacht vast van Webdesigners, maar ook andere professionals zien er toekomst in. Als Motion Designer zie de potentie om animaties te creëren met de nieuwe HTML5. Bedrijven zoals Adobe maken dan ook programmatuur om mijn werk gemakkelijker daarin te maken, zodat ik me meer op de creatieve invulling kan focussen.
Mooie praatjes, maar wat betekent HTML5 voor mij?
Laten we een banner als voorbeeld nemen. Deze HTML5-“Banner” was gemaakt om als handtekening in een e-mail te kunnen gebruiken. Helaas kunnen we nog geen JavaScript aan de signatures toevoegen. Deze banner is gemaakt met de nieuwe HTML5-technologie en wat gelijk opvalt, is dat het zeer klein in formaat is (ongeveer 250kb). Dat is vele malen kleiner dan een GIF-je. Dit scheelt ruimte op de website, en dat zorgt ervoor dat de website sneller laadt. Het is voornamelijk opgebouwd met CSS-elementen. Dat houdt in dat een vierkant niet grafisch gemaakt is, maar met code. Dat zorgt voor de extra laadsnelheid en lage bestandsgrootte. Bijkomend voordeel is wat we noemen “Responsive”. Omdat grote delen van de banner gemaakt zijn uit code is het mogelijk om het automatisch te laten schalen naar het formaat van de browser of mobile device. Voor jou betekent het dat we in één keer een banner kunnen maken die bijna op alle digitale media past. Verder kunnen banners interactief worden opgebouwd. Je zou op zich kleine websites in banners kunnen bouwen, maar bijvoorbeeld ook spelletjes. Deze banner geeft meer informatie zodra je daar om vraagt en als je verder klikt, dan ga je pas naar de website.
Last but not least is dat banners makkelijk kunnen worden aangepast zonder weer alles opnieuw te bouwen. Tekst en afbeeldingen zitten niet vast (en dat geldt ook voor links). Omdat het nog steeds gewoon een HTML-bestand is, kan het gemakkelijk online worden aangepast. Wie weet zal er in de toekomst ook daarin interactiviteit zitten. Zou het niet geweldig zijn als je banner automatisch updatet qua datum? Of een integratie met PHP en je Database?! Zelf kan ik niet wachten om de bovenstaande “banner” als signature te gebruiken in mijn e-mail (helaas lukt dat nog niet overal even goed).
Eindwoord
Laten we ook in gedachte houden dat deze specifieke HTML5-technologie niet alleen gebonden is aan een banner. Maar je zou hiermee ook het menu of de header van je website kunnen opvrolijken of duidelijker kunnen maken. HTML5 is nu nog steeds in ontwikkeling en de mogelijkheden zijn bijna eindeloos. Aan jou de keus of je mee wilt liften in een nieuwe tijdperk van het web. *Motion Designer: Een specialist in het maken van grafische animaties.
