Think about engineering and designing for the mobile web like you would furnish a NYC apartment

The desktop experience

There's enough room for everything

Robert Am Stern, 15 CPW

The mobile experience

You can't have everything

14 Convent Ave

What happens when you furnish a small apartment like it's a big apartment?

m.fidelity.com

What happens when you furnish your apartment solely from Ikea?

www.westelm.com

What happens when you're embarressed of your apartment?

www.quora.com

What happens when you furnished your apartment with ugly things?

www.united.com

What does full Gilt website look like?

What does Gilt Mobile Web look like?

Let's break it down a little more

5 main pages

Sales Listing Page

Product Listing Page

Product Detail Page

Cart

Checkout

If you can't have it all, how do you choose?

Keep only the things you need?

Keep only the things you love?

Keep only the things your user uses?

In an apartment, it's the bed, the refrigerator, the stove, the lamp

For a website, you have to figure out which are the most important items

Today: Card UI

Framework to help you think about what to feature

"We are currently witnessing a re-architecture of the web, away from pages and destinations, towards completely personalised experiences built on an aggregation of many individual pieces of content."

http://insideintercom.io/why-cards-are-the-future-of-the-web/

Here are cards

And these are cards

Twitter

Google Now

Pinterest

Gilt

3 characteristics of card ui

Embeddable/shareable

Easily Readable Content

Easy to modify

Card UI isn't really new

and it's not a spec

it's a design pattern that encourages you to focus on the content that really matters to your users

added bonus is that it's standardizing how the front-end looks and feels

The Future Is Web-Components

W3C's Introduction to Web Components

In the context of Card UI, imagine each "card" represented by a DOM element.

Did I lose you?

Take this card, for example:

End Result

Web-components is a standard that would allow me to embed that "card" into my webapp with a DOM element like:

How?

Web-components have 4 pieces

Templates are inert chunks of markup that can be activated for later use.

Decorators apply the templates.

Custom elements are defined by the engineer.

Shadow DOM encapsulates the DOM tree for more reliable composition of user interface elements.

Creating Custom Element From Template (DOM)

<template id="gilt-product">
    <div class="demo-product">
        <a class="demo-product-url" href="">
            <div class="demo-image-wrapper">
                <img class="demo-url" src="">
            </div>
            <div class="demo-details">
                <div class="demo-brand">Brand Name</div>
                <div class="demo-title">Title</div>
                <div class="demo-price">Price</div>
            </div>
        </a>
    </div>
</template>

Creating Custom Element From Template (JS)

var XFooPrototype = Object.create(HTMLElement.prototype);

XFooPrototype.createdCallback = function() {
    var template = document.getElementById("gilt-product");
    var clone = document.importNode(template.content, true);
    document.querySelector('.live-demo').appendChild(clone);

var a = document.querySelector('.demo-product-url');
a.href = "http://www.gilt.com/sale/women/paper-crown-9763/product/1020186005-paper-crown-villa-cotton-silk-fit-and-flare-dress";
};

var XFoo = document.registerElement('x-gilt-product', {
  prototype: XFooPrototype
});

Live Demo!

I couldn't see the demo!

Web-components aren't supported by default... anywhere

Except Google Chrome Canary

But there's a polyfill called polymer!

But why create polyfills for a feature my users can't see?

And, polymer-project.org has a ways to go.

And even worse, web-components may change before it gets released.

You just wasted my time!

Why should I care?

And how does this frame how I think about design and engineering the mobile web?

Web-components is trying to solve for the same problem that Card UI is trying to solve. Except, it is solving it from an engineering perspective in addition to design perspective.

Using web-components will only encourage us to better think about the characteristics of Card UI.

responsive

Instead of thinking about how to make a PAGE responsive, we can begin to think about how to make individual COMPONENTS responsive.

In the context of mobile, we want our mobile web experiences to show the minimum number of things to create the best user experience.

If we can represent this:

With this:

Then we can think about using this:

<x-gilt-navigation></x-gilt-navigation>
<x-gilt-hero></x-gilt-hero>
<x-gilt-sale>
	<x-gilt-product></x-gilt-product>
	<x-gilt-product></x-gilt-product>
	<x-gilt-product></x-gilt-product>
</x-gilt-sale>
<x-gilt-footer></x-gilt-footer>
						

To represent this:

Or this:

<x-gmw-navigation></x-gmw-navigation>
<x-gilt-sale>
	<x-gmw-product></x-gmw-product>
	<x-gmw-product></x-gmw-product>
	<x-gmw-product></x-gmw-product>
</x-gilt-sale>
<x-gmw-footer></x-gmw-footer>
						

To represent this:

where each web-component is like an item in an apartment

you design the best individual pieces that you can

so that they are reusable, embeddable, and shareable

with the goal that that your mobile web user experiences start to look like this

Small space, beautiful components.

Garrett's 340 square foot apartment