Upload
guilherme-serrano
View
2.798
Download
0
Embed Size (px)
DESCRIPTION
Palestra sobre design responsivo (responsive design) apresentada no Campus Party Brasil 2013.
Citation preview
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?@[email protected]
http://eucompraria.com.br
Obrigado!