DESIGNRESPONSIVO

CARLOS EDUARDO - KADU

Faz parte da equipe de Desenvolvedores da Vítrio.

HTML, CSS, JS, jQuery e PHP; Design Responsivo; Otimização de sites; Usabilidade e UX (User Experience).

INTERESSES :

Kadunew@gmail.com @kadunew www.kadunew.com/blog

CONTATOS:

960px de largura? 800px? etc, etc.

Usuários mobile querem páginas simples e focadas em atividades chave.

Alterar layout quando a resolução mais comum deixar de ser utilizada.

Passado...

Isso não é Web universal, acessível...

Devemos entregar a mesma informação relevante para todo

mundo!

Não importa qual seja o dispositivo do usuário.

px

960px

300px 300px 300px

960px

300px 300px300px

DESIGNRESPONSIVO

“... Faça páginas que são acessíveis, independentemente de navegador, plataforma ou tela que seu leitor escolha...”

John Allsopp, 2000 em http://alistapart.com/article/dao

Muita gente já falou disso antes.

Devemos entregar a mesma informação

relevante paratodo mundo!Importa

qual seja o dispositivo do usuário.

Não

1024 + 768 480 479 -

Design responsivo é oferecer um único site para todo mundo e adaptar a experiência do usuário

de acordo com o dispositivo.

O Google recomenda Design responsivo: https://developers.google.com/webmasters/smartphone-sites/details

SEO

O canal é usar a

estratégiaMobile-First

MELH

OR

IAP

RO

GR

ESSIVA

Layout Simples Imagens Pequenas CSS e JS limitados Performance

Layout Simples Imagens maiores Mais CSS e JS

Conteúdo adicional Layout c/ colunas Imagens maiores e até mais pesadas

Layout widescreen Imagens maiores e mais pesadas Total recurso a CSS e JS

01 02 03 04

Estratégia para o sucesso do projeto

(Mobile-First)

Priorizar Conteúdo

Código de Qualidade

Design Simples e Funcional

MaiorProdutividade

da equipe

Posso fazer o contrário?

(Desktop-First)

Focar no conteúdo

MobileFirst

Layout Fluído

Media Queries

Design responsivo é basicamente

DESIGNRESPONSIVO

(NA PRÁTICA)

Converter um site que não é responsivo em responsivo

%

100%

30% 30%30%

320px 320px

@media

Link1 | Link2 | Link3 | Link4 | Link5

01 02 03

04

01

02

03

Adaptar Layout Conteúdo

Media Queries

Como funciona essa coisa?

Simples...

Como funciona essa coisa?

Conteúdo do site... “chirrion”

Nunca use

“display: none”

Digitar dados no celular é bem difícil.

FACILITAR A VIDA DO USUÁRIO

Que tal no lugar dos asteriscos mostrar a senha, logo você não precisa do campo “confirmar senha”. Um campo a menos.

<input type="url"><input type="text">

<input type="tel"><input type="email">

Responsivo X Versão .m

www.m.uol.com.br www.uol.com.br

Contatos!

ObrigadoMeu povo