48
Responsive Web Design conteúdo em todos os dispositivos

Responsive web design, conteúdo em todos os dispositivos

Embed Size (px)

Citation preview

Responsive Web Designconteúdo em todos os dispositivos

CSS

Javascript

HTML

CSS

Javascript

HTML Linguagem de marcação

Folha de estilos

Linguagem de programação interpretada

Internetcomo usamos?

Sites que se reajustam conforme o

tamanho da tela do aparelho

CONCEITO

O problemado css fixo.

#wrapper

#wrapper {margin: 0 auto;text-align: left;width: 1024px;}

Falta acessibilidade

Difícil de usar

Análise:

● Funciona bem com algumas telas maiores ou iguais tamanho definido (960px, 1000px)

● Não se importa com mobile● Não se importa com acessibilidade

“m ponto”técnica

www.globo.com m.globo.comVS

Análise:

● Funciona bem com algumas telas se tem layout fluido● Resolve problema do mobile com versão exclusiva ● Ruim para técnicas SEO (Search Engine Optimization)● Usuário fica confuso com os dois endereços● Redirecionamentos de mobile/desktop e inverso

Responsivos

Análise:

● Funciona bem em todos dispositivos● Bom para SEO (Search Engine Optimization)● Tratamento de imagens caminhando

O que torna possível design responsivo?

Imagens & Recursos flexíveis

img {max-width: 100%;}

Representa 100% de largura no espaço em que estão contidas.

Imagens & Recursos flexíveisPeso vs Tamanho

530kb700px / 894px

Tag viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

@media queries@media screen and (min-width: 768px) and (max-width: 992px){

ul, p{line-height: 1.72em;font-size: 1.0em;

}}

Developer tools

www.browserstack.com/responsive

Twitter Bootstrap

SuporteNos diversos tipos de navegadores

Hoje, não precisamos se preocupar tanto com IE porque até minha mãe sabe o que é navegador

www.caniuse.com

É possível dar suporte a navegadores sem suporte?

PorqueNem todos os sites são responsivos hoje?

Estrutura muito grande

O custo não vale o esforço

Falta de profissionais qualificados

Padrões ainda inconsistentes

PorqueResponsive design é tão importante?

US$ 10 milhões de pagamentos mobile via Paypal

Vendas no Ebay mobile = US$ 2 bilhões

Vendas de aparelhos móveis ultrapassam a taxa de natalidade no mundo

Aplicativos híbridos (HTML5 + CSS3)

Webviews

Boas referênciashttp://sergiolopes.org/

http://mediaqueri.es

http://tableless.com.br/

http://www.maujor.com