Lean responsive - Expanded

Build and Test Just What You Need, When You Need it, On Any Screen.

Minimum Viable Introduction

I’m Josh Jeffryes, Lead UI Developer at The College Board

Minimum Viable Introduction

I also help startups around the world with UX, Technology, and Lean

Methodology

What Is Lean Responsive?

?

What Is Lean Responsive?

+

It’s Two Buzzwords.

What Is Lean Responsive?

It’s Two Buzzwords.

I admit it.

What Is Lean Responsive?

It’s also the best way to build anything on the web.

What Is Lean Responsive?

Lean Part 1:

Build only what you need, at the stage of development when you need it.

What Is Lean Responsive?

Lean Part 2:

Gain maximum understanding at each step,

before you build the next step.

What Is Lean Responsive?

In Other Words:

Only one assumption should be provably wrong with each step.

What Is Lean Responsive?

What Is Lean Responsive?

What do we need to understand to advance beyond this step?

Build the minimum product that will produce that understanding.

Test product.Iterate

product.

Repeat until optimal solution

understood

Go to next step.

A L

ean

It

era

tion

Lean:

Replaces ego with actually knowing things.

What Is Lean Responsive?

Responsive Design:

Build experiences that adapt to any screen, even ones that don’t exist yet.

What Is Lean Responsive?

What Is Lean Responsive?

From 1” To 20” To 84”

We can’t predict what size screen a user will have...

so we have to design for all of them.

What Is Lean Responsive?

We do this by adapting the layout and design based on screen size.

Things move, shrink, or disappear.

A B CA

BC

B A

C

B

Desktop Tablet Phone

What Is Lean Responsive?

This happens through the magic of media queries

And sometimes JavaScript.

What Is Lean Responsive?

So now what?

You Got Responsive in my Leanupbutter

What Is Lean Responsive?

Responsive• Test anywhere, any device• The same way the final

product will be used

Lean• Build and test fast• Prove your ideas, not your

code or design

What Is Lean Responsive?

Most Importantly...

None of this requires any fancy

frameworks or libraries, and you don’t need a black belt in code ninja-

ing to do it.

jpHTML

How is this possible?

jpHTML

Behold, the Awesome Power of jpHTML

jpHTML

jpHTML is:• Automatically Responsive• Universally Supported• 100% Accessible• Generates Perfect SEO

jpHTML stands for:

Just Plain HTML

<h1>jpHTML</h1><p>Just Plain HTML is fluid, it expands to fill it's horizontal space.</p>

<h2>Minimally Viable Responsiveness</h2> <p>But only for linear layouts.</p> <h2>Brains are Linear</h2> <p>People perceive ideas in order. You should test them that way.</p>

Desktop Mobile

jpHTML

All you need is basic knowledge of HTML.• Headlines, paragraphs, lists• Form elements• Links• Simulate interactivity with links

that go to new pages • It’s even a legit use of

Dreamweaver

jpHTML

Basic HTML is completely accessible and SEO friendly. It forces you to use H tags and paragraphs correctly.

Make this the foundation of your final product. Add CSS and JavaScript, but don’t change the structure.

If your idea works like this, it will work when it’s pretty too.

An Example

Let me give you an example.

An Example

Cat Wars- Pretty- Full of wonderful

candy- Client loves it

An Example

Cat Wars- Pretty- Full of wonderful

candy- Client loves it- Completely useless

for testing

An Example

Cat Wars- Takes a long time- Wastes money- Always wrong

An Example

Cat Wars- This many layer

effects can never be right.

An Example

Now you can test the most important thing:The Idea

An Example

If people won’t do this...

An Example

They’ll never do this.

An Example

This = This

An Example

No CSS was harmed in the making of this test

An Example

If it takes more than an hour to build your prototype, you’re testing the wrong

thing.

A Pinch of Code

{ }

It just takes a few lines of code to make your plain HTML more responsive.

A Pinch of Code

A page margin, base font, and more readable color:

Html {font: 10px/12px Arial;

}

Body {margin: 1rem;color: #222;

}

A Pinch of Code

Scale everything by media queries using rem (root em):

@media screen and (max-width: 959px) {html {font-size: 12px;}}

H1 { font-size: 2rem; }

A Pinch of Code

Desktop Tablet

Headline is 20px Headline is 24px

Easy responsive images:

Img {width: 100%;height: auto;

}

A Pinch of Code

A persistent navigation bar:

Nav {position: fixed;padding: 10px;background: #ccc;color: #fff;

}

A Pinch of Code

The Wild, Wild Test

The Wild, Wild Test

Testing your apps in the wild is only slightly harder.

You just have to use the internet.

The Wild, Wild Test

First, get hosting.

Your Site Here

The Wild, Wild Test

Google Analytics is great for analytics.

One snippet of JavaScript

The Wild, Wild Test

Test forms and collect dataUse Wufoo

The Wild, Wild Test

All the Data You Need for Lean Responsive

Sufficiently Advanced

If you want, you can get really responsive.

Sufficiently Advanced

Twitter Bootstrap – grids and components

Foundation – pretty much the same thing

Mobify.js – this is more for ninja stuff

You can do cool things with data on-screen.

Sufficiently Advanced

Angular – make HTML do JavaScripty stuff

KnockOut – a lightweight MVC framework

Sufficiently Advanced

If you know JavaScript but not backend, you don’t need a backend.

Deployd

FireBase

Backlift

Thank You

Lead UI Developer at The College Board

@jjeffryesjjeffryes@gmail.com