SlideShare une entreprise Scribd logo
1  sur  31
Télécharger pour lire hors ligne
RESPONSIVE
OU
ADAPTIVE	?
Qual	a	melhor	pratica?
RESPONSIVE	DESIGN
O	Responsive	Design	é	proveniente	das	melhores	práticas	do
desenvolvimento	web.	Permite	que	os	layouts	dos	sites	se
ajustem	automaticamente	aos	dispositivos,	sejam	eles
Desktops,	Smartphones	ou	Tablets.
ADAPTIVE	DESIGN
No	Adaptive	Design,	temos	algo	meio	que
engessado.	Os	blocos	terão	medidas	fixas	e	um	tipo	de
folha	de	estilo	para	cada	tipo	de	resolução.	Tornando
assim	algo	bem	mais	trabalhoso
MAS	QUAL	O	MELHOR	A	SE	USAR?
OU
A	WEB	DEVE	SER	ACESSÍVEL	POR	QUALQUER
PESSOA	E	EM	QUALQUER	LUGAR.
Então	o	melhor	para	isso	e	menos	trabalhoso	seria	Responsive
Design.
MAS	PORQUÊ?
POR	QUE	NÃO	ADAPTIVE?
No	adaptive	toparemos	com	circunstâncias	que	serão
muito	mais	trabalhosas	e	nem	sempre
será	agradável	pois	cada	vez	que	surgir	uma	nova
resolução	você	terá	que	adaptar	novamente	seu	estilo
para	assim	tornar		o	seu	site	mais	amigável	possível
para	aquela	resolução.
COMO	FAZER	DE	FATO	UM	SITE	RESPONSIVO
Grid	flexível
Imagens	e	mídias	flexíveis
Media	queries
GRID	FLEXÍVEL
Grid	é	um	conjunto	de	linhas	bases	que	fornecem	uma	estrutura	para	seu	layout.
EXEMPLO	DE	GRID	FLEXÍVEL
FORMULA	PARA	GRID	FLEXÍVEL
Eis	a	formula	mágica:
Objeto	÷	Contexto	=	RESULTADO
RESULTADO	PARA	UM	GRID	FLEXÍVEL
Eis	a	fórmula	mágica:
Objeto	÷	Contexto	=	RESULTADO
↓
300px	÷	960px	=	0.3125
Coloque	o	ponto	duas	casas	para	a	direita	e	acrescente	a	%	ficando	assim	31.25%.
FONTES	FLEXÍVEIS
Os	valores	de	tamnho	das	fontes	devem	ser	substituídos	de		PX	para	EM
O	valor	padrão	das	fontes	consideradas	pelo	browser	é	16px,	exemplo:
.content	h1	{
				font-size:	30px;
				color:	#333;
				margin:	2%;
}
CRIANDO	FONTES	FLEXÍVEIS
A	formula	é	a	mesma:
Objeto	÷	Contexto	=	RESULTADO
↓
30px	÷	16px	=	1.875
No	caso	das	fontes	não	é	necessário	posicionar	o	ponto	para	a	direita	e	o	resultado	é	1.875em.
IMAGENS	FLEXÍVEIS
As	imagens	também	necessitam	se	adaptar	conforme	o
tamanho	da	tela,	pois	podem	sair	fora	do	layout:	
img	{
		max-width:	100%;
}
O	mesmo	serve	para	outros	elementos	do	html:
img,	embed,	object,	iframe,	video	{
		max-width:	100%;
}
MEDIA	QUERIES
As	Media	Types	definem	para	qual	tipo	de	media	o	CSS	será	direcionado.
O	HTML	foi	criado	para	ser	portável,	ou	seja,	ele	deve	ser	lido	e	interpretado
por	qualquer	tipo	de	dispositivo.	Cada	dispositivo	exibe	o	HTML	de	uma	maneira.	
A	forma	que	este	HTML	é	formatado	em	cada	dispositivo	é	diferente.	Logo,	
o	código	CSS	será	diferente	para	cada	um	destes	dispositivos.
LISTA	DE	MEDIAS
All	-	Para	todos	os	dispositivos.
Braille	-	Para	dispositivos	táteis.
Embossed	-	Para	dispositivos	que	“imprimem”	em	braille.
Handheld	-	Para	dispositivos	de	mão.	Normalmente	com	telas	pequenas	e	banda	limitada.
Print	-	Para	impressão	em	papel.
Projection	-	Para	apresentações,	como	PowerPoint.
Screen	-	Para	monitores	ou	outros	dispositivos	com	telas	coloridas	e	com	resolução	adequada.
Speech		-	Para	sintetizadores	de	voz.	O	CSS	2	tem	uma	especificação	de	CSS	chamada	Aural,	
onde	podemos	“formatar”	a	voz	dos	sintetizadores.
Tty	-	Para	dispositivos	que	utilizam	uma	grade	fixa	para	exibição	de	caracteres,	como	por	exemplo,
teletypes,	terminais,	dispositivos	portáteis	com	display	limitado
Tv		-	Para	dispositivos	como	televisores,	ou	seja,	com	baixa	resolução,	quantidade	de	cores	e	scroll	limitado.
A	SOLUÇÃO	–	MEDIA	QUERIES
As	Media	Queries	definem	condições	para	a	utilização	de	um	CSS	específico.	Se	essas
condições	forem	aprovadas,	ou	seja,	se	o	dispositivo	de	adequar	a	todas	as	condições,	o	CSS
será	aplicado.
<link	rel="stylesheet"	href="estilo.css"	media="screen	and	(color)"	/>
Neste	código,	por	exemplo,	o	CSS	será	aplicado	em	dispositivos	de	media	screen,	que	tenham
uma	característica	color.
Logo,	este	CSS	não	será	aplicado	em	aparelhos	Monocromáticos.
OPERADORES	LÓGICOS
Os	Operadores	Lógicos	te	possibilitarão	criar	media	queries	diversas.	Os	operadores
são:	not,	and	e	only.
O	not	irá	fazer	uma	sentença	de	negação.	Por	exemplo:
<link	rel="stylesheet"	href="estilo.css"	media="all	and	(not	color)"	/>
O	only	irá	esconder	os	estilos	de	browsers	que	não	reconhecem	media	queries.	Antes	da
sentença,	você	coloca	o	only:	
<link	rel="stylesheet"	href="estilo.css"	media="only	screen	and	(color)"	/>
OPERADORES	LÓGICOS
É	possível	também	agrupar	várias	media	queries	
separando-os	com	,	(vírgula).	Se	qualquer	uma	das	
queries	forem	verdadeiras,	o	CSS	será	aplicado.	
Então	a	vírgula	funciona	como	um	operador	or.
<link	rel="stylesheet"	href="estilo.css"	media="screen	and	(color),	
projection	and	(color)"	/>
MEDIA	FEATURES
Para	então	distinguir	um	dispositivo	do	outro,	você	utilizará	as	características	de	cada	um.
<link	rel="stylesheet"	href="estilo.css"	media="screen	and	(max-width:480px)"	/>
Há	uma	lista	de	características	que	você	pode	utilizar	aqui	para	selecionar	os	dispositivos	que	você	quiser:
color
color-index
monochrome
resolution
scan
grid
width	
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
MEDIA	NO	CSS
/*	Smartphones	(portrait	and	landscape)	-----------	*/
@media	only	screen		and	(min-device-width	:	320px)	and	(max-device-width	:	480px)	
/*	Smartphones	(landscape)	-----------	*/
@media	only	screen	and	(min-width	:	321px)	{}
/*	Smartphones	(portrait)	-----------	*/
@media	only	screen		and	(max-width	:	320px)	{}
/*	iPads	(portrait	and	landscape)	-----------	*/
@media	only	screen		and	(min-device-width	:	768px)		and	(max-device-width	:	1024px)	{}
/*	iPads	(landscape)	-----------	*/
@media	only	screen		and	(min-device-width	:	768px)		and	(max-device-width	:	1024px)		and	(orientation	:	landscape)	{}
/*	iPads	(portrait)	-----------	*/
@media	only	screen		and	(min-device-width	:	768px)	and	(max-device-width	:	1024px)		and	(orientation	:	portrait)	{}
TAG	META	VIEWPORT
Os	smartphones	tem	telas	pequenas	podem	dificultar	a	leitura	se
fizermos	um	sistema	planejado	para	grandes	resoluções.	Por	isso	é
interessante	que	possamos	customizar	o	viewport	para	que	ele	se
adeque	a	realidade	desses	dispositivos.	É	aí	que	entra	a	metatag
viewport.
Com	essa	metatag	iremos	customizar	a	resolução	inicial	que	o
browser	deve	renderizar	do	viewport	do	dispositivo.	Dessa	forma,
podemos	preparar	websites	com	resoluções	personalizadas	para
smartphones	e	outros	aparelhos.
VALORES	DA	TAG	META	VIEWPORT
<meta	name="viewport"	content="">
Os	valores	de	content	são	os	que	seguem	abaixo:
A	sintaxe	é	muito	simples	e	deve	ser	colocada,	como	sempre,	na	tag	head:	
Valor Descrição
width Define	uma	largura	para	o	viewport.	Os	valores	podem	ser	em	PX
ou	“device-width”,	que	determina	automaticamente	um	valor
igual	a	largura	da	tela	do	dispositivo.
height Define	uma	altura	para	o	viewport.	Os	valores	podem	ser	em	PX
ou	“device-height”,	que	determina	automaticamente	um	valor
igual	a	altura	da	tela	do	dispositivo.
initial-
scale
Define	a	escala	inicial	do	viewport.
user-
scalable
Define	a	possibilidade	de	o	usuário	fazer	“zoom”	em	um
determinado	lugar	da	tela.	É	ativado	quando	o	usuário	bate	duas
vezes	com	o	dedo	em	um	lugar	da	tela.
REMOTE	DEBUGGING	ON	ANDROID
O	desenvolvimento	de	página	web	mobile	é	difícil	de	testar	por	envolver	outros	aparelhos.
Mas	os	browsers	mais	novos	já	possuem	recurso	de	debug	remoto.	Além	do	iOS,	o	Chrome
Mobile	também	traz	esse	recurso.
Embora	ainda	não	haja	suporte	nativo	para	debug	do	browser	padrão	do	Android,	o	suporte	no
Chrome	é	muito	bom.	Ele	apenas	para	Android	4	e	já	foi	anunciado	como	futuro	substituto	do
browser	padrão	do	Android.
PRÉ-REQUISITOS
Instale	o	Chrome	Mobile	no	seu	Android	4.
Baixe	o	Android	SDK	pra	sua	máquina.
Instale	o	Google	Chrome	no	seu	Desktop.
Tenha	um	cabo	USB	à	mão	pra	conectar	o	dispositivo	no	computador.
CONFIGURAÇÃO	DOS	DEVICES
Abra	o	Chrome	Mobile	no	celular	e	vá	em	suas	Configurações.
Entre	no	menu	Ferramentas	para	desenvolvedores	lá	no	final.
Lá,	habilite	a	opção			Ativar	a	depuração	da	web	via	USB
Vá	nas	Configurações	de	sistema	do	Android	e	entre	em	Opções	do	Desenvolvedor.	
Lá,	habilite	a	opção	Depuração	USB:
DEBUG	DO	DEVICE	VIA	DESKTOP
Por	fim,	basta	ir	no	seu	Chrome	Desktop	e	abrir	o	endereço	http://localhost:9222.
Todas	as	abas	abertas	no	celular	serão	listadas.	Selecione	uma	para	debugar:
Plugue	o	celular	no	computador	usando	o	cabo	USB.
No	terminal,	entre	na	pasta	que	você	instalou	o	Android	SDK	e	em	platform-tools.
(opcional)	Rode	o	ADB	pra	listar	os	dispositivos	e	ver	se	seu	celular	foi	reconhecido:		./adb	devices
Se	não	for	reconhecido,	verifique	se	a	depuração	USB	está	habilitada	e	tente	plugá-lo	novamente.
Ainda	usando	o	ADB,	rode	o	comando	que	habilita	o	debug	remoto	no	Chrome:
./adb	forward	tcp:9222	localabstract:chrome_devtools_remote
WEB	INSPECTOR
O	Web	Inspector	será	aberto	no	seu	Chrome	no	Desktop	mas	linkado
com	o	Chrome	no	celular.	Você	pode	debugar	normalmente	e	fazer
alterações	e	vê-las	em	tempo	real	no	aparelho:
POR	FIM	
Criar	um	site	responsivo	não	é	fácil.	Trabalhar	com	flexibilidade	e	adaptação	é	bem	mais
complicado	que	um	site	fixo	em	pixels.	As	ferramentas	de	desenho	ainda	não	estão
preparadas	e	os	designer	gráficos	costumam	ter	dificuldades	para	criar	com	responsividade
em	mente.
O	código	fica	mais	complexo	também.	Há	dificuldades	para	se	trabalhar	com	imagens	e	vídeos
responsivos.	É	bastante	complicado	adaptar	um	site	Desktop	já	existente	para	ser	responsivo.
Apesar	de	tudo	isso,	designs	resposivos	são	o	futuro.	Pelo	simples	motivo	de	que	a	Web	é
única	e	criar	sites	separados	para	cada	categoria	de	dispositivos	é	impossível.
DÚVIDAS	?
OBRIGADO!
Cláudio	do	Nascimento	Silva	(Soldado)
Developer
code@justdigital.com.br
+55(11)5181-5170
www.justdigital.com.br
blog.justdigital.com.br

Contenu connexe

Similaire à O que é Responsive Design e como criar sites responsivos

Responsive Design - Responsive UX Strategy
Responsive Design - Responsive UX StrategyResponsive Design - Responsive UX Strategy
Responsive Design - Responsive UX StrategycomOn Group
 
Design System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleDesign System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleGuilherme Gonzalez
 
Programador (front|back) end moderno, por Leonardo Hackin
Programador (front|back) end moderno, por Leonardo HackinProgramador (front|back) end moderno, por Leonardo Hackin
Programador (front|back) end moderno, por Leonardo HackiniMasters
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endDiego Eis
 
Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_g...
Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_g...Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_g...
Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_g...Isabel Araujo
 

Similaire à O que é Responsive Design e como criar sites responsivos (9)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Design - Responsive UX Strategy
Responsive Design - Responsive UX StrategyResponsive Design - Responsive UX Strategy
Responsive Design - Responsive UX Strategy
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Design System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleDesign System: Dominando o Design at Scale
Design System: Dominando o Design at Scale
 
Programador (front|back) end moderno, por Leonardo Hackin
Programador (front|back) end moderno, por Leonardo HackinProgramador (front|back) end moderno, por Leonardo Hackin
Programador (front|back) end moderno, por Leonardo Hackin
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_g...
Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_g...Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_g...
Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_g...
 

O que é Responsive Design e como criar sites responsivos