Sobre mim

Desenvolvedor na TecSinapse

Instrutor no Alura

Um dos autores do livro

Capítulo sobre progressive enhancement

Primeiro, um pouco de contexto

Diversidade

Como atender todos esses cenários?

Graceful degradation

A ideia é boa, mas...

Então...

Comofas?

HTML semântico

	
Título
	
Parágrafo com
		link
	

						

HTML ♥ progressive enhancement

Inclusive para webapps!

CSS e JavaScript devem ser vistos como recursos adicionais

Melhorando o visual

Começando pelo mais simples

CSS ♥ progressive enhancement

li:nth-child(odd) {
	background: url(img.png) no-repeat center;
	background: url(img.svg) no-repeat center/100% auto;
}
						

Mobile first

Mobile first ♥
progressive enhancement

.container {
	width: 1000px;
	margin: auto;
}
@media (max-width: 1000px) {
	.container {
		width: 98%;
	}
}
						

.container {
	width: 98%;
	margin: auto;
	max-width: 1000px;
}
						

Mobile first ♥
progressive enhancement²

Mobile first ♥
progressive enhancement²

Melhorando a interação

Começando pelo IE 6 mais simples

JavaScript não obstrutivo

Se depende de JS, faz com JS

Feature detection

Em vez de browser detection

JS ♥ AJAX

AJAX 💔 offline

Offline first ♥
progressive enhancement

Mais limitado: internet móvel no metrô

Progressive enhancement:
por quê?

• Mais robusto
• Maior abrangência desde o começo
• Foco no conteúdo
• Código mais simples

Progressive enhancement:
quando?

• Sites
• Apps internas
• Web apps
• Progressive web apps