Are we There yet?

Progressive Responsive Design

by Anselm Hannemann@helloanselm

Anselm Hannemann

Projects:

Shiny
HTML5 & CSS3

unlock badge of iOS

by Peter Kröner

A great Achievement, heh?

And it's getting even better!

  • CSS Shapes
  • CSS Blending Modes
  • CSS Flexbox
  • CSS Writing Modes
  • and a lot more…

Because we can!

See the Pen Single Element Pure CSS MacBook Pro by Joshua Hibbert (@joshnh) on CodePen

People getting more creative…

See the Pen Navigation Bar by Jan Kaděra by Katy DeCorah (@katydecorah) on CodePen

…and even draw horses

See the Pen CSS Fine Art by Josh Rutherford (@the_ruther4d) on CodePen

Some go insane.

JS Bin

Credit


those Rockstar Techniques!

"So, what's your problem?"

Our current workflow

Look at caniuse.com

Search/Write jQuery Plugin

Write a Prollyfill

Claiming »We want more awesomeness!«

WHATWG / W3C / Browser Vendors

»We give you more Awesomeness!«

CSS Selectors Level 4

Shaders, Shapes, Regions, HighlevelGraphicShit™

»Complaining is no answer!«

You know him?

Contribute!

Help to move the web forward

Evolve Standards

Write Polyfills

Care about the basics.

»But wait, we have our basics.«

Gimme features!

STOP!

We don't have our basics yet.

Media Behavior

Care about
The Aspect Ratio?

Oh but we…


							img, video {
    max-width: 100%;
    height: auto;
}
						

Ever tried that with an <iframe>?

Ever wanted to adjust width based on height?

Here is how you do the 'simple' way today:

Quite a mess, right?

object-fit


img, video {
    object-fit: contain;
    object-fit: cover;
    object-fit: fill;
    object-fit: scale-down;
}

The Browsers

Touch Events
Pointer Events

A bit history

  • The first modern touch device came out
  • Touch Events were introduced in WebKit
  • Microsoft wasn't pleased with TE
  • MS + W3C develop Pointer Events
  • MS and Firefox OS introcude PE to public
  • WebKit and Blink went separate
  • 10/2013: Touch Events are now W3C Recommendation, while PE are still CR
  • The mess was created…

Written a touch application recently?

Boo, that isn't funny since both event types are used right now:

  • Windows Phone 8, Firefox OS: Pointer Events
  • iOS, Android: Touch Events

Rescue to pointer.js

Thank god someone has written an abstraction.

But there is way to go for Blink & WebKit and Firefox. At least, implementation has been started recently.

Bugvoting

This Blink-task needs to be finished soon!

<img>

#respimg

Ø web page is 1.6MB

Ø 65% are images

1MB on a 320px smartphone?

72% could be saved here

srcset ships tomorrow!



						

Supported in WebKit Nightly already;
Blink to follow soon.

Then, there's <picture>

  • Discovered as the best solution to cover all use-cases over 1.5 years.
  • Bloat markup if used very extensively but yeah, you still can use srcset (even inside of it).
  • Easy and understandable for developers.

And now I proudly present:

The Fun Part

Photo by Victor Gumayunov

August, 2011

September, 2013

It's outta control

Even RICG is now partly on that train of srcN, but yet no browser vendor took any step into one direction.

In 2035

Photo by Tuomas Puikkonen

How can we avoid?

Help and participate:

Resource Priorities

  • The script loading behavior is messy.
  • We don't need at everything on pageload
  • defer is not a solution
  • We want to lazyload, postpone and do this in HTML and CSS!
  • How awesome is that?

    
    
    
    
    
    
    
    
    
    
    
    

    Web Components

  • Table showing how polyfills and prollyfills differ
  • Create Custom Elements
  • Shim them directly though the API
  • Do what you want to do
  • Finished? Not at all!

    Anselm, damn you!

    I want all this stuff now!

    Evolve the Web!

    Thank you!

    I am Anselm Hannemann and you can follow me on Twitter: @helloanselm

    Slides at slidedeck.io/anselmh.