Você já reparou nas mudanças de um site ou blog quando acessa do computador, do tablet e do celular? Até pouco tempo, o único meio de navegar pela internet, praticamente, resumia-se ao desktop. Hoje o cenário já é bem diferente. Com o crescente número de adeptos de tablets e smartphones inseridos em uma sociedade cada vez mais sem tempo e que prioriza o acesso remoto à informação, o conteúdo pode ser visualizado de telas de 2” a 5” (celulares), de 6” a 11” (tablets) e até em TVs de 50”.

Para atender esta realidade e ainda impactar o maior número de pessoas, o conteúdo deve ser formatado de acordo com as mais variadas resoluções de tela. Esta adaptação que segue a resolução da tela de cada um dos dispositivos em que o conteúdo é acessado é conhecida como design responsivo ou Responsive Design.

Como o próprio nome indica, o design responsivo responde ao tamanho da tela e se adapta da melhor forma, ou seja, você não precisa criar dois sites separados. Basta um único site que será adaptado para o mobile e para desktops.

O que mais importa, porém, neste conceito, pioneiramente aplicado por Ethan Marcotte, não é o tamanho da tela, e sim a resolução. É ela que deve ser levada em conta na hora de planejar o design, já que a resolução de um iPhone, por exemplo, pode se aproximar da de um computador. Para auxiliar na tarefa de detectar as características dos meios de acesso para que o conteúdo possa ser visto de diversas formas e em diferentes contextos, você pode utilizar as Media Queries, também conhecidas como @media.

Entenda o conceito de Media Queries

As Media Queries são derivadas das Media Types, conceito utilizado anteriormente para definir e direcionar a formatação CSS para os diferentes meios de acesso.

Em tradução livre, Media Queries significa consulta de mídia. Em outras palavras, é um conjunto de estilos com base no CSS3, que agem como condições ou regras dinâmicas, e guiam o visitante de seu site ou o leitor da sua newsletter de acordo com o dispositivo que ele estiver utilizando para acessá-lo, tornando a leitura mais legível em diferentes tamanhos de tela.

Além do tipo de aparelho, é possível definir tamanho, orientação, proporção ou resolução, garantindo maior precisão quando o CSS for aplicado.

Note que nos exemplos acima, o primeiro está destinado a dispositivos móveis com tela pequena, enquanto o segundo contempla um desktop com tela grande. A resolução, no entanto, não era o foco, gerando problemas para dispositivos móveis como o iPhone, por exemplo, de alta resolução. Por isso, a adoção das Media Queries, já que aqui é definida a formatação CSS para cenários específicos.

Neste exemplo, a formatação será aplicada em aparelhos com alta resolução e com uma largura (width) máxima de 480px. Além desta, há uma lista de características que podem ser utilizadas para indicar os dispositivos: device-width, height, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan e grid. Há também três operadores lógicos para restringir ou ampliar o alcance da formatação: not, or (pode ser substituído por vírgula) e only.

Depois de definir os diferentes comportamentos e formatações para cada tipo de dispositivo, você deve planejar um layout amigável, mantendo a mesma linha visual e o conteúdo para todos os aparelhos. Um bom exemplo disso é o A List a Part. E aqui, você pode ver uma compilação que reúne 50 modelos e boas práticas. Outro site legal traz uma série de GIFs com alguns conceitos visuais do design responsivo, o Froont.

Afinal, além de se adaptar à tela que você utiliza, o responsive design se modifica para melhorar sua usabilidade.

Como aplicar o responsive design no e-mail marketing

O e-mail está chegando definitivamente e com força total ao mobile. O percentual de e-mails abertos em dispositivos móveis, segundo relatório da Return Path, foi de 60%, 20% somente pelo iPad. Número que poderia ser maior se as campanhas fossem melhor otimizadas para atender esse público. Isso porque os usuários de smartphones e tablets também consomem informação via desktop, ou seja, uma experiência multiplataforma.

Estudos também indicam que as pessoas olham seus smartphones, em média, 150 vezes ao dia. Outro dado importante que deve ser levado em conta é que 80% dos usuários deletam e-mails que não se adaptam aos seus aparelhos.

Na criação de campanhas de e-mail marketing, o objetivo é promover a melhor experiência de navegação possível ao usuário através de uma newsletter mais atrativa para os dispositivos móveis, gerando maior engajamento e cliques, além de servir como garantia de acesso à informação independente do meio escolhido.

Você pode oferecer uma nova forma de navegação, aumentar ou diminuir fontes, trocar cores, redesenhar destaques (menu, sidebar...), alterar ou ocultar conteúdo.

Primeiro você deve levar em conta todo e qualquer dispositivo móvel, não importa a marca ou o quão desconhecido seja. Por isso, cada detalhe será de extrema importância para que o design funcione plenamente.

• Pense no tamanho mínimo da fonte para o texto.
• Para ícones clicáveis, o tamanho mínimo recomendado é de 44x44 pixels, assim a chance do usuário clicar fora da área ou em outro ícone é bem menor, sem contar que também é uma forma de melhorar sua experiência de navegação.
• Opte por medidas em percentual para que elas possam se ajustar independente dos tamanhos de tela.
• Para desktops, a largura de um template deve ter 640px, inclusive com a possibilidade de dividir o conteúdo em colunas. Para o mobile, o ideal é utilizar apenas uma coluna devido ao tamanho reduzido da tela, que teria a leitura prejudicada com os elementos aglomerados.

Não se esqueça de testar o responsive design nos mais variados provedores de e-mail, inclusive em diferentes dispositivos móveis para assegurar que as coisas vão sair como você planeja.

Este tipo de e-mail é compatível com: iOS Mail app, Android 4.x Email (OEM) app, Windows Phone 7.5, BlackBerry OS7 e BlackBerry Z10. E é incompatível com: iPhone Gmail app, iPhone Mailbox app, iPhone Yahoo! Mail app, Android Gmail app, Android Yahoo! Mail app, BlackBerry OS5, Windows Mobile 6.1, Windows Phone 7 e Windows Phone 8.

Portanto, apresentar um layout adequado a cada tipo de aparelho não é mais um artigo de luxo ou diferencial, mas um elemento fundamental para promover a melhor experiência de usabilidade e acessibilidade ao usuário. Além disso, aumenta a taxa de cliques e, consequentemente, a leitura.

Muita coisa ainda pode vir pela frente, sem que possamos imaginar, mas o que é certo hoje é que não podemos mais restringir o design aos 1024 pixels de largura de um desktop. E através do responsive design, o e-mail pode ser simplificado a ponto de gerar uma leitura agradável e melhorar as interações por meio de telas pequenas.

Gostou do conteúdo? Compartilhe!

Estamos nas redes sociais, então vai lá e nos conte o que achou das dicas que postamos para você!

Facebook, Twitter, LinkedIn, Google+

Tem alguma sugestão de tema para o Blog? Envie para nós!