Build better web and mobile experiences faster by building and testing only what you need on any device.

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

2. What Is Lean Responsive?
+

3. It’s Two Buzzwords.
What Is Lean Responsive?

4. I admit it.
What Is Lean Responsive?

5. It’s also the best way to build
anything on the web.
What Is Lean Responsive?

6. Lean Part 1:
Build only what you need, at the stage of
development when you need it.
What Is Lean Responsive?

7. Lean Part 2:
Gain maximum understanding at each step,
before you build the next step.
What Is Lean Responsive?

8. 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.
ALeanIteration

9. Responsive Design:
Build experiences that adapt to any
screen, even ones that don’t exist yet.
What Is Lean Responsive?

10. You Got Responsive in
my Leanupbutter
What Is Lean Responsive?

11. 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?

12. jpHTML
How does this happen?
jpHTML

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

15. jpHTML stands for:
Just Plain HTML

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

17. Desktop Mobile

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

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

20. Bread Before Jam
>

21. Bread Before Jam
>
Your Idea Design & Code

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

23. Bread Before Jam
An example.

24. Bread Before Jam
Cat Wars
- Fully designed
experience
- Takes a long time
- Too much noise, you
can’t learn anything

25. Bread Before Jam
Now you can
test the most
important
thing:
The Idea

26. Bread Before Jam
If people won’t
do
this...

27. Bread Before Jam
They’ll never
do this.

28. Bread Before Jam
This = This

29. Bread Before Jam
If it takes more than an
hour to build your
prototype, you’re testing
the wrong thing.

30. A Pinch of Code
{ }

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

32. A page margin, base font, and more
readable color:
Html {
font: 10px/12px Arial;
}
Body {
margin: 1rem;
color: #222;
}
A Pinch of Code

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

34. Easy responsive images:
Img {
width: 100%;
height: auto;
}
A Pinch of Code

35. A persistent navigation bar:
Nav {
position: fixed;
padding: 10px;
background: #ccc;
color: #fff;
}
A Pinch of Code

36. Sufficiently Advanced

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

38. Thank You
Lead UI Developer at
The College Board
@jjeffryes
jjeffryes@gmail.com