< <Home
< <página anterior

Responsividade

Ou design responsivo (conjunto de técnicas para melhorar a experiência do usuário independente do dispositivo utilizado).

Características de um site responsivo:

Um único conteúdo em uma única URL em um único código. Ou seja não trata de versões diferentes de site, para cada dispositivo. Ele é um site apenas. O que faz é adequar o seu conteúdo a qualquer dispositivo.

Utilização de Breakpoints não para projetar resoluções, mas para reposicionar, redimensionar e exibir ou ocultar elementos.

Três pilares básicos compõe o RWD (Responsive Web Design) ou Design Responsivo.

Fundação flexível

Este é o esqueleto básico do layout. A fundação pode ser construída através de um sistema de grid fluído ou de forma manual, combinando medidas relativas e matemática.

Convertendo pixels (px) em Porcentagem (%)

Não utilizar medidas fixas permite que o conteúdo se adapte de forma natural, independente do dispositivo. Imagens, vídeos e todos os assets (ativos) do site devem ser flexíveis.

Para construir a fundação flexível é preciso seguir uma formula estrutural básica: objeto : contexto = resultado. Exemplo: uma div de 1128px de largura que contenha uma coluna com 240px de largura. Essa coluna é um elemento filho de container. Usar o valor em px da coluna (objeto = 240px) e dividir pelo valor em pixel do elemento pai (contexto = 1128px). Nesse caso o resultado deu 0,2127659574468085. Agora basta andar duas casas para a direita com a virgula e acrescentar um ponto que será obtido o valor 21.27659574468085 que corresponde a coluna em porcentagem: 21.27659574468085%. Pode-se arredondar para 21% mas não é necessário.

A variedade de dispositivos móveis obriga a uma mudança significativa na hora de programar. Os pixels serão menos usados. Agora a sua utilização será para definir alturas fixas e definir um container inicial, com uma largura máxima, se assim for determinado no layout. Para o layout fluido as medidas usadas passarão a ser a % e o em que são medidas relativas. Obs: EM é uma unidade no campo da Tipografia, que define a proporção do comprimento e altura da letra com relação ao tamanho do ponto da fonte em questão. Originalmente a unidade era derivada do comprimento da letra “M”. No tipo de letra utilizado atualmente. (1 em equivale a 16 pixels que é igual a 12 pontos).

Lembrete: 1 EM é relativo ao font-size. Se for alterado este valor dentro de um elemento pai, os elementos filhos serão alterados na mesma proporção.

Tabela de Equivalências

Abaixo uma tabela com as medidas e seus valores equivalentes, aproximados. (Depende do Navegador utilizado e também do Sistema Operacional:)

Pontos Pixels Em’s %
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

Original de CarlosLeopoldo: Unidades de medida en CSS.

Viewport

Para que se encaixem proporcionalmente à tela, a maioria dos navegadores de celular dimensionam as páginas HTML para a largura do viewport. A meta tag viewport serve para redefinir isso. Ela diz ao navegador para usar como largura do layout, a largura do viewport, desativando a escala inicial. Não se sabe o que viewport diz ao navegador pra ele fazer o que faz. Parece bruxaria. No cabeçalho do documento coloque o seguinte código: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="---"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Design Responsivo</title>
--------
--------
</head>

O procedimento descrito acima é para que os dispositivos "saibam" que a escala inicial do nosso layout é equivalente ao tamanho do dispositivo. Sem essa declaração, o design responsivo só vai funcionar no desktop, porque alguns aparelhos móveis vão redimensionar o layout por conta própria.

Voltar ao topo

Fazendo um site responsivo

Usuários de computadores ou dispositivos móveis, estão acostumados a rolar as páginas em sentido vertical, não em sentido horizontal. Quando há necessidade do usuário rolar uma página horizontalmente ou diminuir o zoom para ver todo o conteúdo da página, ele fica insatisfeito.

Para se aplicar o design responsivo a um site, a dúvida é: por onde começar?

Talvez seja necessário reconstruir boa parte do site. Usando framework o trabalho será menor já que os mesmos trabalham com design responsivo. Frameworks são estruturas de código já prontas que trazem consigo diversas linhas em CSS, JavaScript e HTML já escritas, facilitando bastante o trabalho do desenvolvedor do site.

Frameworks mais conhecidos:

Imagens Responsivas

Para imagens responsivas usar no css, em img os atributos max-width, min-width, max-height, min-height. Todos em porcentagem para obter-se um bom resultado. Ex:
#img{ max-width:100%; max-height:100%; }

Menu Responsivo Simples

No Html:
<nav class="menu">
<a href="">Home</a>
<a href="">Quem Somos</a>
<a href="">Portfólio</a>
<a href="">Serviços</a>
<a href="">Contato</a>
</nav>
Na folha de estilo:
{
margin:0;
padding:0;
text-decoration:none;
}
.menu{
max-width: 80%;
margin: 10px auto;
background: #29293A;
text-align: center;
border-radius: 5px;
}
.menu > a{
display: inline-block;
padding: 15px;
color: beige;
}

max-width e min-width

A propriedade max-width permite definir a largura máxima do elemento e tem como objetivo evitar que esse elemento se extenda fora do container. A propriedade min-width é oposta à largura máxima - ela define a largura mínima de um elemento, onde o mesmo, não será menor do que o valor previsto . As propriedades max-width e min-width também podem ser aplicadas a altura (height). Para evitar conflito entre propriedades de largura e max-width, garantindo que a largura não seja substituída, os códigos devem ser feitos na seguinte ordem:
.container {
width: 780px;
max-width: 90%;
}

CSS3 e quebras de linha automáticas em colunas estreitas

Para fazer layouts que se adaptem aos dispositvos mobiles (celulares, smartphones e tablets) onde as colunas de texto ficam mais estreitas, a falta de hifenização automática em navegadores é um problema na criação de design responsivo. Por causa disso, corre-se o risco, de uma palavra maior ou um número de vários dígitos ultrapassar a largura da coluna. Quando isso acontece, o texto normalmente se estende para fora da mesma. Através do CSS há duas propriedades que ajudam a melhorar a situação: quebra de palavra word-wrap e hífens hyphens. Ao combinar essas duas propriedades, evita-se que o texto saia do layout nos navegadores . Basta adicionar a uma regra, visando os elementos que possam gerar estes erros, as declarações indicadas a seguir:

#container{
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}