El Az érzékeny tervezés napjainkban létfontosságú a különböző formátumok miatt amellyel a felhasználó a táblagépéről, a mobiljáról és akár a számítógépéről is szembe néz. Ez az érzékeny kialakítás az e-mailes marketing és a céloldalakon több mint fontos az omnichannel kommunikációban az ügyfelekkel.
Tehát komolyan kell vennie, ha különféle sablonokat vesz fel különböző szélességűek a legjobb kivitelben lehetséges azok a hírlevelek vagy az a céloldal, ahová azok a jövőbeni ügyfelek szállnak le, akiket szeretnénk, ha a Google vagy a Facebook hirdetéseinkből konvertálnának.
Reszponzív tervezés az e-mail marketingben
Az e-mailes marketing az egyik módja a termékajánlatok vagy a blogunkon létrehozott új bejegyzések bejelentésének így mélyebb módon szűk minden követőnkkel.
Az, hogy ezek a hírlevelek reagálók, azt jelenti mobilról tökéletesen láthatók, táblagép vagy számítógép. Meg kell tehát próbálnunk a szükséges eszközöket, hogy minden vizuális elem elég harmonikus legyen a hírlevél egyszerű elolvasásához.
IKEA Hírlevél
A válaszadó azt jelenti mindig javítsa az oldal megjelenítését különböző eszközökön. Ehhez vannak eszközeink e-mail marketing amelyek segítenek kipróbálni a különféle formátumban készített hírleveleket, és így módosíthatják az olyan értékeket, mint a kitöltés vagy a margó, hogy azok tökéletesen áthelyeződjenek, miközben csökkentjük böngészőnk szélességét.
In the webes tervezés CSS "Media Queries" használatával weboldal formátumának megtervezése. Legfeljebb 360px lenne egy mobil, és 360px-től 650px-ig módosíthatnánk mindazokat a felhasználókat, akik tabletjükről látják a weboldalunkat.
E-mailes marketing hírlevelünk néhány alapelve:
- Tiszta vizuális hierarchia: egy cím H2-ben, hogy a szöveget bekezdés formátumban hagyja.
- Két különböző forrás: egy a címért, egy pedig a szövegért teszi hírlevelünket jobban olvashatóvá.
- El a szín használata a cím, a szöveg és más elemek megkülönböztetésére: fokozatosan sötétszürkéből világosabbá válhatunk.
- Un A CTA (Call to action) egyértelmű és megkülönböztethető: ha cégünk logója piros, akkor a CTA ebben a színben lehet, míg a többi kiegészítő színben.
Világos példát adunk egy remekre reagálós tervezés a Filmin által készített hírlevélben és amelyet a mellékelt képen láthat. Tiszta tipográfia fehérben, a szöveg pedig nagyon világosszürkén, de ez lehetővé teszi számunkra, hogy gyorsan megjelenítsük azokat a különböző tereket, amelyeken meghívást kapunk, ha szeretnénk. A CTA nem az, hogy egy másik világból származik, de segít abban a játékikonban, és láttatja velünk, mi vár ránk.
Elegendő hely a margókon, fehér a szöveg fő színe és ami tökéletesen illeszkedik a logóhoz A márka; körülvéve azzal a szürkével, amely feltűnővé teszi. Figyelemfelkeltő kép, amely meghatározza az első pillanattól kezdve horogra kerülő hírlevél pontját. Az oldalakon szóközök is maradnak, hogy a képernyő teljes szélessége ne legyen "megevve".
Az asztali verzió fenntartja ezeket az elveket, még több helyet hagyva a szövegekben, és mindkét oldalon nagy margót hagyva:
Reszponzív tervezés egy céloldalon
sok ugyanazok az elvek használhatók a reszponzív tervezés során egy nyitóoldalt. Rendkívül fontos, hogy a világon minden időt fordítson a sablon megfelelő megválasztására és a tervezés során néhány szabály betartására:
- Vizuális egyszerűség: Üres helyek megőrzéséről beszélünk, hogy a CTA-kra helyezzük a hangsúlyt.
- Gyönyörű és vonzó képek az olvasónak, anélkül, hogy megfeledkezne a felbontásról és arról, hogy tökéletesen mutatnak.
- A szín fontossága és hogy még egyszer hangsúlyozzuk.
Dolgoznunk kell egy mobil, tablet és asztali céloldal adaptív kialakításán. Vegyük a az egyes változtatások során újra és újra tesztelni szükséges idő ez a három formátum látható, mivel bízhatunk önmagunkban, és megfeledkezhetünk arról, hogy a CSS-ben végrehajtott változtatások borzalmasan fognak kinézni egy mobilon.
Hotjar céloldal
Ez egy olyan munka, amely unalmas lehet, de létfontosságú, hogy szánjunk időt az egyes változások tesztelésére. A oldalsó margók használata és próbálja meg, amennyire csak lehetséges, ne hagyja ki a CTA-k vagy a műveletgombok szabályait:
- Hogy a távolság a szöveghez és a gomb margójához képest progresszív mindhárom formátumban. Sem kicsi, sem nagy, és hogy egy magasságban van.
- La arány a CTA gomb méretében meg kell adni a többi elemet, ahol található.
Ennek világos példája az a Shopify által a céloldalon végzett munka asztali számítógépen, és amelyben a mobil verzióban is látható. Figyelem a színek, a szóközök és a megfelelő méretű és tipográfiai szövegek használatára:
Tippek sora jobb céloldal vállalkozásának vagy online áruházának és azok a hírlevelek, amelyek annyira fontosak, hogy a frissítéseket és a promóciókat eljuttassák a felhasználókhoz.