Are we There yet?

Progressive Responsive Design

Anselm Hannemann

Projects:

Shiny HTML5 & CSS3

On May, 25th this year RWD turned 3 years old. Is it a long time? Do you think this is a long time? Yes, I do. Considering what the web is and what has been achieved it is a long time but we still have serious problems with the basics.

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.

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!«

Prollyfills == Sort of a shim for not yet standardized API/Webstandard Polyfill == Sort of a shim for a standards API not yet implemented

WHATWG / W3C / Browser Vendors

»We give you more Awesomeness!«

CSS Selectors Level 4

Shaders, Shapes, Regions, HighlevelGraphicShit™

, my ass! …sort of Is that what you want? Who used regions here? Who Shapes? Would you need it?

»Complaining is no answer!«

You're right, that is completely true. We all can do better!

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 EventsPointer 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.

Luckily enough there weren't such when I wrote my first touch web-application. Hours of horror. Honestly. Blink and Firefox recently started work on Pointer Events implementation but this will take a long time and WebKit will follow after that at earliest.

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!

<img src="normal-image.jpg" srcset="highres-image.jpg 2x">

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! Hey, this is so cool! You know this, having a gallery on one page of your site and therefore you need jQuery and a modal plugin? Yeah, you know what I'm talking about here. We don't even need that script on pageload, it can lazyload. And what about all the images that are not yet seen by the user because he hasn't the elements in the viewport yet? Yes, load them with postpone so they will get loaded only when they're in viewport.

How awesome is that?

<link rel="stylesheet" type="text/css" src="Styles.css">
<link rel="stylesheet" type="text/css" src="Animations.css" lazyload="">

<img id="Logo" src=".../images/Logo.png">
<img id="Header" src=".../images/Header.png">
<img id="AdditionalImages1" src=".../images/AdditionalImages1.png" lazyload="">
<img id="AdditionalImages2" src=".../images/AdditionalImages2.png" lazyload="">

<video id="MainContent"><source src=".../videos/MainContent.mp4"></video>

<script src="Visuals.js"></script>
<script src="Analytics.js" lazyload=""></script>

Web Components

Create Custom Elements Shim them directly though the API Do what you want to do

<template id="commentTemplate">
    <div>
        <img src="">
        <div class="comment-text"></div>
    </div>
</template>

Finished? Not at all!

CSS Media Query variables
Fixing the multi-language hell.
A font-size: line-fit; property.
Complex footnotes
…to be continued.

Anselm, damn you!

I want all this stuff now!

For Web Components: Polymer Projects
For RespImgs: picture/srcsetfill + Imager.js
For Resource Priorities: Well, sorry. Only require.js
For aspect-ratio: nothing cool, do it!
Touch/Pointer: Pointer.js

Are we There yet? – Progressive Responsive Design – Anselm Hannemann

anselmh