HTML i CSS: koncepcje kodowania wiadomości e-mail

Zagłębienie się w świat kodowania może wydawać się zniechęcające, jeśli nigdy wcześniej tego nie robiłeś. W szczególności kodowanie wiadomości e-mail ma swój własny zestaw reguł. Jeśli jesteś nowy w kodowaniu, oto kilka rzeczy do rozważenia przed zagłębieniem się w HTML i CSS dla e-maili.

Czy muszę kodować mój e-mail?

Jeśli nie masz doświadczenia w kodowaniu, kodowanie wiadomości e-mail od zera może nie być dla Ciebie praktycznym rozwiązaniem, a na pewno nie jest wymagane. VerticalResponse zapewnia szeroki wybór szablonów przyjaznych dla urządzeń mobilnych i oferuje łatwy w użyciu edytor, dzięki któremu możesz dostosować nasze gotowe szablony do własnych treści.

Jeśli masz doświadczenie i pewien poziom komfortu w używaniu lub nauce HTML, kodowanie niestandardowego szablonu wiadomości e-mail może być świetną opcją. Podobnie jak w przypadku kodowania strony internetowej, nadal musisz wziąć pod uwagę zachowanie przeglądarki i urządzenia. Ponadto weź pod uwagę unikalne domyślne style dziesiątek klientów poczty e-mail, takich jak Gmail, Yahoo, Outlook i innych. Jeśli jesteś przyzwyczajony do kodowania strony internetowej w HTML i stosowania zewnętrznego arkusza stylów CSS, musisz przyzwyczaić się do wewnętrznej i wewnętrznej pracy z CSS, aby Twoje style nie zostały nadpisane przez domyślne ustawienia klienta poczty e-mail.

Słownictwo do poznania

Jeśli jesteś zupełnie nowy w kodowaniu, oto, co musisz wiedzieć o HTML i CSS:

HTML to język, którego będziesz używać do strukturyzowania i opisywania treści. HTML to skrót od Hypertext Markup Language. Kiedy kodujesz w HTML, oznaczasz swoją treść za pomocą tagów, które informują przeglądarkę internetową, jak wyświetlać informacje, takie jak obrazy i słowa na stronie internetowej.

CSS to język, który wpływa na prezentację treści. Używając CSS, możesz przypisać style do elementów HTML. CSS to skrót od Cascading Style Sheet. Słowo kaskada jest istotne, ponieważ deklaracje stylu lub zasady będą przestrzegane według kolejności występowania. Jeśli złożysz dwie deklaracje dla tego samego elementu, ten drugi zostanie zaakceptowany, ponieważ nadpisze to, co jest przed nim.

Oto sposoby powiązania kodu CSS z kodem HTML:

Zewnętrzny CSS: przy użyciu zewnętrznego arkusza stylów (pliku powszechnie nazywanego style.css), do którego odwołuje się plik HTML. Jest to świetne dla stron internetowych, ponieważ jeśli masz 100 wspólnych elementów, które obejmują ponad 100 stron, możesz zmienić je wszystkie naraz za pomocą jednej deklaracji CSS.

Wewnętrzny CSS, czyli Embedded CSS: dołączanie kodu CSS do znaczników <style> na górze pliku HTML. Podczas kodowania wiadomości e-mail może to być świetne do przypisywania ogólnych stylów, które mają zastosowanie do wspólnych elementów. Jednak ta metoda nie zawsze jest obsługiwana przez e-mail.

Wbudowany CSS: dołączanie kodu CSS do pojedynczego elementu HTML bezpośrednio w kodzie HTML. W kodowaniu wiadomości e-mail ta metoda zapewnia, że ​​niektóre style nie zostaną nadpisane przez domyślne ustawienia przeglądarki i klienta poczty e-mail.

Jeśli jesteś przyzwyczajony do zewnętrznego lub wewnętrznego konfigurowania CSS, możesz zbudować go w ten sposób, a następnie użyć wbudowanego narzędzia, takiego jak to z PutsMail, do przekonwertowania swoich stylów na wbudowany CSS.

Związek między HTML i CSS

Aby lepiej zrozumieć, w jaki sposób HTML i CSS są powiązane i jak oddzielenie CSS od HTML może uwolnić prezentację Twojego HTML, przejdź do fantastycznej i sławnej witryny CSS Zen Garden, gdzie możesz zobaczyć te same znaczniki HTML z drastycznie różnymi CSS , kodowane przez znanych projektantów.

Zbliża się kodowanie e-maili

Kodując wiadomość e-mail od podstaw, staraj się, aby była jak najprostsza. Korzystaj z edytora zwykłego tekstu, takiego jak TextWrangler, Notatnik lub Sublime, i trzymaj się z dala od edytorów wizualnych, takich jak Dreamweaver, ponieważ mogą one dodawać do kodu niepotrzebne elementy.

W przypadku układu spróbuj zastosować podejście zorientowane na urządzenia mobilne. Oznacza to projektowanie dla małych ekranów i pracę w górę. Ponieważ oglądalność mobilna stale rośnie, upewnienie się, że Twoja poczta e-mail wygląda dobrze na telefonach i tabletach, jest ważniejsze niż kiedykolwiek; nie ma powodu, aby tworzyć skomplikowane projekty, które dobrze wyglądają tylko na biurku. Zachowanie prostego przekazu i projektu dla najmniejszych urządzeń będzie również łatwiejsze do zakodowania, będzie dostępne dla użytkowników wszystkich urządzeń i utrzyma uwagę czytelnika na głównym wezwaniu do działania.

Gdy układ i kodowanie są gotowe, użyj narzędzia takiego jak Litmus lub edytora HTML do podglądu skrzynki odbiorczej VerticalResponse, aby wyświetlić podgląd wiadomości e-mail w różnych przeglądarkach i klientach poczty e-mail, aby móc rozwiązać wszelkie problemy przed wysłaniem.

Od czego zacząć naukę

Istnieje wiele samouczków online, w których można nauczyć się w praktyce szczegółowo kodować wiadomości e-mail. Dobrym sposobem na zagłębienie się w kodowanie wiadomości e-mail jest znalezienie prostego szablonu, który Ci się podoba i poświęcenie czasu na zbadanie kodu. Najpierw zapoznaj się z głównymi tagami, takimi jak <body>, <head> i <div>, a następnie zauważ, jak czasami tagi są dalej definiowane w identyfikatory lub klasy, takie jak <div class=”half-column”>. Zauważ, że nazewnictwo w wysokiej jakości szablonie HTML będzie jasne i logiczne, dzięki czemu łatwiej będzie powiedzieć, co się dzieje, gdy pojawia się w CSS.

Jeśli jesteś gotowy na lekcję krok po kroku, poszukaj najnowszych samouczków (w ciągu ostatniego roku). Podejście do kodowania jest stale zmieniane. Metodą przyjazną dla urządzeń mobilnych, która zyskała popularność w ciągu ostatnich kilku lat, jest na przykład podejście płynne/hybrydowe. Ten płynny/hybrydowy samouczek od Envato Tuts+ jest świetny dla tych, którzy mają już pewną wiedzę na temat HTML. Dla początkujących Lynda.com oferuje wiele kursów kodowania specyficznych dla poczty e-mail. Dobry kurs przeprowadzi Cię przez ćwiczenie z kodowania i zapewni do pobrania przykładowy plik projektu, który możesz wykorzystać jako odniesienie.

Poświęć mniej czasu na dotarcie do większej liczby klientów

WYPRÓBUJ ODPOWIEDŹ PIONOWĄ DZIŚ

(Jest wolne!)

Uwaga redaktora: Ten post na blogu został pierwotnie opublikowany w marcu 2016 r. i został przerobiony oraz zaktualizowany pod kątem dokładności i trafności.