Design de . Guia de práticas recomendadas

Transcrição

1 Design de Guia de práticas recomendadas

2 Consumidores constantemente recebem mensagens de marketing, e o nosso desafio, como profissionais de marketing, é garantir que nosso conteúdo se destaque no meio desse grande volume, fornecendo experiências que fortaleçam o relacionamento da marca com o consumidor. Este guia fornece táticas que o ajudam a formar uma estratégia para a execução criativa dos seus programas de com o objetivo de converter consumidores, além de aumentar o ROI de marketing da sua marca. Tópicos abordados: Gráficos. Texto. Estratégia. Pense no celular Design adaptável Adaptável verdadeiro versus 2-em-1 Otimizado para celular Criação otimizada para celular Adaptável ou otimizado para celular Crie diversão visual Anime e motive com um GIF Seja sociável Use dados com sabedoria Economize tempo Defina o tom Estratégias de linha de assunto Diretrizes de programação Solucionando problemas no código HTML

3 Gráficos. Texto. Estratégia. Aproveite-os ao máximo. Como profissional de marketing, você detém os mais altos padrões e aspirações para sua marca. Se a mensagem não atingir todos que podem se beneficiar dela, pense nas oportunidades que estão sendo perdidas. Leve em conta os estilos de vida dos consumidores modernos. Eles estão expostos ao marketing a todo momento e podem consumir conteúdo e pesquisar marcas, produtos e serviços a partir de celulares onde quer que estejam. Isso pode parecer desafiante, mas enviar mensagens segmentadas que abordam as suas necessidades pode economizar o tempo deles ao decidirem sobre uma compra. Ao criar seu plano de marketing, tenha em mente que: Sua janela de oportunidade para chamar atenção é limitada seja percebido. A tecnologia muda constantemente, então acompanhe seus consumidores seja adaptável. Dê ao seu público-alvo motivos para voltar seja único.

4 Em 2013, os acessos a por celular ultrapassaram os acessos a por desktop. No primeiro trimestre de 2014, 66% dos s foram acessados por smartphone ou tablet.* *Fonte: Q US Consumer Device Preference Report da Movable Ink Pense no celular A maioria dos seus consumidores já pensa. Está na hora de analisar como os consumidores estão visualizando suas mensagens e otimizar sua criação de acordo. Você se sente confortável ao trabalhar dentro de um modelo definido para maximizar a eficiência da produção? Nesse caso, um modelo adaptável pode ser a configuração ideal. Ou talvez você prefira a abordagem otimizada para celular como uma opção mais flexível, que permite um design menos limitado e rígido.

5 Alguns aplicativos podem não renderizar um modelo adaptável complexo corretamente. Com novos celulares sendo lançados e sistemas operacionais sofrendo mudanças constantes, problemas de compatibilidade podem surgir. Mantenha o design simples com princípios básicos de adaptabilidade. O design adaptável é compatível com quais clientes? Design adaptável Adaptação suave ao celular. Baseado principalmente em uma grade, o design adaptável reformula conteúdo para telas menores. Ele é ideal para conteúdo que requer atualização constante dentro de um modelo atual e uma aparência geral constante. Para economizar tempo, configure vários modelos de design adaptável. Você poderá alternar entre eles para deixar suas campanhas atuais. Dica rápida: para a melhor renderização, recomendamos uma tela de desktop com 640 pixels de largura e uma tela de celular com 320 pixels de largura. Isto se aplica à maioria dos dispositivos, inclusive iphone 5 e anterior. ios (iphone /ipad ) Cliente nativo Android 4.x Aplicativo Outlook.com Android Windows Phone 7.5 BlackBerry OS 6 BlackBerry OS7 BlackBerry Z10 Cliente nativo Kindle Fire Fonte: Litmus

6 É melhor desenvolver e decidir sobre sua grade antes de configurar as versões para desktop e celular, pois ela servirá de guia para o desenvolvedor e os profissionais de marketing e design. Sempre pense dois passos à frente com o design adaptável. Adaptável verdadeiro versus 2-em-1 Com o design adaptável verdadeiro, o código inclui várias funções que lidam automaticamente com recursos como a reformulação de conteúdo e imagens, além de controlar o texto do sistema. Como alternativa, há a opção de design adaptável 2-em-1, na qual a versão para desktop e a versão para celular são enviadas juntas. O código decide qual versão usar com base no tamanho da tela. Ela fornece mais flexibilidade entre celular e desktop, mas traz uma desvantagem. O tamanho do aumenta, pois o usuário tem de baixar as duas versões. <!-- início código de desktop --> Insira o código HTML da versão para desktop aqui <!-- fim código de desktop --> <!-- início código de celular --> Insira o código HTML da versão para celular aqui <!-- fim código de celular -->

7 O design otimizado para celular permite programação mais rápida e edições de última hora, e os designs têm menos chance de falhar; eles possuem código muito básico, que pode ser interpretado corretamente por quase todos os navegadores e aplicativos. Além disso, programar apenas uma versão facilita o controle da aparência do produto final. Otimizado para celular Dê forma à sua visão criativa com o design otimizado para celular. Até recentemente, a maioria dos s tinha 700 a 720 pixels de largura, com s horizontais chegando a até pixels de largura, mas a realidade agora é outra. Na era dos acessos por celular, a largura geral dos s deve ser reduzida. Se você estiver preocupado com a diminuição da qualidade do design, explore o design otimizado para celular. Ele não está limitado a uma grade e é compatível com quase tudo. Dica rápida: use imagens com tamanhos de arquivo menores. Eles são mais apropriados para a largura de banda de celulares.

8 Criação otimizada para celular Veja algumas regras gerais: A largura do deve ser de aproximadamente 560 pixels. O tamanho da fonte deve ser, no mínimo, 18. Torne o conteúdo e os botões chamativos. Calls to action (CTA) devem ser grandes e acionáveis, com espaço adequado entre eles para que o leitor não pressione o CTA errado na tela. As imagens e os CTAs devem ser proporcionais à largura do . Se o for largo, a imagem deve ser maior, para garantir que ela será visível quando o for encolhido em um celular.

9 Não importa se você usa design adaptável ou uma abordagem otimizada para celular, não há garantias de que um encaminhado terá a mesma aparência do original. Adaptável ou otimizado para celular Qual é a melhor solução? O motivo? O código foi alterado e o não está sendo enviado pela fonte original. Design adaptável Planeje com antecedência Use como modelo Principalmente texto HTML Controle de qualidade abrangente Não é totalmente compatível com Gmail, celulares mais antigos Otimizado para celular Reduza a largura para 560 a 580 pixels Aumente o tamanho da fonte e do CTA Raio de 40 pixels para cada CTA Compatibilidade integral Há diferenças óbvias, mas esta opção pode ajudar em sua decisão: considere o uso conjunto de design adaptável e de design otimizado para celular. O cabeçalho e o rodapé podem ser adaptáveis, ao passo que a abordagem otimizada para celular no corpo fornece mais liberdade criativa.

10 Animações longas demoram mais para carregar, e você depende do consumidor ter paciência para esperar e assistir. Procure fazer uma animação menor com menos cores. Vídeos inteiros não são usados em s, pois são muito grandes e não são compatíveis com todas as plataformas. No entanto, um recorte de um vídeo usado corretamente pode apresentar trailers, previsões e muito mais. Crie diversão visual! Adicione animações e vídeos. Se você enviar um hoje, ele será apenas um entre quase 300 bilhões é necessário ter impacto. Animações são uma ótima maneira de atrair a atenção e mostram muitas informações em um pequeno espaço ao passar por sequências de conteúdo.

11 Devido às restrições de certos clientes de , como o Outlook 2007, uma animação ou um vídeo pode não ser executado. Faça a mídia ser repetida, de modo que o quadro mais importante na sequência seja o primeiro. Se a mídia não carregar corretamente, pelo menos o conteúdo mais importante será exibido. Anime e motive com um GIF Considere o seguinte: Animações em GIF, ou graphics interchange format, são imagens em movimento que dão vida a imagens paradas. Ao criar um GIF animado, os profissionais de design dispõem de 256 cores para trabalhar. A escolha de uma pequena variedade de cores e um número baixo de quadros diminui o tamanho do arquivo e acelera o carregamento. Efeitos incluem brilho, centelha, texto em movimento, mudança de cores, botões piscantes ou uma apresentação de slides. Quadro 01 Quadro 05 Quadro 08 Quadro 11

12 A voz da sua marca é exibida mundialmente nas mídias sociais, portanto, certifique-se de que ela seja consistente em s, sites e correspondência. Se você tem uma marca divertida, talvez seja apropriado falar com seus consumidores em um tom casual e profissional. Se a sua marca é de alto padrão, aprecie e valorize o bom gosto dos consumidores. Quando todos os seus canais trabalham de maneira coesa, fica mais fácil para os consumidores se familiarizarem com a sua marca. Seja sociável Mensagens que podem ser compartilhadas. Do Facebook ao Twitter, Pinterest e muito mais, há uma gama de ferramentas e táticas sociais que podem ser usadas para aumentar o alcance de suas campanhas. Por exemplo, permita aos consumidores compartilhar o conteúdo do seu com amigos e seguidores pressionando apenas um botão. Dica rápida: certifique-se de que os logotipos das mídias sociais sejam fáceis de localizar e selecionar. Eles devem ser tão atraentes para o usuário quanto possível, juntamente com os outros itens do rodapé e de navegação.

13 Ao tentar obter informações valiosas sobre as preferências dos seus consumidores, evite questões que pareçam muito pessoais. Algumas pesquisas divertidas e não invasivas sobre interesses e produtos favoritos podem ajudar a construir excelentes perfis de consumidores. Exemplo: O que você gosta de fazer? Turismo Esportes e atletismo Atividades ao ar livre Diversão em família Atividades orientadas à carreira Use os dados coletados como base para segmentar s mais apropriados a assinantes específicos. Use dados com sabedoria Personalize, planeje e crie uma relação duradoura. A personalização no conteúdo do é um método comprovado de estabelecer laços com o consumidor, mas o importante é ir além de simplesmente abordar o consumidor pelo primeiro nome. Pergunte sobre compras favoritas, incentive o fornecimento de feedback e deixe-os saberem que representam uma parte importante da comunidade da sua marca. Use esses toques pessoais de maneira criativa e consistente para ajudar no desenvolvimento de conteúdo específico para consumidores. Analise com cuidado os resultados dos s. Muitos dados valiosos podem ser extraídos deles, como: Quem está abrindo seus s, e quando o dispositivo sendo usado Seções do mais clicadas Cliques para acessar o seu site Dica rápida: aproveite os dados para entender melhor as preferências e os comportamentos únicos de seus consumidores. Por exemplo, estude o comportamento de navegação deles para recomendar produtos e segmentar seus interesses.

14 Todo modelo deve ter: Navegação otimizada para celular Espaço para um headline grande e eficaz Lugares para CTAs acionáveis Uma paleta de cores consistente para estabelecer familiaridade com a marca Economize tempo Crie identidade com um modelo. Preocupado com linhas de tempo? Ao criar um do zero, configure wireframes para orientar você e outras pessoas sobre o posicionamento ideal do conteúdo. Então, quando você definir as especificações das imagens e do layout para os designs futuros, crie um template. Ele permite atualizar conteúdo com eficiência e desempenho segmentado, além de aprimorar a segmentação. Além disso, não pense que um motivado por dados deve ser feio. Há vários truques para deixá-lo com uma estética fluida, mas, para realmente evitar a monotonia, reformule seu template no período de 6 a 9 meses.

15 Uma linha de assunto deve refletir o tom do . Veja abaixo uma linha de assunto casual para um divertido. Observe como o pré-cabeçalho se relaciona à linha de assunto: Sorte Grande NÃO: Perca nossos descontos de 30%! SIM: Evite escadas e gatos pretos. Visite nosso site móvel. Problemas para Veja abaixo uma linha de assunto urgente para um de oferta limitada. Observe que a linha do assunto é forte e breve, com o pré-cabeçalho fornecendo mais informações: Overstock.com ÚLTIMAS HORAS Promoção 48 horas Termina hoje! Corra! Economize em móveis, roupas, joalheria e mais. Veja no nav Evite a repetição (Fig. 1). Seu pré-cabeçalho deve continuar a linha de assunto, e não copiá-la. Veja a Fig. 2 abaixo para nosso ajuste recomendado: Defina o tom Use a linha de assunto e o pré-cabeçalho para definir o tom. O sucesso inicial do seu depende de uma única atitude: de o destinatário abri-lo. É por isso que a sua linha de assunto, o primeiro texto lido na caixa de entrada, deve chamar a atenção e estimular a imaginação. Ela pode ser informativa e conter uma promoção, ou pode ser uma pergunta destinada a deixar o leitor curioso. O pré-cabeçalho aparece abaixo da linha de assunto. Ele deve estar relacionado ao tema da linha de assunto, ao passo que introduz o conteúdo principal do . Além disso, mesmo se as imagens estiverem desativadas, o pré-cabeçalho aparece, servindo como resumo do conteúdo do . Exemplo de visualização de caixa de mensagens no iphone: Nome da marca Linha de assunto Este é o pré-cabeçalho. Ele aparece no topo da criação e segue a linha de assunto. ALDO - Fig. 1 ARRASOU! 25% de desconto em compras de verão ARRASOU! 25% de desconto em compras de verão selecionadas. Se não conseguir ver as imagens nesse ALDO - Fig. 2 ARRASOU! 25% de desconto em sapatos Bota os preços altos pra correr. Economize nos mais recentes estilos básicos. Veja em

16 Estes temas de linha de assunto costumam ser os mais populares: Divertido (humor, trocadilhos, jogos de palavras) Curiosidade (questões, charadas, raciocínio interrompido) Relações (mídias sociais, comunidades online, eventos especiais) Estratégias de linha de assunto Quanto mais curto, melhor: procure manter as linhas de assunto abaixo de 45 caracteres, para não correr o risco de ela aparecer cortada na caixa de entrada, especialmente em celulares. Mensagem principal central: se houver risco de corte, certifique-se de que a promoção, o produto ou o anúncio em destaque esteja no começo da linha de assunto. Não caia na monotonia: linhas de assunto com uma abordagem direta são bem-sucedidas, mas podem se tornar previsíveis. Mesmo quando se tem um recorrente, é útil alterar a fórmula das linhas ocasionalmente. Considere o uso de diferentes estilos: uma reformulação de suas linhas de assunto pode torná-las mais chamativas e pode aumentar a taxa de abertura.

17 O Outlook e a maioria dos clientes de Webmail ignoram folhas de estilo CSS externas e incorporadas Marcas de comentário podem afetar o tamanho geral do código... além da pontuação do spam <!-- comentário exemplo --> Flash e JavaScript não funcionam no . Eles são considerados perigosos, são marcados como spam e causam erro O Outlook 2007/2010 não executa animações, não mostra imagens de fundo e desativa formulários CSS abreviado pode não ser compatível Você deve adicionar tags alt a imagens que contenham texto Diretrizes de programação Conforme a mídia de evolui, ela constantemente oferece desafios de renderização de código. A degradação elegante é a solução. Planeje um layout que proporcione eficiência, renderização, resultados e boa aparência. Revisite-o posteriormente conforme as evoluções acontecerem. Veja algumas dicas: Crie de maneira modular com marcas <table> aninhadas para edição fácil e rápida. Você poderá isolar erros, reduzir problemas de renderização e adicionar, remover, reorganizar e duplicar seções de conteúdo. Atualize modelos antigos e procure por HTML desnecessário. Certifique-se de que não restaram marcas de marcação vazias e de consolidar a formação do código HTML onde for possível. Deixe tudo simples e limpo. Defina larguras para <table> e <td> a fim de evitar problemas de renderização. Combine-as à largura das imagens e certifique-se de que os números estão corretos. Use CSS interno para formatação de fontes, como style= font-family: Arial, sans-serif; font-size: 12px; Não use marcação de estilos de fonte arcaica, como <font face= Arial, sans-serif size= 2 > Coloque cada imagem em sua própria célula <td>. Certifique-se de que todas as imagens tenham style= display:block; definido para evitar falhas no Gmail. Use símbolos HTML para caracteres não ASCII, como em vez de.

18 Solucionando problemas no código HTML Primeiramente, salve o seu trabalho e faça uma cópia de backup. Parte do processo de controle de qualidade ao criar ou verificar o código é a capacidade de reconhecer erros comuns. Veja a seguir alguns dos erros básicos mais comuns para procurar ao ler o código HTML, por que eles ocorrem e soluções rápidas. Problema 1: imagens não parecem estar carregando. As imagens devem ser hospedadas em um servidor e referenciadas de modo absoluto (e não local ou relativo) pelo HTML, de modo que sejam exibidas corretamente. Problema 2: a exibição está adequada no navegador, mas não na caixa de entrada. Pode ocorrer devido ao fato de que vídeo, Flash, elementos que interagem com o mouse, JavaScript ou até mesmo pesquisas simples têm suporte limitado no . Uma sugestão seria a de usar um serviço que auxilia na inclusão de recursos como esses no seu . Se um cliente de não pode executar um vídeo, esses serviços podem degradá-lo em uma GIF animada ou uma imagem estática. Problema 3: a imagem que estava atrás do texto desapareceu. Imagens de fundo não são compatíveis no Outlook, versões 2007 e posterior. Evite usar imagens de fundo, ou use uma cor sólida como fundo quando as imagens não são exibidas. Problema 4: há problemas com o formato dos arquivos. Alguns programas de não permitem o uso de todos os tipos de arquivo de imagem. Se você usou um arquivo PNG, BMP ou TIF, substitua-o por um arquivo GIF ou JPG.

19 Continuando... Solucionando problemas no código HTML. Problema 5: as imagens são bloqueadas. Mais da metade dos programas de desativam imagens automaticamente, até que o usuário clique em exibir imagens. Infelizmente, não há meios de contornar isso, mas você pode pedir aos assinantes que adicionem o seu ao catálogo de endereços para que as suas imagens sejam sempre exibidas. Problema 6: há espaços vazios embaixo das imagens. Esses espaços podem ser muito perceptíveis em designs nos quais o layout envolve várias imagens separadas e posicionadas em um formato baseado em tabela. Isso é fácil de corrigir: adicione um pouco de CSS interno para cada uma das imagens com o problema: <img src= /logo.gif style= display:block; > Problema 7: as fontes não são exibidas corretamente. Se o texto é exibido em uma fonte que você não configurou, pode ser devido a uma destas duas razões: a) A fonte especificada não está instalada no computador usado para exibir o . Para obter resultados confiáveis, use fontes seguras para Web, como Arial, Verdana, Georgia, Times New Roman, Tahoma ou Trebuchet. b) Se as fontes foram especificadas na marca <head> do seu nas regras CSS, o Gmail não as exibe corretamente. A melhor solução é colocar todos os seus estilos de fonte internamente. Lembre-se, programar HTML para é complicado. Há várias partes móveis, e o inteiro pode renderizar incorretamente com apenas um erro. Dedique sua atenção ao processo de programação, e os erros podem ser mantidos em um nível mínimo.

20 Resumo Principais dicas para se ter em mente. Exploramos muitos aspectos por trás de uma estratégia de design de , mas ainda existe muitos fatores para se considerar. Lembre-se das principais dicas dos tópicos abordados neste guia: Acompanhe avanços tecnológicos e estratégicos é um formato oportuno para o seu marketing, e é importante ser conciso Acessos por celular ultrapassaram acessos por desktop, uma tendência que deve continuar no futuro O design adaptável usa principalmente um sistema de grades e deve acompanhar certos tipos de formato de layout O design otimizado para celular pode ser apropriado para criações personalizadas, mas pode ainda ser otimizado para dispositivos móveis Animações são uma ótima maneira de se destacar na multidão e de criar interesse Incorpore mídia social com sabedoria na sua criação Descubra qual é a melhor maneira de reunir dados dos consumidores sem parecer invasivo Crie um modelo para economizar tempo no design Fique atento durante a criação de linha de assunto e faça testes com frequência Crie e verifique o código com um olhar aguçado

21 Serasa Experian Marketing Services Alameda dos Quinimuras, 187 São Paulo, SP - CEP: Interações intelingentes. O tempo todo.