Responsive design

Responsive Designsem mimimi

#CPBR6@gserrano

Quem?

Guilherme Serrano (@gserrano)Web developer

Graduado em design (ui ui ui)

Pós em gestão empreendedoraWedeveloper e sócio do @eucompraria (eucompraria.com.br)

Experiências anteriores- iG- Itau BBA (MM Café)- Avon (MM Café)

O que é responsive?

O que teremos no futuro?

Objetivos do responsive

- Web mais acessível?- Usabilidade?- Beleza?- Reduzir custo de desenvolvimento?

Por quê?

Objetivos do responsive

Empresas buscam resultados financeiros.

Como?

Mais conversão (cadastros, e-mails, ações, etc.)

Mais vendasMais visitasBranding - felicidade no uso da marca

Como atingir os objetivos?

Melhorar a experiência

Nunca atrapalhe o usuário

Melhorar performance

Reduzir custo (código, manutenção)

Como fazer um site responsivo?

Sem jQuerySem javascriptSem frameworks

Como fazer um site responsivo?

Sem esconder conteúdo.

Como fazer um site responsivo?

Sem esconder conteúdo.

Sem esconder conteúdo.

Como fazer um site responsivo?

Tecnologias?

- HTML- CSS - Media-queries

CSS Media QueriesProvavelmente você já fez isso

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">

<link rel="stylesheet" type="text/css" media="print" href="serif.css">

CSS Media QueriesProvavelmente você já fez isso

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">

<link rel="stylesheet" type="text/css" media="print" href="serif.css">

CSS Media QueriesE isso?

@media screen { * { font-family: sans-serif }}

CSS Media Queries@media (min-width:500px) { … }

@media (orientation: portrait) { … }

O que faço com isso?

Como assim?

Você pode fazer quase tudo!

Apps

Conteúdo

Institucional

Portfólio

Exemplos

Institucional http://aneventapart.com/

App - http://archive.simurai.com/lab/flapps/mail/

Apenas para sites pequenos?

Home da Globo.com

Apenas para sites pequenos?

Globo.com voltou a usar versão mobile.

:(

Dificuldades do Responsive

Responsive x mobile

Responsive vs mobile

- Custo- Gerenciamento de conteúdo- Experiência do usuário- Future proof?- Manutenção de código

Boas práticas do responsive

Nunca desenvolva para dispositivos.

Boas práticas

Desenvolva para

pessoas features resoluções

Feature detection

A melhor experiência possível em qualquer dispositivo.

Ferramentas

Você PODE fazer sem frameworks.

Mas você quer?

Compass

Organização do código

Sprites

Manutenção

Compass

Includes

@import "header";@import "cart";@import "checkout";@import "flex-slider";@import "products";@import "account";

Compass

Sprites (manutenção fácil)

@import "sprite/*.png";@include all-sprite-sprites;

Bootstrap

GridResponsiveFluid

Antes de implementar...

Questione

Pesquise

Teste

Valide

Perguntas?@gserranocontato@guilhermeserrano.com.br

http://eucompraria.com.br

Obrigado!