lean responsive

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

What Is Lean Responsive?

+

It’s Two Buzzwords.

What Is Lean Responsive?

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?

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

Responsive Design:

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

What Is Lean Responsive?

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• No fancy frameworks or libraries

required

What Is Lean Responsive?

jpHTML

How does this happen?

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.

Bread Before Jam

>

Bread Before Jam

>

Your Idea Design & Code

Bread Before Jam

Jam tells you what flavor a sandwich is.

Bread tells you it is a sandwich.

If you start with the jam, all you get is a mess.

Bread Before Jam

An example.

Bread Before Jam

Cat Wars- Fully designed

experience- Takes a long time- Too much noise, you

can’t learn anything

Bread Before Jam

Now you can test the most important thing:The Idea

Bread Before Jam

If people won’t do this...

Bread Before Jam

They’ll never do this.

Bread Before Jam

This = This

Bread Before Jam

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;}}

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

A Pinch of Code

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

Sufficiently Advanced

Know that you know how to do things right, you can kick it up a notch.

Components and Grids: Bootstrap, Foundation

CRUD operations: Angular, Knockout

Light Backend: Deployd, Firebase

Look these up, you’ll be amazed at what they can do.

Sufficiently Advanced

Thank You

Lead UI Developer at The College Board

@jjeffryesjjeffryes@gmail.com