Why are you here?

You're a designer who wants to stay up on latest trends.

You're an engineer who wants to stay up on latest trends.

You're a manager who wants to make sure her designers and engineers stay up-to-date on the latest trends.

There's beer in the back of the room. Pizza, too.

What problem are we going to solve today?

At Gilt, I work on Gilt mobile web and I love great mobile experiences.

Gilt mobile webvs Gilt full web

Card UI

Web Components

Specifically, how do I think about the mobile web compared to the full web?

What is Card UI?

What are Web Components?

How will Card UI and Web Components make mobile web development easier and better?

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 A. M. Stern, 15 CPW [source: StreetEasy]

The mobile experience:

You can't have everything.

14 Convent Ave [source: StreetEasy]

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 embarrassed of your apartment?

www.quora.com

What happens when you furnished your apartment with ugly things?

www.united.com

What does the full Gilt website look like?

What does Gilt Mobile Web look like?

Let's break it down a little more.

Product Listing Page

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 you want to feature.

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

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

It's difficult to find a lot of information about Card UI on the Internet right now. So, this is my assessment of what Card UI is.

These are cards:

But these are also cards:

Twitter

Google Now

Pinterest

Gilt

3 characteristics of card ui:

Embeddable/shareable

Easily Readable Content

Easy to modify and move around

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

How can we better engineer the Card UI pattern?

The Future is Web Components.

W3C's Introduction to Web Components

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

Did I lose you?

Take this card, for example:

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

How?

Web Components

Templates

Decorators

Custom Elements

Shadow DOM

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.

DOM

JS

Live Demo!

Some questions I have about Web Components:

What is the x- in x-gilt-product?

How do I pass values to a custom element?

How can I easily share a custom element?

Does this mark the end of Handlebars and other JS templating languages??

Wait! I couldn't see the demo!

Web Components aren't supported by default anywhere, except...

On Google Chrome Canary

Mozilla created X-Tag, a small JavaScript library that brings Web Components Custom Element capabilities to all modern browsers.

http://x-tags.org/

X-Tags uses a polyfill library called Polymer.

https://github.com/Polymer/polymer

X-Tags example: Panel

http://x-tags.org/

X-Tags example: Map

http://x-tags.org/

http://customelements.io/

But, Web Components may change before Google releases it.

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.

It also means we can start to think about a responsive Card UI design pattern.

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 your mobile web user experiences start to look like this:

Small space, beautiful components.

Garrett's 340 square foot apartment

In conclusion

Furnishing a studio apartment is to mobile web what furnishing a large apartment is to the desktop experience.

Card UI is a design pattern to get you to think quick and simple.

And, Web Components will allow you to easily package "cards" in the future.

Thanks!

• gmazurek@gilt.com
• gregorymazurek.com
• download these slides on Github: GregM
• @gregorymazurek