El Responsiv design är viktig idag på grund av olika format som en användare möter från sin surfplatta, mobil och till och med dator. Denna responsiva design inom e-postmarknadsföring och målsidor är mer än viktigt för allkanalkommunikation med våra kunder.
Så du måste ta det på allvar att ta olika mallar med olika bredder för att nå den bästa designen möjligt de nyhetsbrev eller den målsida där framtida kunder som vi vill att de ska konvertera från våra annonser på Google eller Facebook kommer att landa.
Responsiv design inom e-postmarknadsföring
E-postmarknadsföring är ett av sätten att meddela produkterbjudanden eller de nya inlägg som skapats på vår blogg till därmed smalare på ett djupare sätt med alla våra följare.
Att dessa nyhetsbrev är lyhörda betyder det de kan ses perfekt från en mobil, en surfplatta eller en dator. Så vi måste försöka ha de nödvändiga verktygen så att alla visuella element är harmoniska nog för att enkelt kunna läsa nyhetsbrevet.
IKEAs nyhetsbrev
Responsiv betyder det visningen av en sida på olika enheter är alltid korrekt. För detta har vi verktyg för e-postmarknadsföring som hjälper oss att testa nyhetsbrevet som skapats i olika format och därmed ändra värden som vaddering eller marginal så att de placeras perfekt när vi minskar webbläsarens bredd.
I webbdesign med CSS "Media Queries" används att utforma en webbplats enligt formatet. Upp till 360 pixlar skulle vara för en mobiltelefon, och från 360 pixlar till 650 pixlar kunde vi göra ändringar för alla användare som ser vår webbplats från en surfplatta.
Några av principerna för våra nyhetsbrev för e-postmarknadsföring är:
- En ren visuell hierarki: en titel i H2 för att lämna texten i styckeformat.
- Två olika källor: en för titeln och en för texten gör vårt nyhetsbrev bättre läsbart.
- El användning av färg för att skilja titel, text och andra element: vi kan gradvis gå från mörkgrå till ljusare.
- Un CTA (Call to action) tydlig och urskiljbar: om vårt företags logotyp är i rött, kan CTA i den här färgen medan resten i en kompletterande färg.
Vi ger dig ett tydligt exempel på en bra responsiv design i ett nyhetsbrev utfört av Filmin och som du kan se på bilden. Tydlig typografi i vitt och texten i mycket ljusgrå men det gör att vi snabbt kan visualisera de olika utrymmen där vi är inbjudna att läsa om vi vill. CTA är inte att det kommer från en annan värld, men det hjälper med den spelikonen och det får oss att se vad som väntar oss.
Tillräckligt med utrymmen i marginalerna, vitt som huvudfärg för text och som passar perfekt med logotypen Av märket; omgiven av det grå som gör att det sticker ut. En iögonfallande bild som sätter punkten för ett nyhetsbrev som engagerar sig från första stund. Det finns också utrymmen på sidorna så att hela skärmens bredd inte "ätas".
I skrivbordsversionen upprätthåller dessa principer, till och med lämnar mer utrymme i texterna och lämnar en stor marginal på varje sida:
Responsiv design på en målsida
mycket samma principer kan användas i responsiv design på en målsida. Det är oerhört viktigt att ta hela tiden i världen för att välja mall korrekt och följa några regler i designen:
- Visuell enkelhet: Vi pratar om att hålla tomma platser för att sätta fokus på CTA.
- Vackra och engagerande bilder till läsaren, utan att glömma upplösningen och att de ser perfekt ut.
- Betydelsen av färg och som vi betonar igen.
Vi måste arbeta med den responsiva designen av en målsida för en mobil, surfplatta och stationär dator. Ta tid som behövs för att försöka om och om igen när varje förändring görs Det ses i dessa tre format, eftersom vi kan lita på oss själva och glömma att de förändringar som gjorts i CSS kommer att se hemska ut på mobilen.
Hotjar landningssida
Det är ett jobb som kan vara tråkigt, men det är viktigt att vi tar oss tid att testa varje förändring. De användning av sidomarginaler och försök så långt det är möjligt att inte missa reglerna i uppmaningarna eller åtgärdsknapparna:
- Att avståndet i förhållande till texten och knappmarginalen är progressivt i alla tre format. Varken den är liten eller stor och att den är i samma höjd.
- La förhållande i CTA-knappstorlek med resten av elementen där det finns måste tillhandahållas.
Ett tydligt exempel på detta är det arbete som utförts av Shopify på din målsida på skrivbordet och där du kan se i mobilversionen. Uppmärksamhet vid användning av färger, vita mellanrum och texter med lämplig storlek och typografi:
En serie tips att ha en bättre målsida för ditt företag eller din webbutik och de nyhetsbrev som är så viktiga för att få uppdateringarna och kampanjerna till dina användare.