Responsive web design_CPRecife2 - Felipe de Albuquerque

Responsive Web Design

Felipe de Albuquerque

Eu sou Felipe de Albuquerque, e vamos conversar sobre Responsive Web Design.

[email protected]

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 queb

ra de interface• Recomendações gerais

DefiniçãoSegundo 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.

"E isso é possível?!"

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.

Introdução ao HTML e CSSSintaxe 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.

Introdução ao HTML e CSSSintaxe básica de uma página CSS:

seletor { propriedade: valor; }

body {background-color: black;

}

Interfaces fixas vs. fluidasComo 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

Introdução à Media QueriesMedia 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”

Introdução à Media QueriesExemplos 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

Introdução à Media QueriesMedias

all Para todos os dispositivos.

braille Para dispositivos táteis.

embossed Para dispositivos que “imprimem” em braille.

handheldPara dispositivos de mão. Normalmente com telas pequenas e banda limitada.

print Para impressão em papel.

projection Para apresentações, como PowerPoint.

screenPara monitores ou outros dispositivos com telas coloridas e com resolução adequada.

Introdução à Media Queries

Medias

speechPara sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores.

ttyPara dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.

tvPara dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.

Introdução à Media QueriesExemplos 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 */ }

Introdução à Media QueriesExemplos 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 AndroidExemplos 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 iPhoneExemplos 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 interfaceOutros 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 geraisAlgumas 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 geraisAlgumas 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.

Obrigado!

Technology

Responsive web design_CPRecife2 - Felipe de Albuquerque