Schalen of opbouwen: waarom één ontwerp niet overal past

Het lijkt efficiënt: één banner ontwerpen en die naar elk formaat schalen. Het resultaat zijn lege vlakken, afgesneden koppen en tekst die niemand kan lezen. Deze gids legt uit waarom schalen niet werkt, en hoe je een campagne in plaats daarvan per vorm opbouwt.

Waarom schalen niet werkt

Neem een Medium Rectangle van 300 × 250 en zet die in een leaderboard van 728 × 90. Je hebt twee keuzes, en geen van beide werkt:

• Passend in de hoogte. Het ontwerp krimpt tot 36% en wordt 108 pixels breed. Rechts blijven 620 pixels leeg, en een kop van 24 pixels wordt nog geen 9 pixels hoog.
• Passend in de breedte. Het ontwerp groeit tot bijna tweeënhalf keer zijn grootte en wordt ruim 600 pixels hoog. In de 90 pixels van de leaderboard zie je daar nog geen zesde van: een stuk kop, een stuk foto.

Het probleem is de verhouding. Een 300 × 250 is 1,2 keer zo breed als hoog, een 728 × 90 ruim acht keer, en een 160 × 600 is maar iets meer dan een kwart zo breed als hoog. Geen schaalfactor maakt van het ene vlak het andere. Uitrekken vervormt je logo en je foto, en bijsnijden haalt weg wat ertoe doet.

Vijf vormen in plaats van 37 formaten

Bekijk een set daarom niet per formaat, maar per vorm. Sizewright deelt elk formaat in bij een van vijf vormen, op basis van de breedte gedeeld door de hoogte:^[1]

Formaten binnen één vorm lijken genoeg op elkaar om dezelfde compositie te delen. Een 300 × 250 en een 1080 × 1080 vragen om dezelfde opbouw, alleen op een andere schaal. Tussen vormen moet de compositie zelf veranderen: wat waar staat, hoe groot het is en hoeveel tekst erbij past.

Wat er per vorm verhuist

Componeren betekent dat dezelfde onderdelen per vorm een andere plek krijgen:^[2]

• Strook. Eén leesregel van links naar rechts: logo, kop, knop. Voor een subkop is geen ruimte, en het beeld wordt een uitsnede: een product, een detail, een textuur.^[3]
• Liggend. Het vlak wordt verdeeld: beeld aan de ene kant, kop en knop aan de andere. Het onderwerp van de foto staat aan de kant zonder tekst.
• Vierkant. Alles wordt gestapeld in een vaste volgorde: kop, beeld of aanbieding, knop, logo. Na het beeld is de kop het grootste element.
• Staand. Het beeld vult de ene helft, de tekst de andere, en de knop komt als laatste. De kop krijgt ruimte voor twee of drie regels.
• Toren. Eén stapel van boven naar beneden: logo, kop, beeld, knop. De kop staat in korte regels van een of twee woorden, en de knop is zo breed als de kolom.^[4]

728 × 90

160 × 600

Sizewright werkt met twaalf layoutfamilies, en elke familie heeft voor elk van de vijf vormen een eigen compositie.^[5] In Gesplitst vlak, de layout van het voorbeeld, staan beeld en tekstvlak in een brede vorm naast elkaar en in een hoge vorm onder elkaar. Elk formaat wordt in twee varianten van zijn layout opgebouwd, en de sterkste blijft over.^[2]

Tekst die meebeweegt

Een andere indeling vraagt ook om andere tekst. In een strook past één korte kop; een Half Page heeft ruimte voor een lange kop met een subkop eronder. Schrijf daarom elke tekstregel in meer dan één lengte:

• de kop kort, middellang en lang
• de subkop, als je er een gebruikt, ook in drie lengtes
• de knoptekst kort en lang

Bij Sizewright schrijft elk concept zijn tekst zo, en kiest de engine per formaat de lengte die past.^[5] Hij meet de tekst in een echte browser, tot tien keer per banner. Past het nog niet, dan neemt hij eerst de kortere knoptekst, daarna de kortere subkop en kop, en pas dan laat hij een optionele regel weg.^[2]

Kleiner zetten is geen uitweg. Tekst gaat nooit onder 4% van de korte zijde van het formaat, met een minimum van 10 pixels:

De geschaalde kop uit het eerste voorbeeld kwam uit onder de 9 pixels, en zou dus in geen enkel formaat door de controle komen.

Zelf per vorm ontwerpen

Werk je zonder Sizewright, dan helpt deze volgorde:

1. Sorteer je formaten op vorm. Een set van twintig formaten valt uiteen in hooguit vijf groepen.
2. Schrijf de tekst in drie lengtes voordat je gaat ontwerpen, zodat je per vorm kunt kiezen in plaats van in te korten.
3. Ontwerp per vorm één compositie en begin bij het kleinste formaat van die vorm, zoals de 320 × 50 voor de strook of de 120 × 600 voor de toren. Werkt het daar, dan heb je in de grotere formaten van die vorm ruimte over.
4. Kies een beeld dat zich laat uitsnijden: één onderwerp met rust eromheen, dat zowel in een smalle kolom als in een brede strook overeind blijft.
5. Bekijk elk formaat op ware grootte, niet ingezoomd. Pas dan zie je of een kop van 10 pixels nog leest.

Verder lezen

Bij de sjablonen zie je elk van de twaalf layoutfamilies van Sizewright in alle vijf vormen, in echte banners. Bij Alle formaten lees je hoe de engine elk formaat opbouwt en de tekst inpast, en het overzicht van bannerformaten laat per formaat zien bij welke vorm het hoort.