Sobre mim

Desenvolvedor na TecSinapse

Instrutor no Alura

Um dos autores do livro

Capítulo sobre progressive enhancement

Palestra ano passado

Primeiro, um pouco de contexto

Diversidade

Navegadores

Dispositivos

Pessoas

Situações

Como atender todos esses cenários?

Workarounds

(que nem sempre dão certo)

Graceful degradation

A ideia é boa, mas...

Frustração

Becos sem saída

Com JS

Sem JS

Então...

Comofas?

HTML semântico

<article>
	<h1>Título</h1>
	<p>Parágrafo com
		<a href="outra-pagina.html">link</a>
	</p>
</article>

HTML ♥ progressive enhancement

<input type="data" required="">

<audio>
	<source src="audio.mp3" type="audio/mp3">
	<source src="audio.ogg" type="audio/ogg">
	Conteúdo alternativo para quem não tem suporte
</audio>

Demo

Inclusive para webapps!

Demo

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;
}

Demo

(projeto demonstração, versão 2 - apenas mobile)

(projeto demonstração, versão 3 - desktop)

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

Demo

Feature detection

Em vez de browser detection

Demo

JS ♥ AJAX

AJAX 💔 offline

Offline first ♥progressive enhancement

Mais limitado: internet móvel no metrô

Demo

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