Pensando Responsivo: abril 2016

sábado, 30 de abril de 2016

Formulário também precisam ser readaptáveis

Formulários sempre exigem um pouco de atenção quando são construídos, por terem diferentes tipos de campos que tem tamanhos e formatos variados, mas quando falamos de aplicar design responsivo em um formulário, não é algo assim tão complicado. Caso você tenha lido o post anterior sobre aplicar media queries junto com porcentagem para aproveitar o espaço da tela (que pode ser lido clicando aqui), esse post vai ser bem fácil também.
Primeiro vamos ver o código abaixo e o resultado que ele gera ao ser acessado:

HTML:
<section class='colunas'>
<form>
<div class='linha'>
<div class='label'><label>Nome</label></div>
<div><input type='text' /></div>
<div class='label'><label>Sexo</label></div>
<div>
<select>
<option value=''>Feminimo</option>
<option value=''>Masculino</option>
<option value=''>Outro</option>
</select>
</div>
</div>

<div class='linha'>
<div class='label'><label>Observações</label></div>
<div><textarea></textarea></div>
<div class='label'><label>Idade</label></div>
<div><input type='text' /></div>
</div>
<div class='linha'>
<div> </div>
<div><input type='submit' /></div>
</div>
</form>
</section>

CSS:
.colunas div > div {
width: 15%;
float: left;
padding: 1px 5px;
box-sizing: border-box;
}

.colunas div.linha {
clear: both;
}

input[type='text'],
input[type='submit'],
select,
textarea {
width: 100%;
}

Resultados:

Como podemos ver, sempre baseado nos nossos exemplos anteriores, o formulário ficará bem aplicado num navegador no desktop ou notebook, mas num celular, por exemplo, tanto na vertical quanto na horizontal o espaço será mal aproveitado e desalinhado. Como podemos fazer um melhor uso desse espaço então? Fácil: media queries e porcentagem. Vamos ver o código, mas usando eles dessa vez:

.colunas div > div {
width: 15%;
float: left;
padding: 1px 5px;
box-sizing: border-box;
}

.colunas div.linha {
clear: both;
}

input[type='text'],
input[type='submit'],
select,
textarea {
width: 100%;
}

@media screen and (max-width: 640px) {
.colunas div > div {
width: 49%;
}

div {
vertical-align: top;
}
}

@media screen and (max-width: 360px) {
.colunas div > div {
width: 100%;
padding: 0px;
}
input[type='text'],
input[type='submit'],
select,
textarea {
margin-bottom: 5px;
}

.label {
background: orange;
}
}

Vendo o resultado, temos um layout mais fluído e melhor aproveitado:

Como sempre reforçado nesse blog, a ideia não é criar um padrão único de formatação, afinal, qual seria a utilidade disso? Teríamos sempre sites acessíveis de qualquer dispositivo, mas sempre com a mesma cara, não teria a mínima graça.
Nossa ideia é sempre mostrar algumas técnicas que podem fazer nossos sites serem mais acessíveis, tanto mostrando coisas que o HTML junto com CSS nos permitem fazer, tanto mostrar que o Design Responsivo está aí com o intuito de facilitar nossa vida como programadores e desenvolvedores web.

Espaçamento de textos

Muitas vezes quando estamos desenhando o layout de um site para desktops pensamos bastante no espaço entre objetos, principalmente entre os textos e as bordas dos blocos onde eles estão contidos, e isso é bom, pois impede que todo o conteúdo do nosso site fique muito próximo, às vezes até colado, ficando com uma cara que não seja agradável de mexer.
Entretanto, como estamos aqui aprendendo a pensar em design responsivo, temos que também pensar nas pessoas que acessarão nosso site em dispositivos móveis, certo? Exato!
Primeiro, vamos considerar o código abaixo:

HTML:
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed accumsan justo. Mauris non pellentesque leo. Nulla orci ipsum, posuere a euismod ut, auctor eu mauris. Suspendisse facilisis ipsum ex, quis ultricies arcu hendrerit eget. Aenean eget placerat eros. Praesent rutrum tincidunt velit, nec posuere urna lobortis sit amet. Cras metus erat, pellentesque vitae eleifend non, gravida eu urna. Nulla dictum vel nunc in ullamcorper. Mauris a odio est. Maecenas dictum orci massa, in dictum neque feugiat sed. Ut ut arcu dictum odio fermentum sagittis.
</div>
</body>

CSS:
div {
border: 1px solid #000000;
padding: 25px;

}

Ele gera o seguinte resultado dos dispositivos:

O resultado fica desalinhado ou desregulado nos dispositivos móveis? Na verdade não, tudo está até que bem no lugar. Entretanto, quando pensamos em design responsivo, é sempre bom aproveitarmos ao máximo o tamanho da tela para darmos o máximo de informação ao usuário na tela sem que ele precise rolar o site (SEMPRE NA VERTICAL, sempre temos que evitar a existência de qualquer barra horizontal nos nossos sites.)
Vamos analisar o código abaixo:

CSS:
div {
border: 1px solid #000000;
padding: 25px;
}

@media screen and (max-width: 640px) {
div {
padding: 20px 10px;
}
}

@media screen and (max-width: 360px) {
div {
padding: 15px 0px;
}

}

E o resultado que isso gera:

Sutil, certo? Sim, a diferença parece pouca, mas às vezes, dependendo do conteúdo ou do texto que temos num bloco, essa diferença pode fazer com que todo o nosso conteúdo seja apresentado de uma vez, facilitando a leitura e diminuindo a necessidade de o usuário rolar o site, o que facilita a navegação.
Essa diminuição de distanciamento nem sempre precisa existir, ou ser tão diminuída a ponto do texto quase tocar as bordas, tudo é relativo e depende de como você quer que seu site seja apresentando, o que queremos reforçar aqui é a ideia de que, se queremos fazer um site que possa ser acessado mais facilmente de qualquer lugar, temos que pensar nos diferentes dispositivos que podem ser usados para acessá-los, e como facilitar o acesso ao seu conteúdo.

Se reajustando a larguras menores

Hora de continuar nossa pequena "aula" sobre a importância da porcentagem no design responsivo. Caso queira entender um pouco do que estou falando antes de continuar, você pode entender num antigo post clicando aqui.
Bem, sem mais delongas, vamos ao código:

HTML:
<section class='colunas'>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>

</section>

CSS:
div {
border: 1px solid #000000;
margin-bottom: 2px;
}

.colunas div {
width: 24%;
display: inline-block;

}

Quando abrimos nos navegadores temos os seguintes resultados:

Tudo bem no desktop, ainda aceitável num celular segurado na horizontal e péssimo se virarmos ele na vertical.
Para corrigir isso, podemos fazer uso do nosso conhecimento de media queries (neste link) e a ideia de porcentagem pra deixar o site mais bonito. Vamos ver o código abaixo:

.colunas div {
width: 24%;
display: inline-block;
}

@media screen and (max-width: 640px) {
.colunas div {
width: 49%;
}
}

@media screen and (max-width: 360px) {
.colunas div {
width: 100%;
}
}

Vamos ver como isso fica ao ser aberto:

Aproveitamos melhor o espaço, e o nosso site não fica mais desalinhado independente de como e onde abrimos. Também podemos fazer com que nos celulares e tablets os blocos ocupem 100% da largura independente da posição em que eles fiquem da seguinte forma:

div {
border: 1px solid #000000;
margin-bottom: 2px;
}

.colunas div {
width: 24%;
display: inline-block;
}

@media screen and (max-width: 640px) {
.colunas div {
width: 100%;
}
}

E como resultado temos:

Qual dos dois fica melhor? Não dá para afirmar, depende do conteúdo geral do site, e como as informações em cada bloco precisam ser mostradas, mas quisemos apresentar aqui formas de como deixar o conteúdo mais harmonioso. Podemos dividir os blocos em uma coluna, duas, três, tudo depende de como usamos isso para uma melhor apresentação do nosso conteúdo.

Trabalhando com porcentagens

Quando trabalhos com design responsivo, uma das primeiras coisas que devemos colocar na cabeça é que vamos trocar, SEMPRE QUE POSSÍVEL, o uso de medidas estáticas (pixels, por exemplo) por medidas dinâmicas, ou seja, por porcentagem, e podemos ver no código abaixo um exemplo de como as meninas estáticas podem ser nossas inimigas:

HTML:
<div class='container'>
<div class='colEsq'>
Texto esquerda 1
<br />
Texto esquerda 2
<br />
Texto esquerda 3
<br />
Texto esquerda 4
<br />
Texto esquerda 5
<br />
</div>
<div class='colDir'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices ultricies tincidunt. Nam eu hendrerit orci. Quisque non ipsum mi. Mauris in vulputate diam. Aliquam erat volutpat. Vivamus cursus volutpat nisi, fringilla sodales quam congue et. Nulla in tellus arcu. Aliquam sagittis placerat feugiat.
<br />
Suspendisse volutpat justo arcu, ac congue urna congue ac. Suspendisse at elementum libero. Nulla sed mi euismod dolor tincidunt vestibulum. Sed nulla nunc, varius in dapibus eget, interdum sed justo. Suspendisse maximus elit nulla, rutrum laoreet metus condimentum id. Phasellus ut justo blandit, euismod libero nec, hendrerit velit. Proin blandit risus eget elit ultricies, non interdum eros pharetra. Praesent lacinia aliquam felis quis pharetra. Donec vitae enim dolor. Curabitur eu commodo nibh.
</div>
</div>

CSS:
.container {
width: 100%;
}

.container div {
float: left;
border: 1px solid #000000;
box-sizing: border-box;
}

.container .colEsq {
width: 420px;
}

.container .colDir {
width: 930px;
}

Esse código gera o seguinte resultado no navegador, e no emulador do Samsung Galaxy S5, tanto na vertical quando na horizontal:

Como podemos ver, num navegador com viewport de 1350px de largura ou mais, a página é totalmente demonstrada e fica harmoniosa, entretando, numa tela menor, seja na horizontal quanto na vertical, os blocos saem da formatação, além de não caberem totalmente na tela, gerando uma barra de rolagem horizontal.
Como resolver esse problema? Exatamente, PORCENTAGEM!
Para esses casos temos que usar um pouco de matemática, mas nada que seja tão difícil de aplicar. Vamos usar as seguintes medidas do exemplo anterior:
Bloco esquerdo: 420px
Bloco direito: 930px
Total: 1350px

Para transformarmos isso em porcentagem vamos utilizar a seguinte fórmula:
(tamanho do bloco/total) * 100

Assim temos os seguintes valores:
(420/1350) * 100 = 31.11%
(930/1350) * 100 = 68.88%

Com esses valores podemos alterar nosso CSS para o seguinte:

.container {
width: 100%;
}

.container div {
float: left;
border: 1px solid #000000;
box-sizing: border-box;
}

.container .colEsq {
width: 31.11%;
}

.container .colDir {
width: 68.89%;
}

E com isso, teremos o seguinte resultado nos navegadores com viewports diferentes:

Como visto no exemplo acima, o conteúdo ainda não ficou num formato totalmente adequado, mas o uso de porcentagem faz nosso código ser mais adaptável a diferentes dispositivos e tamanhos sem perder sua formatação.
Nos próximos posts vamos dar outros exemplos do que pode ser feito com o uso da porcentagem para deixar o site ainda mais organizado em dispositivos menores.

Onde a mágica começa a acontecer: Media Queries

Antes de qualquer coisa, para que os exemplos mostrados nesse post trabalhem de forma mais efetiva, indicamos que você leia nosso post sobre a metatag viewport, neste link.

Quando estamos trabalhando com design responsivo precisamos ter em mente que nosso site poderá ser aberto em diferentes dispositivos (desktops, notebooks, celulares, tablets, etc), e que todos eles tem os mais diferentes tamanhos e resoluções, o que pode comprometer a usabilidade caso não levemos isso em conta.
Para trabalhar com os mais diferentes dispositivos utilizando um único código o CSS nos ajuda com as Media Queries. Para entender sobre os Media Queries é necessário entender um pouco sobre os Media Types.

Media Types, falando de uma forma mais prática possível, são os diferentes tipos de mídia na qual um site pode ser aberto e, portanto, nas diferentes formas que seu layout pode ser formatado para ser melhor apresentado. Abaixo estão alguns dos exemplos de Media Types que conhecemos:
- all: este valor é usado para que o código CSS seja aplicado para todos os dispositivos;
- braille: para dispositivos táteis;
- embossed: para dispositivos que imprimem em Braille;
- handheld: para dispositivos de mão, celulares e outros dispositivos deste perfil. Normalmente com telas pequenas e banda limitada;
- print: para impressão em papel;
- projection: para apresentações, como PowerPoint;
- screen: para dispositivos com telas coloridas e alta resolução;
- speech: para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural (http://www.w3.org/TR/CSS2/aural.html) que podemos “formatar” a voz de leitores de tela e outros sintetizadores;
- tty: para dispositivos que utilizam uma grade fixa para exibição de caracteres, como teletypes, terminais, dispositivos portáteis com display limitado;
- tv: para dispositivos como televisores, ou seja, com baixa resolução, com boa quantidade de cores e scroll limitado.

Voltando para os Media Queries, eles fazem uso dos Media Types para "decidir" de que forma o CSS será lido quando for carregado. Para nossos exemplos o Media Type utilizado será o "screen".
Bem, vamos ao primeiro exemplo. Observe os códigos abaixo:

HTML:
<div class='fundo'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue lectus. Pellentesque venenatis justo eu lectus viverra, vitae faucibus erat dapibus. Vivamus dignissim eget neque semper dictum. Duis lobortis vehicula velit, non luctus lorem pharetra vitae. Maecenas convallis enim eu urna porta cursus. Cras a augue et odio scelerisque ultrices quis et mi.
</div>
<div class='fonte'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue lectus. Pellentesque venenatis justo eu lectus viverra, vitae faucibus erat dapibus. Vivamus dignissim eget neque semper dictum. Duis lobortis vehicula velit, non luctus lorem pharetra vitae. Maecenas convallis enim eu urna porta cursus. Cras a augue et odio scelerisque ultrices quis et mi.
</div>

CSS:

div {

border: 1px solid #000000;

margin-bottom: 15px;

padding: 15px;

}

.fundo {

background: #FFFFFF;

}

.fonte {

color: #000000;

}

@media screen and (max-width: 640px) {

.fundo {

background: #FFFF00;

}

.fonte {

color: #FF0000;

}

@media screen and (max-width: 360px) {

.fundo {

background: #00FF00;

}

.fonte {

color: #0000FF;

}

Vamos começar pelo HTML. Conforme vimos no post sobre a metatag viewport, definimos a mesma de acordo com a largura do dispositivo: <meta name="viewport" content="width=device-width" /> . Tendo como base o Samsung Galaxy S5, que emulanos no módulo de desenvolvedor do Google Chrome, sabemos que na vertical ele tem 360px de largura, e na horizontal esse valor sobe para 640px. Com isso, nós definimos nosso código CSS para trabalhar nessas diferentes condições de tamanho. Como fazemos isso? Usando a media query "screen" e definindo uma largura máxima. Analisemos:

@media screen and (max-width: 640px) {
.fundo {
background: #FFFF00;
}

.fonte {
color: #FF0000;
}
}

Através da primeira linha, nós definimos que toda vez que estivermos num dispositivo do tipo "screen" com uma viewport de no máximo 640px, os objetos com a classe "fundo" terão o fundo amarelho (#FFFF00), e os objetos com a classe "fonte" ficarão com a fonte vermelha (#FF0000). Tendo o exemplo acima como base, vamos analisar as linhas seguintes do código abaixo:

@media screen and (max-width: 360px) {
.fundo {
background: #00FF00;
}

.fonte {
color: #0000FF;
}
}

Como agora já temos uma noção das media queries, podemos concluir que quando acessarmos o site de um dispositivo do tipo "screen" com uma viewport de no máximo 360px, os objetos da classe "fundo" ficarão com o fundo verde (#00FF00), e a fonte ficará azul (#0000FF). Veja abaixo como o código de comporta de acordo com cada tela, computador, celular na horizontal e celular na vertical, respectivamente:

Nos próximos posts, utilizando os conceitos que vimos nesse post, vamos ver exemplos de técnicas que serão interessantes para deixar nosso site mais apresentável quando abertos em diferentes dispositivos.

A raiz de tudo: a meta tag "Viewport"

Vamos lá, galera, vamos começar de forma rápida, prática, focando ao máximo no entendimento claro sobre tudo que vamos tratar nesse blog.

Antes de pensar em fazer qualquer código que foque em design responsivo, é necessário entender sobre os tipos de pixels que existem e com os quais vamos trabalhar.
Em resumo, existem basicamente três tipos de pixels:
1 - Pixel do dispositivo: é a quantidade de pixels físicos da tela. Tomemos como exemplo o Samsung Galaxy S5 (que vamos usar nos nossos exemplos), que na vertical tem 360 pixels, e na horizontal fica com 640 pixels.
2 - CSS Pixel: é a medica que usamos no CSS para falarmos o tamanho dos objetos no nosso site. Por exemplo, se no código colocarmos "width: 10px;" estamos dizendo que o objeto que tiver essa propriedade terá 10 CSS pixels.
3 - DPI (dots per inch) Pixel: em resumo, é a quantidade de pixels que cabem em uma polegada, assim temos a possibilidade de termos resoluções maiores em telas que podem ter o mesmo tamanho físico.

Os únicos pixels que vamos precisar para os nossos exemplos são os pixels do dispositivo, e o CSS pixel, e isso é importante para tratarmos do nosso primeiro e importantíssimo tópico: a meta tag "viewport". Veja o exemplo abaixo:

<meta name="viewport" content="width=device-width">

Viewport é, em resumo, a parte visível da sua tela. Num computador ou desktop, por exemplo, o viewport é do tamanho da tela do navegador, ou seja, se você redimensionar a janela do navegador, o viewport é diminuído. Entretanto, em dispositivos móveis nós não conseguimos redimensionar o tamanho da tela, eles sempre abrem ocupando o espaço total da tela. Com a tag que indicamos acima, nós definimos a viewport do site com a largura (width) igual a largura do dispositivo (device-width). Isso permite ao nosso site ter a viewport definida de acordo com o dispositivo que abrimos o site, além dela se adaptar conforme redimensionamos o navegador no desktop, ou se viramos o celular ou tablet na vertical ou na horizontal.

A tag viewport é muito útil quando trabalhada junto com as media queries, que serão discutidas no próximo post.

Fonte: http://tableless.com.br/manipulando-metatag-viewport/