Bij het ontwerpen van een nieuwsbrief  is het tegenwoordig een must om te ontwerpen voor een mobiel apparaat. Of het nu een telefoon of een tablet is: tegenwoordig wordt meer dan de helft van de e-mails die je stuurt geopend op mobiel.

Echter, zomaar ‘even’ je designer opdracht geven om een nieuwsbrief te ontwerpen voor zowel mobiel als desktop is nog niet zo makkelijk. Dit kan op verschillende manieren: fluid, responsive of adaptive. Je designer zal je deze vraag zeker stellen, dus lees hieronder eerst even de verschillen.

Fluid design
Fluid design is de eerste stap na een statisch design. Een statisch design wordt bijna niet meer gemaakt: deze worden namelijk op een vaste breedte ontworpen. Voor web kan dit echter niet meer: er zijn zoveel verschillende beeldschermen, dat dit niet werkt.
Daarom werd ‘fluid’ design bedacht: er wordt niet langer ontworpen op vaste breedtes, maar op percentages. Een design dat op 100% gemaakt wordt, schaalt dus automatisch naar 100% van het gebruikte beeldscherm.

Groot nadeel van een fluid design is echter dat je niet altijd grip houdt op de breedte van een e-mail nieuwsbrief. Op grote schermen betekent dit dus dat dit ook helemaal gevuld wordt met tekst. Een stukje tekst dat dan op mobiel 10 regels is, is op een groot scherm maar 1 regel. Het valt niet mee om dit altijd netjes te houden.

Adaptive design
Een adaptive design is de volgende stap. Dit betekent dat de nieuwsbrief opgedeeld wordt in ‘breekpunten’. Op bepaalde breedtes verandert dan het design, waardoor het ontwerp altijd aanpast naar aanleiding van het scherm waar je naar kijkt.
Responsive design
Responsive design is eigenlijk altijd de beste optie: het lijkt op adaptive design, maar waar adaptive design tussen de ‘breekpunten’ gelijk blijft, schaalt responsive ook nog eens op alle breedtes van een design mee. Het is dus een vloeiend, mee schalend ontwerp dat er op alle resoluties goed uit ziet.
In de praktijk
De verschillen goed bekijken? Bezoek dan de site Liquidapsive.com eens. Selecteer rechtsboven of je de html static, responsive, adaptive of liquid wilt zien en verklein dan je scherm eens.