Enhance Enhance

Progressive Enhancement The only way to start your day

Clearle

By layering web technologies so that the content is always
accessible, regardless of access method, connectivity, software, or hardware being used we make better sites.

<html> <body> Hello I am a paragraph that never
closes. </body> </html>

LAYOUT IS OPTIONAL

Progressive Enhancement frees us to focus on the costs of
building features for modern browsers, without worrying much about leaving anyone out. With a strongly qualified codebase, older browser support comes nearly for free. Scott Jehl (@scottjehl)

Andy Parker Clearleft 447531234567

But what about pictures?

Lots of cool features on the Boston Globe don’t work
when JS breaks; “reading the news” is not one of them. Mat Marq (@wilto)

Come play XboxOne: AvangelistXMB Twitter: theavangelist clearleft.com

Enhance Enhance

Enhance Enhance

Andy Parker

More Decks by Andy Parker

Other Decks in Technology

Featured

Transcript

Progressive Enhancement The only way to start your day

Clearle

By layering web technologies so that the content is always

<html> <body> <p> Hello I am a paragraph that never

LAYOUT IS OPTIONAL

Progressive Enhancement frees us to focus on the costs of

<p class=“vcard”> <span class=“fn”>Andy Parker</span> <span class=“org”>Clearleft</span> <span class=“tel”>447531234567</span> </p>

But what about pictures?

<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">

<img src="/uploads/100-marie-lloyd.jpg" srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x" alt="" width="100" height="150">

<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img

WRONG

Lots of cool features on the Boston Globe don’t work

Come play XboxOne: AvangelistXMB Twitter: theavangelist clearleft.com