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