HTML e CSS: conceitos de codificação de e-mail

Mergulhar no mundo da codificação pode parecer assustador se você nunca fez isso antes. A codificação de e-mail, em particular, tem seu próprio conjunto de regras. Se você é novo na codificação, aqui estão algumas coisas a considerar antes de mergulhar direto em HTML e CSS para e-mail.

Preciso codificar meu e-mail?

Se você não tem experiência em codificação, codificar um e-mail do zero pode não ser uma solução prática para você e certamente não é obrigatório. VerticalResponse fornece uma ampla seleção de modelos compatíveis com dispositivos móveis e oferece um editor fácil de usar para que você possa personalizar nossos modelos prontos para uso com seu próprio conteúdo.

Se você tiver experiência e algum nível de conforto usando ou aprendendo HTML, codificar um modelo de email personalizado pode ser uma ótima opção. Assim como na codificação de uma página da Web, você ainda precisa considerar os comportamentos do navegador e do dispositivo. Além disso, considere os padrões de estilo exclusivos de dezenas de clientes de e-mail como Gmail, Yahoo, Outlook e muito mais. Se você está acostumado a codificar uma página da Web em HTML e aplicar uma folha de estilo CSS externa, precisará se acostumar a trabalhar com CSS internamente e em linha para que seus estilos não sejam substituídos por esses padrões de cliente de e-mail.

Vocabulário para saber

Se você é totalmente novo na codificação, aqui está o que você precisa saber sobre HTML e CSS:

HTML é uma linguagem que você usará para estruturar e descrever seu conteúdo. HTML significa Hypertext Markup Language. Quando você codifica em HTML, está marcando seu conteúdo com tags que informam ao navegador da Web como exibir informações como imagens e palavras em uma página da Web.

CSS é uma linguagem que afeta a apresentação do seu conteúdo. Usando CSS, você pode atribuir estilos a elementos HTML. CSS significa Cascading Style Sheet. A palavra cascata é significativa porque as declarações de estilo, ou regras, serão respeitadas por ordem de aparecimento. Se você fizer duas declarações para o mesmo elemento, o último será honrado porque sobrescreve o que vem antes dele.

Aqui estão as maneiras de vincular seu CSS ao seu HTML:

CSS Externo: usando uma folha de estilo externa (um arquivo comumente chamado style.css) que é referenciado em seu arquivo HTML. Isso é ótimo para sites porque se você tiver 100 elementos comuns que abrangem mais de 100 páginas, você pode alterá-los todos de uma vez com uma única declaração CSS.

CSS interno, também conhecido como CSS incorporado: incluindo seu código CSS nas tags <style> na parte superior do arquivo HTML. Ao codificar um email, isso pode ser ótimo para atribuir estilos gerais que se aplicam a elementos comuns. No entanto, esse método nem sempre é suportado por e-mail.

CSS embutido: anexando código CSS a um único elemento HTML dentro do código HTML. Na codificação de e-mail, esse método garante que determinados estilos não sejam substituídos pelos padrões do navegador e do cliente de e-mail.

Se você está acostumado a configurar seu CSS externamente ou internamente, você pode criá-lo dessa maneira e usar uma ferramenta inliner como esta do PutsMail para converter seus estilos em CSS inline.

A relação entre HTML e CSS

Para ter uma ideia melhor de como HTML e CSS estão relacionados e como separar CSS de HTML pode liberar a apresentação do seu HTML, acesse o fantástico e celebrado site CSS Zen Garden, onde você pode visualizar a mesma marcação HTML com CSS drasticamente diferente , codificado por designers famosos.

Aproximando-se da codificação de e-mail

Ao codificar um e-mail do zero, mantenha-o o mais simples possível. Use um editor de texto simples, como TextWrangler, Notepad ou Sublime, e fique longe de editores visuais como Dreamweaver, pois eles podem adicionar itens desnecessários ao seu código.

Para o layout, tente adotar uma abordagem mobile-first. Isso significa projetar para telas pequenas e progredir. Com a visualização móvel aumentando continuamente, garantir que seu e-mail tenha uma boa aparência em telefones e tablets é mais importante do que nunca; não há razão para criar um design complicado que só fica bem em um desktop. Manter sua mensagem e design simples o suficiente para os menores dispositivos também será mais fácil de codificar, será acessível a usuários de todos os dispositivos e manterá a atenção do leitor focada na principal chamada para ação.

Quando o layout e a codificação estiverem completos, certifique-se de usar uma ferramenta como o Litmus ou o Inbox Preview for HTML editor da VerticalResponse para visualizar a aparência do seu e-mail em vários navegadores e clientes de e-mail para que você possa solucionar quaisquer problemas antes de enviar.

Por onde começar a aprender

Existem muitos tutoriais on-line onde você pode aprender na prática, em detalhes, como codificar um e-mail. Uma boa maneira de mergulhar na codificação de e-mail é encontrar um modelo simples que você goste e passar algum tempo examinando o código. Familiarize-se com as tags principais como <body>, <head> e <div> primeiro e, em seguida, observe como as tags às vezes são definidas em IDs ou classes, como <div class=”half-column”>. Observe que a nomenclatura em um modelo HTML de qualidade será clara e lógica para que seja mais fácil dizer o que está acontecendo quando ele aparecer no CSS.

Se você estiver pronto para uma lição passo a passo, procure tutoriais recentes (no último ano). A abordagem da codificação está sendo constantemente reconsiderada. Um método otimizado para dispositivos móveis que ganhou popularidade nos últimos dois anos, por exemplo, é a abordagem fluida/híbrida. Este tutorial fluido/híbrido do Envato Tuts+ é ótimo para quem já tem algum conhecimento de HTML. Para iniciantes, o Lynda.com oferece muitos cursos de codificação específicos para e-mail. Um bom curso o guiará por um exercício de codificação e fornecerá um arquivo de projeto de exemplo para download que você pode usar como referência.

Gaste menos tempo alcançando mais clientes

EXPERIMENTE A RESPOSTA VERTICAL HOJE

(É grátis!)

Nota do editor: esta postagem do blog foi publicada originalmente em março de 2016 e foi reformulada e atualizada para precisão e relevância.