O slideshow foi denunciado.
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 util...
Definição
Segundo a wikipedia, Web Design responsivo é:
"Uma abordagem de web design destinada a elaborar
sites para forne...
O problema
Imagine um web software que tenha que funcionar
adequadamente em todos os navegadores, em todos os
sistemas ope...
Alguns dos muitos cenários
Tem que funcionar em qualquer sistema operacional...
Alguns dos muitos cenários
Em qualquer dispositivo...
Alguns dos muitos cenários
Em todos os web browsers!
Alguns dos muitos cenários
Temos que pensar até em uma Smart TV, com nada
menos que 75 polegadas.
"E isso é possível?!"
Projetando interfaces responsivas
Projetando interfaces responsivas
Mockups responsivos
Projetando interfaces responsivas
Layouts responsivos
Projetos web que utilizam essa
abordagem
Introdução ao HTML e CSS
Introdução ao HTML e CSS
HyperText Markup Language é
utilizada para produzir páginas na
Web.
Documentos HTML podem ser
int...
Introdução ao HTML e CSS
Sintaxe básica de uma página HTML:
<!DOCTYPE html>
<html>
<head>
<title>Titulo da Página</title><...
Introdução ao HTML e CSS
Introdução ao HTML e CSS
Cascading Style Sheets é uma linguagem de estilo, para
definir a apresentação de documentos de li...
Introdução ao HTML e CSS
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 elem...
Introdução à Media Queries
Introdução à Media Queries
Media queries possibilitam especificar um estilo para
necessidades especiais, como dispositivos...
Introdução à Media Queries
Exemplos de inserção e especificação de Media Query:
Modificando a media no HTML
<link rel="sty...
Introdução à Media Queries
Medias
all Para todos os dispositivos.
braille Para dispositivos táteis.
embossed Para disposit...
Introdução à Media Queries
Medias
speech
Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS
chamada Aural, o...
Introdução à Media Queries
Exemplos da sintaxe:
Types:
@media screen, projection { ... }
Dimensão, resolução do dispositiv...
Introdução à Media Queries
Exemplos de inserção:
Import role:
@import url(color.css) screen and (color);
Orientation:
@med...
Media Queries Android
Exemplos para o Android:
@media screen and (max-device-width: 480px){
/*
Regras css, específicas par...
Media Queries iPhone
Exemplos para o iPhone:
@media only screen and (max-width : 320px) {
img.logo {max-width: 85%;margin:...
Pontos de quebra de interface
Outros pontos de quebra de layout:
/* Os pontos de quebra são inevitáveis, mas podem ser tra...
Recomendações gerais
Algumas sugestões:
Não deixe valores fixos, é importante que todos os valores
sejam relativos. Exempl...
Recomendações gerais
Algumas sugestões:
Em resoluções pequenas, verticalize o layout e deixe apenas o
necessário, retire b...
Obrigado!
Próximos SlideShares
Carregando em…5
×

Responsive web design_CPRecife2 - Felipe de Albuquerque

579 visualizações

Publicada em

Palestra sobre Responsive Web Design, realizada para o Campus party Recife 2013

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Responsive web design_CPRecife2 - Felipe de Albuquerque

  1. 1. Responsive Web Design Felipe de Albuquerque
  2. 2. Eu sou Felipe de Albuquerque, e vamos conversar sobre Responsive Web Design. fa@cesar.org.br Nice to meet you!
  3. 3. 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
  4. 4. 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)".
  5. 5. 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!
  6. 6. Alguns dos muitos cenários Tem que funcionar em qualquer sistema operacional...
  7. 7. Alguns dos muitos cenários Em qualquer dispositivo...
  8. 8. Alguns dos muitos cenários Em todos os web browsers!
  9. 9. Alguns dos muitos cenários Temos que pensar até em uma Smart TV, com nada menos que 75 polegadas.
  10. 10. "E isso é possível?!"
  11. 11. Projetando interfaces responsivas
  12. 12. Projetando interfaces responsivas Mockups responsivos
  13. 13. Projetando interfaces responsivas Layouts responsivos
  14. 14. Projetos web que utilizam essa abordagem
  15. 15. Introdução ao HTML e CSS
  16. 16. Introdução ao HTML e CSS HyperText Markup Language é utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
  17. 17. Introdução ao HTML e CSS Sintaxe 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>
  18. 18. Introdução ao HTML e CSS
  19. 19. 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.
  20. 20. Introdução ao HTML e CSS Sintaxe básica de uma página CSS: seletor { propriedade: valor; } body { background-color: black; }
  21. 21. 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%;}
  22. 22. Introdução à Media Queries
  23. 23. 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”
  24. 24. Introdução à Media Queries 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
  25. 25. Introdução à Media Queries 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.
  26. 26. Introdução à Media Queries 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.
  27. 27. Introdução à Media Queries 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 */ }
  28. 28. Introdução à Media Queries 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
  29. 29. 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%;} }
  30. 30. 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 } }
  31. 31. 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%; } }
  32. 32. 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.
  33. 33. 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.
  34. 34. Obrigado!

×