El Responsief ontwerp is tegenwoordig van vitaal belang vanwege de verschillende formaten waarmee een gebruiker wordt geconfronteerd vanaf zijn tablet, mobiel en zelfs computer. Dit responsive design in e-mailmarketing en landingspagina's is meer dan belangrijk voor omnichannel communicatie met onze klanten.
Je moet het dus serieus nemen om verschillende sjablonen mee te nemen verschillende breedtes om te komen met het beste ontwerp mogelijk die nieuwsbrieven of die bestemmingspagina waar toekomstige klanten die we willen dat ze converteren van onze advertenties op Google of Facebook terechtkomen.
Responsief ontwerp in e-mailmarketing
E-mailmarketing is een van de manieren om productaanbiedingen of die nieuwe berichten die op onze blog zijn gemaakt, aan te kondigen dus op een diepere manier smal met al onze volgers.
Dat deze nieuwsbrieven responsive zijn, betekent dat ze zijn perfect te zien vanaf een mobiel, een tablet of een computer. We moeten dus proberen over de nodige tools te beschikken, zodat alle visuele elementen harmonieus genoeg zijn om de nieuwsbrief gemakkelijk te kunnen lezen.
IKEA nieuwsbrief
Responsief betekent dat de weergave van een pagina op verschillende apparaten is altijd correct Hiervoor hebben we tools e-mailmarketing die ons helpen om de nieuwsbrief die in verschillende formaten is gemaakt, te testen en zo waarden zoals de opvulling of de marge aan te passen, zodat ze perfect worden geherpositioneerd terwijl we de breedte van onze browser verkleinen.
In de webdesign met CSS "Media Queries" worden gebruikt om een website te ontwerpen volgens het formaat. Tot 360px zou zijn voor een mobiel, en van 360px tot 650px zouden we wijzigingen kunnen aanbrengen voor al die gebruikers die onze website vanaf een tablet zien.
Enkele van de principes voor onze nieuwsbrieven voor e-mailmarketing zijn:
- Een duidelijke visuele hiërarchie: een titel in H2 om de tekst in alinea-indeling te laten.
- Twee verschillende bronnen: een voor de titel en een voor de tekst maakt onze nieuwsbrief beter leesbaar.
- El kleurgebruik om titel, tekst en andere elementen te onderscheiden: we kunnen geleidelijk van donkergrijs naar lichter gaan.
- Un CTA (oproep tot actie) duidelijk en herkenbaar: als het logo van ons bedrijf in rood is, kan de CTA in deze kleur en de rest in een complementaire kleur.
We geven je een duidelijk voorbeeld van iets geweldigs responsive design in een nieuwsbrief uitgevoerd door Filmin en dat kun je zien in de meegeleverde afbeelding. Duidelijke typografie in wit en de tekst in heel lichtgrijs, maar dat stelt ons in staat om snel de verschillende ruimtes te visualiseren waarin we worden uitgenodigd om te lezen als we dat willen. De CTA is niet dat het uit een andere wereld komt, maar het helpt bij dat reproductie-icoon en dat doet ons zien wat ons te wachten staat.
Voldoende spaties in de marge, wit als hoofdkleur voor tekst en die perfect past bij het logo Van het merk; omgeven door dat grijs waardoor het opvalt. Een opvallend beeld dat het punt zet voor een nieuwsbrief die vanaf het eerste moment haakt. Aan de zijkanten worden ook ruimtes gelaten zodat niet de hele breedte van het scherm wordt "opgegeten".
In de desktopversie handhaaft deze principes, laat zelfs meer ruimte in de teksten en laat aan elke kant een grote marge:
Responsief ontwerp op een bestemmingspagina
De dezelfde principes kunnen worden gebruikt in responsive design van een bestemmingspagina. Het is uiterst belangrijk om alle tijd van de wereld te nemen om de sjabloon goed te kiezen en enkele regels in het ontwerp te volgen:
- Visuele eenvoud: We hebben het over het houden van lege ruimtes om de focus op CTA's te leggen.
- Mooie en boeiende beelden voor de lezer, zonder de resolutie te vergeten en dat ze er perfect uitzien.
- Het belang van kleur en dat benadrukken we nogmaals.
We moeten werken aan het responsieve ontwerp van een landingspagina voor een mobiel, tablet en desktop. Neem de tijd die nodig is om telkens opnieuw te proberen bij elke wijziging Het wordt gezien in deze drie formaten, omdat we onszelf kunnen vertrouwen en kunnen vergeten dat de wijzigingen die in CSS zijn aangebracht er op mobiel vreselijk zullen uitzien.
Hotjar-bestemmingspagina
Het is een taak die vervelend kan zijn, maar het is van vitaal belang dat we de tijd nemen om elke verandering te testen. De gebruik van zijmarges en probeer, voor zover mogelijk, de regels in de CTA's of actieknoppen niet te missen:
- Dat de afstand ten opzichte van de tekst en de knopmarge is progressief in alle drie de formaten. Het is niet klein noch groot en staat op dezelfde hoogte.
- La verhouding in de grootte van de CTA-knop met de rest van de elementen waar het zich bevindt moet worden voorzien.
Een duidelijk voorbeeld hiervan is het werk van Shopify op uw bestemmingspagina op desktop en waarin u kunt zien in de mobiele versie. Aandacht voor het gebruik van kleuren, witruimtes en die teksten met hun passende afmetingen en typografie:
Een reeks tips om te hebben een betere bestemmingspagina voor uw bedrijf of online winkel en die nieuwsbrieven die zo belangrijk zijn om de updates en die promo's voor uw gebruikers te krijgen.