Web design responsivo: criando sites adaptáveis para todos os dispositivos

Responsive Web Design
Felipe de Albuquerque

Eu sou Felipe de Albuquerque, e vamos conversar
sobre Responsive Web Design.
fa@cesar.org.br
Nice to meet you!

Overview
• Definição
• O problema
• Alguns dos muitos cenários
• Projetando interfaces responsivas
• Projetos web que utilizam essa abordagem
• Introdução ao HTML e CSS
• Interfaces fixas vs. fluidas
• Introdução à Media Queries
• Media Queries Android, iPhone e pontos de quebra de
interface
• Recomendações gerais

Definição
Segundo a wikipedia, Web Design responsivo é:
"Uma abordagem de web design destinada a elaborar
sites para fornecer uma ótima experiência de
visualização, fácil leitura e navegação com um
mínimo de redimensionamento e visionamento, para
uma ampla gama de dispositivos (de monitores de
computador a telefones celulares)".

O problema
Imagine um web software que tenha que funcionar
adequadamente em todos os navegadores, em todos os
sistemas operacionais e em qualquer resolução.
Tarefa nada fácil, não? E há quem diga que é impossível!

Alguns dos muitos cenários
Tem que funcionar em qualquer sistema operacional...

Em qualquer dispositivo...

Em todos os web browsers!

Temos que pensar até em uma Smart TV, com nada
menos que 75 polegadas.

Projetando interfaces responsivas

Mockups responsivos

Layouts responsivos

Projetos web que utilizam essa
abordagem

Introdução ao HTML e CSS
HyperText Markup Language é
utilizada para produzir páginas na
Web.
Documentos HTML podem ser
interpretados por navegadores.

Sintaxe básica de uma página HTML:
<!DOCTYPE html>
<html>
<head>
<title>Titulo da Página</title>
</head>
<body>

</body>
</html>

Cascading Style Sheets é uma linguagem de estilo, para
definir a apresentação de documentos de linguagem de
marcação, como HTML ou XML.

Sintaxe básica de uma página CSS:
seletor { propriedade: valor; }
body {
background-color: black;
}

Interfaces fixas vs. fluidas
Como o próprio nome já diz, as interfaces fixas são as que
possuem valores fixos em seus elementos, e o layout fluido é
construído com valores relativos, como por exemplo: "%" ou
"em".
O container da nossa aplicação de exemplo tem o css
da seguinte forma:
/* em resoluções maiores */
#container{ width:90%;}
/* resoluções menores, como nos dispositivos iPhone e
Android */
#container{ width:100%;}

Introdução à Media Queries
Media queries possibilitam especificar um estilo para
necessidades especiais, como dispositivos específicos,
resoluções e/ou cores.
Segundo Diego Eis (Tableless), Media Queries é:
“A utilização de Media Types com uma ou mais
expressões envolvendo características de uma media
para definir formatações para diversos dispositivos. O
browser ou a aplicação lê as expressões definidas na
query, caso o dispositivo se encaixe nestas requisições, o
CSS será aplicado”

Exemplos de inserção e especificação de Media Query:
Modificando a media no HTML
<link rel="stylesheet" media="all" href="style.css"
type="text/css" />
<link rel="stylesheet" media="screen and (color)"
ref="ajustesCSS.css" type="text/css" />
<link rel="stylesheet" media="print"
href="impressora.css" />
Modificando no CSS
@media screen {
* { font-family: sans-serif }
}
Referência: W3C

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.

Medias
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.

Exemplos da sintaxe:
Types:
@media screen, projection { ... }
Dimensão, resolução do dispositivo:
@media (min-device-width: 640px) { ... }
Orientation / Aspect Ratio
@media screen and (device-aspect-ratio: 16/9) { ... }
@media (orientation:portrait) { ... }
Color:
@media (color) { /* Screen is in color */ }
@media (min-color-index: 256) { /* Screen has at least 256 colors */ }
@media (monochrome) { /* Screen is monochrome */ }

Exemplos de inserção:
Import role:
@import url(color.css) screen and (color);
Orientation:
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
Referência: W3C

Media Queries Android
Exemplos para o Android:
@media screen and (max-device-width: 480px){
/*
Regras css, específicas para a resolução do dispositivo
android
*/
#container{width:100%;}
}

Media Queries iPhone
Exemplos para o iPhone:
@media only screen and (max-width : 320px) {
img.logo {max-width: 85%;margin:0 auto;}
nav li{
display:block;
border-bottom:1px solid #333
}
}

Pontos de quebra de interface
Outros pontos de quebra de layout:
/* Os pontos de quebra são inevitáveis, mas podem ser tratados. Você
pode fazer os ajustes necessários para cado ponto de quebra ou
simplesmente definir um ponto que você não vai dar mais suporte,
como por exemplo em nosso código de exemplo:
*/
@media (max-width:242px) {
#container{display:none;}
body{background:url(../images/sorry.jpg) top center;}
#msgSemSuporte{
display:block;
padding:4%;
}
}

Recomendações gerais
Algumas sugestões:
Não deixe valores fixos, é importante que todos os valores
sejam relativos. Exemplo do que não deixar fixo: estrutura de
layout como divs, imagens e etc...
Evite texturas e elementos de interface que prejudiquem a
flexibilidade e fluidez do web software.
O conteúdo do site é uma das coisas mais importantes. Na
grande maioria é o conteúdo que vai dizer como o seu layout
ficará em resoluções muito pequenas ou gigantescas.

Recomendações gerais
Algumas sugestões:
Em resoluções pequenas, verticalize o layout e deixe apenas o
necessário, retire banners e demais firulas.
Desenvolva para um target específico e faça as correções para
os demais cenários.
Identifique pontos em que o layout quebre e defina pontos em
que vai precisar fazer ajustes.
Teste, teste e continue testando o projeto em resoluções
diferentes, em plataformas diferentes e no máximo de
browsers possíveis.

Web design responsivo: criando sites adaptáveis para todos os dispositivos

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Similar to Web design responsivo: criando sites adaptáveis para todos os dispositivos

Similar to Web design responsivo: criando sites adaptáveis para todos os dispositivos (20)

Web design responsivo: criando sites adaptáveis para todos os dispositivos