Elaboração de e-mail responsivo em HTML

1. Olá!: Oi, meu nome é Vanessa Bias e vou te ensinar desenvolvimento de e-mail responsivo. Seu projeto de classe será pegar um modelo de e-mail HTML estático e torná-lo escalável e dispositivos móveis usando as técnicas que eu uso no meu trabalho diário. Esta classe é voltada para alunos que entendem os conceitos básicos de HTML e CSS. Mas vou explicar os conceitos usados nesta aula à medida que avançamos. Para uma cartilha sobre o desenvolvimento de e-mails HTML estáticos, você pode ver minha classe de escultura anterior, introdução ao desenvolvimento de e-mail HTML. Vamos começar. Feliz codificação. 2. Passo do projeto 1: adicione as perguntas de mídia: Você pode baixar esses arquivos de projeto a partir de baixo e a classe Compartilhamento de habilidades. Então, como você pode ver, este arquivo de e-mail não é responsive.Então, vamos começar adicionando as consultas de mídia a este e-mail. Você pode adicionar quantos pontos de interrupção quiser. Mas para esta aula vamos cobrir apenas um ponto de interrupção. Então, dentro das tags de estilo, vamos adicionar uma consulta de mídia com uma largura máxima igual a 480 pixels. Normalmente, quando você está projetando para a Web, você quer ter certeza de que está projetando dispositivos móveis primeiro e em seguida, passando para os pontos de interrupção da área de trabalho. Mas, para e-mail, geralmente fazemos desktop primeiro e, em seguida, dividi-lo para dispositivos móveis. Então, se você quiser ter certeza de que sua consulta de mídia está funcionando, um bom teste é mudar a cor de fundo ou algo dessa natureza para que você possa realmente ver que a consulta de mídia está ON e isso ajudará solução de problemas mais tarde a linha se o CSS não estiver funcionando. Então vamos fazer uma cor de fundo de vermelho e aqui eu adicionei o seletor universal, então ele vai mudar a cor de fundo de cada elemento no e-mail. Então eu vou “Salvar” isso e voltar para o navegador e “Atualizar”. Quando eu faço o tamanho da tela menor, você pode ver que ele mudou para uma cor de fundo vermelho. Isso me diz que a consulta de mídia está funcionando. Então não precisamos mais disso, então podemos apagar isso e eu vou apertar “Salvar” de novo. No próximo vídeo, vamos começar a dividir este e-mail para um tamanho móvel. 3. Passo do projeto: adicione a propriedade de bloco de exibição: Agora vamos mudar o CSS para fazer este layout de três colunas para que cada coluna individual pilhe em um tamanho de tela móvel. Para começar, vamos criar uma linha para tabelas, linhas de tabela e células de tabelas e vamos dar-lhe uma largura de 100 por cento para que seja escalável e vamos dar-lhe uma propriedade de exibição com o valor de bloco. O que isso vai fazer, esta é a chave aqui para garantir que tudo se acumula no celular. Então, porque temos algumas imagens que são mais largas do que outras e temos algumas imagens que são mais largas do que o ponto de interrupção, vamos tornar essas imagens escaláveis, dando a que uma largura de 100 por cento e nós atualizamos e redimensionar a tela e você pode ver que as colunas agora estão empilhando um abaixo do outro. Mas ainda estamos recebendo uma barra de rolagem para a esquerda para a direita e eles não estão realmente se contendo dentro da tabela. O que podemos fazer agora é corrigir que é adicionar um seletor universal, de modo que o asterisco, e vamos dar-lhe uma propriedade de dimensionamento de caixa com o valor de border-box e o que isso faz é incorporar o preenchimento e a borda no elementos largura total. Então vai fazer isso por tudo. Então, voltamos e pressionamos Atualizar, e você pode ver que não temos mais uma barra de rolagem e as imagens agora estão contidas na tabela. 4. Passo do projeto 3: adicione aulas em CSS: Há elementos específicos que você deseja segmentar usando CSS em vez de apenas segmentar cada imagem ou cada tabela. Então, neste caso, temos a imagem definida como 100% web, então elas são escaláveis. Mas, infelizmente, isso também tem como alvo os ícones de mídia social que não queremos ser 100% com na parte inferior do e-mail. Então, podemos usar uma classe CSS para corrigir isso. Então, se rolarmos para baixo até a parte inferior do HTML, podemos adicionar uma classe, e vamos dar a essa classe um nome que é reconhecível mais tarde. Então vamos fazer ícones sociais e podemos copiar isso para que você não precise reescrevê-lo, e colá-lo em cada uma dessas imagens. Salvar e rolar de volta para o CSS e a cabeça, e podemos adicionar dentro da consulta de mídia que classe com uma largura de, Eu quero dizer cerca de 30 pixels soa direito. Queremos que todos eles sejam capazes de caber em uma linha e salvar e, em seguida, atualizar a página, e você pode ver que as imagens ou os ícones de mídia social agora são todos os 30 pixels. Portanto, só precisamos fazer essa regra CSS para direcionar todos eles. Às vezes não é uma imagem que você quer mudar, às vezes há outras coisas. Por exemplo, este layout de três colunas aqui e este layout de duas colunas, este tem, quando você redimensioná-lo, menos preenchimento abaixo das imagens ou menos de uma margem abaixo imagens do que os outros elementos de coluna lá. Então eu quero adicionar um pouco de espaço acima deste sub-título para que seja consistente com a aparência dos outros. Então o que podemos fazer é, eu acho que devemos adicionar uma margem a esta imagem aqui para empurrar para baixo este sub-título. Então, se formos encontrá-lo aqui, observatório, e podemos dar a isso uma classe de, digamos, imagem de observatório e salvar. Em seguida, faça backup no CSS. Poderia adicionar imagem de observatório, e então poderíamos fazer uma margem inferior de, digamos cerca de 15 pixels e salvar e atualizar. Agora você pode ver que o espaço acima da subcabeça e abaixo da imagem é consistente com as outras colunas. Mas quando você redimensiona para a largura total da área de trabalho, não houve nenhuma alteração. Aplica-se apenas ao tamanho móvel. Então, no próximo vídeo, vai cobrir o uso de display nenhum para quando queremos esconder um elemento que não queremos ver em um tamanho de tela móvel. 5. Passo do projeto 4: EsconDa elementos não usados: Às vezes, há um elemento do seu e-mail que você não deseja exibir em tamanhos móveis. Isso pode ser qualquer coisa de, digamos, uma imagem que só está lá para fins decorativos na área de trabalho e que ocupará muito espaço na tela em dispositivos móveis, ou talvez haja um link que você queira ocultar que seja apenas para desktop que você não quer que seus usuários móveis cliquem. Nesse caso, há algum espaço extra acima do email, acima do link view-in-browser que é causado por algumas células de tabela não utilizadas aqui no HTML. No tamanho da área de trabalho, isso serve para um propósito se você quiser ter algum texto pré-cabeçalho alinhado à esquerda aqui ou talvez outro link e, em seguida, ter o link de visualização no navegador alinhado à direita. É aí que você o colocaria neste modelo. Desde que precisamos que lá no tamanho da área de trabalho, mas não no tamanho do celular, o que vamos fazer é que vamos escondê-lo usando uma propriedade display none. Eu nomeei minha regra de exibição de nenhum, exibir nenhum. Ele tem uma propriedade de exibição e um valor de nenhum, e o que isso faz é dizer ao navegador ou ao cliente de e-mail para esconder este elemento quando se trata de este ponto de interrupção. Podemos ir a esta primeira célula de mesa aqui. Nós vamos dar a ele a classe de display none, e nós vamos aplicar essa classe a este também, e salvar, atualizar e redimensionar. Você pode ver que agora não há espaço extra acima do link view-in-browser. 6. Valeu!: Obrigado por fazer esta aula. Não se esqueça de criar um projeto nesta classe para mostrar seu novo e-mail HTML responsivo. Se você tiver alguma dúvida sobre quaisquer conceitos abordados nesta aula ou qualquer coisa que eu possa ter perdido, deixe um comentário abaixo ou me envie um tweet. Como sempre, feliz codificação.