Studiowanie mistrzów w zakresie projektowania responsywnego w marketingu e-mailowym i stronach docelowych

Elastyczny projekt

El Elastyczny projekt jest dziś niezbędny ze względu na różne formaty na które użytkownik patrzy ze swojego tabletu, telefonu komórkowego, a nawet komputera. Ten responsywny projekt e-mail marketingu i stron docelowych jest ważniejszy dla komunikacji wielokanałowej z naszymi klientami.

Musisz więc poważnie traktować różne szablony różne szerokości, aby uzyskać najlepszy projekt możliwe, że te biuletyny lub ta strona docelowa, na którą trafią przyszli klienci, których chcemy, aby przekonwertowali z naszych reklam w Google lub na Facebooku.

Responsywny design w email marketingu

Marketing e-mailowy to jeden ze sposobów ogłaszania ofert produktów lub nowych postów utworzonych na naszym blogu w ten sposób zawężony w głębszy sposób ze wszystkimi naszymi obserwatorami.

To, że te biuletyny są responsywne, oznacza, że można je doskonale zobaczyć z telefonu komórkowego, tablet lub komputer. Musimy więc postarać się o niezbędne narzędzia, aby wszystkie elementy wizualne były na tyle harmonijne, aby łatwo było czytać biuletyn.

IKEA

Biuletyn IKEA

Responsywność oznacza, że wyświetlanie strony na różnych urządzeniach jest zawsze prawidłowe. Do tego mamy narzędzia e-mail marketingu które pomagają nam przetestować biuletyn utworzony w różnych formatach, a tym samym modyfikować wartości, takie jak wypełnienie lub margines, tak, aby były idealnie przesunięte, gdy zmniejszamy szerokość naszej przeglądarki.

W projektowanie stron internetowych z CSS za pomocą "Zapytań o media" zaprojektować stronę internetową zgodnie z formatem. Maksymalnie 360px byłoby dla telefonu komórkowego, a od 360px do 650px moglibyśmy wprowadzać modyfikacje dla wszystkich użytkowników, którzy oglądają naszą witrynę z tabletu.

Oto niektóre zasady dotyczące naszych biuletynów marketingowych:

  • Czysta hierarchia wizualna: tytuł w H2, aby pozostawić tekst w formacie akapitu.
  • Dwa różne źródła: jeden dla tytułu i jeden dla tekstu sprawia, że ​​nasz biuletyn jest bardziej czytelny.
  • El użycie koloru do rozróżnienia tytułu, tekstu i innych elementów: możemy stopniowo przejść od ciemnoszarego do jaśniejszego.
  • Un CTA (Call to action) jasne i rozpoznawalne: jeśli logo naszej firmy jest w kolorze czerwonym, CTA może być w tym kolorze, a reszta w kolorze dopełniającym.

Dajemy Ci wyraźny przykład świetnego responsive design w newsletterze realizowanym przez Filmin i to widać na załączonym obrazku. Wyraźna typografia w kolorze białym, a tekst w bardzo jasnoszarym kolorze, co pozwala nam szybko zwizualizować różne przestrzenie, w których jesteśmy zaproszeni do czytania, jeśli chcemy. CTA nie oznacza, że ​​pochodzi z innego świata, ale pomaga z tą ikoną gry i sprawia, że ​​widzimy, co nas czeka.

Reaguj w Filminie

Wystarczająca ilość spacji na marginesach, biały jako główny kolor dla tekstu i idealnie komponuje się z logo marki; otoczona szarością, która ją wyróżnia. Uderzający obraz, który podkreśla sens biuletynu, który angażuje się od pierwszej chwili. Jego przestrzenie pozostawiono również po bokach, aby nie „zjadał” całej szerokości ekranu.

W wersja desktopowa zachowuje te zasadypozostawiając nawet więcej miejsca w tekstach i pozostawiając duży margines z każdej strony:

Czuły

Responsywny design na landing page

L te same zasady można zastosować w projektowaniu responsywnym strony docelowej. Niezwykle ważne jest, aby poświęcić cały czas na świecie, aby właściwie wybrać szablon i przestrzegać kilku zasad w projekcie:

  • Wizualna prostota: Mówimy o pozostawieniu pustych miejsc, aby skupić się na wezwaniach do działania.
  • Piękne i wciągające obrazy czytelnikowi, nie zapominając o rozdzielczości i doskonałym wyglądzie.
  • Znaczenie koloru i to jeszcze raz podkreślamy.

Musimy popracować nad responsywnym projektem strony docelowej na telefon komórkowy, tablet i komputer stacjonarny. Weź potrzeba czasu, aby spróbować ponownie i ponownie przy każdej zmianie widać to w tych trzech formatach, ponieważ możemy sobie zaufać i zapomnieć, że zmiany wprowadzone w CSS będą wyglądać okropnie na urządzeniach mobilnych.

Hotjar

Strona docelowa Hotjar

To praca, która może być żmudna, ale ważne jest, abyśmy poświęcili trochę czasu na przetestowanie każdej zmiany. Plik stosowanie marginesów bocznych i staraj się, o ile to możliwe, nie przegapić zasad w wezwaniach do działania lub przyciskach akcji:

  • Że odległość w stosunku do tekstu i marginesu przycisku jest progresywna we wszystkich trzech formatach. Ani jest mały, ani duży i że jest na tej samej wysokości.
  • La stosunek rozmiaru przycisku wezwania do działania z resztą elementów, w których się znajduje.

Wyraźnym tego przykładem jest praca wykonana przez Shopify na Twojej stronie docelowej na komputerze i na którym można zobaczyć w wersji mobilnej. Uwaga na użycie kolorów, spacji i tych tekstów wraz z ich odpowiednią wielkością i typografią:

Reaguj w Shopify

Seria wskazówek, które warto mieć lepsza strona docelowa dla Twojej firmy lub sklepu internetowego oraz te biuletyny tak ważne, aby otrzymywać aktualizacje i promocje dla użytkowników.


Treść artykułu jest zgodna z naszymi zasadami etyka redakcyjna. Aby zgłosić błąd, kliknij tutaj.

Bądź pierwszym który skomentuje

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany.

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.