responsive web design
Post on 25-Jun-2015
1.588 Views
Preview:
TRANSCRIPT
Responsive Web Design
ProfessorAdriano Teixeira de Souza
Quem sou eu?
Adriano Teixeira de Souza Fasul: Professor nas disciplinas de
Estrutura de Dados, Paradigmas de Linguagens de Programação, Sistemas Distribuídos
C.Vale: Analista de sistemas sênior e líder técnico de desenvolvimento de sistemas em ambiente web e desktop
Quando a vida era simples
1280 x 800
Photo: Steve Rhodes
1280 x 800
1280 x 800
Photo: Steve Rhodes
16 : 9
1280 x 800
Photo: Steve Rhodes
Netbook tela de 8.9”
Title
Várias telas
Title
Mais é melhor 5120 x 1600
Title
Flickr: photographer
2006 Smart Phones
Title
Flickr: photographer
9 de Janeiro de 2007
Title
Flickr: photographer
2008 Smart Phones
Title
Flickr: photographer
2009 Smart Phones
Title
Flickr: photographer
Android, BlackBerry
Title
Flickr: photographer
2010 iPad – Vendas de 3 milhões de dispositivos em 80 dias
Title
Flickr: photographer
iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”
Title
Flickr: photographer
Muitas telas
W3C diz:
A web deve ser acessível por qualquer pessoa em qualquer
lugar.
O que encontramos pela frente? 1 em 5 usuários acessam a internet de
dispositivos móveis todo os dias O tráfego de dados móveis quase
triplicou em 2010. Mantendo a tendências dos últimos 3 anos.
Acesso a internet por dispositivos móveis deve ultrapassar a de desktops entre 3 a 5 anos.
Vídeo-games e televisões atuais estão vindo com acesso a internet.
O que fazer então?
Design Web Responsivo Trabalhar com um layout que se adapta
as diferentes telas onde será apresentado
A mesma página web poderia ser apresentada de forma diferente em diversos dispositivos
Responsive Web Design é
“Uma grid flexível, com imagens flexíveis e que incorpore media
queries para criar um layout adaptável e responsivo”
Ethan Marcotte (@beep)http://www.alistapart.com/articles/responsive-web-design/
Responsive Web Design não é
Mobile design
Recapitulando
Grid Flexível
Imagens Flexíveis
Media Queries
Web Design Responsivo
Grid flexível Definindo tamanho em proporção▪ % em vez de px, cria o fluid layout▪ imagens também podem utilizar esta técnica
CSS3 Media Queries Estilo condicional Permite a você definir apresentações para
específicos tamanhos de tela, dispositivos e mais
Jeffrey Zeldman: “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.”
Grid Flexível
Utilize Eric Meyer CSS Reset
Divida o site em módulos, ou partes, de forma que possam ser movidas e redimensionadas conforme a necessidade
Utilize em’s e % para dimensionar tamanhos e larguras
Elemento / contexto = resultado
Não arredonde casas decimais
Elemento/Contexto = Resultado
Elemento/Contexto = Resultado
Elemento/Contexto = Resultado
Elemento/Contexto = Resultado
Margin e Padding
Imagens Flexíveis
Esta regra diz para a imagem não exceder a largura do container. Overflow: hidden também funciona.
Imagens Flexíveis
Use Javascript para carregar imagens no tamanho apropriado https://github.com/filamentgroup/respon
sive-images
Problemas de redimensionamento http://unstoppablerobotninja.com/entry/f
luid-images
CSS3 Media Queries
min-width: referência as dimensões do viewport (área que o web site aparece)
min-device-width referencia as dimensões de tela do dispositivos (talvez a forma mais segura para identificar dispositivos, iPad, iPhone, etc.)
É possível selecionar baseado em dpi não somente width
É possível selecionar baseado em profundidade de cores
CSS3 Media Queries
Exemplo de tamanhos para definição de Media Queries
Mais sobre Media Queries
O que nós podemos testar
width height device-width device-height orientation aspect-ratio device-aspect-ratio
http://www.w3.org/TR/css3-mediaqueries/
• color• color-index• monochrome• resolution• scan• grid
Viewport
Antes de iniciar com smartfones, precisamos adicionar isto na seção head do nosso HTML.
A propriedade Initial-scale configura o nível de zoom para 1.0 ou 100%, então o browsers viewport sabe que irá mostrar um website igual a largura da tela do dispositivo e não no seu layout padrão.
Nós podemos passar por isso
Consolidação Web browsers são mais
compatíveis com padrões de mercado Google Chrome: Webkit Safari: Webkit Firefox: Gecko IE8 é muito bom em relação aos
anteriores
Browser Support
Opera 9.5+ Firefox 3.5+ Safari 3 Chrome Mobile Webkit Opera Mobile
A bala de prata
code.google.com/p/css3-mediaqueries-js/
IE8 e anteriores Firefox 1 & 2 Safari 2
Browser em mobile convergem
Android: Chrome: Webkit
iOS: Safari: Webkit
Blackberry: Webkit (últimas versões)
Design: Fatores à considerar
Faixa de dispositivos que o conteúdo será visto
Como o layout será apresentado de forma eficiente em diferentes plataformas
O tamanho padrão de imagens não deve estar baseado no layout alvo padrão (você pode ter algumas imagens diferentes para dispositivos diferentes).
Tenha um plano para uma diversidade de largura de telas
top related