Responsive ou Adaptive Design - Just Digital

RESPONSIVE
OU

ADAPTIVE ?
Qual a melhor pratica?

RESPONSIVE DESIGN
O Responsive Design é proveniente das melhores práticas do
desenvolvimento web. Permite que os layouts dos sites se
ajustem automaticamente aos dispositivos, sejam eles
Desktops, Smartphones ou Tablets.

ADAPTIVE DESIGN
No Adaptive Design, temos algo meio que
engessado. Os blocos terão medidas fixas e um tipo de
folha de estilo para cada tipo de resolução. Tornando
assim algo bem mais trabalhoso

MAS QUAL O MELHOR A SE USAR?

OU

A WEB DEVE SER ACESSÍVEL POR QUALQUER
PESSOA E EM QUALQUER LUGAR.
Então o melhor para isso e menos trabalhoso seria Responsive
Design.

MAS PORQUÊ?

POR QUE NÃO ADAPTIVE?
No adaptive toparemos com circunstâncias que serão
muito mais trabalhosas e nem sempre
será agradável pois cada vez que surgir uma nova
resolução você terá que adaptar novamente seu estilo
para assim tornar o seu site mais amigável possível
para aquela resolução.

COMO FAZER DE FATO UM SITE RESPONSIVO
Grid flexível
Imagens e mídias flexíveis
Media queries

GRID FLEXÍVEL
Grid é um conjunto de linhas bases que fornecem uma estrutura para seu layout.

FORMULA PARA GRID FLEXÍVEL
Eis a formula mágica:

Objeto ÷ Contexto = RESULTADO

RESULTADO PARA UM GRID FLEXÍVEL
Eis a fórmula mágica:


↓
300px ÷ 960px = 0.3125
Coloque o ponto duas casas para a direita e acrescente a % ficando assim 31.25%.

FONTES FLEXÍVEIS
Os valores de tamnho das fontes devem ser substituídos de PX para EM
O valor padrão das fontes consideradas pelo browser é 16px, exemplo:

.content h1 {
font-size: 30px;
color: #333;
margin: 2%;
}

CRIANDO FONTES FLEXÍVEIS
A formula é a mesma:


↓

30px ÷ 16px = 1.875
No caso das fontes não é necessário posicionar o ponto para a direita e o resultado é

1.875em.

IMAGENS FLEXÍVEIS
As imagens também necessitam se adaptar conforme o
tamanho da tela, pois podem sair fora do layout:

img {
max-width: 100%;
}
O mesmo serve para outros elementos do html:
img, embed, object, iframe, video {
max-width: 100%;
}

MEDIA QUERIES
As Media Types definem para qual tipo de media o CSS será direcionado.
O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado
por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira.
A forma que este HTML é formatado em cada dispositivo é diferente. Logo,
o código CSS será diferente para cada um destes dispositivos.

LISTA DE MEDIAS
All - Para todos os dispositivos.
Braille - Para dispositivos táteis.
Embossed - Para dispositivos que “imprimem” em braille.
Handheld - Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.
Print - Para impressão em papel.
Projection - Para apresentações, como PowerPoint.
Screen - Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.
Speech - Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural,
onde podemos “formatar” a voz dos sintetizadores.
Tty - Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo,
teletypes, terminais, dispositivos portáteis com display limitado
Tv - Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.

A SOLUÇÃO – MEDIA QUERIES
As Media Queries definem condições para a utilização de um CSS específico. Se essas
condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS
será aplicado.

<link rel="stylesheet" href="estilo.css" media="screen and (color)" />

Neste código, por exemplo, o CSS será aplicado em dispositivos de media screen, que tenham
uma característica color.
Logo, este CSS não será aplicado em aparelhos Monocromáticos.

OPERADORES LÓGICOS
Os Operadores Lógicos te possibilitarão criar media queries diversas. Os operadores
são: not, and e only.
O not irá fazer uma sentença de negação. Por exemplo:
<link rel="stylesheet" href="estilo.css" media="all and (not color)" />

O only irá esconder os estilos de browsers que não reconhecem media queries. Antes da
sentença, você coloca o only:
<link rel="stylesheet" href="estilo.css" media="only screen and (color)" />

OPERADORES LÓGICOS
É possível também agrupar várias media queries
separando-os com , (vírgula). Se qualquer uma das
queries forem verdadeiras, o CSS será aplicado.
Então a vírgula funciona como um operador or.
<link rel="stylesheet" href="estilo.css" media="screen and (color),
projection and (color)" />

MEDIA FEATURES
Para então distinguir um dispositivo do outro, você utilizará as características de cada um.

<link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />
Há uma lista de características que você pode utilizar aqui para selecionar os dispositivos que você quiser:

width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio

color
color-index
monochrome
resolution
scan
grid

MEDIA NO CSS
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

TAG META VIEWPORT
Os smartphones tem telas pequenas podem dificultar a leitura se
fizermos um sistema planejado para grandes resoluções. Por isso é
interessante que possamos customizar o viewport para que ele se
adeque a realidade desses dispositivos. É aí que entra a metatag
viewport.
Com essa metatag iremos customizar a resolução inicial que o
browser deve renderizar do viewport do dispositivo. Dessa forma,
podemos preparar websites com resoluções personalizadas para
smartphones e outros aparelhos.

VALORES DA TAG META VIEWPORT
A sintaxe é muito simples e deve ser colocada, como sempre, na tag head:

<meta name="viewport" content="">
Os valores de content são os que seguem abaixo:
Valor

Descrição

width

Define uma largura para o viewport. Os valores podem ser em PX
ou “device-width”, que determina automaticamente um valor
igual a largura da tela do dispositivo.

height

Define uma altura para o viewport. Os valores podem ser em PX
ou “device-height”, que determina automaticamente um valor
igual a altura da tela do dispositivo.

initialscale

Define a escala inicial do viewport.

userscalable

Define a possibilidade de o usuário fazer “zoom” em um
determinado lugar da tela. É ativado quando o usuário bate duas
vezes com o dedo em um lugar da tela.

REMOTE DEBUGGING ON ANDROID
O desenvolvimento de página web mobile é difícil de testar por envolver outros aparelhos.
Mas os browsers mais novos já possuem recurso de debug remoto. Além do iOS, o Chrome
Mobile também traz esse recurso.

Embora ainda não haja suporte nativo para debug do browser padrão do Android, o suporte no
Chrome é muito bom. Ele apenas para Android 4 e já foi anunciado como futuro substituto do
browser padrão do Android.

PRÉ-REQUISITOS
Instale o Chrome Mobile no seu Android 4.
Baixe o Android SDK pra sua máquina.
Instale o Google Chrome no seu Desktop.
Tenha um cabo USB à mão pra conectar o dispositivo no computador.

CONFIGURAÇÃO DOS DEVICES
Vá nas Configurações de sistema do Android e entre em Opções do Desenvolvedor.
Lá, habilite a opção Depuração USB:

Abra o Chrome Mobile no celular e vá em suas Configurações.
Entre no menu Ferramentas para desenvolvedores lá no final.
Lá, habilite a opção Ativar a depuração da web via USB

DEBUG DO DEVICE VIA DESKTOP
Plugue o celular no computador usando o cabo USB.
No terminal, entre na pasta que você instalou o Android SDK e em platform-tools.
(opcional) Rode o ADB pra listar os dispositivos e ver se seu celular foi reconhecido:

./adb devices

Se não for reconhecido, verifique se a depuração USB está habilitada e tente plugá-lo novamente.
Ainda usando o ADB, rode o comando que habilita o debug remoto no Chrome:

./adb forward tcp:9222 localabstract:chrome_devtools_remote
Por fim, basta ir no seu Chrome Desktop e abrir o endereço http://localhost:9222.
Todas as abas abertas no celular serão listadas. Selecione uma para debugar:

WEB INSPECTOR
O Web Inspector será aberto no seu Chrome no Desktop mas linkado
com o Chrome no celular. Você pode debugar normalmente e fazer
alterações e vê-las em tempo real no aparelho:

POR FIM
Criar um site responsivo não é fácil. Trabalhar com flexibilidade e adaptação é bem mais
complicado que um site fixo em pixels. As ferramentas de desenho ainda não estão
preparadas e os designer gráficos costumam ter dificuldades para criar com responsividade
em mente.

O código fica mais complexo também. Há dificuldades para se trabalhar com imagens e vídeos
responsivos. É bastante complicado adaptar um site Desktop já existente para ser responsivo.

Apesar de tudo isso, designs resposivos são o futuro. Pelo simples motivo de que a Web é
única e criar sites separados para cada categoria de dispositivos é impossível.

OBRIGADO!
Cláudio do Nascimento Silva (Soldado)
Developer

code@justdigital.com.br
+55(11)5181-5170

www.justdigital.com.br
blog.justdigital.com.br

Responsive ou Adaptive Design - Just Digital

Mais conteúdo relacionado

Destaque (16)

Semelhante a Responsive ou Adaptive Design - Just Digital (20)

Mais de Just Digital (20)

Último (11)

Responsive ou Adaptive Design - Just Digital