responsive web design_cprecife2 - felipe de albuquerque
DESCRIPTION
Palestra sobre Responsive Web Design, realizada para o Campus party Recife 2013TRANSCRIPT
![Page 1: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/1.jpg)
Responsive Web Design
Felipe de Albuquerque
![Page 2: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/2.jpg)
Eu sou Felipe de Albuquerque, e vamos conversar sobre Responsive Web Design.
Nice to meet you!
![Page 3: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/3.jpg)
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
![Page 4: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/4.jpg)
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)".
![Page 5: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/5.jpg)
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!
![Page 6: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/6.jpg)
Alguns dos muitos cenários
Tem que funcionar em qualquer sistema operacional...
![Page 7: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/7.jpg)
Alguns dos muitos cenários
Em qualquer dispositivo...
![Page 8: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/8.jpg)
Alguns dos muitos cenários
Em todos os web browsers!
![Page 9: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/9.jpg)
Alguns dos muitos cenários
Temos que pensar até em uma Smart TV, com nada menos que 75 polegadas.
![Page 10: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/10.jpg)
"E isso é possível?!"
![Page 11: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/11.jpg)
Projetando interfaces responsivas
![Page 12: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/12.jpg)
Projetando interfaces responsivas
Mockups responsivos
![Page 13: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/13.jpg)
Projetando interfaces responsivas
Layouts responsivos
![Page 14: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/14.jpg)
Projetos web que utilizam essa abordagem
![Page 15: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/15.jpg)
Introdução ao HTML e CSS
![Page 16: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/16.jpg)
Introdução ao HTML e CSS
HyperText Markup Language é utilizada para produzir páginas na Web.
Documentos HTML podem ser interpretados por navegadores.
![Page 17: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/17.jpg)
Introdução ao HTML e CSSSintaxe básica de uma página HTML:
<!DOCTYPE html><html><head><title>Titulo da Página</title><!-- É mostrado na barra do navegador --></head><body><!-- Conteúdo --></body></html>
![Page 18: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/18.jpg)
Introdução ao HTML e CSS
![Page 19: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/19.jpg)
Introdução ao HTML e CSS
Cascading Style Sheets é uma linguagem de estilo, para definir a apresentação de documentos de linguagem de marcação, como HTML ou XML.
![Page 20: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/20.jpg)
Introdução ao HTML e CSSSintaxe básica de uma página CSS:
seletor { propriedade: valor; }
body {background-color: black;
}
![Page 21: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/21.jpg)
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%;}
![Page 22: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/22.jpg)
Introdução à Media Queries
![Page 23: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/23.jpg)
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”
![Page 24: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/24.jpg)
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
![Page 25: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/25.jpg)
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.
![Page 26: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/26.jpg)
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.
![Page 27: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/27.jpg)
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 */ }
![Page 28: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/28.jpg)
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
![Page 29: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/29.jpg)
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%;}}
![Page 30: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/30.jpg)
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 }}
![Page 31: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/31.jpg)
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%; }}
![Page 32: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/32.jpg)
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.
![Page 33: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/33.jpg)
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.
![Page 34: Responsive web design_CPRecife2 - Felipe de Albuquerque](https://reader036.vdocument.in/reader036/viewer/2022062514/558cfdcad8b42a534b8b45d8/html5/thumbnails/34.jpg)
Obrigado!