Responsividade não é padrão, é obrigação

DinamizeCapa, Dica, Dicas do Mail2Easy PRO0 Comments




Agora não há mais volta

A Internet decolou mais rápido do que qualquer um poderia ter previsto.



Dos últimos anos pra cá, o uso do celular explodiu no mundo. Hoje em dia é bem difícil encontrar alguém que não possui um celular ou que não esteja conectado à Internet.

Em vários países da América Latina e Ásiamais telefones celulares do que pessoas, e isso deve continuar como tendência de até a Internet móvel supere complementamente a banda larga residencial

Com esse crescimento vem a pergunta: Como construir sites e peças de e-mail marketing adequadas para todos os usuários? A resposta é o web design responsivo, também conhecido como RWD.


Uma Visão geral do que é responsividade

Web Design Responsivo é a prática de construção de layouts adequados para trabalhar em todos os dispositivos e tamanhos de tela, não importa o quão grande ou pequeno.


Muito do que é abordado aqui foi falado pela primeira vez por Ethan Marcotte em seu livro Responsive Web Design, que vale muito a pena ler.


O Web Design Responsivo foca em fornecer uma experiência intuitiva e de usabilidade fácil para todos. Celulares, tablets, desktops, relógios de pulso, óculos, vídeo games ou mesmo outdoors.  Todos os dispositivos podem se beneficiar da responsividade.

O próprio termo “Web Design responsivo” foi inventado, e em grande parte desenvolvido, por Ethan Marcotte.


Conte-me mais: Responsivo, Adaptativo e Móvel é tudo a mesma coisa então?



Text


Eh….Não!!

Para alguns, esses termos podem até não serem desconhecidos, ainda mais quando trabalhamos no dia-a-dia com eles. Porém, sempre fica aquela duvidazinha sobre o que é exatamente cada um desses termos.

Às vezes, a gente acha que sabe 😉


Mas Porquê!? ah.. Porque o Design Responsivo e o Adaptativo estão intimamente relacionados, e muitas vezes entende-se como sinônimos.

Responsivo é reagir às mudanças de ambiente, enquanto adaptativo significa ser facilmente modificável para um novo propósito ou situação.

Com o Design Responsivo, o layout deve fluidamente mudar com base em fatores como a largura de janela de exibição, enquanto sites adaptativos são construídos baseados em fatores pré-definidos, como, por exemplo, na situação  em que um menu horizontal é melhor do que um vertical, levando em conta a quantidade de itens que ele terá.



A combinação dos dois é o ideal, proporcionando a fórmula perfeita e uma experiência melhor ao usuário. O termo que é aplicado na prática, especificamente, não faz tanta diferença.


E como faz?  No que consiste?

O Web design responsivo é dividido em três componentes principais: layout flexível, media query e mídia flexível.

O primeiro, o layout flexível, é a prática de construir o layout de um site com uma grid flexível, capaz de redimensionar dinamicamente.

Grids flexíveis são construídos utilizando unidades comprimento relativo, geralmente porcentagens ou unidades em. Estes comprimentos relativos são então usados para declarar valores de propriedade como a largura, a margem, ou padding (preenchimento).

Mas…E o Design móvel?

O Design Móvel significa ter que construir algo específico em um novo domínio ou subdomínio exclusivamente para dispositivos móveis.

Isso tem suas aplicações, mas geralmente não é uma boa ideia.




Os sites móveis podem ser extremamente leves, mas eles vêm com dependências como por exemplo, navegadores instalados no dispositivo alvo, o que pode se tornar um obstáculo para desenvolvedores e usuários.


E no e-mail marketing?

Já no e-mail marketing a responsividade fica mais restrita, uma vez que a parte de css deve estar misturada ao html pra maior compatibilidade, no webmail e programas de leitura de e-mail.

Mas isso não é desculpa para deixar de implementar.

Se você busca inspiração confira esse link: http://zurb.com/playground/responsive-email-templates



Layouts Flexíveis

screennnn

Layouts flexíveis não fazem muito uso de unidades de medição fixa, como pixels ou polegadas. A razão disso, é que a altura e largura do viewport mudam de dispositivo para dispositivo e os layouts precisam se adaptar a esta mudança. Felizmente, Ethan apontou uma fórmula fácil para ajudar a identificar as proporções de um layout flexível, usando valores relativos.

A fórmula é baseada em torno de tomar a largura de um elemento alvo e dividindo-o pela largura do elemento que o contem. O resultado é a largura relativa do elemento alvo.

Unidades de medida relativas do Viewport

CSS3 introduziu algumas novas unidades de medida relativas, especificamente relacionadas ao viewport do navegador ou do dispositivo. Essas novas unidades incluem vw, vh, vmin e vmax. O Suporte dessas novas medidas ainda não é dos melhores, mas está sendo bem aceito e adotado. Eles ajudam bastante!

vw
Largura do Viewport
vh
Altura do Viewport
vmin
Altura e Largura mínimos do viewport
vmax
Altura e Largura máximos do viewport





alvo ÷ contexto = resultado



Mãos a obra então?


Veja como a fórmula funciona em um layout de duas colunas. Abaixo nos temos uma DIV pai com a class do container ao redor dos elementos

<div class="container"><section>...</section><aside>...</aside></div>
Veja o CSS convencional:
.container {
  width: 538px;
}
section,
aside {
  margin: 10px;
}
section {
  float: left;
  width: 340px;
}
aside {
  float: right;
  width: 158px;
}

Text


Usando a fórmula de Grid Flexível podemos retirar todas as unidades de medidas fixas de largura e torna-las relativas!

Nestes exemplos foi usado porcentagem ao invés de “em”, e o mais interessante, é válido para as bordas dos containers

Veja o CSS flexível seguindo a fórmula de Ethan:
section,
aside {
  margin: 1.858736059%; /*  10px ÷ 538px = .018587361 */
}
section {
  float: left;
  width: 63.197026%;    /* 340px ÷ 538px = .63197026 */   
}
aside {
  float: right;
  width: 29.3680297%;  /* 158px ÷ 538px = .293680297 */
}
Veja o Exemplo ao vivo por Shay Howe

Veja aqui Grids Flexiveis por Shay Howe (@shayhowe) on CodePen.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *